Advanced search (see #22)
This commit is contained in:
parent
d54f21f9c3
commit
feeef1aaeb
|
@ -12,7 +12,7 @@
|
|||
grouped>
|
||||
<b-field class="column">
|
||||
<b-select
|
||||
@input.native="addToAdvancedSearchQuery($event)">
|
||||
@input="addToAdvancedSearchQuery($event, 'field_id', searchField)">
|
||||
<option
|
||||
v-for="metadata in metadataList"
|
||||
v-if="metadata.enabled"
|
||||
|
@ -24,12 +24,12 @@
|
|||
|
||||
<b-field class="column is-two-thirds">
|
||||
<b-input
|
||||
@input.native="addValueToAdvancedSearchQuery($event)"/>
|
||||
@input="addValueToAdvancedSearchQuery($event, 'value', searchField)"/>
|
||||
</b-field>
|
||||
|
||||
<b-field class="column">
|
||||
<b-select
|
||||
@input.native="addToAdvancedSearchQuery($event)">
|
||||
@input="addToAdvancedSearchQuery($event, 'compare', searchField)">
|
||||
<option
|
||||
v-for="(opt, key) in compare"
|
||||
:value="key"
|
||||
|
@ -71,6 +71,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre>{{ advancedSearchQuery }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -83,9 +84,19 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
compare: {'=':'Igual', '!=':'Diferente', 'IN':'Contém', 'NOT IN':'Não Contém'},
|
||||
compare: {
|
||||
'=': this.$i18n.get('is_equal_to'),
|
||||
'!=': this.$i18n.get('is_not_equal_to'),
|
||||
'IN': this.$i18n.get('contains'),
|
||||
'NOT IN': this.$i18n.get('not_contains')
|
||||
},
|
||||
totalSearchMetadata: 1,
|
||||
advancedSearchQuery: {},
|
||||
advancedSearchQuery: {
|
||||
advancedSearch: true,
|
||||
metaquery: {
|
||||
relation: 'AND',
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -94,15 +105,35 @@
|
|||
},
|
||||
clearSearch(){
|
||||
this.totalSearchMetadata = 1;
|
||||
this.advancedSearchQuery = {
|
||||
advancedSearch: true,
|
||||
relation: 'AND',
|
||||
};
|
||||
},
|
||||
addValueToAdvancedSearchQuery: _.debounce(($event) => {
|
||||
console.log($event);
|
||||
addValueToAdvancedSearchQuery: _.debounce(function(value, type, relation) {
|
||||
let vm = this;
|
||||
|
||||
vm.addToAdvancedSearchQuery(value, type, relation);
|
||||
}, 900),
|
||||
searchAdvanced(){
|
||||
|
||||
this.$eventBusSearch.$emit('searchAdvanced', this.advancedSearchQuery);
|
||||
},
|
||||
addToAdvancedSearchQuery($event){
|
||||
console.log($event);
|
||||
addToAdvancedSearchQuery(value, type, relation){
|
||||
if(this.advancedSearchQuery.metaquery.hasOwnProperty(relation)){
|
||||
//if(this.advancedSearchQuery[relation].compare === 'IN'){
|
||||
//this.advancedSearchQuery[relation][type] = value.split(' ');
|
||||
//} else {
|
||||
this.advancedSearchQuery.metaquery[relation][type] = value;
|
||||
//}
|
||||
} else {
|
||||
this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
|
||||
[`${relation}`]: {
|
||||
[`${type}`]: value,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
console.log(this.advancedSearchQuery);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
@ -46,7 +46,7 @@ import VueMask from 'v-mask';
|
|||
|
||||
// Configure and Register Plugins
|
||||
Vue.use(Buefy);
|
||||
Vue.use(VTooltip)
|
||||
Vue.use(VTooltip);
|
||||
Vue.use(I18NPlugin);
|
||||
Vue.use(UserPrefsPlugin);
|
||||
Vue.use(RouterHelperPlugin);
|
||||
|
|
|
@ -315,11 +315,38 @@
|
|||
<!-- ITEMS LISTING RESULTS ------------------------- -->
|
||||
<div class="above-search-control">
|
||||
|
||||
<div
|
||||
v-if="openAdvancedSearch && advancedSearchResults">
|
||||
<div class="advanced-search-results-title">
|
||||
<h1>{{ $i18n.get('info_search_results') }}</h1>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Admin Table -->
|
||||
|
||||
<!-- When advanced search -->
|
||||
<items-list
|
||||
v-if="!isOnTheme &&
|
||||
!isLoadingItems &&
|
||||
totalItems > 0"
|
||||
totalItems > 0 &&
|
||||
openAdvancedSearch &&
|
||||
advancedSearchResults"
|
||||
|
||||
:collection-id="collectionId"
|
||||
:table-fields="tableFields"
|
||||
:items="items"
|
||||
:is-loading="isLoadingItems"
|
||||
:is-on-trash="status == 'trash'"
|
||||
:view-mode="adminViewMode"/>
|
||||
|
||||
<!-- Regular -->
|
||||
<items-list
|
||||
v-else-if="!isOnTheme &&
|
||||
!isLoadingItems &&
|
||||
totalItems > 0 &&
|
||||
!openAdvancedSearch"
|
||||
|
||||
:collection-id="collectionId"
|
||||
:table-fields="tableFields"
|
||||
:items="items"
|
||||
|
@ -371,7 +398,18 @@
|
|||
</section>
|
||||
|
||||
<!-- Pagination -->
|
||||
<pagination v-if="totalItems > 0 && (!isOnTheme || registeredViewModes[viewMode].show_pagination)"/>
|
||||
|
||||
<!-- When advanced search -->
|
||||
<pagination
|
||||
v-if="totalItems > 0 &&
|
||||
(!isOnTheme || registeredViewModes[viewMode].show_pagination) &&
|
||||
advancedSearchResults"/>
|
||||
|
||||
<!-- Regular -->
|
||||
<pagination
|
||||
v-else-if="totalItems > 0 &&
|
||||
(!isOnTheme || registeredViewModes[viewMode].show_pagination) &&
|
||||
!openAdvancedSearch"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -405,6 +443,7 @@
|
|||
registeredViewModes: tainacan_plugin.registered_view_modes,
|
||||
adminViewMode: 'table',
|
||||
openAdvancedSearch: false,
|
||||
advancedSearchResults: false,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
@ -669,6 +708,23 @@
|
|||
|
||||
@import '../../scss/_variables.scss';
|
||||
|
||||
.advanced-search-results-title {
|
||||
padding: 0 $table-side-padding;
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: $tertiary;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
hr{
|
||||
margin: 3px 0px 4px 0px;
|
||||
height: 1px;
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.tnc-advanced-search-close {
|
||||
padding-top: 47px;
|
||||
padding-right: $page-side-padding;
|
||||
|
|
|
@ -1,6 +1,13 @@
|
|||
<?php
|
||||
|
||||
return [
|
||||
|
||||
// Advanced search comparators
|
||||
'is_equal_to' => __( 'Equal', 'tainacan' ),
|
||||
'is_not_equal_to' => __( 'Not Equal', 'tainacan'),
|
||||
'contains' => __( 'Contains', 'tainacan'),
|
||||
'not_contains' => __( 'Not Contains', 'tainacan' ),
|
||||
|
||||
// Tainacan common terms
|
||||
'repository' => __( 'Repository', 'tainacan' ),
|
||||
'collections' => __( 'Collections', 'tainacan' ),
|
||||
|
@ -228,6 +235,7 @@ return [
|
|||
'instruction_search_on_repository' => __( 'Search on repository', 'tainacan' ),
|
||||
|
||||
// Info. Other feedback to user.
|
||||
'info_search_results' => __( 'Search Results', 'tainacan' ),
|
||||
'info_name_is_required' => __( 'Name is required.', 'tainacan' ),
|
||||
'info_no_collection_created' => __( 'No collection was created in this repository.', 'tainacan' ),
|
||||
'info_no_collection_draft' => __( 'No draft collection found.', 'tainacan' ),
|
||||
|
|
|
@ -24,6 +24,16 @@ export default {
|
|||
|
||||
this.updateURLQueries();
|
||||
});
|
||||
|
||||
this.$root.$on('searchAdvanced', advancedSearchQuery => {
|
||||
this.$store.dispatch('search/setPage', 1);
|
||||
|
||||
console.log('Emit caught', advancedSearchQuery);
|
||||
|
||||
this.searchAdvanced(advancedSearchQuery);
|
||||
|
||||
this.updateURLQueries();
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
|
@ -40,7 +50,15 @@ export default {
|
|||
if (this.$route.query.orderby == undefined)
|
||||
this.$route.query.orderby = 'date';
|
||||
|
||||
if(this.$route.query.advancedSearch){
|
||||
delete this.$route.query.advancedSearch;
|
||||
|
||||
console.log('Route watch: '+ this.$route.query);
|
||||
|
||||
this.$store.dispatch('search/set_advanced_query', this.$route.query);
|
||||
} else {
|
||||
this.$store.dispatch('search/set_postquery', this.$route.query);
|
||||
}
|
||||
|
||||
this.loadItems(to);
|
||||
}
|
||||
|
@ -48,6 +66,10 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
searchAdvanced(data) {
|
||||
this.$store.dispatch('search/set_advanced_query', data);
|
||||
this.updateURLQueries(true);
|
||||
},
|
||||
add_metaquery( data ){
|
||||
if ( data && data.collection_id ){
|
||||
this.$store.dispatch('search/add_metaquery', data );
|
||||
|
@ -112,9 +134,15 @@ export default {
|
|||
this.$store.dispatch('search/setViewMode', viewMode);
|
||||
this.updateURLQueries();
|
||||
},
|
||||
updateURLQueries() {
|
||||
updateURLQueries(isAdvancedSearch = false) {
|
||||
this.$router.push({ query: {}});
|
||||
|
||||
if(isAdvancedSearch) {
|
||||
this.$router.push({query: this.$store.getters['search/getAdvancedSearchQuery']});
|
||||
console.log(this.$route);
|
||||
} else {
|
||||
this.$router.push({query: this.$store.getters['search/getPostQuery']});
|
||||
}
|
||||
},
|
||||
updateStoreFromURL() {
|
||||
this.$store.dispatch('search/set_postquery', this.$route.query);
|
||||
|
@ -126,8 +154,9 @@ export default {
|
|||
this.$emit( 'hasToPrepareFieldsAndFilters', to);
|
||||
} else {
|
||||
this.$emit( 'isLoadingItems', true);
|
||||
this.$store.dispatch('collection/fetchItems',
|
||||
{ 'collectionId': this.collectionId,
|
||||
|
||||
this.$store.dispatch('collection/fetchItems', {
|
||||
'collectionId': this.collectionId,
|
||||
'isOnTheme': (this.$route.name == null)
|
||||
})
|
||||
.then((res) => {
|
||||
|
|
|
@ -3,6 +3,7 @@ import qs from 'qs';
|
|||
|
||||
export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, isOnTheme }) => {
|
||||
commit('cleanItems');
|
||||
|
||||
return new Promise ((resolve, reject) => {
|
||||
|
||||
// Adds queries for filtering
|
||||
|
@ -48,7 +49,7 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
|
|||
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteItem = ({ commit }, { itemId, isPermanently }) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
@ -86,7 +87,7 @@ export const fetchCollections = ({commit} , { page, collectionsPerPage, status }
|
|||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchCollection = ({ commit }, id) => {
|
||||
commit('cleanCollection');
|
||||
|
@ -101,7 +102,7 @@ export const fetchCollection = ({ commit }, id) => {
|
|||
reject(error);
|
||||
})
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchCollectionName = ({ commit }, id) => {
|
||||
//commit('cleanCollectionName');
|
||||
|
@ -116,7 +117,7 @@ export const fetchCollectionName = ({ commit }, id) => {
|
|||
reject(error);
|
||||
})
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteCollection = ({ commit }, { collectionId, isPermanently }) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
@ -134,7 +135,7 @@ export const deleteCollection = ({ commit }, { collectionId, isPermanently }) =>
|
|||
reject(error);
|
||||
})
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const updateCollection = ({ commit }, {
|
||||
collection_id,
|
||||
|
@ -181,7 +182,7 @@ export const updateCollection = ({ commit }, {
|
|||
});
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const sendCollection = ( { commit }, { name, description, status }) => {
|
||||
return new Promise(( resolve, reject ) => {
|
||||
|
@ -329,4 +330,4 @@ export const fetchCollectionsForParent = ({ commit }) => {
|
|||
reject(error);
|
||||
})
|
||||
});
|
||||
}
|
||||
};
|
|
@ -7,6 +7,10 @@ export const set_postquery = ({ commit }, postquery ) => {
|
|||
commit('setPostQuery', postquery );
|
||||
};
|
||||
|
||||
export const set_advanced_query = ({commit}, advancedSearchQuery) => {
|
||||
commit('setAdvancedSearchQuery', advancedSearchQuery);
|
||||
};
|
||||
|
||||
// Meta Queries from filters
|
||||
export const add_metaquery = ( { commit }, filter ) => {
|
||||
if( filter && filter.value.length === 0 ){
|
||||
|
|
|
@ -1,25 +1,29 @@
|
|||
export const getPostQuery = state => {
|
||||
return state.postquery;
|
||||
}
|
||||
};
|
||||
|
||||
export const getAdvancedSearchQuery = state => {
|
||||
return state.advancedSearchQuery;
|
||||
};
|
||||
|
||||
export const getMetaQuery = state => {
|
||||
return state.metaquery;
|
||||
}
|
||||
};
|
||||
|
||||
export const getTaxQuery = state => {
|
||||
return state.taxquery;
|
||||
}
|
||||
};
|
||||
|
||||
export const getTotalItems = state => {
|
||||
return state.totalItems;
|
||||
}
|
||||
};
|
||||
|
||||
export const getPage = state => {
|
||||
if (state.postquery.paged == undefined)
|
||||
return 1;
|
||||
else
|
||||
return Number(state.postquery.paged);
|
||||
}
|
||||
};
|
||||
|
||||
export const getItemsPerPage = state => {
|
||||
if (state.postquery.paged == undefined)
|
||||
|
@ -30,7 +34,7 @@ export const getItemsPerPage = state => {
|
|||
|
||||
export const getOrder = state => {
|
||||
return state.postquery.order;
|
||||
}
|
||||
};
|
||||
|
||||
export const getOrderBy = state => {
|
||||
return state.postquery.orderby;
|
||||
|
@ -38,20 +42,20 @@ export const getOrderBy = state => {
|
|||
|
||||
export const getSearchQuery = state => {
|
||||
return state.postquery.search;
|
||||
}
|
||||
};
|
||||
|
||||
export const getStatus = state => {
|
||||
return state.postquery.status;
|
||||
}
|
||||
};
|
||||
|
||||
export const getViewMode = state => {
|
||||
return state.postquery.view_mode;
|
||||
}
|
||||
};
|
||||
|
||||
export const getFetchOnly = state => {
|
||||
return state.postquery.fetch_only;
|
||||
}
|
||||
};
|
||||
|
||||
export const getFetchOnlyMeta = state => {
|
||||
return ( ! state.postquery.fetch_only['meta'] ) ? [] : state.postquery.fetch_only['meta'];
|
||||
}
|
||||
};
|
|
@ -21,6 +21,7 @@ const state = {
|
|||
},
|
||||
view_mode: 'table'
|
||||
},
|
||||
advancedSearchQuery: {},
|
||||
totalItems: 0
|
||||
};
|
||||
|
||||
|
|
|
@ -8,9 +8,15 @@ export const setPostQuery = ( state, postquery ) => {
|
|||
state.postquery = postquery;
|
||||
};
|
||||
|
||||
export const setAdvancedSearchQuery = (state, advancedSearchQuery) => {
|
||||
state.advancedSearchQuery = advancedSearchQuery;
|
||||
};
|
||||
|
||||
export const addMetaQuery = ( state, filter ) => {
|
||||
state.postquery.metaquery = ( ! state.postquery.metaquery ) ? [] : state.postquery.metaquery;
|
||||
|
||||
let index = state.postquery.metaquery.findIndex( item => item.key === filter.field_id);
|
||||
|
||||
if ( index >= 0 ){
|
||||
Vue.set( state.postquery.metaquery, index, {
|
||||
key: filter.field_id,
|
||||
|
|
Loading…
Reference in New Issue