From d95871e254fe14dd134ecc9f02c1d2987e2a882e Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Wed, 16 Feb 2022 16:21:50 -0300
Subject: [PATCH 1/7] Major Advanced Search refactor #321.

---
 .../class-tainacan-rest-items-controller.php  |  11 +-
 .../edition/metadatum-edition-form.vue        |   2 -
 .../components/navigation/tainacan-header.vue |  67 +-
 .../components/search/advanced-search.vue     | 856 +++++++-----------
 src/views/admin/js/event-bus-search.js        |  13 +-
 .../js/store/modules/collection/actions.js    |   8 +-
 src/views/admin/pages/lists/items-page.vue    | 143 ++-
 src/views/admin/pages/lists/metadata-page.vue |   2 -
 .../theme-search/theme-items-page.vue         |  87 +-
 9 files changed, 442 insertions(+), 747 deletions(-)

diff --git a/src/classes/api/endpoints/class-tainacan-rest-items-controller.php b/src/classes/api/endpoints/class-tainacan-rest-items-controller.php
index 2220cb62d..d725b11ee 100644
--- a/src/classes/api/endpoints/class-tainacan-rest-items-controller.php
+++ b/src/classes/api/endpoints/class-tainacan-rest-items-controller.php
@@ -750,13 +750,12 @@ class REST_Items_Controller extends REST_Controller {
 	private function get_items_permissions_check_for_taxonomy($taxonomies) {
 
 		foreach ($taxonomies as $tax) {
-			if( !isset($tax['taxonomy']) )
-				return false;
-			$taxonomy = \tainacan_taxonomies()->fetch_by_db_identifier( $tax['taxonomy'] );
+			if ( isset($tax['taxonomy']) ) {
+				$taxonomy = \tainacan_taxonomies()->fetch_by_db_identifier( $tax['taxonomy'] );
 
-			if( $taxonomy instanceof Entities\Taxonomy ) {
-				if(!$taxonomy->can_read()) {
-					return false;
+				if ( $taxonomy instanceof Entities\Taxonomy ) {
+					if (!$taxonomy->can_read())
+						return false;
 				}
 			}
 		}
diff --git a/src/views/admin/components/edition/metadatum-edition-form.vue b/src/views/admin/components/edition/metadatum-edition-form.vue
index 34fa74f94..96994206a 100644
--- a/src/views/admin/components/edition/metadatum-edition-form.vue
+++ b/src/views/admin/components/edition/metadatum-edition-form.vue
@@ -429,7 +429,6 @@
                             this.isUpdating = false;
                             this.closedByForm = true;
 
-                            this.$root.$emit('metadatumUpdated', this.isRepositoryLevel);
                             this.$emit('onEditionFinished');
                         })
                         .catch((errors) => {
@@ -468,7 +467,6 @@
                             this.isUpdating = false;
                             this.closedByForm = true;
 
-                            this.$root.$emit('metadatumUpdated', this.isRepositoryLevel);
                             this.$emit('onEditionFinished');
                         })
                         .catch((errors) => {
diff --git a/src/views/admin/components/navigation/tainacan-header.vue b/src/views/admin/components/navigation/tainacan-header.vue
index 78c376a9f..5acd04511 100644
--- a/src/views/admin/components/navigation/tainacan-header.vue
+++ b/src/views/admin/components/navigation/tainacan-header.vue
@@ -59,38 +59,12 @@
                         icon-right="magnify"
                         icon-right-clickable
                         @icon-right-click="updateSearch()" />
-                <b-dropdown
+                <router-link
                         v-if="!$adminOptions.hideTainacanHeaderAdvancedSearch"
-                        ref="advancedSearchShortcut"
-                        class="advanced-search-header-dropdown"
-                        position="is-bottom-left"
-                        aria-role="list"
-                        trap-focus>
-                    <a
-                            class="advanced-search-text"
-                            slot="trigger">
-                        {{ $i18n.get('advanced_search') }}
-                    </a>
-                    <b-dropdown-item aria-role="listitem">
-                        <div :style="{'height': '25px'}">
-                            <p class="is-pulled-left advanced-search-text-di">{{ $i18n.get('advanced_search') }}</p>
-                            <span 
-                                    style="margin-top: 5px; margin-right: -2px;"
-                                    class="icon is-pulled-right">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowup has-text-secondary"/>
-                            </span>
-                        </div>
-                        <hr class="advanced-search-hr">
-                    </b-dropdown-item>
-                    <b-dropdown-item
-                            style="padding-left: 0 !important; padding-right: 0 !important;"
-                            :custom="true"
-                            aria-role="listitem">
-                        <advanced-search
-                                :is-repository-level="true"
-                                :is-header="true"/>
-                    </b-dropdown-item>
-                </b-dropdown>
+                        class="advanced-search-text"
+                        :to="$routerHelper.getItemsPath({ advancedSearch: true })">
+                    {{ $i18n.get('advanced_search') }}
+                </router-link>
 
             </div>
             <button
@@ -130,13 +104,11 @@
 </template>
 
 <script>
-    import AdvancedSearch from '../search/advanced-search.vue';
     import ProcessesPopup from '../other/processes-popup.vue';
 
     export default {
         name: 'TainacanHeader',
         components: {
-            AdvancedSearch,
             ProcessesPopup
         },
         data() {
@@ -150,41 +122,22 @@
             }
         },
         created(){
-            this.$root.$on('closeAdvancedSearchShortcut', () => {
-                if (this.$refs.advancedSearchShortcut)
-                    this.$refs.advancedSearchShortcut.toggle();
-            });
             this.$root.$on('openProcessesPopup', () => {
                 this.showProcesses = true;
             });
         },
         beforeDestroy() {
-            this.$root.$off('closeAdvancedSearchShortcut');
+            this.$root.$off('openProcessesPopup');
         },
         methods: {
-            // toItemsPage() {
-            //     if(this.$route.path == '/items') {
-            //         this.$root.$emit('openAdvancedSearch', true);
-            //     }
-            //
-            //     if(this.$route.path != '/items') {
-            //         this.$router.push({
-            //             path: '/items',
-            //             query: {
-            //                 advancedSearch: true
-            //             }
-            //         });
-            //     }
-            // },
             updateSearch() {
-                if (this.$route.path != '/items') {
+                if (this.$route.path !== '/items') {
                     this.$router.push({
                         path: '/items',
                     });
                 }
-
                 this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
-            },
+            }
         }
     }
 </script>
@@ -273,6 +226,10 @@
                 display: flex;
                 align-items: center;
                 margin-right: 28px;
+                .advanced-search-text {
+                    font-size: 0.75em;
+                    margin-left: 12px;
+                }
                 .control {
                     .search-header {
                         border: 1px solid var(--tainacan-gray2);
diff --git a/src/views/admin/components/search/advanced-search.vue b/src/views/admin/components/search/advanced-search.vue
index 7fc167bf6..7eabba15b 100644
--- a/src/views/admin/components/search/advanced-search.vue
+++ b/src/views/admin/components/search/advanced-search.vue
@@ -1,232 +1,179 @@
 <template>
-    <div>
+    <div class="tnc-advanced-search-container">
+        <transition-group name="filter-item">
+            <b-field
+                    v-for="searchCriterion in searchCriteria"
+                    :key="searchCriterion"
+                    grouped
+                    class="tainacan-form">
+
+                <!-- Metadata (Search criteria) -->
+                <b-field class="column">
+                    <b-select
+                            :loading="isLoadingMetadata"
+                            :placeholder="$i18n.get('instruction_select_a_metadatum')"
+                            :disabled="(advancedSearchQuery.taxquery[searchCriterion] || advancedSearchQuery.metaquery[searchCriterion]) ? true : false"
+                            :value="(
+                                    advancedSearchQuery.metaquery[searchCriterion] ? advancedSearchQuery.metaquery[searchCriterion].key : null
+                                ) || (
+                                    advancedSearchQuery.taxquery[searchCriterion] ? advancedSearchQuery.taxquery[searchCriterion].key : null
+                                )"
+                            @input="addMetadatumToAdvancedSearchQuery(
+                                { 
+                                    metadatumId: $event,
+                                    type: (metadataAsObject[$event] && metadataAsObject[$event].metadata_type_object) ? metadataAsObject[$event].metadata_type_object.primitive_type : '',
+                                    taxonomy: (metadataAsObject[$event] && metadataAsObject[$event].metadata_type_options) ? metadataAsObject[$event].metadata_type_options.taxonomy : ''
+                                }, 
+                                searchCriterion
+                            )">
+                        <template v-for="(metadatum, metadatumIndex) in metadataAsArray">
+                            <option
+                                    v-if="metadatum.metadata_type_object.component !== 'tainacan-user' &&
+                                        metadatum.metadata_type_object.component !== 'tainacan-relationship' &&
+                                        metadatum.metadata_type_object.component !== 'tainacan-compound' &&
+                                        metadatum.parent <= 0"
+                                    :value="metadatum.id"
+                                    :key="metadatumIndex">
+                                {{ metadatum.name }}
+                            </option>
+                            <optgroup
+                                    v-if="metadatum.metadata_type_object.component === 'tainacan-compound'"
+                                    :key="metadatumIndex"
+                                    :label="metadatum.name">
+                                <option
+                                        v-for="(childMetadatum, childIndex) of metadatum.metadata_type_options.children_objects"
+                                        :key="childIndex"
+                                        :value="childMetadatum.id">
+                                    {{ childMetadatum.name }}
+                                </option>
+                            </optgroup>
+                        </template>
+                        <option value="document_content_index-undefined-string">
+                            {{ $i18n.get('label_document') }}
+                        </option>
+                    </b-select>
+                </b-field>
+
+                <!-- Comparators -->
+                <b-field class="column">
+                    <b-select
+                            :loading="isLoadingMetadata"
+                            v-if="advancedSearchQuery.taxquery[searchCriterion] ||
+                                advancedSearchQuery.metaquery[searchCriterion] ? true : false"
+                            @input="addComparatorToAdvancedSearchQuery($event, searchCriterion)"
+                            :value="advancedSearchQuery.taxquery[searchCriterion] ?
+                                advancedSearchQuery.taxquery[searchCriterion].operator :
+                                (advancedSearchQuery.metaquery[searchCriterion] ? advancedSearchQuery.metaquery[searchCriterion].compare : '')">
+
+                        <option 
+                                v-for="(comparator, key) in getComparators(searchCriterion)"
+                                :key="key"
+                                :value="key"
+                        >{{ comparator }}</option>
+                    </b-select>
+                    <b-input
+                            v-else
+                            type="text"
+                            disabled />
+                </b-field>
+
+                <!-- Inputs -->
+                <b-field class="column is-half">
+                    <b-input
+                            v-if="advancedSearchQuery.metaquery[searchCriterion] && getAdvancedSearchQueryCriterionMetadataType(searchCriterion) != 'date'"
+                            :type="(getAdvancedSearchQueryCriterionMetadataType(searchCriterion) == 'int' || getAdvancedSearchQueryCriterionMetadataType(searchCriterion) == 'float') ? 'number' : 'text'"
+                            step="any"
+                            @input="addValueToAdvancedSearchQuery($event, searchCriterion)"
+                            :value="advancedSearchQuery.metaquery[searchCriterion].value"
+                    />
+                    <input
+                            v-else-if="getAdvancedSearchQueryCriterionMetadataType(searchCriterion) == 'date'"
+                            class="input"
+                            :value="parseValidDateToNavigatorLanguage(advancedSearchQuery.metaquery[searchCriterion].value)"
+                            v-mask="dateMask"
+                            @input="addValueToAdvancedSearchQuery($event.target.value, searchCriterion)"
+                            :placeholder="dateFormat" 
+                            type="text" >
+                    <b-input
+                            v-else-if="advancedSearchQuery.taxquery[searchCriterion]"
+                            :value="advancedSearchQuery.taxquery[searchCriterion].terms"
+                            @input="addValueToAdvancedSearchQuery($event, searchCriterion)"
+                            type="text" />
+                    <b-input
+                            v-else
+                            type="text"
+                            disabled />
+                </b-field>
+
+                <div class="field">
+                    <button
+                            @click="removeCriterion(searchCriterion)"
+                            class="button is-white is-pulled-right has-text-secondary">
+                        <span 
+                                v-tooltip="{
+                                    content: $i18n.get('remove_search_criterion'),
+                                    autoHide: true,
+                                    placement: 'auto-end'
+                                }"
+                                class="icon">
+                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-cancel"/>
+                        </span>
+                    </button>
+                </div>
+
+            </b-field>
+        </transition-group>
+
+        <!-- Add button -->
+        <div class="add-link-advanced-search">
+            <a
+                    @click="addSearchCriteria"
+                    style="font-size: 0.75em;">
+                <span class="icon is-small">
+                    <i class="has-text-secondary tainacan-icon tainacan-icon-add"/>
+                </span>
+                {{ searchCriteria.length &lt;= 0 ?
+                    $i18n.get('add_one_search_criterion') :
+                        $i18n.get('add_another_search_criterion')
+                }}
+            </a>
+        </div>
+
+        <!-- Clear and search button -->
+        <div class="field is-grouped is-justify-content-flex-end">
+            <p
+                    v-if="Object.keys(advancedSearchQuery.taxquery).length > 0 || Object.keys(advancedSearchQuery.metaquery).length > 0"
+                    class="control">
+                <button
+                        @click="clearSearch(); performAdvancedSearch();"
+                        class="button is-outlined">{{ $i18n.get('clear_search') }}</button>
+            </p>
+            <p class="control">
+                <button
+                        @click="performAdvancedSearch()"
+                        class="button is-success">{{ $i18n.get('apply') }}</button>
+            </p>
+        </div>
+
         <section
-                :style="{ position: relative }"
-                v-if="!metadata || metadata.length <= 0"
+                v-if="!isLoadingMetadata && metadataAsArray && metadataAsArray.length <= 0"
                 class="field is-grouped-centered section">
-            <b-loading
-                    :is-full-page="false"
-                    :active.sync="metadataIsLoading"/>
-            <div
-                    v-if="!metadataIsLoading"
-                    class="content has-text-gray has-text-centered">
+            <div class="content has-text-gray has-text-centered">
                 <p>
                     <span class="icon is-large">
                         <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
                     </span>
                 </p>
-                <p>{{ isRepositoryLevel ?
-                    $i18n.get('info_there_are_no_metadata_in_repository_level' ) :
-                     $i18n.get('info_there_are_no_metadata_to_search' ) }}</p>
+                <p>
+                    {{ isRepositoryLevel ? $i18n.get('info_there_are_no_metadata_in_repository_level' ) : $i18n.get('info_there_are_no_metadata_to_search' ) }}
+                </p>
             </div>
         </section>
-        <div
-                v-else
-                :style="advancedSearchResults ? { 'padding-top': '0' } : { 'padding-top': '1.25em' }"
-                :class="{ 'padding-in-header': isHeader, 'padding-regular': !isHeader }"
-                class="tnc-advanced-search-container">
 
-            <div
-                    v-show="!advancedSearchResults"
-                    v-for="searchCriterion in searchCriteria"
-                    :key="searchCriterion"
-                    class="field is-12 tainacan-form">
-
-                <b-field
-                        class="columns"
-                        grouped>
-
-                    <!-- Metadata (Search criteria) -->
-                    <b-field
-                            :class="{'is-3': isHeader}"
-                            class="column">
-                        <b-select
-                                :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 : undefined)"
-                                @input="addToAdvancedSearchQuery($event, 'metadatum', searchCriterion)">
-                            <template v-for="(metadatum, metadatumIndex) in metadata">
-                                <option
-                                        v-if="metadatum.metadata_type_object.component !== 'tainacan-user' && metadatum.metadata_type_object.component !== 'tainacan-relationship' && metadatum.metadata_type_object.component !== 'tainacan-compound' && metadatum.parent <= 0"
-                                        :value="`${metadatum.id}-${metadatum.metadata_type_options.taxonomy}-${metadatum.metadata_type_object.primitive_type}`"
-                                        :key="metadatumIndex">
-                                    {{ metadatum.name }}
-                                </option>
-                                <optgroup
-                                        v-if="metadatum.metadata_type_object.component === 'tainacan-compound'"
-                                        :key="metadatumIndex"
-                                        :label="metadatum.name">
-                                    <option
-                                            v-for="(childMetadatum, childIndex) of metadatum.metadata_type_options.children_objects"
-                                            :key="childIndex"
-                                            :value="`${childMetadatum.id}-${childMetadatum.metadata_type_options.taxonomy}-${childMetadatum.metadata_type_object.primitive_type}`">
-                                        {{ childMetadatum.name }}
-                                    </option>
-                                </optgroup>
-                            </template>
-                            <option value="document_content_index-undefined-string">
-                                {{ $i18n.get('label_document') }}
-                            </option>
-                        </b-select>
-                    </b-field>
-
-                    <!-- Inputs -->
-                    <b-field
-                            :class="{'is-half': !isHeader}"
-                            class="column">
-                        <b-input
-                                v-if="advancedSearchQuery.metaquery[searchCriterion] &&
-                                    advancedSearchQuery.metaquery[searchCriterion].ptype != 'date'"
-                                :type="advancedSearchQuery.metaquery[searchCriterion].ptype == 'int' ||
-                                    advancedSearchQuery.metaquery[searchCriterion].ptype == 'float' ? 'number' : 'text'"
-                                step="any"
-                                @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="parseValidDateToNavigatorLanguage(advancedSearchQuery.metaquery[searchCriterion].value)"
-                                v-mask="dateMask"
-                                @focus="addValueToAdvancedSearchQueryWithoutDelay($event, '', searchCriterion)"
-                                @input="addValueToAdvancedSearchQueryWithoutDelay($event, 'value', searchCriterion)"
-                                :placeholder="dateFormat" 
-                                type="text" >
-                        <b-input
-                                v-else-if="advancedSearchQuery.taxquery[searchCriterion]"
-                                :value="advancedSearchQuery.taxquery[searchCriterion].terms"
-                                @input="addValueToAdvancedSearchQuery($event, 'term_value', searchCriterion)"
-                                type="text" />
-                        <b-input
-                                v-else
-                                type="text"
-                                disabled />
-                    </b-field>
-
-                    <!-- Comparators -->
-                    <b-field
-                            :class="{'is-3': isHeader}"
-                            class="column">
-                        <b-select
-                                v-if="advancedSearchQuery.taxquery[searchCriterion] ||
-                                    advancedSearchQuery.metaquery[searchCriterion] ? true : false"
-                                @input="addToAdvancedSearchQuery($event, 'comparator', searchCriterion)"
-                                :value="advancedSearchQuery.taxquery[searchCriterion] ?
-                                    advancedSearchQuery.taxquery[searchCriterion].operator :
-                                    (advancedSearchQuery.metaquery[searchCriterion] ? advancedSearchQuery.metaquery[searchCriterion].compare : '')">
-
-                            <option 
-                                    v-for="(comparator, key) in getComparators(searchCriterion)"
-                                    :key="key"
-                                    :value="key"
-                            >{{ comparator }}</option>
-                        </b-select>
-                        <b-input
-                                v-else
-                                type="text"
-                                disabled />
-                    </b-field>
-
-                    <div class="field">
-                        <button
-                                @click="removeThis(searchCriterion)"
-                                :class="{'has-text-blue4': isHeader, 'has-text-secondary': !isHeader,}"
-                                class="button is-white is-pulled-right">
-                            <span 
-                                    v-tooltip="{
-                                        content: $i18n.get('remove_search_criterion'),
-                                        autoHide: true,
-                                        placement: 'auto-end'
-                                    }"
-                                    class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-close"/>
-                            </span>
-                        </button>
-                    </div>
-                </b-field>
-
-            </div>
-
-            <!-- Add button -->
-            <div
-                    v-show="!advancedSearchResults"
-                    :class="{'add-link-advanced-search-header': isHeader, 'add-link-advanced-search': !isHeader }"
-                    class="field column is-12">
-                <a
-                        @click="addSearchCriteria"
-                        style="font-size: 0.75em;">
-                    <span class="icon is-small">
-                        <i class="has-text-secondary tainacan-icon tainacan-icon-add"/>
-                    </span>
-                    {{ searchCriteria.length &lt;= 0 ?
-                        $i18n.get('add_one_search_criterion') :
-                         $i18n.get('add_another_search_criterion')
-                    }}
-                </a>
-            </div>
-
-            <!-- Tags -->
-            <div
-                    v-show="advancedSearchResults"
-                    class="column is-12">
-                <b-field 
-                        grouped
-                        group-multiline>
-                    <div 
-                            v-for="searchCriterion in searchCriteria"
-                            :key="searchCriterion"
-                            class="control taginput-container">
-                        <b-tag
-                                v-if="advancedSearchQuery.taxquery[searchCriterion] && advancedSearchQuery.taxquery[searchCriterion].terms"
-                                type="is-white"
-                                class="is-rounded"
-                                @close="removeThis(searchCriterion); searchAdvanced();"
-                                attached 
-                                closable>
-                                {{ advancedSearchQuery.taxquery[searchCriterion].terms }}
-                        </b-tag>
-                        <b-tag 
-                                v-else-if="advancedSearchQuery.metaquery[searchCriterion] && advancedSearchQuery.metaquery[searchCriterion].value"
-                                type="is-white"
-                                class="is-rounded"
-                                @close="removeThis(searchCriterion); searchAdvanced();"
-                                attached
-                                :loading="isFetching" 
-                                closable>
-                                {{ advancedSearchQuery.metaquery[searchCriterion].value }}
-                        </b-tag>
-                    </div>
-                </b-field>
-            </div>
-
-            <!-- Clear and search button -->
-            <div v-show="!advancedSearchResults">
-                <div class="field is-grouped is-pulled-right">
-                    <p
-                            v-if="Object.keys(advancedSearchQuery.taxquery).length > 0 ||
-                             Object.keys(advancedSearchQuery.metaquery).length > 0"
-                            class="control">
-                        <button
-                                @click="clearSearch"
-                                class="button is-outlined">{{ $i18n.get('clear_search') }}</button>
-                    </p>
-                    <p class="control">
-                        <button
-                                @click="searchAdvanced"
-                                class="button is-success">{{ $i18n.get('search') }}</button>
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
+</div>
 </template>
 
 <script>
