Now the advanced search form is recovered from the route query (#22)

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

@@ -20,6 +20,9 @@
                                 :placeholder="$i18n.get('instruction_select_a_metadatum')"
                                 :disabled="advancedSearchQuery.taxquery[searchCriterion] ||
                                  advancedSearchQuery.metaquery[searchCriterion] ? true : false"
+                                :value="advancedSearchQuery.metaquery[searchCriterion] ?
+                                 advancedSearchQuery.metaquery[searchCriterion].originalMeta :
+                                  (advancedSearchQuery.taxquery[searchCriterion] ? advancedSearchQuery.taxquery[searchCriterion].originalMeta : '')"
                                 @input="addToAdvancedSearchQuery($event, 'metadatum', searchCriterion)">
                             <option
                                     v-for="metadatum in metadata"
@@ -38,11 +41,13 @@
                                 :type="advancedSearchQuery.metaquery[searchCriterion].ptype == 'int' ||
                                  advancedSearchQuery.metaquery[searchCriterion].ptype == 'float' ? 'number' : 'text'"
                                 @input="addValueToAdvancedSearchQuery($event, 'value', searchCriterion)"
+                                :value="advancedSearchQuery.metaquery[searchCriterion].value"
                         />
                         <input
                             v-else-if="advancedSearchQuery.metaquery[searchCriterion] &&
                              advancedSearchQuery.metaquery[searchCriterion].ptype == 'date'"
                             class="input"
+                            :value="parseDateToNavigatorLanguage(advancedSearchQuery.metaquery[searchCriterion].value)"
                             v-mask="dateMask"
                             @focus="addValueToAdvancedSearchQueryWithoutDelay($event, '', searchCriterion)"
                             @input="addValueToAdvancedSearchQueryWithoutDelay($event, 'value', searchCriterion)"
@@ -51,6 +56,8 @@
                         <b-taginput
                                 v-else-if="advancedSearchQuery.taxquery[searchCriterion]"
                                 :data="terms"
+                                :value="advancedSearchQuery.taxquery[searchCriterion].btags.length > 0 ?
+                                 Array.from(new Set(advancedSearchQuery.taxquery[searchCriterion].btags)) : []"
                                 autocomplete
                                 :loading="isFetching"
                                 attached
@@ -165,6 +172,8 @@
                 </div>
             </div>
         </div>
+        <pre>{{ terms }}</pre>
+        <pre>{{ advancedSearchQuery }}</pre>
     </div>
 </template>
 
@@ -196,6 +205,52 @@
 
             let localeData = moment.localeData();
             this.dateFormat = localeData.longDateFormat('L');
+
+            if((this.$route.query.metaquery && Object.keys(this.$route.query.metaquery).length > 0) ||
+                (this.$route.query.taxquery && Object.keys(this.$route.query.taxquery).length > 0) ){
+                this.searchCriteria = [];
+            }
+
+            if(this.$route.query.metaquery && Object.keys(this.$route.query.metaquery).length > 0){
+
+                let metaquery = this.$route.query.metaquery;
+
+                for(let meta in metaquery){
+                    this.$set(this.advancedSearchQuery.metaquery, `${meta}`, metaquery[meta]);
+                }
+
+                let keys = Object.keys(this.advancedSearchQuery.metaquery);
+
+                let relationIndex = keys.findIndex((element) => {
+                    return element == 'relation';
+                });
+
+                keys.splice(relationIndex, 1);
+
+                for(let k of keys){
+                    this.searchCriteria.push(k);
+                }
+            }
+
+            if(this.$route.query.taxquery && Object.keys(this.$route.query.taxquery).length > 0){
+                let taxquery = this.$route.query.taxquery;
+
+                for(let tax in taxquery){
+                    this.$set(this.advancedSearchQuery.taxquery, `${tax}`, taxquery[tax]);
+                }
+
+                let keys = Object.keys(this.advancedSearchQuery.taxquery);
+
+                let relationIndex = keys.findIndex((element) => {
+                    return element == 'relation';
+                });
+
+                keys.splice(relationIndex, 1);
+
+                for(let k of keys){
+                    this.searchCriteria.push(k);
+                }
+            }
         },
         data() {
             return {
@@ -366,8 +421,7 @@
                             let value = this.advancedSearchQuery.metaquery[metaquery].value;
                             
                             if(value.includes('/')){
-                                this.advancedSearchQuery.metaquery[metaquery].value = this.convertDateToMatchInDB(value);
+                                this.$set(this.advancedSearchQuery.metaquery[metaquery], 'value', this.convertDateToMatchInDB(value));
-                                //this.$set(this.advancedSearchQuery.metaquery[metaquery], 'value', this.convertDateToMatchInDB(value));
                             }
                         }
                     }
@@ -394,15 +448,19 @@
                                 if(value.includes('-')){
                                     this.$set(this.advancedSearchQuery.metaquery[metaquery], 'value', this.parseDateToNavigatorLanguage(value));
                                 }
