From 6be9a7681f637f5622a9dce3dffde0f795e9afa4 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Thu, 5 Apr 2018 11:27:02 -0300 Subject: [PATCH] Moves loading items responsability to eventFilterBus. --- src/admin/components/search/pagination.vue | 20 +----- src/admin/pages/lists/items-page.vue | 27 ++------ .../filter-types/tainacan-filters-list.vue | 1 - src/js/event-bus-filters.js | 66 ++++++++++++------- src/js/store/modules/collection/actions.js | 8 ++- src/js/store/modules/search/actions.js | 2 +- 6 files changed, 55 insertions(+), 69 deletions(-) diff --git a/src/admin/components/search/pagination.vue b/src/admin/components/search/pagination.vue index bfa4fb74a..5011169ee 100644 --- a/src/admin/components/search/pagination.vue +++ b/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); - }); - } } diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue index 1abc14f67..6ac8291c0 100644 --- a/src/admin/pages/lists/items-page.vue +++ b/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: { @@ -129,11 +110,11 @@ export default { }, created() { this.collectionId = this.$route.params.collectionId; - this.isRepositoryLevel = (this.collectionId == undefined); + 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; diff --git a/src/classes/filter-types/tainacan-filters-list.vue b/src/classes/filter-types/tainacan-filters-list.vue index b9ad52ef1..6e9cdcb36 100644 --- a/src/classes/filter-types/tainacan-filters-list.vue +++ b/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 ){ diff --git a/src/js/event-bus-filters.js b/src/js/event-bus-filters.js index edf11ae28..53d771649 100644 --- a/src/js/event-bus-filters.js +++ b/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: { @@ -22,10 +22,11 @@ export const eventFilterBus = new Vue({ if (this.$route.query.perpage == undefined) this.$route.query.perpage = 12; if (this.$route.query.paged == undefined) - this.$route.query.paged = 1; + this.$route.query.paged = 1; store.dispatch('search/set_postquery', this.$route.query); //console.log(this.$route.query); + this.loadItems(); } }, methods: { @@ -38,8 +39,45 @@ 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; - /* Dev interfaces methods */ + 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 */ registerComponent( name ){ if (this.componentsTag.indexOf(name) < 0) { @@ -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'] }); - } } }); \ No newline at end of file diff --git a/src/js/store/modules/collection/actions.js b/src/js/store/modules/collection/actions.js index 2ec33a53b..f84daf633 100644 --- a/src/js/store/modules/collection/actions.js +++ b/src/js/store/modules/collection/actions.js @@ -1,11 +1,13 @@ 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); + commit('setItems', items ); dispatch('search/setTotalItems', res.headers['x-wp-total'], { root: true } ); resolve({'items': items, 'total': res.headers['x-wp-total'] }); }) diff --git a/src/js/store/modules/search/actions.js b/src/js/store/modules/search/actions.js index 573ccaef2..7b34b4edb 100644 --- a/src/js/store/modules/search/actions.js +++ b/src/js/store/modules/search/actions.js @@ -43,7 +43,7 @@ export const setTotalItems = ({ commit }, total ) => { commit('setTotalItems', total); }; -export const setPage = ({ commit }, page ) => { +export const setPage = ({ commit }, page ) => { commit('setPostQueryAttribute', { attr: 'paged', value: page } ); };