Moves loading items responsability to eventFilterBus.
This commit is contained in:
parent
3f0b5908d1
commit
6be9a7681f
|
@ -58,7 +58,8 @@ export default {
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
page( value ){
|
page( value ){
|
||||||
this.page = ( value > 0 ) ? value : 1;
|
if (value < 1)
|
||||||
|
eventFilterBus.setPage(1);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -74,14 +75,13 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
let prevValue = this.itemsPerPage;
|
let prevValue = this.itemsPerPage;
|
||||||
this.itemsPerPage = value;
|
|
||||||
eventFilterBus.setItemsPerPage(value);
|
eventFilterBus.setItemsPerPage(value);
|
||||||
this.$userPrefs.set('items_per_page', value, prevValue);
|
this.$userPrefs.set('items_per_page', value, prevValue);
|
||||||
},
|
},
|
||||||
onPageChange(page) {
|
onPageChange(page) {
|
||||||
if(page == 0)
|
if(page == 0)
|
||||||
return;
|
return;
|
||||||
eventFilterBus.setPage(this.page);
|
eventFilterBus.setPage(page);
|
||||||
},
|
},
|
||||||
getLastItemNumber() {
|
getLastItemNumber() {
|
||||||
let last = (Number(this.itemsPerPage*(this.page - 1)) + Number(this.itemsPerPage));
|
let last = (Number(this.itemsPerPage*(this.page - 1)) + Number(this.itemsPerPage));
|
||||||
|
@ -95,20 +95,6 @@ export default {
|
||||||
return ( this.itemsPerPage * ( this.page - 1 ) + 1)
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -58,6 +58,7 @@
|
||||||
import ItemsList from '../../components/lists/items-list.vue';
|
import ItemsList from '../../components/lists/items-list.vue';
|
||||||
import FiltersItemsList from '../../components/search/filters-items-list.vue';
|
import FiltersItemsList from '../../components/search/filters-items-list.vue';
|
||||||
import Pagination from '../../components/search/pagination.vue'
|
import Pagination from '../../components/search/pagination.vue'
|
||||||
|
import { eventFilterBus } from '../../../js/event-bus-filters'
|
||||||
import { mapActions, mapGetters } from 'vuex';
|
import { mapActions, mapGetters } from 'vuex';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -86,9 +87,6 @@ export default {
|
||||||
...mapActions('fields', [
|
...mapActions('fields', [
|
||||||
'fetchFields'
|
'fetchFields'
|
||||||
]),
|
]),
|
||||||
...mapActions('search', [
|
|
||||||
'search_by_collection'
|
|
||||||
]),
|
|
||||||
onChangeTableFields(field) {
|
onChangeTableFields(field) {
|
||||||
// let prevValue = this.prefTableFields;
|
// let prevValue = this.prefTableFields;
|
||||||
// let index = this.prefTableFields.findIndex(alteredField => alteredField.slug === field.slug);
|
// let index = this.prefTableFields.findIndex(alteredField => alteredField.slug === field.slug);
|
||||||
|
@ -103,23 +101,6 @@ export default {
|
||||||
// this.$console.log(oldField.slug, oldField.visible);
|
// this.$console.log(oldField.slug, oldField.visible);
|
||||||
|
|
||||||
// this.$userPrefs.set('table_columns_' + this.collectionId, this.prefTableFields, prevValue);
|
// 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: {
|
computed: {
|
||||||
|
@ -132,8 +113,8 @@ export default {
|
||||||
this.isRepositoryLevel = (this.collectionId == undefined);
|
this.isRepositoryLevel = (this.collectionId == undefined);
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
|
eventFilterBus.updateStoreFromURL();
|
||||||
this.loadItems();
|
eventFilterBus.loadItems();
|
||||||
|
|
||||||
this.fetchFields({ collectionId: this.collectionId, isRepositoryLevel: false, isContextEdit: false }).then((res) => {
|
this.fetchFields({ collectionId: this.collectionId, isRepositoryLevel: false, isContextEdit: false }).then((res) => {
|
||||||
let rawFields = res;
|
let rawFields = res;
|
||||||
|
|
|
@ -57,7 +57,6 @@
|
||||||
'getPostQuery'
|
'getPostQuery'
|
||||||
]),
|
]),
|
||||||
listen( event ){
|
listen( event ){
|
||||||
this.setPage(1);
|
|
||||||
eventFilterBus.$emit( 'input', ( event.field_id ) ? event : event.detail[0] );
|
eventFilterBus.$emit( 'input', ( event.field_id ) ? event : event.detail[0] );
|
||||||
},
|
},
|
||||||
setFilterTypeMessage( message ){
|
setFilterTypeMessage( message ){
|
||||||
|
|
|
@ -12,9 +12,9 @@ export const eventFilterBus = new Vue({
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
this.$on('input', data => {
|
this.$on('input', data => {
|
||||||
|
store.dispatch('search/setPage', 1);
|
||||||
this.add_metaquery(data)
|
this.add_metaquery(data)
|
||||||
router.push({ query: {} });
|
this.updateURLQueries();
|
||||||
router.push({ query: store.getters['search/getPostQuery'] });
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -22,10 +22,11 @@ export const eventFilterBus = new Vue({
|
||||||
if (this.$route.query.perpage == undefined)
|
if (this.$route.query.perpage == undefined)
|
||||||
this.$route.query.perpage = 12;
|
this.$route.query.perpage = 12;
|
||||||
if (this.$route.query.paged == undefined)
|
if (this.$route.query.paged == undefined)
|
||||||
this.$route.query.paged = 1;
|
this.$route.query.paged = 1;
|
||||||
|
|
||||||
store.dispatch('search/set_postquery', this.$route.query);
|
store.dispatch('search/set_postquery', this.$route.query);
|
||||||
//console.log(this.$route.query);
|
//console.log(this.$route.query);
|
||||||
|
this.loadItems();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -38,8 +39,45 @@ export const eventFilterBus = new Vue({
|
||||||
let error = this.errors.find( errorItem => errorItem.field_id === filter_id );
|
let error = this.errors.find( errorItem => errorItem.field_id === filter_id );
|
||||||
return ( error ) ? error.errors : false
|
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 ){
|
registerComponent( name ){
|
||||||
if (this.componentsTag.indexOf(name) < 0) {
|
if (this.componentsTag.indexOf(name) < 0) {
|
||||||
|
@ -58,25 +96,5 @@ export const eventFilterBus = new Vue({
|
||||||
}
|
}
|
||||||
return components;
|
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'] });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
|
@ -1,11 +1,13 @@
|
||||||
import axios from '../../../axios/axios';
|
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) => {
|
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 => {
|
.then(res => {
|
||||||
let items = res.data;
|
let items = res.data;
|
||||||
commit('setItems', items);
|
commit('setItems', items );
|
||||||
dispatch('search/setTotalItems', res.headers['x-wp-total'], { root: true } );
|
dispatch('search/setTotalItems', res.headers['x-wp-total'], { root: true } );
|
||||||
resolve({'items': items, 'total': res.headers['x-wp-total'] });
|
resolve({'items': items, 'total': res.headers['x-wp-total'] });
|
||||||
})
|
})
|
||||||
|
|
|
@ -43,7 +43,7 @@ export const setTotalItems = ({ commit }, total ) => {
|
||||||
commit('setTotalItems', total);
|
commit('setTotalItems', total);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const setPage = ({ commit }, page ) => {
|
export const setPage = ({ commit }, page ) => {
|
||||||
commit('setPostQueryAttribute', { attr: 'paged', value: page } );
|
commit('setPostQueryAttribute', { attr: 'paged', value: page } );
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue