Moves loading items responsability to eventFilterBus.

src/admin/components/search/pagination.vue

@@ -58,7 +58,8 @@ export default {
     },
     watch: {
         page( value ){
-            this.page = ( value > 0 ) ? value : 1;
+            if (value < 1)
+                eventFilterBus.setPage(1);
         }
     },
     methods: {
@@ -74,14 +75,13 @@ export default {
             }
             
             let prevValue = this.itemsPerPage;
-            this.itemsPerPage = value;
             eventFilterBus.setItemsPerPage(value);
             this.$userPrefs.set('items_per_page', value, prevValue);
         },
         onPageChange(page) {
             if(page == 0)
                 return;
-            eventFilterBus.setPage(this.page);
+            eventFilterBus.setPage(page);
         },
         getLastItemNumber() {
             let last = (Number(this.itemsPerPage*(this.page - 1)) + Number(this.itemsPerPage));
@@ -95,20 +95,6 @@ export default {
             return ( this.itemsPerPage * ( this.page - 1 ) + 1)
         },
     },
-    created () {
-        this.$userPrefs.get('items_per_page')
-        .then((value) => {
-            this.itemsPerPage = value;
-            eventFilterBus.setPage(this.page);
-            eventFilterBus.setItemsPerPage(this.itemsPerPage);
-        })
-        .catch(() => {
-            this.$userPrefs.set('items_per_page', 12, null);
-            this.itemsPerPage = 12;
-            eventFilterBus.setPage(this.page);
-            eventFilterBus.setItemsPerPage(this.itemsPerPage);
-        });
-    }
 }
 </script>
 

src/admin/pages/lists/items-page.vue

@@ -58,6 +58,7 @@
 import ItemsList from '../../components/lists/items-list.vue';
 import FiltersItemsList from '../../components/search/filters-items-list.vue';
 import Pagination from '../../components/search/pagination.vue'
+import { eventFilterBus } from '../../../js/event-bus-filters'
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
@@ -86,9 +87,6 @@ export default {
         ...mapActions('fields', [
             'fetchFields'
         ]),
-        ...mapActions('search', [
-            'search_by_collection'
-        ]),
         onChangeTableFields(field) {
             // let prevValue = this.prefTableFields;
             // let index = this.prefTableFields.findIndex(alteredField => alteredField.slug === field.slug);
@@ -103,23 +101,6 @@ export default {
             //     this.$console.log(oldField.slug, oldField.visible);
 
             // this.$userPrefs.set('table_columns_' + this.collectionId, this.prefTableFields, prevValue);
-        },
-        loadItems() {
-            this.isLoading = true;            
-
-            if (this.$route.params && this.$route.params.collectionId) {
-                this.search_by_collection(this.$route.params.collectionId).then(() => {
-                    this.isLoading = false;
-                })
-                .catch(() => {
-                    this.isLoading = false;
-                });
-            }
-        }
-    },
-    watch: {
-        '$route.query'() {
-            this.loadItems();
         }
     },
     computed: {
@@ -132,8 +113,8 @@ export default {
         this.isRepositoryLevel  = (this.collectionId == undefined);      
     },
     mounted(){
-
-        this.loadItems();
+        eventFilterBus.updateStoreFromURL();
+        eventFilterBus.loadItems();
 
         this.fetchFields({ collectionId: this.collectionId, isRepositoryLevel: false, isContextEdit: false }).then((res) => {
             let rawFields = res;

src/classes/filter-types/tainacan-filters-list.vue

@@ -57,7 +57,6 @@
                 'getPostQuery'
             ]),
             listen( event ){
-                this.setPage(1);
                 eventFilterBus.$emit( 'input', ( event.field_id ) ?  event :  event.detail[0] );
             },
             setFilterTypeMessage( message ){

src/js/event-bus-filters.js

@@ -12,9 +12,9 @@ export const eventFilterBus = new Vue({
     },
     created(){
         this.$on('input', data => {
+            store.dispatch('search/setPage', 1);
             this.add_metaquery(data) 
-            router.push({ query: {} });
-            router.push({ query: store.getters['search/getPostQuery'] });
+            this.updateURLQueries();
         });
     },
     watch: {
@@ -26,6 +26,7 @@ export const eventFilterBus = new Vue({
 
             store.dispatch('search/set_postquery', this.$route.query);
             //console.log(this.$route.query);
+            this.loadItems();
         }
     },
     methods: {
@@ -38,6 +39,43 @@ export const eventFilterBus = new Vue({
             let error = this.errors.find( errorItem => errorItem.field_id === filter_id );
             return ( error ) ? error.errors : false
         },
+        listener(){
+            const components = this.getAllComponents();
+            for (let eventElement of components){
+                eventElement.addEventListener('input', (event) => {
+                    if( event.detail ) {
+                        this.add_metaquery( event.detail[0] );
+                    }
+                });
+            }
+        },
+        setPage(page) {
+            store.dispatch('search/setPage', page);
+            this.updateURLQueries();
+        },
+        setItemsPerPage(itemsPerPage) {
+            store.dispatch('search/setItemsPerPage', itemsPerPage);
+            this.updateURLQueries();
+        },
+        updateURLQueries() {
+            router.push({ query: {} });
+            router.push({ query: store.getters['search/getPostQuery'] });
+        },
+        updateStoreFromURL() {
+            store.dispatch('search/set_postquery', this.$route.query);
+        },
+        loadItems() {
+            //this.isLoading = true;            
+
+            if (this.$route.params && this.$route.params.collectionId) {
+                store.dispatch('collection/fetchItems', this.$route.params.collectionId).then(() => {
+                    //this.isLoading = false;
+                })
+                .catch(() => {
+                    //this.isLoading = false;
+                });
+            }
+        },
 
          /* Dev interfaces methods */
 
@@ -58,25 +96,5 @@ export const eventFilterBus = new Vue({
             }
             return components;
         },
-        listener(){
-            const components = this.getAllComponents();
-            for (let eventElement of components){
-                eventElement.addEventListener('input', (event) => {
-                    if( event.detail ) {
-                        this.add_metaquery( event.detail[0] );
-                    }
-                });
-            }
-        },
-        setPage(page) {
-            store.dispatch('search/setPage', page);
-            router.push({ query: {} });
-            router.push({ query: store.getters['search/getPostQuery'] });
-        },
-        setItemsPerPage(itemsPerPage) {
-            store.dispatch('search/setItemsPerPage', itemsPerPage);
-            router.push({ query: {} });
-            router.push({ query: store.getters['search/getPostQuery'] });
-        }
     }
 });

src/js/store/modules/collection/actions.js

@@ -1,8 +1,10 @@
 import axios from '../../../axios/axios';
+import qs from 'qs';
 
-export const fetchItems = ({ commit, dispatch }, { collectionId, page, itemsPerPage }) => {
+export const fetchItems = ({ rootGetters, dispatch, commit }, collectionId) => {
     return new Promise ((resolve, reject) => {
-        axios.tainacan.get('/collection/'+collectionId+'/items?paged='+page+'&perpage='+itemsPerPage)
+        let postQueries = rootGetters['search/getPostQuery'];
+        axios.tainacan.get('/collection/'+collectionId+'/items?' + qs.stringify(postQueries) )
         .then(res => {
             let items = res.data;
             commit('setItems', items );