Lazy load listing columns

resources/js/components/Listing.vue

@@ -16,6 +16,10 @@ export default {
     props: {
         initialSortColumn: String,
         initialSortDirection: String,
+        initialColumns: {
+            type: Array,
+            default: () => [],
+        },
         filters: Array,
     },
 
@@ -25,7 +29,8 @@ export default {
             initializing: true,
             loading: true,
             items: [],
-            columns: [],
+            columns: this.initialColumns,
+            visibleColumns: this.initialColumns.filter(column => column.visible),
             sortColumn: this.initialSortColumn,
             sortDirection: this.initialSortDirection,
             meta: null,
@@ -42,6 +47,7 @@ export default {
                 perPage: this.perPage,
                 search: this.searchQuery,
                 filters: this.activeFilterParameters,
+                columns: this.visibleColumns.map(column => column.field).join(','),
             }, this.additionalParameters);
         },
 

resources/js/components/collections/View.vue

@@ -89,6 +89,7 @@
             :collection="handle"
             :initial-sort-column="sortColumn"
             :initial-sort-direction="sortDirection"
+            :initial-columns="columns"
             :filters="filters"
             :run-action-url="runActionUrl"
             :bulk-actions-url="bulkActionsUrl"
@@ -183,6 +184,7 @@ export default {
         structured: { type: Boolean, default: false },
         sortColumn: { type: String, required: true },
         sortDirection: { type: String, required: true },
+        columns: { type: Array, required: true },
         filters: { type: Array, required: true },
         runActionUrl: { type: String, required: true },
         bulkActionsUrl: { type: String, required: true },

resources/js/components/data-list/DataList.vue

@@ -95,7 +95,11 @@ export default {
 
         sortColumn(column) {
             this.sharedState.sortColumn = column;
-        }
+        },
+
+        visibleColumns(columns) {
+            this.$emit('visible-columns-updated', columns);
+        },
 
     },
 

resources/js/components/entries/Listing.vue

@@ -12,6 +12,7 @@
             :sort="false"
             :sort-column="sortColumn"
             :sort-direction="sortDirection"
+            @visible-columns-updated="visibleColumns = $event"
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card p-0 relative">

resources/js/components/forms/SubmissionListing.vue

@@ -14,6 +14,7 @@
             :sort="false"
             :sort-column="sortColumn"
             :sort-direction="sortDirection"
+            @visible-columns-updated="visibleColumns = $event"
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card p-0 relative">

resources/js/components/terms/Listing.vue

@@ -12,6 +12,7 @@
             :sort="false"
             :sort-column="sortColumn"
             :sort-direction="sortDirection"
+            @visible-columns-updated="visibleColumns = $event"
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card p-0 relative">

resources/views/collections/show.blade.php

@@ -13,6 +13,7 @@
         :blueprints='@json($blueprints)'
         sort-column="{{ $collection->sortField() }}"
         sort-direction="{{ $collection->sortDirection() }}"
+        :columns="{{ $columns->toJson() }}"
         :filters="{{ $filters->toJson() }}"
         run-action-url="{{ cp_route('collections.entries.actions.run', $collection->handle()) }}"
         bulk-actions-url="{{ cp_route('collections.entries.actions.bulk', $collection->handle()) }}"

resources/views/forms/show.blade.php

@@ -54,6 +54,7 @@
         bulk-actions-url="{{ cp_route('forms.submissions.actions.bulk', $form->handle()) }}"
         initial-sort-column="datestamp"
         initial-sort-direction="desc"
+        :initial-columns="{{ $columns->toJson() }}"
         v-cloak
     >
         <div slot="no-results" class="text-center border-2 border-dashed rounded-lg">

resources/views/taxonomies/show.blade.php

@@ -46,6 +46,7 @@
             taxonomy="{{ $taxonomy->handle() }}"
             initial-sort-column="{{ $taxonomy->sortField() }}"
             initial-sort-direction="{{ $taxonomy->sortDirection() }}"
+            :initial-columns="{{ $columns->toJson() }}"
             :filters="{{ $filters->toJson() }}"
             run-action-url="{{ cp_route('taxonomies.terms.actions.run', $taxonomy->handle()) }}"
             bulk-actions-url="{{ cp_route('taxonomies.terms.actions.bulk', $taxonomy->handle()) }}"

src/Http/Controllers/CP/Collections/CollectionsController.php

@@ -60,10 +60,18 @@ public function show(Request $request, $collection)
 
         $site = $request->site ? Site::get($request->site) : Site::selected();
 
