Asset browser pagination size changer (#3957)

statamic · Jul 6, 2021 · cf4a302 · cf4a302
1 parent 375a356
commit cf4a302
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/resources/js/components/assets/AssetManager.vue b/resources/js/components/assets/AssetManager.vue
@@ -35,6 +35,7 @@
         <asset-browser
             ref="browser"
             :initial-container="container"
+            :initial-per-page="$config.get('paginationSize')"
             :initial-editing-asset-id="initialEditingAssetId"
             :selected-path="path"
             :selected-assets="selectedAssets"

diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
@@ -214,7 +214,9 @@
                         <data-list-pagination
                             class="mt-3"
                             :resource-meta="meta"
+                            :per-page="perPage"
                             @page-selected="page = $event"
+                            @per-page-changed="changePerPage"
                         />
 
                     </div>
@@ -248,11 +250,18 @@ import AssetEditor from '../Editor/Editor.vue';
 import Breadcrumbs from './Breadcrumbs.vue';
 import FolderCreator from '../Folder/Create.vue';
 import FolderEditor from '../Folder/Edit.vue';
+import HasPagination from '../../data-list/HasPagination';
+import HasPreferences from '../../data-list/HasPreferences';
 import Uploader from '../Uploader.vue';
 import Uploads from '../Uploads.vue';
 
 export default {
 
+    mixins: [
+        HasPagination,
+        HasPreferences,
+    ],
+
     components: {
         AssetThumbnail,
         AssetEditor,
@@ -297,7 +306,7 @@ export default {
             creatingFolder: false,
             uploads: [],
             page: 1,
-            perPage: 30, // TODO: Should come from the controller, or a config.
+            preferencesPrefix: null,
             meta: {},
             sortColumn: 'basename',
             sortDirection: 'asc',
@@ -400,7 +409,10 @@ export default {
             this.container = this.initialContainer;
         },
 
-        container() {
+        container(container) {
+            this.preferencesPrefix = `assets.${container.id}`;
+            this.mode = this.getPreference('mode') || 'table';
+            this.setInitialPerPage();
             this.loadAssets();
         },
 
@@ -445,7 +457,6 @@ export default {
             this.$axios.get(cp_url('asset-containers')).then(response => {
                 this.containers = _.chain(response.data).indexBy('id').value();
                 this.container = this.containers[this.selectedContainer];
-                this.mode = this.$preferences.get(`assets.${this.container.id}.mode`, this.mode);
             });
         },
 
@@ -498,7 +509,7 @@ export default {
 
         setMode(mode) {
             this.mode = mode;
-            this.$preferences.set(`assets.${this.container.id}.mode`, mode);
+            this.setPreference('mode', mode == 'table' ? null : mode);
         },
 
         edit(id) {

diff --git a/resources/js/components/assets/Selector.vue b/resources/js/components/assets/Selector.vue
@@ -5,6 +5,7 @@
             <div class="flex-1 overflow-scroll">
                 <asset-browser
                     :initial-container="container"
+                    :initial-per-page="$config.get('paginationSize')"
                     :selected-path="folder"
                     :selected-assets="browserSelections"
                     :restrict-container-navigation="restrictContainerNavigation"

diff --git a/resources/js/components/data-list/Pagination.vue b/resources/js/components/data-list/Pagination.vue
@@ -131,7 +131,7 @@ export default {
 
         perPageOptions() {
             let defaultPaginationSize = Statamic.$config.get('paginationSize');
-            let defaultOptions = [10, 25, 50, 100].filter(size => size !== defaultPaginationSize);
+            let defaultOptions = [10, 25, 50, 100, 500].filter(size => size !== defaultPaginationSize);
             let options = this.normalizeInputOptions(defaultOptions);
 
             options.push({

diff --git a/src/Http/Controllers/CP/Assets/BrowserController.php b/src/Http/Controllers/CP/Assets/BrowserController.php
@@ -77,7 +77,7 @@ public function folder(Request $request, $container, $path = '/')
             $query->orderBy($request->sort, $request->order ?? 'asc');
         }
 
-        $assets = $query->paginate(30);
+        $assets = $query->paginate(request('perPage'));
 
         return (new FolderAssetsCollection($assets))->folder($folder);
     }
@@ -90,7 +90,7 @@ public function search(Request $request, $container)
             ? $container->searchIndex()->ensureExists()->search($request->search)
             : $container->queryAssets()->where('path', 'like', '%'.$request->search.'%');
 
-        $assets = $query->paginate(30);
+        $assets = $query->paginate(request('perPage'));
 
         return new SearchedAssetsCollection($assets);
     }