-                            }, 110);
+                            }, 200);
                         }
                     }
                 }
             },
             parseDateToNavigatorLanguage(date){
+                if(date && date.length === this.dateMask.length) {
                     date = new Date(date.replace(/-/g, '/'));
 
                     return moment(date, moment.ISO_8601).format(this.dateFormat);
+                } else {
+                    return date;
+                }
             },
             addToAdvancedSearchQuery(value, type, searchCriterion){
 
@@ -418,6 +476,7 @@
                                 btags: [],
                                 field: 'term_id',
                                 operator: 'IN',
+                                originalMeta: value,
                                 taxonomy_id: Number(criteriaKey[1].match(/[\d]+/))
                             }
                         });
@@ -427,14 +486,16 @@
                             this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
                                 [`${searchCriterion}`]: {
                                     key: Number(criteriaKey[0]),
-                                    compare: 'LIKE'
+                                    compare: 'LIKE',
+                                    originalMeta: value,
                                 }
                             });
                         } else {
                             this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
                                 [`${searchCriterion}`]: {
                                     key: Number(criteriaKey[0]),
-                                    compare: '='
+                                    compare: '=',
+                                    originalMeta: value,
                                 }
                             });
                         }

src/admin/components/navigation/tainacan-header.vue

@@ -29,12 +29,33 @@
                     <span class="icon is-right">
                         <i
                                 @click="updateSearch()"
-                                    class="mdi mdi-magnify" />
+                                class="mdi mdi-magnify"/>
                     </span>
-                </div>
+                    <!--<b-dropdown-->
-                <a @click="toItemsPage">{{ $i18n.get('advanced_search') }}</a>
+                            <!--position="is-bottom-left">-->
+                        <!--<b-icon-->
+                                <!--class="is-right"-->
+                                <!--slot="trigger"-->
+                                <!--size="is-small"-->
+                                <!--icon="menu-down"/>-->
+                        <!--<b-dropdown-item>-->
+                            <!--<p class="is-left">{{ $i18n.get('advanced_search') }}</p>-->
+                            <!--<b-icon-->
+                                    <!--icon="menu-up"-->
+                                    <!--class="is-right" />-->
+                        <!--</b-dropdown-item>-->
+                        <!--<b-dropdown-item-->
+                                <!--:custom="true">-->
+                            <!--<advanced-search />-->
+                        <!--</b-dropdown-item>-->
+                    <!--</b-dropdown>-->
                 </div>
                 <a
+                        :style="{color: 'white'}"
+                        @click="toItemsPage">{{ $i18n.get('advanced_search') }}</a>
+            </div>
+            <a
+                    :style="{color: 'white'}"
                     class="level-item"
                     :href="wordpressAdmin">
                 <b-icon icon="wordpress"/>
@@ -45,9 +66,11 @@
 
 <script>
 
-export default {
+    import AdvancedSearch from '../advanced-search/advanced-search.vue';
+
+    export default {
         name: 'TainacanHeader',
-    data(){
+        data() {
             return {
                 logoHeader: tainacan_plugin.base_url + '/admin/images/tainacan_logo_header.png',
                 wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
@@ -55,8 +78,11 @@ export default {
                 futureSearchQuery: '',
             }
         },
+        components: {
+            AdvancedSearch,
+        },
         methods: {
-        toItemsPage(){
+            toItemsPage() {
                 this.$router.push({
                     path: '/items',
                     query: {
@@ -65,7 +91,7 @@ export default {
                 });
             },
             updateSearch() {
-            if(this.$route.path != '/items') {
+                if (this.$route.path != '/items') {
                     this.$router.push({
                         path: '/items',
                     });
@@ -77,10 +103,10 @@ export default {
         props: {
             isMenuCompressed: false
         }
-}
+    }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
     @import "../../scss/_variables.scss";
 
@@ -101,7 +127,7 @@ export default {
         .level-left {
             margin-left: -12px;
 
-            .level-item{
+            .level-item {
                 height: $header-height;
                 width: 180px;
                 transition: width 0.15s, background-color 0.2s;
@@ -122,15 +148,12 @@ export default {
         }
         .level-right {
             padding-right: 12px;
-            a {
-                color: white;
-            }
             .search-area {
                 display: flex;
                 align-items: center;
                 margin-right: 36px;
 
-                .control {
+                .control:not(.tnc-advanced-search-container) {
                     input {
                         border-width: 0 !important;
                         height: 27px;
@@ -149,10 +172,18 @@ export default {
                         cursor: pointer;
                         height: 27px;
                         font-size: 18px;
-                        width: auto !important;
+                        width: 30px !important;
                     }
                 }
 
+                /*.dropdown-content {*/
+                    /*width: 800px !important;*/
+                /*}*/
+
+                /*.dropdown-item:hover {*/
+                    /*background-color: white;*/
+                /*}*/
+
                 a {
                     margin: 0px 12px;
                     font-size: 12px;