Initiaded advanced search (issue #22)

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

@@ -0,0 +1,123 @@
+<template>
+    <div>
+        <div class="columns is-multiline tnc-advanced-search-container">
+
+            <div
+                    v-for="searchField in totalSearchMetadata"
+                    :key="searchField"
+                    class="field column is-12 tainacan-form">
+
+                <b-field
+                        class="columns"
+                        grouped>
+                    <b-field class="column is-one-fifth">
+                        <b-select
+                                @input="addToAdvancedSearchQuery">
+                            <option
+                                    v-for="(metadata, key) in metadataList"
+                                    v-if="metadata.enabled"
+                                    :value="metadata.id"
+                                    :key="key"
+                            >{{ metadata.name }}</option>
+                        </b-select>
+                    </b-field>
+
+                    <b-field class="column is-two-thirds">
+                        <b-input
+                                @input="addToAdvancedSearchQuery"/>
+                    </b-field>
+
+                    <b-field class="column is-one-fifth">
+                        <b-select
+                                @input="addToAdvancedSearchQuery">
+                            <option
+                                    v-for="(opt, key) in compare"
+                                    :value="key"
+                                    :key="key"
+                            >{{ opt }}</option>
+                        </b-select>
+                    </b-field>
+                </b-field>
+
+            </div>
+            <div
+                    :style="{'padding-left': '25px !important'}"
+                    class="field column is-12">
+
+                <div class="is-inline">
+                    <b-icon
+                            icon="plus-circle"
+                            size="is-small"
+                            type="is-info"/>
+                    <a
+                            @click="addSearchMetadata"
+                            class="is-info is-small">
+                        Adicionar mais um campo de busca</a>
+                </div>
+
+            </div>
+            <div class="column">
+                <div class="field is-grouped is-pulled-right">
+                    <p class="control">
+                        <button
+                                @click="clearSearch"
+                                class="button is-outlined">Limpar busca</button>
+                    </p>
+                    <p class="control">
+                        <button
+                                @click="searchAdvanced"
+                                class="button is-secondary">Buscar</button>
+                    </p>
+                </div>
+            </div>
+            <pre>{{ metadataIds }} {{ toCompare }}</pre>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "AdvancedSearch",
+        props: {
+            metadataList: Array,
+        },
+        data(){
+            return {
+                compare: {'=':'Igual', '!=':'Diferente', 'IN':'Contém', 'NOT IN':'Não Contém'},
+                totalSearchMetadata: 1,
+                advancedSearchQuery: {},
+            }
+        },
+        methods: {
+            addSearchMetadata(){
+                this.totalSearchMetadata++;
+            },
+            clearSearch(){
+                this.totalSearchMetadata = 1;
+            },
+            searchAdvanced(){
+
+            },
+            addToAdvancedSearchQuery(optionValue){
+                console.log(optionValue);
+            },
+        }
+    }
+</script>
+
+<style lang="scss">
+
+    @import '../../scss/_variables.scss';
+
+    .tnc-advanced-search-container {
+        padding-top: 47px;
+        padding-right: $page-side-padding;
+        padding-left: $page-side-padding;
+        padding-top: 47px;
+
+        .column {
+            padding: 0 0.3rem 0.3rem !important;
+        }
+    }
+
+</style>

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

@@ -20,7 +20,7 @@
                 <div class="control has-icons-right is-small is-clearfix">
                     <input 
                             autocomplete="on" 
-                            :placeholder="$i18n.get('instruction_search_repository')" 
+                            :placeholder="$i18n.get('instruction_search')"
                             class="input is-small" 
                             type="search" 
                             v-model="searchTerm">
@@ -28,7 +28,7 @@
                         <i class="mdi mdi-magnify" />
                     </span>
                 </div>
-                <a href="">{{ $i18n.get('advanced_search') }}</a>
+                <a @click.prevent="openAdvancedSearchComponent">{{ $i18n.get('advanced_search') }}</a>
             </span>
             <a 
                     class="level-item" 
@@ -50,6 +50,13 @@ export default {
             searchTerm: ''
         }
     },
+    methods: {
+        openAdvancedSearchComponent(){
+            console.log('Called here', this.$route.meta);
+            this.$set(this.$route.meta, 'openAdvancedSearch', !this.$route.meta.openAdvancedSearch);
+            console.log('Called here', this.$route.meta);
+        }
+    },
     props: {
         isMenuCompressed: false
     }
@@ -105,7 +112,7 @@ export default {
                 color: $tertiary;
             }
             .search-area {
-                display: none;//display: flex;
+                display: flex;
                 align-items: center;
                 margin-right: 36px;
 

src/admin/js/router.js

@@ -50,7 +50,7 @@ const routes = [
       ]
     },
 
-    { path: '/items', name: 'ItemsPage', component: ItemsPage, meta: {title: i18nGet('title_items_page'), icon: 'file-multiple'} },
+    { path: '/items', name: 'ItemsPage', component: ItemsPage, meta: {title: i18nGet('title_items_page'), icon: 'file-multiple', openAdvancedSearch: false} },
     { path: '/items/new', name: 'ItemCreationForm', component: ItemEditionForm, meta: {title: i18nGet('title_create_item'), icon: 'file-multiple'} },
 
     { path: '/filters', name: 'FiltersPage', component: FiltersPage, meta: {title: i18nGet('title_repository_filters_page'), icon: 'filter'} },

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

@@ -44,7 +44,9 @@
                     </button>
                 </p>
             </b-field>
-            <!-- <a class="is-size-7 is-secondary is-pulled-right">Busca avançada</a> -->
+            <a
+                    @click.prevent="openAdvancedSearchComponent"
+                    class="is-size-7 is-secondary is-pulled-right">{{ $i18n.get('advanced_search') }}</a>
 
             <h3 class="has-text-weight-semibold">{{ $i18n.get('filters') }}</h3>
             <a
@@ -242,7 +244,9 @@
 
 
             <!-- ADVANCED SEARCH -->
-            <advanced-search />
+            <advanced-search
+                    v-if="openAdvancedSearch"
+                    :metadata-list="fields" />
 
             <!-- --------------- -->
 
@@ -361,6 +365,10 @@
             enabledViewModes: Object // Used only on theme
         },
         computed: {
+            openAdvancedSearch(){
+                console.log('Called here', this.$route.meta);
+                return this.$route.meta.openAdvancedSearch;
+            },
             items() {
                 return this.getItems();
             },
@@ -428,6 +436,11 @@
                 'getViewMode',
                 'getTotalItems'
             ]),
+            openAdvancedSearchComponent(){
+                console.log('Called here', this.$route.meta);
+                this.$set(this.$route.meta, 'openAdvancedSearch', !this.$route.meta.openAdvancedSearch);
+                console.log('Called here', this.$route.meta);
+            },
             updateSearch() {
                 this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
             },