-
     import { mapActions } from 'vuex';
     import { dateInter } from '../../js/mixins.js';
     import moment from 'moment';
@@ -236,10 +183,7 @@
         mixins: [ dateInter ],
         props: {
             isRepositoryLevel: false,
-            isHeader: false,
-            advancedSearchResults: false,
-            openFormAdvancedSearch: false,
-            isDoingSearch: false,
+            hasAdvancedSearchResults: false,
             collectionId: ''
         },
         data() {
@@ -268,54 +212,14 @@
                     metaquery: {},
                     taxquery: {}
                 },
-                metadataIsLoading: false,
-                metadata: [],
+                isLoadingMetadata: false,
+                metadataAsObject: {},
+                metadataAsArray: [],
                 metadataSearchCancel: undefined
             }
         },
-        watch: {
-            isDoingSearch() {
-                if (this.isDoingSearch)
-                    this.searchAdvanced();
-            }
-        },
-        mounted() {
-            
-            this.$root.$on('metadatumUpdated', (isRepositoryLevel) => {
-
-                if (isRepositoryLevel) {
-                    this.metadataIsLoading = true;
-
-                    // Cancels previous Request
-                    if (this.metadataSearchCancel != undefined)
-                        this.metadataSearchCancel.cancel('Metadata search Canceled.');
-
-                    this.fetchMetadata({
-                        collectionId: this.isRepositoryLevel ? false : this.collectionId,
-                        isRepositoryLevel: this.isRepositoryLevel,
-                        isContextEdit: false,
-                        includeDisabled: false,
-                        isAdvancedSearch: true,
-                        parent: 'any'
-                    }).then((resp) => {
-                            resp.request
-                                .then((metadata) => {
-                                    this.metadata = metadata;
-                                    this.metadataIsLoading = false;
-                                }).catch(() => {
-                                    this.metadataIsLoading = false;
-                                });
-
-                                // Search Request Token for cancelling
-                                this.metadataSearchCancel = resp.source;
-                        })
-                        .catch(() => this.metadataIsLoading = false);  
-                }
-            });
-        },
         created() {
-
-            this.metadataIsLoading = true;
+            this.isLoadingMetadata = true;
 
             this.fetchMetadata({
                 collectionId: this.isRepositoryLevel ? false : this.collectionId,
@@ -327,67 +231,26 @@
             }).then((resp) => {
                     resp.request
                         .then((metadata) => {
-                            this.metadata = metadata;
-                            this.metadataIsLoading = false;
+                            // We create and object keyed by IDs to easily match the query params,
+                            // but keep an array version to use the order in the select
+                            this.metadataAsArray = metadata;
+                            metadata.forEach(metadatum => {
+                                this.metadataAsObject[metadatum.id] = metadatum;
+                            });
+
+                            // Search Request Token for cancelling
+                            this.metadataSearchCancel = resp.source;
+
+                            this.buildAdvancedSearchQueryFromRoute();
+
+                            this.isLoadingMetadata = false;
                         }).catch(() => {
-                            this.metadataIsLoading = false;
+                            this.isLoadingMetadata = false;
                         });
-
-                        // Search Request Token for cancelling
-                        this.metadataSearchCancel = resp.source;
                 })
-                .catch(() => this.metadataIsLoading = false);  
-
-            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) => element == 'relation');
-
-                if (relationIndex != -1)
-                    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) => element == 'relation');
-
-                if (relationIndex != -1) 
-                    keys.splice(relationIndex, 1);
-
-                for (let k of keys)
-                    this.searchCriteria.push(k);
-            }
-
-            // If we're coming from a preset advanced search, execute it!
-            if (this.searchCriteria.length && !this.isHeader) {
-                this.$eventBusSearch.updateStoreFromURL();
-                this.searchAdvanced();
-            }
+                .catch(() => this.isLoadingMetadata = false);  
         },
         beforeDestroy() {
-            this.$root.$off('metadatumUpdated');
-
             // Cancels previous Request
             if (this.metadataSearchCancel != undefined)
                 this.metadataSearchCancel.cancel('Metadata search Canceled.');
@@ -401,25 +264,77 @@
                 if (this.advancedSearchQuery.taxquery[searchCriterion]) {
                     return this.taxqueryOperators;
                 } else if (this.advancedSearchQuery.metaquery[searchCriterion]) {
-                    if (this.advancedSearchQuery.metaquery[searchCriterion].ptype == 'int' ||
-                    this.advancedSearchQuery.metaquery[searchCriterion].ptype == 'float' ||
-                    this.advancedSearchQuery.metaquery[searchCriterion].ptype == 'date') {
+                    const metadataType = this.getAdvancedSearchQueryCriterionMetadataType(searchCriterion);
+                    if (metadataType == 'date' || metadataType == 'int' || metadataType == 'float')
                         return this.metaqueryOperatorsForInterval;
-                    } else{
+                    else
                         return this.metaqueryOperatorsRegular;
-                    }
                 }
             },
