Merge pull request #1182 from didoda/feat/remember-relation-paginatio…

…n-page-size Remember relation pagination page size
bedita · Sep 18, 2024 · 45c142a · 45c142a
2 parents 01e4b84 + 7695fdf
commit 45c142a
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 51 deletions.
diff --git a/resources/js/app/components/filter-box.js → resources/js/app/components/filter-box.vue b/resources/js/app/components/filter-box.js → resources/js/app/components/filter-box.vue
@@ -1,3 +1,4 @@
+<script>
 /**
  * Filter Box View component
  *
@@ -43,6 +44,7 @@ export default {
         },
         filtersByType: {
             type: Object,
+            default: () => ({}),
         },
         initFilter: {
             type: Object,
@@ -61,7 +63,8 @@ export default {
             default: t`Search`
         },
         relationTypes: {
-            type: Object
+            type: Object,
+            default: () => ({})
         },
         showAdvanced: {
             type: Boolean,
@@ -94,22 +97,6 @@ export default {
         };
     },
 
-    created() {
-        this.queryFilter = merge.all([
-            this.getCleanQuery(this.filterList),
-            this.initFilter,
-        ]);
-
-        if (this.filterList.length) {
-            this.availableFilters = this.filterList;
-        } else if (this.rightTypes.length == 1 && this.filtersByType) {
-            this.availableFilters = this.filtersByType[this.rightTypes[0]];
-        } else {
-            this.availableFilters = this.filtersByType?.[this.queryFilter.filter.type] || [];
-        }
-        this.filterByDescendants = !!this.initFilter?.filter?.ancestor;
-    },
-
     computed: {
         paginateSizes() {
             return JSON.parse(this.configPaginateSizes);
@@ -264,6 +251,22 @@ export default {
         },
     },
 
+    created() {
+        this.queryFilter = merge.all([
+            this.getCleanQuery(this.filterList),
+            this.initFilter,
+        ]);
+
+        if (this.filterList.length) {
+            this.availableFilters = this.filterList;
+        } else if (this.rightTypes.length == 1 && this.filtersByType) {
+            this.availableFilters = this.filtersByType[this.rightTypes[0]];
+        } else {
+            this.availableFilters = this.filtersByType?.[this.queryFilter.filter.type] || [];
+        }
+        this.filterByDescendants = !!this.initFilter?.filter?.ancestor;
+    },
+
     methods: {
         /**
          * Build clean query filter object initializing all filters from `availableFilters`.
@@ -455,3 +458,4 @@ export default {
         },
     }
 };
+</script>
diff --git a/...components/relation-view/relation-view.js → ...omponents/relation-view/relation-view.vue b/...components/relation-view/relation-view.js → ...omponents/relation-view/relation-view.vue
@@ -1,3 +1,4 @@
+<script>
 /**
  *  Templates that uses this component (directly or indirectly):
  *  Template/Elements/relations.twig
@@ -24,12 +25,6 @@ import { PanelEvents } from 'app/components/panel-view';
 import { DragdropMixin } from 'app/mixins/dragdrop';
 
 export default {
-    mixins: [
-        PaginatedContentMixin,
-        RelationSchemaMixin,
-        DragdropMixin,
-    ],
-
     components: {
         RelationshipsView: () => import(/* webpackChunkName: "relationships-view" */'app/components/relation-view/relationships-view/relationships-view'),
         RolesListView: () => import(/* webpackChunkName: "roles-list-view" */'app/components/relation-view/roles-list-view'),
@@ -40,6 +35,12 @@ export default {
         ClipboardItem: () => import(/* webpackChunkName: "clipboard-item" */'app/components/clipboard-item/clipboard-item'),
     },
 
+    mixins: [
+        PaginatedContentMixin,
+        RelationSchemaMixin,
+        DragdropMixin,
+    ],
+
     props: {
         relationName: {
             type: String,
@@ -120,6 +121,32 @@ export default {
         },
     },
 
+    watch: {
+        /**
+         * Loading event emit
+         *
+         * @param {String} value The value associated to loading
+         *
+         * @emits Event#loading
+         *
+         * @return {void}
+         */
+        loading(value) {
+            this.$emit('loading', value);
+        },
+
+        objects(newObjects) {
+            this.positions = newObjects.reduce((positions, object) => {
+                positions[object.id] = object.meta?.relation?.position || '';
+                return positions;
+            }, {});
+            this.priorities = newObjects.reduce((priorities, object) => {
+                priorities[object.id] = object.meta?.relation?.priority || '';
+                return priorities;
+            }, {});
+        },
+    },
+
     /**
      * setup correct endpoint for PaginatedContentMixin.getPaginatedObjects()
      *
@@ -135,6 +162,13 @@ export default {
     * @return {void}
     */
     async mounted() {
+        // remember pagination.page_size (use localStorage)
+        const key = `relation-view:${this.relationName}:page_size`;
+        const pageSize = localStorage.getItem(key);
+        if (pageSize) {
+            this.setPageSize(pageSize);
+        }
+
         // set up panel events
         PanelEvents.listen('edit-params:save', this, this.editParamsSave);
         PanelEvents.listen('relations-add:save', this, this.appendRelationsFromPanel);
@@ -187,32 +221,6 @@ export default {
         PanelEvents.stop('panel:closed', null, this.resetPanelRequester);
     },
 
-    watch: {
-        /**
-         * Loading event emit
-         *
-         * @param {String} value The value associated to loading
-         *
-         * @emits Event#loading
-         *
-         * @return {void}
-         */
-        loading(value) {
-            this.$emit('loading', value);
-        },
-
-        objects(newObjects) {
-            this.positions = newObjects.reduce((positions, object) => {
-                positions[object.id] = object.meta?.relation?.position || '';
-                return positions;
-            }, {});
-            this.priorities = newObjects.reduce((priorities, object) => {
-                priorities[object.id] = object.meta?.relation?.priority || '';
-                return priorities;
-            }, {});
-        },
-    },
-
     methods: {
         // Events Listeners
 
@@ -236,6 +244,9 @@ export default {
          * @return {void}
          */
         onUpdatePageSize(pageSize) {
+            // remember pagination.page_size (use localStorage)
+            const key = `relation-view:${this.relationName}:page_size`;
+            localStorage.setItem(key, pageSize);
             this.setPageSize(pageSize);
             this.loadRelatedObjects(this.activeFilter, true);
         },
@@ -931,6 +942,6 @@ export default {
 
             return `${url}${query}`;
         },
-    }
-
+    },
 }
+</script>