From 0250c38cf1d656c4989711055f67f95cbab80604 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 27 Aug 2021 18:02:29 -0300
Subject: [PATCH] Adds textual filter search on the available metadata list of
 the filters page #595

---
 src/views/admin/pages/lists/filters-page.vue | 34 ++++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/views/admin/pages/lists/filters-page.vue b/src/views/admin/pages/lists/filters-page.vue
index 8e40181ef..8a42b1b5b 100644
--- a/src/views/admin/pages/lists/filters-page.vue
+++ b/src/views/admin/pages/lists/filters-page.vue
@@ -190,8 +190,25 @@
                 <div 
                         v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || !isRepositoryLevel)"
                         class="column available-metadata-area">
+                    <div class="tainacan-form sub-header">
+                        <h3>{{ $i18n.get('label_available_metadata') }}</h3>
+
+                        <template v-if="availableMetadata && availableMetadata.length > 5 && !isLoadingMetadatumTypes">
+                                
+                            <b-field class="header-item">
+                                <b-input 
+                                        :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
+                                        v-model="metadatumNameFilterString"
+                                        icon="magnify"
+                                        size="is-small"
+                                        icon-right="close-circle"
+                                        icon-right-clickable
+                                        @icon-right-click="metadatumNameFilterString = ''" />
+                            </b-field>
+                        </template>
+                    </div>
                     <div class="field" >
-                        <h3 class="label"> {{ $i18n.get('label_available_metadata') }}</h3>
+
                         <draggable
                                 @change="handleChangeOnMetadata"
                                 v-if="availableMetadata.length > 0 && !isLoadingMetadatumTypes"
@@ -209,6 +226,7 @@
                                             'disabled-metadatum': isSelectingFilterType
                                         }"
                                         v-if="metadatum.enabled"
+                                        v-show="metadatumNameFilterString == '' || metadatum.name.toString().toLowerCase().indexOf(metadatumNameFilterString.toString().toLowerCase()) >= 0"
                                         :key="index"
                                         @click.prevent="addMetadatumViaButton(metadatum, index)">
                                     <span 
@@ -409,7 +427,8 @@ export default {
             columnsTopY: 0,
             filtersSearchCancel: undefined,
             metadataSearchCancel: undefined,
-            filterNameFilterString: ''
+            filterNameFilterString: '',
+            metadatumNameFilterString: ''
         }
     },
     computed: {
@@ -1043,11 +1062,10 @@ export default {
         }
 
         .available-metadata-area {
-            padding: 10px 0px 10px 10px;
+            padding: 0px 0px 10px 10px;
             margin: 0;
-            max-width: 500px;
-            min-width: 20.8333333%;
-            font-size: 0.875em;
+            max-width: 600px;
+            min-width: 41.66666667%;
 
             @media screen and (max-width: 769px) {
                 max-width: 100%;
@@ -1066,6 +1084,10 @@ export default {
                 font-weight: 500;
             }
 
+            &>.field {
+                font-size: 0.875em;
+            }
+
             .available-metadatum-item {
                 padding: 0.6em;
                 margin: 4px 4px 4px 1.2em;