-            removeThis(searchCriterion) {
-                let criteriaIndex = this.searchCriteria.findIndex((element) => element == searchCriterion);
+            buildAdvancedSearchQueryFromRoute() {
+                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 = [];
+                }
 
-                this.searchCriteria.splice(criteriaIndex, 1);
+                if (this.$route.query.metaquery && Object.keys(this.$route.query.metaquery).length > 0) {
+
+                    let metaquery = this.$route.query.metaquery;
+
+                    for (let meta in metaquery) {
+                        if ( this.metaqueryOperatorsRegular.hasOwnProperty(metaquery[meta]['operator']) || this.metaqueryOperatorsForInterval.hasOwnProperty(metaquery[meta]['operator']) )
+                            this.$set(this.advancedSearchQuery.metaquery, `${meta}`, metaquery[meta]);
+                    }
+
+                    let metakeys = Object.keys(this.advancedSearchQuery.metaquery);
+
+                    let relationIndex = metakeys.findIndex((element) => element == 'relation');
+
+                    if (relationIndex != -1)
+                        metakeys.splice(relationIndex, 1);
+
+                    for (let metakey of metakeys)
+                        this.searchCriteria.push(metakey);
+
+                }
+
+                if (this.$route.query.taxquery && Object.keys(this.$route.query.taxquery).length > 0) {
+                    let taxquery = this.$route.query.taxquery;
+
+                    for (let tax in taxquery) {
+                        if ( this.taxqueryOperators.hasOwnProperty(taxquery[tax]['operator']) )
+                            this.$set(this.advancedSearchQuery.taxquery, `${tax}`, taxquery[tax]);
+                    }
+
+                    let taxkeys = Object.keys(this.advancedSearchQuery.taxquery);
+
+                    let relationIndex = taxkeys.findIndex((element) => element == 'relation');
+
+                    if (relationIndex != -1) 
+                        taxkeys.splice(relationIndex, 1);
+
+                    for (let taxkey of taxkeys)
+                        this.searchCriteria.push(taxkey);
+                }
+
+                // If we're coming from a preset advanced search, execute it!
+                if (this.searchCriteria.length) {
+                    this.$eventBusSearch.updateStoreFromURL();
+                    this.performAdvancedSearch();
+                }
+            },
+            removeCriterion(searchCriterion) {
+                let criteriaIndex = this.searchCriteria.findIndex((element) => element == searchCriterion);
+                
+                if (criteriaIndex >= 0)
+                    this.searchCriteria.splice(criteriaIndex, 1);
 
                 if (this.advancedSearchQuery.taxquery[searchCriterion])
                     delete this.advancedSearchQuery.taxquery[searchCriterion];
                 else if (this.advancedSearchQuery.metaquery[searchCriterion])
                     delete this.advancedSearchQuery.metaquery[searchCriterion];
-
             },
             addSearchCriteria() {
                 let aleatoryKey = Math.floor(Math.random() * (1000 - 2 + 1)) + 2;
@@ -442,34 +357,72 @@
             convertDateToMatchInDB(dateValue) {
                 return moment(dateValue,  this.dateFormat).toISOString().split('T')[0];
             },
-            addValueToAdvancedSearchQueryWithoutDelay($event, type, searchCriterion) {
-                if (type == '') {
-                    this.$set($event.target, 'value', '');
-                    this.addToAdvancedSearchQuery('', 'value', searchCriterion);
-                } else {               
-                    this.addToAdvancedSearchQuery($event.target.value, type, searchCriterion);
-                }
+            parseValidDateToNavigatorLanguage(date) {
+                if (date && date.length === this.dateMask.length)
+                    return (
+                        moment(date, this.dateFormat).toISOString(true) &&
+                        moment(date, this.dateFormat).toISOString(true).split('T') &&
+                        moment(date, this.dateFormat).toISOString(true).split('T')[0]
+                    ) ? this.parseDateToNavigatorLanguage(moment(date, this.dateFormat).toISOString(true).split('T')[0]) : this.parseDateToNavigatorLanguage(date);
+                else
+                    return date;
             },
-            addValueToAdvancedSearchQuery: _.debounce(function(value, type, searchCriterion) {
-                this.addToAdvancedSearchQuery(value, type, searchCriterion);
-            }, 900),
-            searchAdvanced() {
-
-                if (this.isHeader) {
-                    this.$root.$emit('closeAdvancedSearchShortcut', true);
-
-                    if (this.$route.path == '/items')
-                        this.$root.$emit('openAdvancedSearch', true);
-
-                    if (this.$route.path != '/items') {
-                        this.$router.push({
-                            path: '/items',
+            addMetadatumToAdvancedSearchQuery({ metadatumId, type, taxonomy }, index) {
+                if (!metadatumId)
+                    return;
+                    
+                if (type === 'term') {
+                    // Was selected a taxonomy criteria      
+                    this.advancedSearchQuery.taxquery = Object.assign({}, this.advancedSearchQuery.taxquery, {
+                        [`${index}`]: {
+                            key: metadatumId,
+                            taxonomy: taxonomy,
+                            operator: 'LIKE'
+                        }
+                    });
+                } else {
+                    // Was selected a metadatum criteria
+                    if (type != 'date' && type != 'int' && type != 'float') {
+                        this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
+                            [`${index}`]: {
+                                key: metadatumId,
+                                compare: 'LIKE'
+                            }
+                        });
+                    } else {
+                        this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
+                            [`${index}`]: {
+                                key: metadatumId,
+                                compare: '='
+                            }
                         });
                     }
                 }
+            },
+            addValueToAdvancedSearchQuery(value, index) {
+                if (!value)
+                    return;
 
-                if (Object.keys(this.advancedSearchQuery.taxquery).length > 0 &&
-                    Object.keys(this.advancedSearchQuery.metaquery).length > 0) {
+                if (this.advancedSearchQuery.metaquery[index])
+                    this.$set(this.advancedSearchQuery.metaquery[index], 'value', value);
+                else if (this.advancedSearchQuery.taxquery[index])
+                    this.$set(this.advancedSearchQuery.taxquery[index], 'terms', value);
+            },
+            addComparatorToAdvancedSearchQuery(comparator, index) {
+                if (!comparator)
+                    return;
+
+                if (this.advancedSearchQuery.metaquery[index])
+                    this.$set(this.advancedSearchQuery.metaquery[index], 'compare', comparator);
+                else if (this.advancedSearchQuery.taxquery[index])
+                    this.$set(this.advancedSearchQuery.taxquery[index], 'operator', comparator);
+            },
+            performAdvancedSearch() {
+                
+                if (
+                    Object.keys(this.advancedSearchQuery.taxquery).length > 0 &&
+                    Object.keys(this.advancedSearchQuery.metaquery).length > 0
+                ) {
                     this.advancedSearchQuery.relation = 'AND';
                 } 
 
@@ -482,7 +435,7 @@
                 if (Object.keys(this.advancedSearchQuery.metaquery).length > 0) {
 
                     for (let metaquery in this.advancedSearchQuery.metaquery) {
-                        if (this.advancedSearchQuery.metaquery[metaquery].ptype == 'date') {
+                        if (this.getAdvancedSearchQueryCriterionMetadataType(metaquery) == 'date') {
                             let value = this.advancedSearchQuery.metaquery[metaquery].value;
                             
                             if (value.includes('/'))
@@ -498,82 +451,32 @@
                 
                 if (this.advancedSearchQuery.hasOwnProperty('relation') && Object.keys(this.advancedSearchQuery).length <= 3)
                     delete this.advancedSearchQuery.relation;
-
                 
                 if (Object.keys(this.advancedSearchQuery.metaquery).length > 0) {
 
                     for (let metaquery in this.advancedSearchQuery.metaquery) {
-                        if (this.advancedSearchQuery.metaquery[metaquery].ptype == 'date') {
+                        if (this.getAdvancedSearchQueryCriterionMetadataType(metaquery) == 'date') {
                             let value = this.advancedSearchQuery.metaquery[metaquery].value;
                             
-                            setTimeout(() => {
-                                if (value.includes('-'))
-                                    this.$set(this.advancedSearchQuery.metaquery[metaquery], 'value', this.parseValidDateToNavigatorLanguage(value));
-                            }, 200);
+                            if (value.includes('-'))
+                                this.$set(this.advancedSearchQuery.metaquery[metaquery], 'value', this.parseValidDateToNavigatorLanguage(value));
                         }
                     }
                 }
 
-                this.$eventBusSearch.$emit('searchAdvanced', this.advancedSearchQuery);
-                
+                this.$eventBusSearch.$emit('performAdvancedSearch', this.advancedSearchQuery);
             },
-            parseValidDateToNavigatorLanguage(date) {
-                if (date && date.length === this.dateMask.length) {
-                    return (moment(date, this.dateFormat).toISOString() && moment(date, this.dateFormat).toISOString().split('T') && moment(date, this.dateFormat).toISOString().split('T')[0]) ? this.parseDateToNavigatorLanguage(moment(date, this.dateFormat).toISOString().split('T')[0]) : this.parseDateToNavigatorLanguage(date);
-                } else
-                    return date;
-            },
-            addToAdvancedSearchQuery(value, type, searchCriterion) {
-                if (!value)
-                    return;
-
-                if (type == 'metadatum') {
-                    const criteriaKey = value.split('-');
-                    
-                    if (criteriaKey[1] != 'undefined') {
-                        // Was selected a taxonomy criteria      
-                        this.advancedSearchQuery.taxquery = Object.assign({}, this.advancedSearchQuery.taxquery, {
-                            [`${searchCriterion}`]: {
-                                taxonomy: criteriaKey[1],
-                                operator: 'LIKE',
-                                originalMeta: value,
-                                taxonomy_id: Number(criteriaKey[1].match(/[\d]+/)),
-                                isFetching: 0,
-                            }
-                        });
-                    } else {
-                        // Was selected a metadatum criteria
-                        if (criteriaKey[2] != 'date' && criteriaKey[2] != 'int' && criteriaKey[2] != 'float') {
-                            this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
-                                [`${searchCriterion}`]: {
-                                    key: criteriaKey[0],
-                                    compare: 'LIKE',
-                                    originalMeta: value,
-                                }
-                            });
-                        } else {
-                            this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
-                                [`${searchCriterion}`]: {
-                                    key: Number(criteriaKey[0]),
-                                    compare: '=',
-                                    originalMeta: value,
-                                }
-                            });
-                        }
-
-                        this.$set(this.advancedSearchQuery.metaquery[searchCriterion], 'ptype', criteriaKey[2]);
-                    }
-                } else if (type == "term_value") {
-                    this.$set(this.advancedSearchQuery.taxquery[searchCriterion], 'terms', value);
-                } else if (type == 'value') {
-                    this.$set(this.advancedSearchQuery.metaquery[searchCriterion], 'value', value);
-                } else if (type == 'comparator') {
-                    if (this.advancedSearchQuery.taxquery[searchCriterion])
-                        this.$set(this.advancedSearchQuery.taxquery[searchCriterion], 'operator', value);
-                    else if (this.advancedSearchQuery.metaquery[searchCriterion])
-                        this.$set(this.advancedSearchQuery.metaquery[searchCriterion], 'compare', value);
+            getAdvancedSearchQueryCriterionMetadataType(searchCriterion) {
+                if (this.advancedSearchQuery.metaquery[searchCriterion] &&
+                    this.advancedSearchQuery.metaquery[searchCriterion].key &&
+                    this.metadataAsObject[this.advancedSearchQuery.metaquery[searchCriterion].key] &&
+                    this.metadataAsObject[this.advancedSearchQuery.metaquery[searchCriterion].key].metadata_type_object
+                ) {
+                    return this.metadataAsObject[this.advancedSearchQuery.metaquery[searchCriterion].key].metadata_type_object.primitive_type
                 }
-            },
+
+                return '';
+            }
         }
     }
 </script>
@@ -581,23 +484,16 @@
 <style lang="scss">
 
     #advanced-search-container {
-        width: 100%;
-    }
-
-    .loading-overlay {
-        min-height: 200px;
-    }
-
-    .padding-in-header {
-        padding: 1.5em;
-    }
-
-    .padding-regular {
-        padding-right: var(--tainacan-one-column);
-        padding-left: var(--tainacan-one-column);
+        width: calc(100% - (2 * var(--tainacan-one-column)));
+        margin: 0.5em var(--tainacan-one-column) 0.875em;
+        background: var(--tainacan-input-background-color);
+        border: 1px solid var(--tainacan-input-border-color);
+        border-radius: 1px;
     }
 
     .tnc-advanced-search-container {
+        padding: 1em;
+        padding-top: 3.5em;
 
         .column {
             padding: 0 0.5em 0.75em !important;
@@ -613,32 +509,10 @@
             }
         }
 
-        .taginput-container {
-            min-height: 32px !important;
-
-            .tags {
-                margin-bottom: calc(0.275em - 1px) !important;
-
-                .tag {
-                    height: 2em !important;
-                    padding-left: 0.75em !important;
-                    padding-right: 0.75em !important;
-                    margin-right: 0 !important;
-                }
-            }
-        }
-
         .add-link-advanced-search {
-            margin-top: -15px !important;
             padding-left: 8px !important;
         }
 
-        .add-link-advanced-search-header {
-            margin-top: -20px !important;
-            padding: 0 !important;
-            margin-left: -5px !important;
-        }
-
         @media screen and (max-width: 768px) {
             .is-12>.columns {
                 flex-wrap: wrap;
@@ -651,82 +525,4 @@
 
     }
 
-    .advanced-search-header-dropdown {
-        height: 27px !important;
-
-        a, .has-text-secondary {
-            color: var(--tainacan-blue4) !important;
-        }
-
-        .select:not(.is-multiple)::after {
-            color: var(--tainacan-blue3) !important;
-
-            option:checked, option:hover {
-                background-color: var(--tainacan-gray2) !important;
-            }
-        }
-
-        .dropdown-content {
-            font-size: 1.15em;
-            width: 800px !important;
-            padding-bottom: 1.25em !important;
-        }
-
-        .field.is-grouped .field.column {
-            margin-bottom: 0;
-        }
-        .field.is-grouped .field + .field {
-            margin-left: 0.25em;
-        }
-
-        .autocomplete {
-            .dropdown-menu {
-                top: auto !important;
-                min-width: 100% !important;
-
-                .dropdown-content {
-                    width: auto !important;
-                }
-            }
-        }
-        .dropdown-item {
-            padding: 0.375em 1.5em !important;
-        }
-        .dropdown-item:hover {
-            background-color: unset !important;
-        }
-
-        @media screen and (min-width: 1087px) {
-            .dropdown-menu {
-                top: -2px !important;
-            }
-        }
-
-        .dropdown-item {
-            span.icon:not(.is-right) {
-                position: relative !important;
-            }
-        }
-
-        .advanced-search-text {
-            margin: 0 12px;
-            font-size: 0.75em;
-            color: var(--tainacan-gray5);
-        }
-
-        .advanced-search-text-di {
-            font-size: 1em;
-            font-weight: 500;
-            color: var(--tainacan-gray5);
-            margin-top: 5px;
-        }
-
-        .advanced-search-hr {
-            height: 1px;
-            margin: 4px 0;
-            background-color: var(--tainacan-blue3);
-            width: 100%;
-        }
-    }
-
 </style>
\ No newline at end of file
diff --git a/src/views/admin/js/event-bus-search.js b/src/views/admin/js/event-bus-search.js
index 47d945e81..5e9ef28c6 100644
--- a/src/views/admin/js/event-bus-search.js
+++ b/src/views/admin/js/event-bus-search.js
@@ -26,12 +26,12 @@ export default {
                 this.$root.$on('closeAdvancedSearch', () => {
                     this.$store.dispatch('search/setPage', 1);
                     
-                    this.searchAdvanced({});
+                    this.performAdvancedSearch({});
                 });
 
-                this.$root.$on('searchAdvanced', advancedSearchQuery => {
+                this.$root.$on('performAdvancedSearch', advancedSearchQuery => {
                     this.$store.dispatch('search/setPage', 1);
-                    this.searchAdvanced(advancedSearchQuery);
+                    this.performAdvancedSearch(advancedSearchQuery);
 
                     this.updateURLQueries();
                 });
@@ -177,7 +177,7 @@ export default {
                 }
             },
             methods: {
-                searchAdvanced(data) {
+                performAdvancedSearch(data) {
                     this.$store.dispatch('search/set_advanced_query', data);
                     this.updateURLQueries();
                 },
@@ -385,9 +385,8 @@ export default {
                                 this.$emit( 'isLoadingItems', false);
                                 this.$emit( 'hasFiltered', res.hasFiltered);
 
-                                if (res.advancedSearchResults){
-                                    this.$emit('advancedSearchResults', res.advancedSearchResults);
-                                }
+                                if (res.hasAdvancedSearchResults)
+                                    this.$emit('hasAdvancedSearchResults', res.hasAdvancedSearchResults);
                             })
                             .catch(() => {
                                 this.$emit( 'isLoadingItems', false);
diff --git a/src/views/admin/js/store/modules/collection/actions.js b/src/views/admin/js/store/modules/collection/actions.js
index 59a1d1550..3175a4703 100644
--- a/src/views/admin/js/store/modules/collection/actions.js
+++ b/src/views/admin/js/store/modules/collection/actions.js
@@ -25,7 +25,7 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
 
             // Sets a flag to inform components that an empty sate is or not due to filtering
             let hasFiltered = false;
-            let advancedSearchResults = false;
+            let hasAdvancedSearchResults = false;
             
             // We mark as filtered if there is a metaquery, taxquery or a postin
             if ( 
@@ -43,7 +43,7 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
                 hasFiltered = true;
                         
                 if (postQueries.advancedSearch)
-                    advancedSearchResults = postQueries.advancedSearch;
+                    hasAdvancedSearchResults = postQueries.advancedSearch;
             }
 
             // Admin default tab should load publish, private and draft statuses
@@ -93,7 +93,7 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
                             'itemsListTemplate': res.data.template, 
                             'total': res.headers['x-wp-total'], 
                             hasFiltered: hasFiltered, 
-                            advancedSearchResults:  advancedSearchResults,
+                            hasAdvancedSearchResults:  hasAdvancedSearchResults,
                             itemsPerPage: res.headers['x-wp-itemperpage']});
                     } else {
                         commit('setItems', items);
@@ -102,7 +102,7 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
                             'total': res.headers['x-wp-total'],
                             totalPages: res.headers['x-wp-totalpages'], 
                             hasFiltered: hasFiltered, 
-                            advancedSearchResults: advancedSearchResults ,
+                            hasAdvancedSearchResults: hasAdvancedSearchResults ,
                             itemsPerPage: res.headers['x-wp-itemperpage'] });                            
                     }
                     dispatch('search/setTotalItems', res.headers['x-wp-total'], { root: true } );
diff --git a/src/views/admin/pages/lists/items-page.vue b/src/views/admin/pages/lists/items-page.vue
index 80e1befc8..7764f0068 100644
--- a/src/views/admin/pages/lists/items-page.vue
+++ b/src/views/admin/pages/lists/items-page.vue
@@ -9,27 +9,8 @@
 
         <!-- PAGE TITLE --------------------- -->
         <tainacan-title
-                v-if="!$adminOptions.hideItemsListPageTitle && !openAdvancedSearch" 
+                v-if="!$adminOptions.hideItemsListPageTitle" 
                 :bread-crumb-items="[{ path: '', label: this.$i18n.get('items') }]"/>
-        <div 
-                v-else-if="openAdvancedSearch"
-                class="tnc-advanced-search-close"> 
-            <div class="advanced-search-criteria-title">
-                <div class="is-flex">
-                    <h1>{{ $i18n.get('info_search_criteria') }}</h1>
-                    <div
-                            :style="{'margin-bottom': 'auto'}"
-                            class="field is-grouped">
-                        <a 
-                                class="back-link"
-                                @click="openAdvancedSearch = false">
-                            {{ $i18n.get('back') }}
-                        </a>
-                    </div>
-                </div>
-                <hr>
-            </div>
-        </div>
 
         <!-- SEARCH CONTROL ------------------------- -->
         <h3 
@@ -41,7 +22,6 @@
                 aria-labelledby="search-control-landmark"
                 role="region"
                 ref="search-control"
-                v-if="((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch)"
                 class="search-control"  
                 :style="( $adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || $adminOptions.itemsSearchSelectionMode ) ? '--tainacan-container-padding: 6px;' : ''">
 
@@ -75,9 +55,7 @@
             </button>
 
             <!-- Text simple search -->
-            <div 
-                    v-if="!openAdvancedSearch"
-                    class="search-control-item">
+            <div class="search-control-item">
                 <div 
                         role="search"
                         class="search-area">
@@ -95,15 +73,19 @@
                     <a
                             v-if="!$adminOptions.hideItemsListAdvancedSearch"
                             @click="openAdvancedSearch = !openAdvancedSearch; $eventBusSearch.clearAllFilters();"
-                            style="font-size: 0.75em;"
-                            class="has-text-secondary is-pulled-right">{{ $i18n.get('advanced_search') }}</a>
+                            class="advanced-search-toggle has-text-secondary"
+                            :class="openAdvancedSearch ? 'is-open' : 'is-closed'">
+                        {{ $i18n.get('advanced_search') }}
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-search" />
+                        </span>
+                    </a>
                 </div>
             </div>
 
             <!-- Item Creation Dropdown (or button, if few options are available) -->
             <div 
                     v-if="!$adminOptions.hideItemsListCreationDropdown &&
-                            !openAdvancedSearch &&
                             collection && 
                             collection.current_user_can_edit_items"
                     class="search-control-item">
@@ -478,41 +460,22 @@
                 @mousemove="handleMouseMoveOverList">
 
             <!-- ADVANCED SEARCH -->
-            <div
-                    id="advanced-search-container"
-                    role="search"
-                    v-if="openAdvancedSearch">
-                
-                <advanced-search
-                        :collection-id="collectionId"
-                        :is-repository-level="isRepositoryLevel"
-                        :advanced-search-results="advancedSearchResults"
-                        :open-form-advanced-search="openFormAdvancedSearch"
-                        :is-doing-search="isDoingSearch"/>
-
-                <div class="advanced-search-form-submit">
-                    <p
-                            v-if="advancedSearchResults"
-                            class="control">
-                        <button
-                                aria-controls="items-list-results"
-                                @click="advancedSearchResults = !advancedSearchResults"
-                                class="button is-outlined">{{ $i18n.get('edit_search') }}</button>
-                    </p>
-                    <p
-                            v-if="advancedSearchResults"
-                            class="control">
-                        <button
-                                aria-controls="items-list-results"
-                                @click="isDoingSearch = !isDoingSearch"
-                                class="button is-success">{{ $i18n.get('search') }}</button>
-                    </p>
+            <transition name="item-appear">
+                <div
+                        id="advanced-search-container"
+                        role="search"
+                        v-if="openAdvancedSearch">
+                    
+                    <advanced-search
+                            :collection-id="collectionId"
+                            :is-repository-level="isRepositoryLevel"
+                            :has-advanced-search-results="hasAdvancedSearchResults" />
                 </div>
-            </div>
+            </transition>
 
             <!-- STATUS TABS, only on Admin -------- -->
             <items-status-tabs 
-                    v-if="!openAdvancedSearch && !$adminOptions.hideItemsListStatusTabs"
+                    v-if="!$adminOptions.hideItemsListStatusTabs"
                     :is-repository-level="isRepositoryLevel"/>
 
             <!-- FILTERS TAG LIST-->
@@ -557,7 +520,7 @@
                         v-if="hasAnOpenAlert &&
                             isSortingByCustomMetadata &&
                             !showLoading &&
-                            ((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch)"
+                            ((openAdvancedSearch && hasAdvancedSearchResults) || !openAdvancedSearch)"
                         class="metadata-alert">
                     <p class="text">
                         {{ 
@@ -584,7 +547,7 @@
                 <items-list
                         v-if="!showLoading &&
                               totalItems > 0 &&
-                              ((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch)"
+                              ((openAdvancedSearch && hasAdvancedSearchResults) || !openAdvancedSearch)"
                         :collection-id="collectionId"
                         :displayed-metadata="displayedMetadata"
                         :items="items"
@@ -634,7 +597,7 @@
                 <div ref="items-pagination">
                     <pagination
                             :is-sorting-by-custom-metadata="isSortingByCustomMetadata"
-                            v-if="totalItems > 0 && (advancedSearchResults || !openAdvancedSearch)"/>
+                            v-if="totalItems > 0 && (hasAdvancedSearchResults || !openAdvancedSearch)"/>
                 </div>
             </div>
         </div>
@@ -679,9 +642,7 @@
                 localDisplayedMetadata: [],
                 registeredViewModes: tainacan_plugin.registered_view_modes,
                 openAdvancedSearch: false,
-                openFormAdvancedSearch: false,
-                advancedSearchResults: false,
-                isDoingSearch: false,
+                hasAdvancedSearchResults: false,
                 sortingMetadata: [],
                 isFiltersModalActive: false,
                 hasAnOpenModal: false,
@@ -746,7 +707,7 @@
             openAdvancedSearch(newValue) {
                 if (newValue == false){
                     this.$eventBusSearch.$emit('closeAdvancedSearch');
-                    this.advancedSearchResults = false;
+                    this.hasAdvancedSearchResults = false;
                     this.isFiltersModalActive = true;
                 } else {
                     this.isFiltersModalActive = false;
@@ -790,8 +751,8 @@
                 this.hasFiltered = hasFiltered;
             });
 
-            this.$eventBusSearch.$on('advancedSearchResults', advancedSearchResults => {
-                this.advancedSearchResults = advancedSearchResults;
+            this.$eventBusSearch.$on('hasAdvancedSearchResults', hasAdvancedSearchResults => {
+                this.hasAdvancedSearchResults = hasAdvancedSearchResults;
             });
 
             this.$eventBusSearch.$on('hasToPrepareMetadataAndFilters', () => {
@@ -1327,7 +1288,7 @@
                 // $eventBusSearch
                 this.$eventBusSearch.$off('isLoadingItems');
                 this.$eventBusSearch.$off('hasFiltered');
-                this.$eventBusSearch.$off('advancedSearchResults');
+                this.$eventBusSearch.$off('hasAdvancedSearchResults');
                 this.$eventBusSearch.$off('hasToPrepareMetadataAndFilters');
             }
         }
@@ -1373,7 +1334,7 @@
         }
     }
 
-    .advanced-search-results-title {
+    .has-advanced-search-results-title {
         margin-bottom: 40px;
         margin: 0 var(--tainacan-one-column) 42px var(--tainacan-one-column);
 
@@ -1516,7 +1477,7 @@
                 opacity: 1;
             }
 
-            .search-area .is-pulled-right {
+            .search-area .advanced-search-toggle {
                 display: none;
             }
         }
@@ -1538,7 +1499,7 @@
                         padding-right: 0;
                         max-width: 100% !important;
                     }
-                    .is-pulled-right {
+                    .advanced-search-toggle.is-closed {
                         position: relative;
                         right: 0px !important;
                     }
@@ -1627,15 +1588,43 @@
                     width: 100%;
                     margin-bottom: 5px;
                 }
-                .is-pulled-right {
-                    position: absolute;
-                    right: 15px;
-                    top: 100%;
-                }
-                a {
+                a.advanced-search-toggle {
                     margin-left: 12px;
                     white-space: nowrap; 
+                    position: absolute;
+                    transition: font-size 0.2s ease, right 0.3s ease, left 0.3s ease, top 0.4s ease;
+                    
+                    .icon {
+                        transition: opacity 0.2s ease, max-width 0.2s ease;                            
+                    }
+
+                    &.is-closed {
+                        font-size: 0.75em;
+                        right: 15px;
+                        left: unset;
+                        top: 100%;
+
+                        .icon {
+                            display: 0;
+                            opacity: 0.0;
+                            max-width: 0;
+                        }
+                    }
+                    &.is-open {
+                        font-size: 1em;
+                        right: unset;
+                        left: 15px;
+                        top: 6.125em;
+                        z-index: 9;
+
+                        .icon {
+                            display: inline;
+                            opacity: 1.0;
+                            max-width: 1.5em;
+                        }
+                    }
                 }
+                
             }
 
         }
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index 9cf65cea0..8893eaeed 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -560,8 +560,6 @@ export default {
                             .then(() => {
                                 if (!this.isRepositoryLevel)
                                     this.updateMetadataOrder();
-                                else 
-                                    this.$root.$emit('metadatumUpdated', this.isRepositoryLevel);
                             })
                             .catch(() => {
                                 this.$console.log("Error deleting metadatum.")
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
index dede25134..00f14baa3 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
@@ -8,57 +8,6 @@
                 'is-fullscreen': registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen
             }"
             aria-live="polite">
-        
-        <!-- ADVANCED SEARCH -->
-        <div 
-                id="advanced-search-container"
-                role="search"
-                v-if="openAdvancedSearch && !hideAdvancedSearch">
-
-            <div class="tnc-advanced-search-close"> 
-                <div class="advanced-search-criteria-title">
-                    <div class="is-flex">
-                        <h1>{{ $i18n.get('info_search_criteria') }}</h1>
-                        <div
-                                :style="{'margin-bottom': 'auto'}"
-                                class="field is-grouped">
-                            <a
-                                    class="back-link"
-                                    @click="openAdvancedSearch = false">
-                                {{ $i18n.get('back') }}
-                            </a>
-                        </div>
-                    </div>
-                    <hr>
-                </div>
-            </div>
-
-            <advanced-search
-                    :is-repository-level="isRepositoryLevel"
-                    :collection-id="collectionId"
-                    :advanced-search-results="advancedSearchResults"
-                    :open-form-advanced-search="openFormAdvancedSearch"
-                    :is-doing-search="isDoingSearch"/>
-
-            <div class="advanced-search-form-submit">
-                <p
-                        v-if="advancedSearchResults"
-                        class="control">
-                    <button
-                            aria-controls="items-list-results"
-                            @click="advancedSearchResults = !advancedSearchResults"
-                            class="button is-outlined">{{ $i18n.get('edit_search') }}</button>
-                </p>
-                <p
-                        v-if="advancedSearchResults"
-                        class="control">
-                    <button
-                            aria-controls="items-list-results"
-                            @click="isDoingSearch = !isDoingSearch"
-                            class="button is-success">{{ $i18n.get('search') }}</button>
-                </p>
-            </div>
-        </div>
 
         <!-- SEARCH CONTROL ------------------------- -->
         <h3 
@@ -70,7 +19,7 @@
                 :aria-label="$i18n.get('label_sort_visualization')"
                 role="region"
                 ref="search-control"
-                v-if="!(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen) && ((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch)"
+                v-if="!(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen)"
                 class="search-control">
 
             <!-- <b-loading
@@ -433,6 +382,18 @@
                 ref="items-list-area"
                 class="items-list-area">
 
+            <!-- ADVANCED SEARCH -->
+            <div 
+                    id="advanced-search-container"
+                    role="search"
+                    v-if="openAdvancedSearch && !hideAdvancedSearch">
+
+                <advanced-search
+                        :is-repository-level="isRepositoryLevel"
+                        :collection-id="collectionId"
+                        :has-advanced-search-results="hasAdvancedSearchResults" />
+            </div>
+
             <!-- FILTERS TAG LIST-->
             <filters-tags-list
                     class="filter-tags-list"
@@ -484,7 +445,7 @@
                         v-if="hasAnOpenAlert &&
                             isSortingByCustomMetadata &&
                             !showLoading &&
-                            ((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch)"
+                            ((openAdvancedSearch && hasAdvancedSearchResults) || !openAdvancedSearch)"
                         class="metadata-alert">
                     <p class="text">
                         {{ 
@@ -509,7 +470,7 @@
                        
                 <!-- Theme View Modes -->
                 <div 
-                        v-if="((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch) &&
+                        v-if="((openAdvancedSearch && hasAdvancedSearchResults) || !openAdvancedSearch) &&
                               !showLoading &&
                               registeredViewModes[viewMode] != undefined &&
                               registeredViewModes[viewMode].type == 'template'"
@@ -518,7 +479,7 @@
                 <component
                         v-if="registeredViewModes[viewMode] != undefined &&
                               registeredViewModes[viewMode].type == 'component' &&
-                              ((openAdvancedSearch && advancedSearchResults) || !openAdvancedSearch)"
+                              ((openAdvancedSearch && hasAdvancedSearchResults) || !openAdvancedSearch)"
                         :collection-id="collectionId"
                         :displayed-metadata="displayedMetadata" 
                         :items="items"
@@ -535,7 +496,7 @@
                         :is-sorting-by-custom-metadata="isSortingByCustomMetadata"
                         v-if="totalItems > 0 &&
                             ((registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].show_pagination)) &&
-                            (advancedSearchResults || !openAdvancedSearch)"
+                            (hasAdvancedSearchResults || !openAdvancedSearch)"
                         :hide-items-per-page-button="hideItemsPerPageButton"
                         :hide-go-to-page-button="hideGoToPageButton"/>
 
@@ -613,9 +574,7 @@
                 localDisplayedMetadata: [],
                 registeredViewModes: tainacan_plugin.registered_view_modes,
                 openAdvancedSearch: false,
-                openFormAdvancedSearch: false,
-                advancedSearchResults: false,
-                isDoingSearch: false,
+                hasAdvancedSearchResults: false,
                 sortingMetadata: [],
                 isFiltersModalActive: false,
                 hasAnOpenModal: false,
@@ -681,7 +640,7 @@
             openAdvancedSearch(newValue){
                 if (newValue == false){
                     this.$eventBusSearch.$emit('closeAdvancedSearch');
-                    this.advancedSearchResults = false;
+                    this.hasAdvancedSearchResults = false;
                     this.isFiltersModalActive = !this.startWithFiltersHidden;
                 } else {
                     this.isFiltersModalActive = false;
@@ -739,8 +698,8 @@
             });
             
             if (!this.hideAdvancedSearch) {
-                this.$eventBusSearch.$on('advancedSearchResults', advancedSearchResults => {
-                    this.advancedSearchResults = advancedSearchResults;
+                this.$eventBusSearch.$on('hasAdvancedSearchResults', hasAdvancedSearchResults => {
+                    this.hasAdvancedSearchResults = hasAdvancedSearchResults;
                 });
 
                 if (this.$route.query && this.$route.query.advancedSearch) {
@@ -1209,7 +1168,7 @@
                 this.$eventBusSearch.$off('isLoadingItems');
                 this.$eventBusSearch.$off('hasFiltered');
                 if (!this.hideAdvancedSearch)
-                    this.$eventBusSearch.$off('advancedSearchResults');
+                    this.$eventBusSearch.$off('hasAdvancedSearchResults');
                 this.$eventBusSearch.$off('hasToPrepareMetadataAndFilters');
 
             },
@@ -1279,7 +1238,7 @@
         }
     }
 
-    .advanced-search-results-title {
+    .has-advanced-search-results-title {
         margin-bottom: 40px;
         margin: 0 var(--tainacan-one-column) 42px var(--tainacan-one-column);
 

From 2acbe38d51f12322649b03401c030591374d0928 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 18 Feb 2022 13:39:44 -0300
Subject: [PATCH 2/7] Moreee tests with advanced search

---
 .../components/search/advanced-search.vue     | 185 +++++++++++-------
 1 file changed, 113 insertions(+), 72 deletions(-)

diff --git a/src/views/admin/components/search/advanced-search.vue b/src/views/admin/components/search/advanced-search.vue
index 7eabba15b..0f84d28b7 100644
--- a/src/views/admin/components/search/advanced-search.vue
+++ b/src/views/admin/components/search/advanced-search.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="tnc-advanced-search-container">
-        <transition-group name="filter-item">
+        <!-- <transition-group name="filter-item"> -->
             <b-field
-                    v-for="searchCriterion in searchCriteria"
-                    :key="searchCriterion"
+                    v-for="(searchCriterion, index) in searchCriteria"
+                    :key="index + '-' + searchCriterion.index + '-' + searchCriterion.type"
                     grouped
                     class="tainacan-form">
 
@@ -12,19 +12,16 @@
                     <b-select
                             :loading="isLoadingMetadata"
                             :placeholder="$i18n.get('instruction_select_a_metadatum')"
-                            :disabled="(advancedSearchQuery.taxquery[searchCriterion] || advancedSearchQuery.metaquery[searchCriterion]) ? true : false"
-                            :value="(
-                                    advancedSearchQuery.metaquery[searchCriterion] ? advancedSearchQuery.metaquery[searchCriterion].key : null
-                                ) || (
-                                    advancedSearchQuery.taxquery[searchCriterion] ? advancedSearchQuery.taxquery[searchCriterion].key : null
-                                )"
+                            :disabled="advancedSearchQuery[searchCriterion.type] && advancedSearchQuery[searchCriterion.type][searchCriterion.index]"
+                            :value="(advancedSearchQuery[searchCriterion.type] && advancedSearchQuery[searchCriterion.type][searchCriterion.index] ) ? advancedSearchQuery[searchCriterion.type][searchCriterion.index].key : null"
                             @input="addMetadatumToAdvancedSearchQuery(
                                 { 
                                     metadatumId: $event,
                                     type: (metadataAsObject[$event] && metadataAsObject[$event].metadata_type_object) ? metadataAsObject[$event].metadata_type_object.primitive_type : '',
                                     taxonomy: (metadataAsObject[$event] && metadataAsObject[$event].metadata_type_options) ? metadataAsObject[$event].metadata_type_options.taxonomy : ''
                                 }, 
-                                searchCriterion
+                                searchCriterion,
+                                index
                             )">
                         <template v-for="(metadatum, metadatumIndex) in metadataAsArray">
                             <option
@@ -58,13 +55,20 @@
                 <b-field class="column">
                     <b-select
                             :loading="isLoadingMetadata"
-                            v-if="advancedSearchQuery.taxquery[searchCriterion] ||
-                                advancedSearchQuery.metaquery[searchCriterion] ? true : false"
+                            v-if="searchCriterion.type == 'metaquery' && advancedSearchQuery.metaquery[searchCriterion.index]"
                             @input="addComparatorToAdvancedSearchQuery($event, searchCriterion)"
-                            :value="advancedSearchQuery.taxquery[searchCriterion] ?
-                                advancedSearchQuery.taxquery[searchCriterion].operator :
-                                (advancedSearchQuery.metaquery[searchCriterion] ? advancedSearchQuery.metaquery[searchCriterion].compare : '')">
-
+                            :value="advancedSearchQuery.metaquery[searchCriterion.index].compare">
+                        <option 
+                                v-for="(comparator, key) in getComparators(searchCriterion)"
+                                :key="key"
+                                :value="key"
+                        >{{ comparator }}</option>
+                    </b-select>
+                    <b-select
+                            :loading="isLoadingMetadata"
+                            v-else-if="searchCriterion.type == 'taxquery' && advancedSearchQuery.taxquery[searchCriterion.index]"
+                            @input="addComparatorToAdvancedSearchQuery($event, searchCriterion)"
+                            :value="advancedSearchQuery.taxquery[searchCriterion.index].operator">
                         <option 
                                 v-for="(comparator, key) in getComparators(searchCriterion)"
                                 :key="key"
@@ -80,23 +84,23 @@
                 <!-- Inputs -->
                 <b-field class="column is-half">
                     <b-input
-                            v-if="advancedSearchQuery.metaquery[searchCriterion] && getAdvancedSearchQueryCriterionMetadataType(searchCriterion) != 'date'"
-                            :type="(getAdvancedSearchQueryCriterionMetadataType(searchCriterion) == 'int' || getAdvancedSearchQueryCriterionMetadataType(searchCriterion) == 'float') ? 'number' : 'text'"
+                            v-if="searchCriterion.type == 'metaquery' && advancedSearchQuery.metaquery[searchCriterion.index] && getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) != 'date'"
+                            :type="(getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'int' || getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'float') ? 'number' : 'text'"
                             step="any"
                             @input="addValueToAdvancedSearchQuery($event, searchCriterion)"
-                            :value="advancedSearchQuery.metaquery[searchCriterion].value"
+                            :value="advancedSearchQuery.metaquery[searchCriterion.index].value"
                     />
                     <input
-                            v-else-if="getAdvancedSearchQueryCriterionMetadataType(searchCriterion) == 'date'"
+                            v-else-if="searchCriterion.type == 'metaquery' && getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'date'"
                             class="input"
-                            :value="parseValidDateToNavigatorLanguage(advancedSearchQuery.metaquery[searchCriterion].value)"
+                            :value="parseValidDateToNavigatorLanguage(advancedSearchQuery.metaquery[searchCriterion.index].value)"
                             v-mask="dateMask"
                             @input="addValueToAdvancedSearchQuery($event.target.value, searchCriterion)"
                             :placeholder="dateFormat" 
                             type="text" >
                     <b-input
-                            v-else-if="advancedSearchQuery.taxquery[searchCriterion]"
-                            :value="advancedSearchQuery.taxquery[searchCriterion].terms"
+                            v-else-if="searchCriterion.type == 'taxquery' && advancedSearchQuery.taxquery[searchCriterion.index]"
+                            :value="advancedSearchQuery.taxquery[searchCriterion.index].terms"
                             @input="addValueToAdvancedSearchQuery($event, searchCriterion)"
                             type="text" />
                     <b-input
@@ -122,7 +126,7 @@
                 </div>
 
             </b-field>
-        </transition-group>
+        <!-- </transition-group> -->
 
         <!-- Add button -->
         <div class="add-link-advanced-search">
@@ -206,11 +210,11 @@
                     'LIKE': this.$i18n.get('contains'),
                     'NOT LIKE': this.$i18n.get('not_contains')
                 },
-                searchCriteria: [1],
+                searchCriteria: [],
                 advancedSearchQuery: {
                     advancedSearch: true,
-                    metaquery: {},
-                    taxquery: {}
+                    metaquery: [],
+                    taxquery: []
                 },
                 isLoadingMetadata: false,
                 metadataAsObject: {},
@@ -261,10 +265,10 @@
                 'fetchMetadata'
             ]),
             getComparators(searchCriterion) {
-                if (this.advancedSearchQuery.taxquery[searchCriterion]) {
+                if (searchCriterion.type == 'taxquery' && this.advancedSearchQuery.taxquery[searchCriterion.index]) {
                     return this.taxqueryOperators;
-                } else if (this.advancedSearchQuery.metaquery[searchCriterion]) {
-                    const metadataType = this.getAdvancedSearchQueryCriterionMetadataType(searchCriterion);
+                } else if (searchCriterion.type == 'metaquery' && this.advancedSearchQuery.metaquery[searchCriterion.index]) {
+                    const metadataType = this.getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index);
                     if (metadataType == 'date' || metadataType == 'int' || metadataType == 'float')
                         return this.metaqueryOperatorsForInterval;
                     else
@@ -296,7 +300,7 @@
                         metakeys.splice(relationIndex, 1);
 
                     for (let metakey of metakeys)
-                        this.searchCriteria.push(metakey);
+                        this.searchCriteria.push({ index: metakey, type: 'metaquery' });
 
                 }
 
@@ -316,7 +320,7 @@
                         taxkeys.splice(relationIndex, 1);
 
                     for (let taxkey of taxkeys)
-                        this.searchCriteria.push(taxkey);
+                        this.searchCriteria.push({ index: taxkey, type: 'taxquery' });
                 }
 
                 // If we're coming from a preset advanced search, execute it!
@@ -326,32 +330,62 @@
                 }
             },
             removeCriterion(searchCriterion) {
-                let criteriaIndex = this.searchCriteria.findIndex((element) => element == searchCriterion);
+                let searchCriterionIndex = this.searchCriteria.findIndex((element) => element.index == searchCriterion.index && element.type == searchCriterion.type);
                 
-                if (criteriaIndex >= 0)
-                    this.searchCriteria.splice(criteriaIndex, 1);
+                if (searchCriterionIndex >= 0) {
+                    console.log('----------------')
+                    console.log(JSON.parse(JSON.stringify(this.searchCriteria)), JSON.parse(JSON.stringify(this.advancedSearchQuery)), searchCriterionIndex, searchCriterion.index);
+                    
+                    this.advancedSearchQuery[searchCriterion.type].splice(searchCriterion.index, 1);
+                    this.searchCriteria.splice(searchCriterionIndex, 1);
 
-                if (this.advancedSearchQuery.taxquery[searchCriterion])
-                    delete this.advancedSearchQuery.taxquery[searchCriterion];
-                else if (this.advancedSearchQuery.metaquery[searchCriterion])
-                    delete this.advancedSearchQuery.metaquery[searchCriterion];
+                    console.log(JSON.parse(JSON.stringify(this.searchCriteria)), JSON.parse(JSON.stringify(this.advancedSearchQuery)))
+                    for (let queryIndex = 0; queryIndex <= this.advancedSearchQuery.metaquery.length; queryIndex++) {
+                        
+                        let isCriterionIntexUpdated = false;
+                        let expectedIndex = queryIndex;
+                        while(!isCriterionIntexUpdated) {
+                            if (this.searchCriteria[expectedIndex].type == 'metaquery') {
+                                this.searchCriteria[expectedIndex].index = queryIndex;
+                                isCriterionIntexUpdated = true;
+                            } else {
+                                expectedIndex++;
+                            }
+                        }
+                    }
+                    for (let queryIndex = 0; queryIndex <= this.advancedSearchQuery.taxquery.length; queryIndex++) {
+                        
+                        let isCriterionIntexUpdated = false;
+                        let expectedIndex = queryIndex;
+                        while(!isCriterionIntexUpdated) {
+                            if (this.searchCriteria[expectedIndex].type == 'taxquery') {
+                                this.searchCriteria[expectedIndex].index = queryIndex;
+                                isCriterionIntexUpdated = true;
+                            } else {
+                                expectedIndex++;
+                            }
+                        }
+                }
+                    console.log(JSON.parse(JSON.stringify(this.searchCriteria)))
+                    console.log('------------------------')
+                }
             },
             addSearchCriteria() {
                 let aleatoryKey = Math.floor(Math.random() * (1000 - 2 + 1)) + 2;
 
-                let found = this.searchCriteria.find((element) => element == aleatoryKey);
+                let existingKeyIndex = this.searchCriteria.findIndex((element) => element.index == aleatoryKey);
 
-                if (found == undefined)
-                    this.searchCriteria.push(aleatoryKey);
+                if (existingKeyIndex < 0)
+                    this.searchCriteria.push({ index: aleatoryKey, type: undefined });
                 else
                     this.addSearchCriteria();
             },
             clearSearch() {
-                this.searchCriteria = [1];
+                this.searchCriteria = [];
                 this.advancedSearchQuery = {
                     advancedSearch: true,
-                    metaquery: {},
-                    taxquery: {}
+                    metaquery: [],
+                    taxquery: []
                 };
             },
             convertDateToMatchInDB(dateValue) {
@@ -367,55 +401,62 @@
                 else
                     return date;
             },
-            addMetadatumToAdvancedSearchQuery({ metadatumId, type, taxonomy }, index) {
+            addMetadatumToAdvancedSearchQuery({ metadatumId, type, taxonomy }, searchCriterion, index) {
                 if (!metadatumId)
                     return;
                     
                 if (type === 'term') {
+                    
+                    // Convert fake placeholder criterion row to a tax row
+                    let totalOfTaxCriteria = this.searchCriteria.reduce((counter, { type }) => type === 'taxquery' ? counter += 1 : counter, 0);
+                    this.$set(this.searchCriteria[index], 'type', 'taxquery');
+                    this.$set(this.searchCriteria[index], 'index', totalOfTaxCriteria);
+
                     // Was selected a taxonomy criteria      
-                    this.advancedSearchQuery.taxquery = Object.assign({}, this.advancedSearchQuery.taxquery, {
-                        [`${index}`]: {
-                            key: metadatumId,
-                            taxonomy: taxonomy,
-                            operator: 'LIKE'
-                        }
+                    this.advancedSearchQuery.taxquery.push({
+                        key: metadatumId,
+                        taxonomy: taxonomy,
+                        operator: 'LIKE'
                     });
                 } else {
+
+                    // Convert fake placeholder criterion row to a meta row
+                    let totalOfMetaCriteria = this.searchCriteria.reduce((counter, { type }) => type === 'metaquery' ? counter += 1 : counter, 0);
+                    this.$set(this.searchCriteria[index], 'type', 'metaquery');
+                    this.$set(this.searchCriteria[index], 'index', totalOfMetaCriteria);
+
                     // Was selected a metadatum criteria
                     if (type != 'date' && type != 'int' && type != 'float') {
-                        this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
-                            [`${index}`]: {
-                                key: metadatumId,
-                                compare: 'LIKE'
-                            }
+                        this.advancedSearchQuery.metaquery.push({
+                            key: metadatumId,
+                            compare: 'LIKE'
                         });
                     } else {
-                        this.advancedSearchQuery.metaquery = Object.assign({}, this.advancedSearchQuery.metaquery, {
-                            [`${index}`]: {
-                                key: metadatumId,
-                                compare: '='
-                            }
+                        this.advancedSearchQuery.metaquery.push({
+                            key: metadatumId,
+                            compare: '='
                         });
                     }
                 }
+                console.log(this.searchCriteria, this.advancedSearchQuery)
             },
-            addValueToAdvancedSearchQuery(value, index) {
+            addValueToAdvancedSearchQuery(value, searchCriterion) {
                 if (!value)
                     return;
 
-                if (this.advancedSearchQuery.metaquery[index])
-                    this.$set(this.advancedSearchQuery.metaquery[index], 'value', value);
-                else if (this.advancedSearchQuery.taxquery[index])
-                    this.$set(this.advancedSearchQuery.taxquery[index], 'terms', value);
+                if (searchCriterion.type == 'metaquery' && this.advancedSearchQuery.metaquery[searchCriterion.index])
+                    this.$set(this.advancedSearchQuery.metaquery[searchCriterion.index], 'value', value);
+                else if (searchCriterion.type == 'taxquery' && this.advancedSearchQuery.taxquery[searchCriterion.index])
+                    this.$set(this.advancedSearchQuery.taxquery[searchCriterion.index], 'terms', value);
             },
-            addComparatorToAdvancedSearchQuery(comparator, index) {
+            addComparatorToAdvancedSearchQuery(comparator, searchCriterion) {
                 if (!comparator)
                     return;
 
-                if (this.advancedSearchQuery.metaquery[index])
-                    this.$set(this.advancedSearchQuery.metaquery[index], 'compare', comparator);
-                else if (this.advancedSearchQuery.taxquery[index])
-                    this.$set(this.advancedSearchQuery.taxquery[index], 'operator', comparator);
+                if (searchCriterion.type == 'metaquery' && this.advancedSearchQuery.metaquery[searchCriterion.index])
+                    this.$set(this.advancedSearchQuery.metaquery[searchCriterion.index], 'compare', comparator);
+                else if (searchCriterion.type == 'taxquery' && this.advancedSearchQuery.taxquery[searchCriterion.index])
+                    this.$set(this.advancedSearchQuery.taxquery[searchCriterion.index], 'operator', comparator);
             },
             performAdvancedSearch() {
                 

From 955dabb9df45422aff8a2f7fde428ef2d279020f Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 18 Feb 2022 15:23:22 -0300
Subject: [PATCH 3/7] Fixes removal of criterions using new indexes strategy.

---
 .../components/search/advanced-search.vue     | 38 ++++++++-----------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/views/admin/components/search/advanced-search.vue b/src/views/admin/components/search/advanced-search.vue
index 0f84d28b7..cda228d8f 100644
--- a/src/views/admin/components/search/advanced-search.vue
+++ b/src/views/admin/components/search/advanced-search.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="tnc-advanced-search-container">
-        <!-- <transition-group name="filter-item"> -->
+        <transition-group name="filter-item">
             <b-field
                     v-for="(searchCriterion, index) in searchCriteria"
                     :key="index + '-' + searchCriterion.index + '-' + searchCriterion.type"
@@ -126,7 +126,7 @@
                 </div>
 
             </b-field>
-        <!-- </transition-group> -->
+        </transition-group>
 
         <!-- Add button -->
         <div class="add-link-advanced-search">
@@ -333,41 +333,34 @@
                 let searchCriterionIndex = this.searchCriteria.findIndex((element) => element.index == searchCriterion.index && element.type == searchCriterion.type);
                 
                 if (searchCriterionIndex >= 0) {
-                    console.log('----------------')
-                    console.log(JSON.parse(JSON.stringify(this.searchCriteria)), JSON.parse(JSON.stringify(this.advancedSearchQuery)), searchCriterionIndex, searchCriterion.index);
                     
                     this.advancedSearchQuery[searchCriterion.type].splice(searchCriterion.index, 1);
                     this.searchCriteria.splice(searchCriterionIndex, 1);
 
-                    console.log(JSON.parse(JSON.stringify(this.searchCriteria)), JSON.parse(JSON.stringify(this.advancedSearchQuery)))
-                    for (let queryIndex = 0; queryIndex <= this.advancedSearchQuery.metaquery.length; queryIndex++) {
-                        
-                        let isCriterionIntexUpdated = false;
+                    for (let queryIndex = 0; queryIndex < this.advancedSearchQuery.metaquery.length; queryIndex++) { 
+                        let isCriterionIndexUpdated = false;
                         let expectedIndex = queryIndex;
-                        while(!isCriterionIntexUpdated) {
-                            if (this.searchCriteria[expectedIndex].type == 'metaquery') {
-                                this.searchCriteria[expectedIndex].index = queryIndex;
-                                isCriterionIntexUpdated = true;
+                        while(!isCriterionIndexUpdated && expectedIndex < this.searchCriteria.length) {
+                            if (this.searchCriteria[expectedIndex] && this.searchCriteria[expectedIndex].type == 'metaquery') {
+                                this.$set(this.searchCriteria[expectedIndex], 'index', queryIndex);
+                                isCriterionIndexUpdated = true;
                             } else {
                                 expectedIndex++;
                             }
                         }
                     }
-                    for (let queryIndex = 0; queryIndex <= this.advancedSearchQuery.taxquery.length; queryIndex++) {
-                        
-                        let isCriterionIntexUpdated = false;
+                    for (let queryIndex = 0; queryIndex < this.advancedSearchQuery.taxquery.length; queryIndex++) {
+                        let isCriterionIndexUpdated = false;
                         let expectedIndex = queryIndex;
-                        while(!isCriterionIntexUpdated) {
-                            if (this.searchCriteria[expectedIndex].type == 'taxquery') {
-                                this.searchCriteria[expectedIndex].index = queryIndex;
-                                isCriterionIntexUpdated = true;
+                        while(!isCriterionIndexUpdated && expectedIndex < this.searchCriteria.length) {
+                            if (this.searchCriteria[expectedIndex] && this.searchCriteria[expectedIndex].type == 'taxquery') {
+                                this.$set(this.searchCriteria[expectedIndex], 'index', queryIndex);
+                                isCriterionIndexUpdated = true;
                             } else {
                                 expectedIndex++;
                             }
                         }
-                }
-                    console.log(JSON.parse(JSON.stringify(this.searchCriteria)))
-                    console.log('------------------------')
+                    }
                 }
             },
             addSearchCriteria() {
@@ -438,7 +431,6 @@
                         });
                     }
                 }
-                console.log(this.searchCriteria, this.advancedSearchQuery)
             },
             addValueToAdvancedSearchQuery(value, searchCriterion) {
                 if (!value)

From 88d6304069b101135f23e7c1e4b4cb0da4822041 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 18 Feb 2022 15:49:43 -0300
Subject: [PATCH 4/7] Change value of the document search in advanced search
 options. #321

---
 src/views/admin/components/search/advanced-search.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/views/admin/components/search/advanced-search.vue b/src/views/admin/components/search/advanced-search.vue
index cda228d8f..c41d98db6 100644
--- a/src/views/admin/components/search/advanced-search.vue
+++ b/src/views/admin/components/search/advanced-search.vue
@@ -45,7 +45,7 @@
                                 </option>
                             </optgroup>
                         </template>
-                        <option value="document_content_index-undefined-string">
+                        <option value="document_content_index">
                             {{ $i18n.get('label_document') }}
                         </option>
                     </b-select>
@@ -245,6 +245,7 @@
                             // Search Request Token for cancelling
                             this.metadataSearchCancel = resp.source;
 
+                            // Loads existing search query
                             this.buildAdvancedSearchQueryFromRoute();
 
                             this.isLoadingMetadata = false;
@@ -323,10 +324,13 @@
                         this.searchCriteria.push({ index: taxkey, type: 'taxquery' });
                 }
 
-                // If we're coming from a preset advanced search, execute it!
+                // If we're coming from a preset advanced search, execute it,
+                // otherwise, create an empty row.
                 if (this.searchCriteria.length) {
                     this.$eventBusSearch.updateStoreFromURL();
                     this.performAdvancedSearch();
+                } else {
+                    this.addSearchCriteria();
                 }
             },
             removeCriterion(searchCriterion) {

From cdf0d062ae6a6b8c47470f7a82c33fad4af686a9 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 22 Feb 2022 16:25:04 -0300
Subject: [PATCH 5/7] Usability improvements to advanced search panel. #321.

---
 .../components/search/advanced-search.vue     | 145 +++++++++------
 src/views/admin/js/event-bus-search.js        |   3 -
 .../js/store/modules/collection/actions.js    |  10 +-
 src/views/admin/pages/lists/items-page.vue    | 106 ++---------
 .../theme-search/theme-items-page.vue         | 172 ++++++------------
 .../blocks/faceted-search/theme.vue           |   1 +
 src/views/tainacan-i18n.php                   |   2 +
 7 files changed, 163 insertions(+), 276 deletions(-)

diff --git a/src/views/admin/components/search/advanced-search.vue b/src/views/admin/components/search/advanced-search.vue
index c41d98db6..b830b8ee8 100644
--- a/src/views/admin/components/search/advanced-search.vue
+++ b/src/views/admin/components/search/advanced-search.vue
@@ -1,5 +1,8 @@
 <template>
-    <div class="tnc-advanced-search-container">
+    <div 
+            tabindex="0"
+            class="tnc-advanced-search-container">
+        <h3>{{ $i18n.get('advanced_search') }}</h3>
         <transition-group name="filter-item">
             <b-field
                     v-for="(searchCriterion, index) in searchCriteria"
@@ -130,10 +133,8 @@
 
         <!-- Add button -->
         <div class="add-link-advanced-search">
-            <a
-                    @click="addSearchCriteria"
-                    style="font-size: 0.75em;">
-                <span class="icon is-small">
+            <a @click="addSearchCriteria">
+                <span class="icon">
                     <i class="has-text-secondary tainacan-icon tainacan-icon-add"/>
                 </span>
                 {{ searchCriteria.length &lt;= 0 ?
@@ -141,24 +142,36 @@
                         $i18n.get('add_another_search_criterion')
                 }}
             </a>
+            <a
+                    v-if="Object.keys(advancedSearchQuery.taxquery).length > 0 || Object.keys(advancedSearchQuery.metaquery).length > 0"
+                    @click="clearSearch();">
+                <span class="icon">
+                    <i class="has-text-secondary tainacan-icon tainacan-icon-remove"/>
+                </span>
+                {{ $i18n.get('label_remove_all_criteria') }}
+            </a>
         </div>
 
         <!-- Clear and search button -->
         <div class="field is-grouped is-justify-content-flex-end">
-            <p
-                    v-if="Object.keys(advancedSearchQuery.taxquery).length > 0 || Object.keys(advancedSearchQuery.metaquery).length > 0"
-                    class="control">
+            <p class="control">
                 <button
-                        @click="clearSearch(); performAdvancedSearch();"
-                        class="button is-outlined">{{ $i18n.get('clear_search') }}</button>
+                        @click="$emit('close')"
+                        class="button is-outlined">
+                    {{ $i18n.get('label_close_search') }}
+                </button>
             </p>
             <p class="control">
                 <button
                         @click="performAdvancedSearch()"
-                        class="button is-success">{{ $i18n.get('apply') }}</button>
+                        class="button is-secondary">
+                    {{ $i18n.get('apply') }}
+                </button>
             </p>
         </div>
-
+        <b-loading 
+                :is-full-page="false" 
+                :active.sync="isLoadingMetadata" />
         <section
                 v-if="!isLoadingMetadata && metadataAsArray && metadataAsArray.length <= 0"
                 class="field is-grouped-centered section">
@@ -187,7 +200,6 @@
         mixins: [ dateInter ],
         props: {
             isRepositoryLevel: false,
-            hasAdvancedSearchResults: false,
             collectionId: ''
         },
         data() {
@@ -333,40 +345,6 @@
                     this.addSearchCriteria();
                 }
             },
-            removeCriterion(searchCriterion) {
-                let searchCriterionIndex = this.searchCriteria.findIndex((element) => element.index == searchCriterion.index && element.type == searchCriterion.type);
-                
-                if (searchCriterionIndex >= 0) {
-                    
-                    this.advancedSearchQuery[searchCriterion.type].splice(searchCriterion.index, 1);
-                    this.searchCriteria.splice(searchCriterionIndex, 1);
-
-                    for (let queryIndex = 0; queryIndex < this.advancedSearchQuery.metaquery.length; queryIndex++) { 
-                        let isCriterionIndexUpdated = false;
-                        let expectedIndex = queryIndex;
-                        while(!isCriterionIndexUpdated && expectedIndex < this.searchCriteria.length) {
-                            if (this.searchCriteria[expectedIndex] && this.searchCriteria[expectedIndex].type == 'metaquery') {
-                                this.$set(this.searchCriteria[expectedIndex], 'index', queryIndex);
-                                isCriterionIndexUpdated = true;
-                            } else {
-                                expectedIndex++;
-                            }
-                        }
-                    }
-                    for (let queryIndex = 0; queryIndex < this.advancedSearchQuery.taxquery.length; queryIndex++) {
-                        let isCriterionIndexUpdated = false;
-                        let expectedIndex = queryIndex;
-                        while(!isCriterionIndexUpdated && expectedIndex < this.searchCriteria.length) {
-                            if (this.searchCriteria[expectedIndex] && this.searchCriteria[expectedIndex].type == 'taxquery') {
-                                this.$set(this.searchCriteria[expectedIndex], 'index', queryIndex);
-                                isCriterionIndexUpdated = true;
-                            } else {
-                                expectedIndex++;
-                            }
-                        }
-                    }
-                }
-            },
             addSearchCriteria() {
                 let aleatoryKey = Math.floor(Math.random() * (1000 - 2 + 1)) + 2;
 
@@ -377,6 +355,50 @@
                 else
                     this.addSearchCriteria();
             },
+            removeCriterion(searchCriterion) {
+                
+                // First, check if this criterion row is defined
+                if (!searchCriterion.type) {
+                    let searchCriterionIndex = this.searchCriteria.findIndex((element) => element.index == searchCriterion.index);
+                    if (searchCriterionIndex >= 0)
+                        this.searchCriteria.splice(searchCriterionIndex, 1);
+
+                // If it was defined, then we need to update advancedSearchQuery properly when removing
+                } else {
+                    let searchCriterionIndex = this.searchCriteria.findIndex((element) => element.index == searchCriterion.index && element.type == searchCriterion.type);
+                
+                    if (searchCriterionIndex >= 0) {
+                        
+                        this.advancedSearchQuery[searchCriterion.type].splice(searchCriterion.index, 1);
+                        this.searchCriteria.splice(searchCriterionIndex, 1);
+
+                        for (let queryIndex = 0; queryIndex < this.advancedSearchQuery.metaquery.length; queryIndex++) { 
+                            let isCriterionIndexUpdated = false;
+                            let expectedIndex = queryIndex;
+                            while(!isCriterionIndexUpdated && expectedIndex < this.searchCriteria.length) {
+                                if (this.searchCriteria[expectedIndex] && this.searchCriteria[expectedIndex].type == 'metaquery') {
+                                    this.$set(this.searchCriteria[expectedIndex], 'index', queryIndex);
+                                    isCriterionIndexUpdated = true;
+                                } else {
+                                    expectedIndex++;
+                                }
+                            }
+                        }
+                        for (let queryIndex = 0; queryIndex < this.advancedSearchQuery.taxquery.length; queryIndex++) {
+                            let isCriterionIndexUpdated = false;
+                            let expectedIndex = queryIndex;
+                            while(!isCriterionIndexUpdated && expectedIndex < this.searchCriteria.length) {
+                                if (this.searchCriteria[expectedIndex] && this.searchCriteria[expectedIndex].type == 'taxquery') {
+                                    this.$set(this.searchCriteria[expectedIndex], 'index', queryIndex);
+                                    isCriterionIndexUpdated = true;
+                                } else {
+                                    expectedIndex++;
+                                }
+                            }
+                        }
+                    }
+                }
+            },
             clearSearch() {
                 this.searchCriteria = [];
                 this.advancedSearchQuery = {
@@ -522,22 +544,33 @@
 
     #advanced-search-container {
         width: calc(100% - (2 * var(--tainacan-one-column)));
-        margin: 0.5em var(--tainacan-one-column) 0.875em;
+        margin: 0 var(--tainacan-one-column) 0.875em;
         background: var(--tainacan-input-background-color);
         border: 1px solid var(--tainacan-input-border-color);
         border-radius: 1px;
+        transition: height 0.2s ease;
     }
 
     .tnc-advanced-search-container {
-        padding: 1em;
-        padding-top: 3.5em;
+        position: relative;
+        padding: 1.25em;
 
-        .column {
-            padding: 0 0.5em 0.75em !important;
+        h3 {
+            font-size: 1em !important;
+            padding-top: 0 !important;
+            color: var(--tainacan-heading-color) !important;
+            margin-bottom: 1em !important;
+        }
+        .tainacan-form {
+            margin-bottom: 0.125em !important;
+        }
+        .column {
+            padding: 0;
         }
-
         .control {
             font-size: 1em;
+            margin-bottom: 0px !important;
+
             .select{
                 width: 100% !important;
                 select{
@@ -546,8 +579,10 @@
             }
         }
 
-        .add-link-advanced-search {
-            padding-left: 8px !important;
+        .add-link-advanced-search a {
+            font-size: 0.8125em;
+            display: inline-flex;
+            align-items: center;
         }
 
         @media screen and (max-width: 768px) {
diff --git a/src/views/admin/js/event-bus-search.js b/src/views/admin/js/event-bus-search.js
index 5e9ef28c6..4dd009a3e 100644
--- a/src/views/admin/js/event-bus-search.js
+++ b/src/views/admin/js/event-bus-search.js
@@ -384,9 +384,6 @@ export default {
                             resp.request.then((res) => {
                                 this.$emit( 'isLoadingItems', false);
                                 this.$emit( 'hasFiltered', res.hasFiltered);
-
-                                if (res.hasAdvancedSearchResults)
-                                    this.$emit('hasAdvancedSearchResults', res.hasAdvancedSearchResults);
                             })
                             .catch(() => {
                                 this.$emit( 'isLoadingItems', false);
diff --git a/src/views/admin/js/store/modules/collection/actions.js b/src/views/admin/js/store/modules/collection/actions.js
index 3175a4703..c17a3d6b5 100644
--- a/src/views/admin/js/store/modules/collection/actions.js
+++ b/src/views/admin/js/store/modules/collection/actions.js
@@ -25,7 +25,6 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
 
             // Sets a flag to inform components that an empty sate is or not due to filtering
             let hasFiltered = false;
-            let hasAdvancedSearchResults = false;
             
             // We mark as filtered if there is a metaquery, taxquery or a postin
             if ( 
@@ -38,13 +37,8 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
                 (postQueries.postin != undefined &&
                     postQueries.postin.length
                 )
-            ) {
-                
+            )
                 hasFiltered = true;
-                        
-                if (postQueries.advancedSearch)
-                    hasAdvancedSearchResults = postQueries.advancedSearch;
-            }
 
             // Admin default tab should load publish, private and draft statuses
             if (!isOnTheme && !postQueries.status) {
@@ -93,7 +87,6 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
                             'itemsListTemplate': res.data.template, 
                             'total': res.headers['x-wp-total'], 
                             hasFiltered: hasFiltered, 
-                            hasAdvancedSearchResults:  hasAdvancedSearchResults,
                             itemsPerPage: res.headers['x-wp-itemperpage']});
                     } else {
                         commit('setItems', items);
@@ -102,7 +95,6 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
                             'total': res.headers['x-wp-total'],
                             totalPages: res.headers['x-wp-totalpages'], 
                             hasFiltered: hasFiltered, 
-                            hasAdvancedSearchResults: hasAdvancedSearchResults ,
                             itemsPerPage: res.headers['x-wp-itemperpage'] });                            
                     }
                     dispatch('search/setTotalItems', res.headers['x-wp-total'], { root: true } );
diff --git a/src/views/admin/pages/lists/items-page.vue b/src/views/admin/pages/lists/items-page.vue
index 7764f0068..1936a6123 100644
--- a/src/views/admin/pages/lists/items-page.vue
+++ b/src/views/admin/pages/lists/items-page.vue
@@ -469,7 +469,7 @@
                     <advanced-search
                             :collection-id="collectionId"
                             :is-repository-level="isRepositoryLevel"
-                            :has-advanced-search-results="hasAdvancedSearchResults" />
+                            @close="openAdvancedSearch = false" />
                 </div>
             </transition>
 
@@ -519,8 +519,7 @@
                 <div 
                         v-if="hasAnOpenAlert &&
                             isSortingByCustomMetadata &&
-                            !showLoading &&
-                            ((openAdvancedSearch && hasAdvancedSearchResults) || !openAdvancedSearch)"
+                            !showLoading"
                         class="metadata-alert">
                     <p class="text">
                         {{ 
@@ -545,9 +544,7 @@
 
                 <!-- Admin View Modes-->
                 <items-list
-                        v-if="!showLoading &&
-                              totalItems > 0 &&
-                              ((openAdvancedSearch && hasAdvancedSearchResults) || !openAdvancedSearch)"
+                        v-if="!showLoading && totalItems > 0"
                         :collection-id="collectionId"
                         :displayed-metadata="displayedMetadata"
                         :items="items"
@@ -597,7 +594,7 @@
                 <div ref="items-pagination">
                     <pagination
                             :is-sorting-by-custom-metadata="isSortingByCustomMetadata"
-                            v-if="totalItems > 0 && (hasAdvancedSearchResults || !openAdvancedSearch)"/>
+                            v-if="totalItems > 0"/>
                 </div>
             </div>
         </div>
@@ -642,7 +639,6 @@
                 localDisplayedMetadata: [],
                 registeredViewModes: tainacan_plugin.registered_view_modes,
                 openAdvancedSearch: false,
-                hasAdvancedSearchResults: false,
                 sortingMetadata: [],
                 isFiltersModalActive: false,
                 hasAnOpenModal: false,
@@ -707,7 +703,6 @@
             openAdvancedSearch(newValue) {
                 if (newValue == false){
                     this.$eventBusSearch.$emit('closeAdvancedSearch');
-                    this.hasAdvancedSearchResults = false;
                     this.isFiltersModalActive = true;
                 } else {
                     this.isFiltersModalActive = false;
@@ -751,10 +746,6 @@
                 this.hasFiltered = hasFiltered;
             });
 
-            this.$eventBusSearch.$on('hasAdvancedSearchResults', hasAdvancedSearchResults => {
-                this.hasAdvancedSearchResults = hasAdvancedSearchResults;
-            });
-
             this.$eventBusSearch.$on('hasToPrepareMetadataAndFilters', () => {
                 this.prepareMetadata();
             });
@@ -1288,7 +1279,6 @@
                 // $eventBusSearch
                 this.$eventBusSearch.$off('isLoadingItems');
                 this.$eventBusSearch.$off('hasFiltered');
-                this.$eventBusSearch.$off('hasAdvancedSearchResults');
                 this.$eventBusSearch.$off('hasToPrepareMetadataAndFilters');
             }
         }
@@ -1308,58 +1298,6 @@
         overflow-y: auto;
     }
 
-    .advanced-search-criteria-title {
-        margin-bottom: 40px;
-
-        h1, h2 {
-            font-size: 1.25em;
-            font-weight: 500;
-            color: var(--tainacan-heading-color);
-            display: inline-block;
-            margin-bottom: 0;
-        }
-        .field.is-grouped {
-            margin-left: auto;
-        }
-        a.back-link{
-            font-weight: 500;
-            float: right;
-            margin-top: 5px;
-        }
-        hr{
-            margin: 3px 0px 4px 0px; 
-            height: 2px;
-            background-color: var(--tainacan-secondary);
-            border: none;
-        }
-    }
-
-    .has-advanced-search-results-title {
-        margin-bottom: 40px;
-        margin: 0 var(--tainacan-one-column) 42px var(--tainacan-one-column);
-
-        h1, h2 {
-            font-size: 1.25em;
-            font-weight: 500;
-            color: var(--tainacan-heading-color);
-            display: inline-block;
-            margin-bottom: 0;
-        }
-        .field.is-grouped {
-            margin-left: auto;
-        }
-        a.back-link{
-            font-weight: 500;
-            float: right;
-            margin-top: 5px;
-        }
-        hr{
-            margin: 3px 0px 4px 0px; 
-            height: 1px;
-            background-color: var(--tainacan-secondary);
-        }
-    }
-
     .advanced-search-form-submit {
         display: flex;
         justify-content: flex-end;
@@ -1499,10 +1437,6 @@
                         padding-right: 0;
                         max-width: 100% !important;
                     }
-                    .advanced-search-toggle.is-closed {
-                        position: relative;
-                        right: 0px !important;
-                    }
                 }
             }
 
@@ -1592,39 +1526,23 @@
                     margin-left: 12px;
                     white-space: nowrap; 
                     position: absolute;
+                    font-size: 0.75em;
+                    right: 15px;
+                    left: unset;
+                    top: 100%;
                     transition: font-size 0.2s ease, right 0.3s ease, left 0.3s ease, top 0.4s ease;
                     
                     .icon {
+                        display: 0;
+                        opacity: 0.0;
+                        max-width: 0;
                         transition: opacity 0.2s ease, max-width 0.2s ease;                            
                     }
 
-                    &.is-closed {
-                        font-size: 0.75em;
-                        right: 15px;
-                        left: unset;
-                        top: 100%;
-
-                        .icon {
-                            display: 0;
-                            opacity: 0.0;
-                            max-width: 0;
-                        }
-                    }
                     &.is-open {
-                        font-size: 1em;
-                        right: unset;
-                        left: 15px;
-                        top: 6.125em;
-                        z-index: 9;
-
-                        .icon {
-                            display: inline;
-                            opacity: 1.0;
-                            max-width: 1.5em;
-                        }
+                        font-size: 0;
                     }
                 }
-                
             }
 
         }
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
index 00f14baa3..ba4d10a73 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
@@ -31,7 +31,7 @@
                     aria-controls="filters-modal"
                     :aria-expanded="isFiltersModalActive"
                     :class="hideHideFiltersButton ? 'is-hidden-tablet' : ''"
-                    v-if="!showFiltersButtonInsideSearchControl && !hideFilters && !openAdvancedSearch && !(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen)"
+                    v-if="!showFiltersButtonInsideSearchControl && !hideFilters && !(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen)"
                     id="filter-menu-compress-button"
                     :aria-label="!isFiltersModalActive ? $i18n.get('label_show_filters') : $i18n.get('label_hide_filters')"
                     @click="isFiltersModalActive = !isFiltersModalActive"
@@ -75,8 +75,11 @@
                             v-if="!hideAdvancedSearch"
                             @click="openAdvancedSearch = !openAdvancedSearch; $eventBusSearch.clearAllFilters();"
                             style="font-size: 0.75em;"
-                            class="has-text-secondary is-pulled-right">
+                            class="advanced-search-toggle has-text-secondary is-pulled-right">
                         {{ $i18n.get('advanced_search') }}
+                        <span class="icon">
+                            <i class="tainacan-icon tainacan-icon-search" />
+                        </span>
                     </a>
                 </div>
             </div>
@@ -347,34 +350,34 @@
         </div>
 
         <!-- SIDEBAR WITH FILTERS -->
-        <b-modal
-                v-if="!hideFilters"
-                role="region"
-                aria-labelledby="filters-label-landmark"
-                id="filters-modal"     
-                ref="filters-modal"       
-                :active.sync="isFiltersModalActive"
-                :width="736"
-                animation="slide-menu"
-                :auto-focus="filtersAsModal"
-                :trap-focus="filtersAsModal"
-                full-screen
-                :custom-class="'tainacan-modal tainacan-form filters-menu' + (filtersAsModal ? ' filters-menu-modal' : '')"
-                :can-cancel="hideHideFiltersButton || !filtersAsModal ? ['x', 'outside'] : ['x', 'escape', 'outside']"
-                :close-button-aria-label="$i18n.get('close')">
-            <filters-items-list
-                    :is-loading-items="isLoadingItems"
-                    :autofocus="filtersAsModal"
-                    :tabindex="filtersAsModal ? -1 : 0"
-                    :aria-modal="filtersAsModal"
-                    :role="filtersAsModal ? 'dialog' : ''"
-                    id="filters-items-list"
-                    :taxonomy="taxonomy"
-                    :collection-id="collectionId"
-                    :is-repository-level="isRepositoryLevel"
-                    :filters-as-modal="filtersAsModal"
-                    :has-filtered="hasFiltered" />
-        </b-modal>
+        <template v-if="!hideFilters">
+            <b-modal
+                    role="region"
+                    aria-labelledby="filters-label-landmark"
+                    id="filters-modal"     
+                    ref="filters-modal"       
+                    :active.sync="isFiltersModalActive"
+                    :width="736"
+                    :auto-focus="filtersAsModal"
+                    :trap-focus="filtersAsModal"
+                    full-screen
+                    :custom-class="'tainacan-modal tainacan-form filters-menu' + (filtersAsModal ? ' filters-menu-modal' : '')"
+                    :can-cancel="hideHideFiltersButton || !filtersAsModal ? ['x', 'outside'] : ['x', 'escape', 'outside']"
+                    :close-button-aria-label="$i18n.get('close')">
+                <filters-items-list
+                        :is-loading-items="isLoadingItems"
+                        :autofocus="filtersAsModal"
+                        :tabindex="filtersAsModal ? -1 : 0"
+                        :aria-modal="filtersAsModal"
+                        :role="filtersAsModal ? 'dialog' : ''"
+                        id="filters-items-list"
+                        :taxonomy="taxonomy"
+                        :collection-id="collectionId"
+                        :is-repository-level="isRepositoryLevel"
+                        :filters-as-modal="filtersAsModal"
+                        :has-filtered="hasFiltered" />
+            </b-modal>
+        </template>
 
         <!-- ITEMS LIST AREA (ASIDE THE ASIDE) ------------------------- -->
         <div 
@@ -391,7 +394,7 @@
                 <advanced-search
                         :is-repository-level="isRepositoryLevel"
                         :collection-id="collectionId"
-                        :has-advanced-search-results="hasAdvancedSearchResults" />
+                        @close="openAdvancedSearch = false" />
             </div>
 
             <!-- FILTERS TAG LIST-->
@@ -444,8 +447,7 @@
                 <div 
                         v-if="hasAnOpenAlert &&
                             isSortingByCustomMetadata &&
-                            !showLoading &&
-                            ((openAdvancedSearch && hasAdvancedSearchResults) || !openAdvancedSearch)"
+                            !showLoading"
                         class="metadata-alert">
                     <p class="text">
                         {{ 
@@ -470,16 +472,14 @@
                        
                 <!-- Theme View Modes -->
                 <div 
-                        v-if="((openAdvancedSearch && hasAdvancedSearchResults) || !openAdvancedSearch) &&
-                              !showLoading &&
+                        v-if="!showLoading &&
                               registeredViewModes[viewMode] != undefined &&
                               registeredViewModes[viewMode].type == 'template'"
                         v-html="itemsListTemplate"/>
 
                 <component
                         v-if="registeredViewModes[viewMode] != undefined &&
-                              registeredViewModes[viewMode].type == 'component' &&
-                              ((openAdvancedSearch && hasAdvancedSearchResults) || !openAdvancedSearch)"
+                              registeredViewModes[viewMode].type == 'component'"
                         :collection-id="collectionId"
                         :displayed-metadata="displayedMetadata" 
                         :items="items"
@@ -495,8 +495,7 @@
                         v-show="!hidePaginationArea"
                         :is-sorting-by-custom-metadata="isSortingByCustomMetadata"
                         v-if="totalItems > 0 &&
-                            ((registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].show_pagination)) &&
-                            (hasAdvancedSearchResults || !openAdvancedSearch)"
+                            ((registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].show_pagination))"
                         :hide-items-per-page-button="hideItemsPerPageButton"
                         :hide-go-to-page-button="hideGoToPageButton"/>
 
@@ -574,7 +573,6 @@
                 localDisplayedMetadata: [],
                 registeredViewModes: tainacan_plugin.registered_view_modes,
                 openAdvancedSearch: false,
-                hasAdvancedSearchResults: false,
                 sortingMetadata: [],
                 isFiltersModalActive: false,
                 hasAnOpenModal: false,
@@ -640,7 +638,6 @@
             openAdvancedSearch(newValue){
                 if (newValue == false){
                     this.$eventBusSearch.$emit('closeAdvancedSearch');
-                    this.hasAdvancedSearchResults = false;
                     this.isFiltersModalActive = !this.startWithFiltersHidden;
                 } else {
                     this.isFiltersModalActive = false;
@@ -698,9 +695,6 @@
             });
             
             if (!this.hideAdvancedSearch) {
-                this.$eventBusSearch.$on('hasAdvancedSearchResults', hasAdvancedSearchResults => {
-                    this.hasAdvancedSearchResults = hasAdvancedSearchResults;
-                });
 
                 if (this.$route.query && this.$route.query.advancedSearch) {
                     this.openAdvancedSearch = this.$route.query.advancedSearch;
@@ -1167,8 +1161,6 @@
                 // $eventBusSearch
                 this.$eventBusSearch.$off('isLoadingItems');
                 this.$eventBusSearch.$off('hasFiltered');
-                if (!this.hideAdvancedSearch)
-                    this.$eventBusSearch.$off('hasAdvancedSearchResults');
                 this.$eventBusSearch.$off('hasToPrepareMetadataAndFilters');
 
             },
@@ -1212,58 +1204,6 @@
         }
     }
 
-    .advanced-search-criteria-title {
-       margin-bottom: 40px;
-
-        h1, h2 {
-            font-size: 1.25em !important;
-            font-weight: 500;
-            color: var(--tainacan-heading-color);
-            display: inline-block;
-            margin-bottom: 0;
-        }
-        .field.is-grouped {
-            margin-left: auto;
-        }
-        a.back-link{
-            font-weight: 500;
-            float: right;
-            margin-top: 5px;
-        }
-        hr{
-            margin: 3px 0px 4px 0px; 
-            height: 2px;
-            background-color: var(--tainacan-secondary);
-            border: none;
-        }
-    }
-
-    .has-advanced-search-results-title {
-        margin-bottom: 40px;
-        margin: 0 var(--tainacan-one-column) 42px var(--tainacan-one-column);
-
-        h1, h2 {
-            font-size: 1.25em;
-            font-weight: 500;
-            color: var(--tainacan-heading-color);
-            display: inline-block;
-            margin-bottom: 0;
-        }
-        .field.is-grouped {
-            margin-left: auto;
-        }
-        a.back-link{
-            font-weight: 500;
-            float: right;
-            margin-top: 5px;
-        }
-        hr{
-            margin: 3px 0px 4px 0px; 
-            height: 1px;
-            background-color: var(--tainacan-secondary);
-        }
-    }
-
     .advanced-search-form-submit {
         display: flex;
         justify-content: flex-end;
@@ -1274,16 +1214,6 @@
         p { margin-left: 0.75em; }
     }
 
-    .tnc-advanced-search-close {
-        padding-top: 47px;
-        padding-right: var(--tainacan-one-column);
-        padding-left: var(--tainacan-one-column);
-
-        .column {
-            padding: 0 0.3em 0.3em !important;
-        }
-    }
-
     .page-container {
         padding: 0;
     }
@@ -1476,15 +1406,27 @@
                     width: 100%;
                     margin: -2px 0 5px 0;
                 }
-                .is-pulled-right {
-                    position: absolute;
-                    right: 0;
-                    top: 100%;
-                }
-                a {
+                a.advanced-search-toggle {
                     margin-left: 12px;
                     white-space: nowrap; 
-                } 
+                    position: absolute;
+                    font-size: 0.75em;
+                    right: 15px;
+                    left: unset;
+                    top: 100%;
+                    transition: font-size 0.2s ease, right 0.3s ease, left 0.3s ease, top 0.4s ease;
+                    
+                    .icon {
+                        display: 0;
+                        opacity: 0.0;
+                        max-width: 0;
+                        transition: opacity 0.2s ease, max-width 0.2s ease;                            
+                    }
+
+                    &.is-open {
+                        font-size: 0;
+                    }
+                }
             }
 
             &#tainacanFiltersButton.is-filters-modal-active .gray-icon i::before {
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue
index 5e71adaf0..5b7f42639 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue
@@ -49,6 +49,7 @@ export default {
 
     // Buefy imports
     @import "../../../../../node_modules/buefy/src/scss/utils/_all.scss";
+    @import "../../../../../node_modules/buefy/src/scss/components/_form.scss";
     @import "../../../../../node_modules/buefy/src/scss/components/_datepicker.scss";
     @import "../../../../../node_modules/buefy/src/scss/components/_checkbox.scss";
     @import "../../../../../node_modules/buefy/src/scss/components/_radio.scss";
diff --git a/src/views/tainacan-i18n.php b/src/views/tainacan-i18n.php
index 7b01ce0f8..e78c45bc6 100644
--- a/src/views/tainacan-i18n.php
+++ b/src/views/tainacan-i18n.php
@@ -611,6 +611,8 @@ return apply_filters( 'tainacan-i18n', [
 	'label_limit_max_values'						 => __( 'Limit the amount of multiple values', 'tainacan'),
 	'label_items_selection'							 => __( 'Items selection', 'tainacan'),
 	'label_default_orderby' 						 => __(	'Initial default sorting', 'tainacan' ),
+	'label_close_search' 					 		 => __(	'Close search', 'tainacan' ),
+	'label_remove_all_criteria' 					 => __(	'Remove all criteria', 'tainacan' ),
 
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),

From d86d1a0117e698526a865eb169a03460590ef6c4 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 22 Feb 2022 17:04:51 -0300
Subject: [PATCH 6/7] Disables textual search while performing advanced search
 #321.

---
 src/views/admin/pages/lists/items-page.vue               | 3 ++-
 .../faceted-search/theme-search/theme-items-page.vue     | 9 +++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/views/admin/pages/lists/items-page.vue b/src/views/admin/pages/lists/items-page.vue
index 1936a6123..2fdf036f9 100644
--- a/src/views/admin/pages/lists/items-page.vue
+++ b/src/views/admin/pages/lists/items-page.vue
@@ -69,7 +69,8 @@
                             @keyup.enter.native="updateSearch()"
                             icon-right="magnify"
                             icon-right-clickable
-                            @icon-right-click="updateSearch()" />
+                            @icon-right-click="updateSearch()"
+                            :disabled="openAdvancedSearch" />
                     <a
                             v-if="!$adminOptions.hideItemsListAdvancedSearch"
                             @click="openAdvancedSearch = !openAdvancedSearch; $eventBusSearch.clearAllFilters();"
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
index ba4d10a73..2439f5e62 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
@@ -55,7 +55,7 @@
 
             <!-- Text simple search -->
             <div 
-                    v-if="!hideSearch && !openAdvancedSearch"
+                    v-if="!hideSearch"
                     class="search-control-item">
                 <div 
                         role="search" 
@@ -70,12 +70,13 @@
                         @keyup.enter.native="updateSearch()"
                         icon-right="magnify"
                         icon-right-clickable
-                        @icon-right-click="updateSearch()" />
+                        @icon-right-click="updateSearch()"
+                        :disabled="openAdvancedSearch" />
                     <a
                             v-if="!hideAdvancedSearch"
                             @click="openAdvancedSearch = !openAdvancedSearch; $eventBusSearch.clearAllFilters();"
-                            style="font-size: 0.75em;"
-                            class="advanced-search-toggle has-text-secondary is-pulled-right">
+                            class="advanced-search-toggle has-text-secondary is-pulled-right"
+                            :class="openAdvancedSearch ? 'is-open' : 'is-closed'">
                         {{ $i18n.get('advanced_search') }}
                         <span class="icon">
                             <i class="tainacan-icon tainacan-icon-search" />

From 8f1032a195e9bdaf0be43db6fe99b7385814fffd Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Wed, 23 Feb 2022 11:18:45 -0300
Subject: [PATCH 7/7] Fixes advanced search loading from URL. More
 improvements. #321.

---
 .../components/search/advanced-search.vue     | 62 ++++++++++++-------
 src/views/admin/pages/lists/items-page.vue    |  2 +-
 src/views/admin/scss/_animations.scss         | 11 ++++
 .../theme-search/theme-items-page.vue         | 20 +++---
 4 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/src/views/admin/components/search/advanced-search.vue b/src/views/admin/components/search/advanced-search.vue
index b830b8ee8..9a0173f4f 100644
--- a/src/views/admin/components/search/advanced-search.vue
+++ b/src/views/admin/components/search/advanced-search.vue
@@ -1,6 +1,7 @@
 <template>
-    <div 
+    <form 
             tabindex="0"
+            @submit.prevent.stop="performAdvancedSearch"
             class="tnc-advanced-search-container">
         <h3>{{ $i18n.get('advanced_search') }}</h3>
         <transition-group name="filter-item">
@@ -114,8 +115,9 @@
 
                 <div class="field">
                     <button
-                            @click="removeCriterion(searchCriterion)"
-                            class="button is-white is-pulled-right has-text-secondary">
+                            @click.prevent="removeCriterion(searchCriterion)"
+                            class="button is-white is-pulled-right has-text-secondary"
+                            type="button">
                         <span 
                                 v-tooltip="{
                                     content: $i18n.get('remove_search_criterion'),
@@ -153,25 +155,32 @@
         </div>
 
         <!-- Clear and search button -->
-        <div class="field is-grouped is-justify-content-flex-end">
+        <div 
+                style="margin-bottom: 0;"
+                class="field is-grouped is-justify-content-flex-end">
             <p class="control">
                 <button
-                        @click="$emit('close')"
+                        type="reset"
+                        @click="clearSearch(); $emit('close')"
                         class="button is-outlined">
                     {{ $i18n.get('label_close_search') }}
                 </button>
             </p>
             <p class="control">
                 <button
-                        @click="performAdvancedSearch()"
+                        type="submit"
+                        :disabled="!hasUpdatedSearch"
+                        @click.prevent="performAdvancedSearch"
                         class="button is-secondary">
                     {{ $i18n.get('apply') }}
                 </button>
             </p>
         </div>
+
         <b-loading 
                 :is-full-page="false" 
                 :active.sync="isLoadingMetadata" />
+        
         <section
                 v-if="!isLoadingMetadata && metadataAsArray && metadataAsArray.length <= 0"
                 class="field is-grouped-centered section">
@@ -187,7 +196,7 @@
             </div>
         </section>
 
-</div>
+    </form>
 </template>
 
 <script>
@@ -231,10 +240,11 @@
                 isLoadingMetadata: false,
                 metadataAsObject: {},
                 metadataAsArray: [],
-                metadataSearchCancel: undefined
+                metadataSearchCancel: undefined,
+                hasUpdatedSearch: false
             }
         },
-        created() {
+        mounted() {
             this.isLoadingMetadata = true;
 
             this.fetchMetadata({
@@ -249,7 +259,7 @@
                         .then((metadata) => {
                             // We create and object keyed by IDs to easily match the query params,
                             // but keep an array version to use the order in the select
-                            this.metadataAsArray = metadata;
+                            this.metadataAsArray = JSON.parse(JSON.stringify(metadata));
                             metadata.forEach(metadatum => {
                                 this.metadataAsObject[metadatum.id] = metadatum;
                             });
@@ -289,19 +299,21 @@
                 }
             },
             buildAdvancedSearchQueryFromRoute() {
-                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) {
+                const hasMetaQueries = this.$route.query.metaquery && Object.keys(this.$route.query.metaquery).length > 0;
+                const hasTaxQueries = this.$route.query.taxquery && Object.keys(this.$route.query.taxquery).length > 0;
+                if (hasMetaQueries || hasTaxQueries)
+                    this.searchCriteria = [];
+
+                if (hasMetaQueries) {
 
                     let metaquery = this.$route.query.metaquery;
 
                     for (let meta in metaquery) {
-                        if ( this.metaqueryOperatorsRegular.hasOwnProperty(metaquery[meta]['operator']) || this.metaqueryOperatorsForInterval.hasOwnProperty(metaquery[meta]['operator']) )
+                        if (
+                            this.metaqueryOperatorsRegular.hasOwnProperty(metaquery[meta]['compare']) ||
+                            this.metaqueryOperatorsForInterval.hasOwnProperty(metaquery[meta]['compare'])
+                        )
                             this.$set(this.advancedSearchQuery.metaquery, `${meta}`, metaquery[meta]);
                     }
 
@@ -314,10 +326,9 @@
 
                     for (let metakey of metakeys)
                         this.searchCriteria.push({ index: metakey, type: 'metaquery' });
-
                 }
 
-                if (this.$route.query.taxquery && Object.keys(this.$route.query.taxquery).length > 0) {
+                if (hasTaxQueries) {
                     let taxquery = this.$route.query.taxquery;
 
                     for (let tax in taxquery) {
@@ -398,6 +409,8 @@
                         }
                     }
                 }
+
+                this.hasUpdatedSearch = true;
             },
             clearSearch() {
                 this.searchCriteria = [];
@@ -406,6 +419,7 @@
                     metaquery: [],
                     taxquery: []
                 };
+                this.hasUpdatedSearch = true;
             },
             convertDateToMatchInDB(dateValue) {
                 return moment(dateValue,  this.dateFormat).toISOString().split('T')[0];
@@ -466,6 +480,8 @@
                     this.$set(this.advancedSearchQuery.metaquery[searchCriterion.index], 'value', value);
                 else if (searchCriterion.type == 'taxquery' && this.advancedSearchQuery.taxquery[searchCriterion.index])
                     this.$set(this.advancedSearchQuery.taxquery[searchCriterion.index], 'terms', value);
+
+                this.hasUpdatedSearch = true;
             },
             addComparatorToAdvancedSearchQuery(comparator, searchCriterion) {
                 if (!comparator)
@@ -475,9 +491,11 @@
                     this.$set(this.advancedSearchQuery.metaquery[searchCriterion.index], 'compare', comparator);
                 else if (searchCriterion.type == 'taxquery' && this.advancedSearchQuery.taxquery[searchCriterion.index])
                     this.$set(this.advancedSearchQuery.taxquery[searchCriterion.index], 'operator', comparator);
+
+                this.hasUpdatedSearch = true;
             },
             performAdvancedSearch() {
-                
+
                 if (
                     Object.keys(this.advancedSearchQuery.taxquery).length > 0 &&
                     Object.keys(this.advancedSearchQuery.metaquery).length > 0
@@ -523,6 +541,7 @@
                     }
                 }
 
+                this.hasUpdatedSearch = false;
                 this.$eventBusSearch.$emit('performAdvancedSearch', this.advancedSearchQuery);
             },
             getAdvancedSearchQueryCriterionMetadataType(searchCriterion) {
@@ -583,6 +602,7 @@
             font-size: 0.8125em;
             display: inline-flex;
             align-items: center;
+            margin-right: 1em;
         }
 
         @media screen and (max-width: 768px) {
diff --git a/src/views/admin/pages/lists/items-page.vue b/src/views/admin/pages/lists/items-page.vue
index 2fdf036f9..673147880 100644
--- a/src/views/admin/pages/lists/items-page.vue
+++ b/src/views/admin/pages/lists/items-page.vue
@@ -461,7 +461,7 @@
                 @mousemove="handleMouseMoveOverList">
 
             <!-- ADVANCED SEARCH -->
-            <transition name="item-appear">
+            <transition name="filter-item">
                 <div
                         id="advanced-search-container"
                         role="search"
diff --git a/src/views/admin/scss/_animations.scss b/src/views/admin/scss/_animations.scss
index 806694320..13bf35f42 100644
--- a/src/views/admin/scss/_animations.scss
+++ b/src/views/admin/scss/_animations.scss
@@ -121,6 +121,17 @@
         transform: translate(0, 0px);
     }
 }
+.item-appear-enter-active {
+    animation-name: item-appear;
+    animation-duration: 0.2s;
+    animation-timing-function: ease-out;   
+}
+.item-appear-leave-active {
+    animation-name: item-appear;
+    animation-duration: 0.2s;
+    animation-timing-function: ease-in;   
+    animation-direction: reverse;
+}
 
 // Filter Item Collapse 
 @keyframes filter-item-in {
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
index 2439f5e62..ebd3dbb28 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
@@ -387,16 +387,18 @@
                 class="items-list-area">
 
             <!-- ADVANCED SEARCH -->
-            <div 
-                    id="advanced-search-container"
-                    role="search"
-                    v-if="openAdvancedSearch && !hideAdvancedSearch">
+            <transition name="filter-item">
+                <div 
+                        id="advanced-search-container"
+                        role="search"
+                        v-if="openAdvancedSearch && !hideAdvancedSearch">
 
-                <advanced-search
-                        :is-repository-level="isRepositoryLevel"
-                        :collection-id="collectionId"
-                        @close="openAdvancedSearch = false" />
-            </div>
+                    <advanced-search
+                            :is-repository-level="isRepositoryLevel"
+                            :collection-id="collectionId"
+                            @close="openAdvancedSearch = false" />
+                </div>
+            </transition>
 
             <!-- FILTERS TAG LIST-->
             <filters-tags-list