Advanced search (see #22)

src/admin/components/advanced-search/advanced-search.vue

@@ -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) => {
+            addValueToAdvancedSearchQuery: _.debounce(function(value, type, relation) {
-                console.log($event);
+                let vm = this;
+
+                vm.addToAdvancedSearchQuery(value, type, relation);
             }, 900),
             searchAdvanced(){
-
+                this.$eventBusSearch.$emit('searchAdvanced', this.advancedSearchQuery);
             },
-            addToAdvancedSearchQuery($event){
+            addToAdvancedSearchQuery(value, type, relation){
-                console.log($event);
+                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);
             },
         }
     }

src/admin/js/main.js

@@ -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);

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

@@ -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;

src/admin/tainacan-admin-i18n.php

@@ -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' ),

src/js/event-bus-search.js

@@ -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) => {

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

@@ -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);
         })
     });
-}
+};

src/js/store/modules/search/actions.js

@@ -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 ){

src/js/store/modules/search/getters.js

@@ -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'];
-}
+};

src/js/store/modules/search/index.js

@@ -21,6 +21,7 @@ const state = {
         },
         view_mode: 'table'
     },
+    advancedSearchQuery: {},
     totalItems: 0
 };
 

src/js/store/modules/search/mutations.js

@@ -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,