From aa6798a8a3d2e8d7c9410729e02b1fc7eae0eee0 Mon Sep 17 00:00:00 2001
From: weryques <weryques@outlook.com>
Date: Thu, 5 Jul 2018 22:42:06 -0300
Subject: [PATCH] Now the advanced search form is recovered from the route
 query (#22)

---
 .../advanced-search/advanced-search.vue       |  81 +++++++--
 .../components/navigation/tainacan-header.vue | 157 +++++++++++-------
 2 files changed, 165 insertions(+), 73 deletions(-)

diff --git a/src/admin/components/advanced-search/advanced-search.vue b/src/admin/components/advanced-search/advanced-search.vue
index c33527cbf..6ae2fb73f 100644
--- a/src/admin/components/advanced-search/advanced-search.vue
+++ b/src/admin/components/advanced-search/advanced-search.vue
@@ -19,7 +19,10 @@
                         <b-select
                                 :placeholder="$i18n.get('instruction_select_a_metadatum')"
                                 :disabled="advancedSearchQuery.taxquery[searchCriterion] ||
-                            advancedSearchQuery.metaquery[searchCriterion] ? true : false"
+                                 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
@@ -66,7 +73,7 @@
                             class="column">
                         <b-select
                                 v-if="advancedSearchQuery.taxquery[searchCriterion] ||
-                                advancedSearchQuery.metaquery[searchCriterion] ? true : false"
+                                 advancedSearchQuery.metaquery[searchCriterion] ? true : false"
                                 @input="addToAdvancedSearchQuery($event, 'comparator', searchCriterion)"
                                 :value="advancedSearchQuery.taxquery[searchCriterion] ?
                                  advancedSearchQuery.taxquery[searchCriterion].operator :
@@ -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){
-                date = new Date(date.replace(/-/g, '/'));
+                if(date && date.length === this.dateMask.length) {
+                    date = new Date(date.replace(/-/g, '/'));
 
-                return moment(date, moment.ISO_8601).format(this.dateFormat);
+                    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,
                                 }
                             });
                         }
diff --git a/src/admin/components/navigation/tainacan-header.vue b/src/admin/components/navigation/tainacan-header.vue
index 7f410f6c4..24146a642 100644
--- a/src/admin/components/navigation/tainacan-header.vue
+++ b/src/admin/components/navigation/tainacan-header.vue
@@ -1,16 +1,16 @@
 <template>
     <div
-            id="tainacan-header" 
-            class="level" 
+            id="tainacan-header"
+            class="level"
             :class="{'menu-compressed': isMenuCompressed}">
         <div class="level-left">
             <div class="level-item">
-                <router-link 
-                        tag="a" 
+                <router-link
+                        tag="a"
                         to="/">
-                    <img 
-                            class="tainacan-logo" 
-                            alt="Tainacan Logo" 
+                    <img
+                            class="tainacan-logo"
+                            alt="Tainacan Logo"
                             :src="logoHeader">
                 </router-link>
             </div>
@@ -18,24 +18,45 @@
         <div class="level-right">
             <div class="search-area">
                 <div class="control has-icons-right is-small is-clearfix">
-                    <input 
-                            autocomplete="on" 
+                    <input
+                            autocomplete="on"
                             :placeholder="$i18n.get('instruction_search_in_repository')"
-                            class="input is-small" 
-                            type="search" 
+                            class="input is-small"
+                            type="search"
                             :value="searchQuery"
                             @input="futureSearchQuery = $event.target.value"
                             @keyup.enter="updateSearch()">
-                        <span class="icon is-right">
-                            <i
-                                    @click="updateSearch()"
-                                    class="mdi mdi-magnify" />
-                        </span>
+                    <span class="icon is-right">
+                        <i
+                                @click="updateSearch()"
+                                class="mdi mdi-magnify"/>
+                    </span>
+                    <!--<b-dropdown-->
+                            <!--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 @click="toItemsPage">{{ $i18n.get('advanced_search') }}</a>
+                <a
+                        :style="{color: 'white'}"
+                        @click="toItemsPage">{{ $i18n.get('advanced_search') }}</a>
             </div>
-            <a 
-                    class="level-item" 
+            <a
+                    :style="{color: 'white'}"
+                    class="level-item"
                     :href="wordpressAdmin">
                 <b-icon icon="wordpress"/>
             </a>
@@ -45,45 +66,50 @@
 
 <script>
 
-export default {
-    name: 'TainacanHeader',
-    data(){
-        return {
-            logoHeader: tainacan_plugin.base_url + '/admin/images/tainacan_logo_header.png',
-            wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
-            searchQuery: '',
-            futureSearchQuery: '',
-        }
-    },
-    methods: {
-        toItemsPage(){
-          this.$router.push({
-              path: '/items',
-              query: {
-                  advancedSearch: true
-              }
-          });
+    import AdvancedSearch from '../advanced-search/advanced-search.vue';
+
+    export default {
+        name: 'TainacanHeader',
+        data() {
+            return {
+                logoHeader: tainacan_plugin.base_url + '/admin/images/tainacan_logo_header.png',
+                wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
+                searchQuery: '',
+                futureSearchQuery: '',
+            }
         },
-        updateSearch() {
-            if(this.$route.path != '/items') {
+        components: {
+            AdvancedSearch,
+        },
+        methods: {
+            toItemsPage() {
                 this.$router.push({
                     path: '/items',
+                    query: {
+                        advancedSearch: true
+                    }
                 });
-            }
+            },
+            updateSearch() {
+                if (this.$route.path != '/items') {
+                    this.$router.push({
+                        path: '/items',
+                    });
+                }
 
-            this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
-        },  
-    },
-    props: {
-        isMenuCompressed: false
+                this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
+            },
+        },
+        props: {
+            isMenuCompressed: false
+        }
     }
-}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
     @import "../../scss/_variables.scss";
-    
+
     // Tainacan Header
     #tainacan-header {
         background-color: $secondary;
@@ -91,7 +117,7 @@ export default {
         max-height: $header-height;
         width: 100%;
         padding: 12px;
-        vertical-align: middle; 
+        vertical-align: middle;
         left: 0;
         right: 0;
         position: absolute;
@@ -99,16 +125,16 @@ export default {
         color: white;
 
         .level-left {
-            margin-left: -12px; 
+            margin-left: -12px;
 
-            .level-item{
+            .level-item {
                 height: $header-height;
                 width: 180px;
                 transition: width 0.15s, background-color 0.2s;
-                -webkit-transition: width 0.15s background-color 0.2s;   
+                -webkit-transition: width 0.15s background-color 0.2s;
                 cursor: pointer;
                 background-color: #257787;
-                
+
                 &:focus {
                     box-shadow: none;
                 }
@@ -116,21 +142,18 @@ export default {
                     max-height: 22px;
                     padding: 0px 24px;
                     transition: padding 0.15s;
-                    -webkit-transition: padding linear 0.15s;   
+                    -webkit-transition: padding linear 0.15s;
                 }
-            }   
+            }
         }
         .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;
@@ -164,10 +195,10 @@ export default {
                 width: 220px;
                 background-color: $secondary;
                 .tainacan-logo {
-                    padding: 0px 42px;   
+                    padding: 0px 42px;
                 }
             }
-            
+
         }
 
         @media screen and (max-width: 769px) {