+        $columns = $collection
+            ->entryBlueprint()
+            ->columns()
+            ->setPreferred("collections.{$collection->handle()}.columns")
+            ->rejectUnlisted()
+            ->values();
+
         $viewData = [
             'collection' => $collection,
             'blueprints' => $blueprints,
             'site' => $site->handle(),
+            'columns' => $columns,
             'filters' => Scope::filters('entries', [
                 'collection' => $collection->handle(),
                 'blueprints' => $blueprints->pluck('handle')->all(),

src/Http/Controllers/CP/Forms/FormsController.php

@@ -41,7 +41,14 @@ public function show($form)
     {
         $this->authorize('view', $form);
 
-        return view('statamic::forms.show', compact('form'));
+        $columns = $form
+            ->blueprint()
+            ->columns()
+            ->setPreferred("forms.{$form->handle()}.columns")
+            ->rejectUnlisted()
+            ->values();
+
+        return view('statamic::forms.show', compact('form', 'columns'));
     }
 
     /**

src/Http/Controllers/CP/Taxonomies/TaxonomiesController.php

@@ -54,11 +54,19 @@ public function show($taxonomy)
             ];
         });
 
+        $columns = $taxonomy
+            ->termBlueprint()
+            ->columns()
+            ->setPreferred("taxonomies.{$taxonomy->handle()}.columns")
+            ->rejectUnlisted()
+            ->values();
+
         $viewData = [
             'taxonomy' => $taxonomy,
             'hasTerms' => true, // todo $taxonomy->queryTerms()->count(),
             'blueprints' => $blueprints,
             'site' => Site::selected()->handle(),
+            'columns' => $columns,
             'filters' => Scope::filters('terms', [
                 'taxonomy' => $taxonomy->handle(),
                 'blueprints' => $blueprints->pluck('handle')->all(),

src/Http/Resources/CP/Concerns/HasRequestedColumns.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace Statamic\Http\Resources\CP\Concerns;
+
+trait HasRequestedColumns
+{
+    protected function requestedColumns()
+    {
+        if (! $requested = $this->requestedColumnKeys()) {
+            return $this->columns;
+        }
+
+        return $this->columns->keyBy('field')->only($requested)->values();
+    }
+
+    protected function visibleColumns()
+    {
+        if (! $requested = $this->requestedColumnKeys()) {
+            return $this->columns;
+        }
+
+        $columns = $this->columns->keyBy('field')->map->visible(false);
+
+        return collect($requested)
+            ->map(function ($field) use ($columns) {
+                return $columns->get($field)->visible(true);
+            })
+            ->merge($columns->except($requested))
+            ->values();
+    }
+
+    protected function requestedColumnKeys()
+    {
+        $columns = request('columns');
+
+        if (! $columns) {
+            return [];
+        }
+
+        return explode(',', $columns);
+    }
+}

src/Http/Resources/CP/Entries/Entries.php

@@ -3,9 +3,12 @@
 namespace Statamic\Http\Resources\CP\Entries;
 
 use Illuminate\Http\Resources\Json\ResourceCollection;
+use Statamic\Http\Resources\CP\Concerns\HasRequestedColumns;
 
 class Entries extends ResourceCollection
 {
+    use HasRequestedColumns;
+
     public $collects = ListedEntry::class;
     protected $blueprint;
     protected $columnPreferenceKey;
@@ -43,11 +46,11 @@ public function toArray($request)
             'data' => $this->collection->each(function ($entry) {
                 $entry
                     ->blueprint($this->blueprint)
-                    ->columns($this->columns);
+                    ->columns($this->requestedColumns());
             }),
 
             'meta' => [
-                'columns' => $this->columns,
+                'columns' => $this->visibleColumns(),
             ],
         ];
     }

src/Http/Resources/CP/Submissions/Submissions.php

@@ -4,9 +4,12 @@
 
 use Illuminate\Http\Resources\Json\ResourceCollection;
 use Statamic\CP\Column;
+use Statamic\Http\Resources\CP\Concerns\HasRequestedColumns;
 
 class Submissions extends ResourceCollection
 {
+    use HasRequestedColumns;
+
     public $collects = ListedSubmission::class;
     protected $blueprint;
     protected $columns;
@@ -46,11 +49,11 @@ public function toArray($request)
             'data' => $this->collection->each(function ($collection) {
                 $collection
                     ->blueprint($this->blueprint)
-                    ->columns($this->columns);
+                    ->columns($this->requestedColumns());
             }),
 
             'meta' => [
-                'columns' => $this->columns,
+                'columns' => $this->visibleColumns(),
             ],
         ];
     }

src/Http/Resources/CP/Taxonomies/Terms.php

@@ -3,9 +3,12 @@
 namespace Statamic\Http\Resources\CP\Taxonomies;
 
 use Illuminate\Http\Resources\Json\ResourceCollection;
+use Statamic\Http\Resources\CP\Concerns\HasRequestedColumns;
 
 class Terms extends ResourceCollection
 {
+    use HasRequestedColumns;
+
     public $collects = ListedTerm::class;
     protected $blueprint;
     protected $columnPreferenceKey;
@@ -43,11 +46,11 @@ public function toArray($request)
             'data' => $this->collection->each(function ($term) {
                 $term
                     ->blueprint($this->blueprint)
-                    ->columns($this->columns);
+                    ->columns($this->requestedColumns());
             }),
 
             'meta' => [
-                'columns' => $this->columns,
+                'columns' => $this->visibleColumns(),
             ],
         ];
     }