From 829b19fb0ba330103a85d3ebd647f66b59dc00c4 Mon Sep 17 00:00:00 2001 From: Eduardo humberto Date: Wed, 28 Feb 2018 12:48:30 -0300 Subject: [PATCH] create examples for filter store structure --- src/classes/filter-types/range/Range.vue | 27 ++++++------- .../range/class-tainacan-range.php | 1 + src/js/event-bus-filters.js | 18 +++++++-- src/js/store/modules/filter/actions.js | 38 ++++++++++++++----- src/js/store/modules/filter/getters.js | 12 ++++-- src/js/store/modules/filter/index.js | 10 ++++- src/js/store/modules/filter/mutations.js | 35 ++++++++++++++--- src/js/store/store.js | 4 +- 8 files changed, 105 insertions(+), 40 deletions(-) diff --git a/src/classes/filter-types/range/Range.vue b/src/classes/filter-types/range/Range.vue index 699b7372e..282e6f722 100644 --- a/src/classes/filter-types/range/Range.vue +++ b/src/classes/filter-types/range/Range.vue @@ -62,6 +62,7 @@ type: Object // concentrate all attributes field id and type }, field_id: [Number], // not required, but overrides the filter field id if is set + collection_id: [Number], // not required, but overrides the filter field id if is set typeRange: [String], // not required, but overrides the filter field type if is set id: '' }, @@ -82,23 +83,23 @@ } } }, - // emit the operation for component listener + // emit the operation for listeners emit(){ + let values = null; if( this.type === 'date' ){ - this.$emit('input', { - filter: 'range', - type: 'date', - field_id: ( this.field_id ) ? this.field_id : this.filter.field, - values: [ this.date_init, this.date_end ] - }); + values = [ this.date_init, this.date_end ] } else { - this.$emit('input', { - filter: 'range', - type: 'numeric', - field_id: ( this.field_id ) ? this.field_id : this.filter.field, - values: [ this.value_init, this.value_end ] - }); + values = [ this.value_init, this.value_end ] } + + this.$emit('input', { + filter: 'range', + type: 'numeric', + compare: 'BETWEEN', + field_id: ( this.field_id ) ? this.field_id : this.filter.field, + collection_id: ( this.collection_id ) ? this.collection_id : this.filter.collection_id, + value: values + }); }, // message for error error_message(){ diff --git a/src/classes/filter-types/range/class-tainacan-range.php b/src/classes/filter-types/range/class-tainacan-range.php index 28a9fe792..0b6342a4f 100644 --- a/src/classes/filter-types/range/class-tainacan-range.php +++ b/src/classes/filter-types/range/class-tainacan-range.php @@ -21,6 +21,7 @@ class Range extends Filter_Type { public function render( $filter ){ return ''; } } \ No newline at end of file diff --git a/src/js/event-bus-filters.js b/src/js/event-bus-filters.js index 4b32dd939..2c6c7d371 100644 --- a/src/js/event-bus-filters.js +++ b/src/js/event-bus-filters.js @@ -1,17 +1,27 @@ import Vue from 'vue'; +import store from './store/store' export const eventFilterBus = new Vue({ + store, data: { componentsTag: [], errors : [], query: {} }, created(){ - this.$on('input', data => this.search(data) ); + this.$on('input', data => this.add_metaquery(data) ); }, methods: { - search( ){ - console.log( data ); + add_metaquery( data ){ + if ( data.collection_id ){ + this.$store.dispatch('filter/add_metaquery', data ); + const promisse = this.$store.dispatch('filter/search_by_collection', data.collection_id ); + promisse.then( response => { + + }, error => { + + }); + } }, /* Dev interfaces methods */ @@ -37,7 +47,7 @@ export const eventFilterBus = new Vue({ const components = this.getAllComponents(); for (let eventElement of components){ eventElement.addEventListener('input', (event) => { - console.log( event.detail, 'dev' ); + this.add_metaquery( event.detail[0] ); }); } }, diff --git a/src/js/store/modules/filter/actions.js b/src/js/store/modules/filter/actions.js index 5a2ce23f2..5282fced1 100644 --- a/src/js/store/modules/filter/actions.js +++ b/src/js/store/modules/filter/actions.js @@ -1,14 +1,32 @@ import axios from '../../../axios/axios'; import qs from 'qs'; -export const do_query = ({ commit, state }) => { - return new Promise((resolve, reject) =>{ - axios.get('/collections/' + state.collection + '/items?' + qs.stringify( state.query )) - .then(res => { - - }) - .catch(error => { - - }) +export const search_by_collection = ({ commit, state, dispatch }, collectionId) => { + commit('setPostQuery', 'meta_query', state.meta_query ); + commit('setPostQuery', 'tax_query', state.tax_query ); + return new Promise((resolve, reject) =>{ + axios.get('/collection/' + collectionId + '/items?' + qs.stringify( state.query )) + .then(res => { + resolve( res.data ); + }) + .catch(error => { + reject( error ) + }) }); -} +}; + + +export const set_postquery_attribute = ({ commit }, field, value ) => { + commit('setPostQuery', field, value ); +}; + +export const add_metaquery = ( { commit }, filter ) => { + commit('addMetaQuery', filter ); +}; + +export const remove_metaquery = ( { commit }, filter ) => { + commit('removeMetaQuery', filter ); +}; + + + diff --git a/src/js/store/modules/filter/getters.js b/src/js/store/modules/filter/getters.js index 3d508ffd2..6624b08cb 100644 --- a/src/js/store/modules/filter/getters.js +++ b/src/js/store/modules/filter/getters.js @@ -1,7 +1,11 @@ -export const getQuery = state => { - return state.query; +export const getPostQuery = state => { + return state.post_query; } -export const getCollection = state => { - return state.collection; +export const getMetaQuery = state => { + return state.meta_query; } + +export const getTaxQuery = state => { + return state.tax_query; +} \ No newline at end of file diff --git a/src/js/store/modules/filter/index.js b/src/js/store/modules/filter/index.js index 5f5320534..591174e22 100644 --- a/src/js/store/modules/filter/index.js +++ b/src/js/store/modules/filter/index.js @@ -3,8 +3,14 @@ import * as getters from './getters'; import * as mutations from './mutations'; const state = { - query: {}, - collection: null + post_query: { + post_status: 'publish', + post_type: [], + meta_query: null, + tax_query: null + }, + meta_query: [], + tax_query: [] }; export default { diff --git a/src/js/store/modules/filter/mutations.js b/src/js/store/modules/filter/mutations.js index f935a50ce..cb0a0665b 100644 --- a/src/js/store/modules/filter/mutations.js +++ b/src/js/store/modules/filter/mutations.js @@ -1,8 +1,31 @@ -export const setQuery = ( state, query ) => { - state.query = query; -} +import Vue from 'vue'; -export const setCollection = ( state, collection ) => { - state.query = collection; -} +export const setPostQuery = ( state, field, value ) => { + Vue.set( state.post_query, field, value ); +}; +export const addMetaQuery = ( state, filter ) => { + let index = state.meta_query.findIndex( item => item.key === filter.field_id); + if ( index >= 0){ + Vue.set( state.meta_query, index, { + key: filter.field_id, + value: filter.value, + compare: filter.compare, + type: filter.type + } ); + }else{ + state.meta_query.push({ + key: filter.field_id, + value: filter.value, + compare: filter.compare, + type: filter.type + }); + } +}; + +export const removeMetaQuery = ( state, filter ) => { + let index = state.meta_query.findIndex( item => item.key === filter.field_id); + if (index >= 0) { + state.meta_query.splice(index, 1); + } +} diff --git a/src/js/store/store.js b/src/js/store/store.js index 14c7336f1..82196bdcb 100644 --- a/src/js/store/store.js +++ b/src/js/store/store.js @@ -3,12 +3,14 @@ import Vuex from 'vuex'; import item from './modules/item/'; import collection from './modules/collection/'; +import filter from './modules/filter/'; Vue.use(Vuex); export default new Vuex.Store({ modules: { item, - collection + collection, + filter } }) \ No newline at end of file