[5.x] Ability to customize columns in the Asset Browser

resources/js/components/assets/AssetManager.vue

@@ -39,6 +39,7 @@
             :initial-editing-asset-id="initialEditingAssetId"
             :selected-path="path"
             :selected-assets="selectedAssets"
+            :initial-columns="columns"
             @navigated="navigate"
             @selections-updated="updateSelections"
             @asset-doubleclicked="editAsset"
@@ -58,6 +59,7 @@ export default {
         actions: Array,
         canCreateContainers: Boolean,
         createContainerUrl: String,
+        columns: { type: Array, required: true },
     },
 
     data() {

resources/js/components/assets/Browser/Browser.vue

@@ -31,6 +31,7 @@
                     :sort-column="sortColumn"
                     :sort-direction="sortDirection"
                     @selections-updated="(ids) => $emit('selections-updated', ids)"
+                    @visible-columns-updated="visibleColumns = $event"
                 >
                     <div slot-scope="{ filteredRows: rows }" :class="modeClass">
                         <div class="card overflow-hidden p-0" :class="{ 'select-none' : shifting }">
@@ -58,6 +59,8 @@
                                         </button>
                                     </div>
 
+                                    <data-list-column-picker v-if="mode === 'table'" class="rtl:mr-3 ltr:ml-3" :preferences-key="preferencesKey('columns')" />
+
                                 </div>
 
                                 <breadcrumbs v-if="!restrictFolderNavigation" :path="path" @navigated="selectFolder" />
@@ -106,8 +109,7 @@
                                                 {{ folder.basename }}
                                             </a>
                                         </td>
-                                        <td />
-                                        <td />
+                                        <td v-for="n in (columns.length - 2)" />
 
                                         <th class="actions-column" :colspan="columns.length">
                                             <dropdown-list placement="left-start" v-if="folderActions(folder).length">
@@ -317,15 +319,16 @@ export default {
         initialEditingAssetId: String,
         autoselectUploads: Boolean,
         autofocusSearch: Boolean,
+        initialColumns: {
+            type: Array,
+            default: () => [],
+        },
     },
 
     data() {
         return {
-            columns: [
-                { label: __('File'), field: 'basename', visible: true, sortable: true },
-                { label: __('Size'), field: 'size', value: 'size_formatted', visible: true, sortable: true },
-                { label: __('Last Modified'), field: 'last_modified', value: 'last_modified_relative', visible: true, sortable: true },
-            ],
+            columns: this.initialColumns,
+            visibleColumns: this.initialColumns.filter(column => column.visible),
             containers: [],
             container: {},
             initializing: true,
@@ -388,9 +391,22 @@ export default {
                 order: this.sortDirection,
                 search: this.searchQuery,
                 queryScopes: this.queryScopes,
+                columns: this.visibleColumnParameters,
             }
         },
 
+        visibleColumnParameters: {
+            get() {
+                if (_.isEmpty(this.visibleColumns)) {
+                    return null;
+                }
+                return this.visibleColumns.map(column => column.field).join(',');
+            },
+            set(value) {
+                this.visibleColumns = value.split(',').map(field => this.columns.find(column => column.field === field));
+            },
+        },
+
         hasMaxFiles() {
             return this.maxFiles !== undefined && this.maxFiles !== Infinity;
         },
@@ -417,7 +433,11 @@ export default {
 
         modeClass() {
             return 'mode-' + this.mode;
-        }
+        },
+
+        columnShowing(column) {
+            return this.visibleColumns.find(c => c.field === column);
+        },
 
     },
 
@@ -506,6 +526,7 @@ export default {
                 const data = response.data;
                 this.assets = data.data.assets;
                 this.meta = data.meta;
+                this.columns = data.meta.columns;
 
                 if (this.searchQuery) {
                     this.folder = null;

resources/views/assets/browse.blade.php

@@ -12,6 +12,7 @@
         initial-editing-asset-id="{{ $editing ?? null }}"
         :can-create-containers="{{ Statamic\Support\Str::bool($user->can('create', \Statamic\Contracts\Assets\AssetContainer::class)) }}"
         create-container-url="{{ cp_route('asset-containers.create') }}"
+        :columns="{{ $columns->toJson() }}"
     ></asset-manager>
 
     @include('statamic::partials.docs-callout', [

src/Http/Controllers/CP/Assets/BrowserController.php

@@ -5,6 +5,7 @@
 use Illuminate\Http\Request;
 use Illuminate\Pagination\Paginator;
 use Statamic\Contracts\Assets\AssetContainer as AssetContainerContract;
+use Statamic\CP\Column;
 use Statamic\Exceptions\AuthorizationException;
 use Statamic\Facades\Asset;
 use Statamic\Facades\Scope;
@@ -13,11 +14,14 @@
 use Statamic\Http\Resources\CP\Assets\Folder;
 use Statamic\Http\Resources\CP\Assets\FolderAsset;
 use Statamic\Http\Resources\CP\Assets\SearchedAssetsCollection;
+use Statamic\Http\Resources\CP\Concerns\HasRequestedColumns;
 use Statamic\Support\Arr;
 
 class BrowserController extends CpController
 {
-    use RedirectsToFirstAssetContainer;
+    use HasRequestedColumns, RedirectsToFirstAssetContainer;
+
+    private $columns;
 
     public function index()
     {
@@ -34,6 +38,8 @@ public function show($container, $path = '/')
     {
         $this->authorize('view', $container);
 
+        $this->setColumns($container);
+
         return view('statamic::assets.browse', [
             'container' => [
                 'id' => $container->id(),
@@ -47,6 +53,7 @@ public function show($container, $path = '/')
                 'sort_direction' => $container->sortDirection(),
             ],
             'folder' => $path,
+            'columns' => $this->columns,
         ]);
     }
 
@@ -108,9 +115,18 @@ public function folder(Request $request, $container, $path = '/')
                 ->get();
         }
 
+        $this->setColumns($container);
+        $columns = $this->visibleColumns();
+
         return [
             'data' => [
-                'assets' => FolderAsset::collection($assets ?? collect())->resolve(),
+                'assets' => collect($assets ?? [])
+                    ->map(fn ($asset) => (new FolderAsset($asset))
+                        ->blueprint($container->blueprint())
+                        ->columns($columns)
+                        ->resolve()
+                    )
+                    ->all(),
                 'folder' => array_merge((new Folder($folder))->resolve(), [
                     'folders' => $folders->values(),
                 ]),
@@ -127,6 +143,7 @@ public function folder(Request $request, $container, $path = '/')
                 'per_page' => $perPage,
                 'to' => $totalItems > 0 ? $page * $perPage : null,
                 'total' => $totalItems,
+                'columns' => $columns,
             ],
         ];
     }
@@ -155,7 +172,9 @@ public function search(Request $request, $container, $path = null)
             $assets->setCollection($assets->getCollection()->map->getSearchable());
         }
 
-        return new SearchedAssetsCollection($assets);
+        return (new SearchedAssetsCollection($assets))
+            ->blueprint($container->blueprint())
+            ->columnPreferenceKey("assets.{$container->handle()}.columns");
     }
 
     protected function applyQueryScopes($query, $params)
@@ -165,4 +184,40 @@ protected function applyQueryScopes($query, $params)
             ->filter()
             ->each(fn ($scope) => $scope->apply($query, $params));
     }
+
+    // Duplicated in the SearchedAssetsCollection resource.
+    public function setColumns($container)
+    {
+        $blueprint = $container->blueprint();
+
+        $columns = $blueprint->columns();
+
+        $basename = Column::make('basename')
+            ->label(__('File'))
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(true);
+
+        $size = Column::make('size')
+            ->label(__('Size'))
+            ->value('size_formatted')
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(true);
+
+        $lastModified = Column::make('last_modified')
+            ->label(__('Last Modified'))
+            ->value('last_modified_relative')
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(true);
+
+        $columns->put('basename', $basename);
+        $columns->put('size', $size);
+        $columns->put('last_modified', $lastModified);
+
+        $columns->setPreferred("assets.{$container->handle()}.columns");
+
+        $this->columns = $columns->rejectUnlisted()->values();
+    }
 }

src/Http/Resources/CP/Assets/FolderAsset.php

@@ -8,6 +8,23 @@
 
 class FolderAsset extends JsonResource
 {
+    protected $blueprint;
+    protected $columns;
+
+    public function blueprint($blueprint)
+    {
+        $this->blueprint = $blueprint;
+
+        return $this;
+    }
+
+    public function columns($columns)
+    {
+        $this->columns = $columns;
+
+        return $this;
+    }
+
     public function toArray($request)
     {
         return [
@@ -27,10 +44,33 @@ public function toArray($request)
                 ];
             }),
 
+            $this->merge($this->values()),
+
             'actions' => Action::for($this->resource, [
                 'container' => $this->container()->handle(),
                 'folder' => $this->folder(),
             ]),
         ];
     }
+
+    protected function values($extra = [])
+    {
+        return $this->columns->mapWithKeys(function ($column) use ($extra) {
+            $key = $column->field;
+            $field = $this->blueprint->field($key);
+
+            $value = $extra[$key] ?? $this->resource->get($key) ?? $field?->defaultValue();
+
+            if (! $field) {
+                return [$key => $value];
+            }
+
+            $value = $field->setValue($value)
+                ->setParent($this->resource)
+                ->preProcessIndex()
+                ->value();
+
+            return [$key => $value];
+        });
+    }
 }

src/Http/Resources/CP/Assets/SearchedAssetsCollection.php

@@ -3,15 +3,87 @@
 namespace Statamic\Http\Resources\CP\Assets;
 
 use Illuminate\Http\Resources\Json\ResourceCollection;
+use Statamic\CP\Column;
+use Statamic\Http\Resources\CP\Concerns\HasRequestedColumns;
 
 class SearchedAssetsCollection extends ResourceCollection
 {
+    use HasRequestedColumns;
+
     public $collects = FolderAsset::class;
+    protected $blueprint;
+    protected $columns;
+    protected $columnPreferenceKey;
+
+    public function blueprint($blueprint)
+    {
+        $this->blueprint = $blueprint;
+
+        return $this;
+    }
+
+    public function columnPreferenceKey($key)
+    {
+        $this->columnPreferenceKey = $key;
+
+        return $this;
+    }
+
+    // Duplicate of the code in BrowserController
+    public function setColumns()
+    {
+        $columns = $this->blueprint->columns();
+
+        $basename = Column::make('basename')
+            ->label(__('File'))
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(true);
+
+        $size = Column::make('size')
+            ->label(__('Size'))
+            ->value('size_formatted')
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(true);
+
+        $lastModified = Column::make('last_modified')
+            ->label(__('Last Modified'))
+            ->value('last_modified_relative')
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(true);
+
+        $columns->put('basename', $basename);
+        $columns->put('size', $size);
+        $columns->put('last_modified', $lastModified);
+
+        if ($key = $this->columnPreferenceKey) {
+            $columns->setPreferred($key);
+        }
+
+        $this->columns = $columns->rejectUnlisted()->values();
+    }
 
     public function toArray($request)
+    {
+        $this->setColumns();
+
+        return [
+            'assets' => $this->collection->each(function ($asset) {
+                $asset
+                    ->blueprint($this->blueprint)
+                    ->columns($this->columns);
+            }),
+        ];
+    }
+
+    public function with($request)
     {
         return [
-            'assets' => $this->collection,
+            'meta' => [
+                'columns' => $this->visibleColumns(),
+            ],
         ];
     }
 }