From 4a7d74686fb8e81306c796bd7e981a68d2aa0646 Mon Sep 17 00:00:00 2001
From: Fabio Guachalla <fabio.guachalla@processmaker.com>
Date: Wed, 10 Aug 2022 10:54:49 -0400
Subject: [PATCH] PMCORE-3810:Improve trays search area to increase
 intuitiveness

---
 .../js/components/search/AdvancedFilter.vue   | 16 +++-
 .../js/components/search/CasesFilter.vue      | 20 +++-
 .../js/components/search/CustomFilter.vue     | 22 ++++-
 .../js/components/search/MyCasesFilter.vue    | 95 +++++++++++--------
 4 files changed, 103 insertions(+), 50 deletions(-)

diff --git a/resources/assets/js/components/search/AdvancedFilter.vue b/resources/assets/js/components/search/AdvancedFilter.vue
index 703917352..2ab31119a 100644
--- a/resources/assets/js/components/search/AdvancedFilter.vue
+++ b/resources/assets/js/components/search/AdvancedFilter.vue
@@ -100,12 +100,13 @@
             <b-row>
                 <b-col>
                     <div class="d-flex flex-row">
-                        <div class="tag row">
+                        <div class="input-group-tag" v-if="filters && filters.length > 0">
                             <div class="col-11">
                                 <b-form-tags
                                     input-id="tags-pills"
                                     v-model="searchTags"
                                     size="sm"
+                                    :disabled="true"
                                 >
                                     <template v-slot="{ tags, tagVariant, removeTag }">
                                         <div
@@ -687,11 +688,16 @@ export default {
 .bv-example-row-flex-cols .row {
     min-height: 10rem;
 }
+.b-form-tags {
+    border: none;
+}
+.input-group-tag {
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+}
 </style>
-
-    },
-};
-</script>
 <style lang="scss">
 .bv-example-row .row + .row {
     margin-top: 1rem;
diff --git a/resources/assets/js/components/search/CasesFilter.vue b/resources/assets/js/components/search/CasesFilter.vue
index bac411417..66c6c6b5d 100644
--- a/resources/assets/js/components/search/CasesFilter.vue
+++ b/resources/assets/js/components/search/CasesFilter.vue
@@ -42,7 +42,7 @@
                 <i :class="icon"></i>
             </div>
             <b-input-group class="w-75 p-1">
-                <div class="input-group mb-3">
+                <div class="input-group-tag mb-3">
                     <div class="input-group-prepend">
                         <span
                             class="input-group-text bg-primary-pm text-white"
@@ -52,7 +52,12 @@
                             <b-icon icon="search"></b-icon
                         ></span>
                     </div>
-                    <b-form-tags input-id="tags-pills" v-model="searchTags">
+                    <b-form-tags
+                        input-id="tags-pills"
+                        v-model="searchTags"
+                        :disabled="true"
+                        v-if="filters.length > 0"
+                    >
                         <template v-slot="{ tags, tagVariant, removeTag }">
                             <div class="d-inline-block" style="font-size: 1rem">
                                 <b-form-tag
@@ -557,3 +562,14 @@ export default {
     line-height: 40px;
 }
 </style>
+<style scoped>
+.b-form-tags {
+    border: none;
+}
+.input-group-tag {
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+}
+</style>
diff --git a/resources/assets/js/components/search/CustomFilter.vue b/resources/assets/js/components/search/CustomFilter.vue
index 4299c4d27..b569e5526 100644
--- a/resources/assets/js/components/search/CustomFilter.vue
+++ b/resources/assets/js/components/search/CustomFilter.vue
@@ -35,7 +35,7 @@
                 <i :class="icon"></i>
             </div>
             <b-input-group class="w-75 p-1">
-                <div class="input-group mb-3">
+                <div class="input-group-tag mb-3">
                     <div class="input-group-prepend">
                         <span
                             class="input-group-text bg-primary-pm text-white"
@@ -45,7 +45,12 @@
                             <b-icon icon="search"></b-icon
                         ></span>
                     </div>
-                    <b-form-tags input-id="tags-pills" v-model="searchTags">
+                    <b-form-tags
+                        input-id="tags-pills"
+                        v-model="searchTags"
+                        :disabled="true"
+                        v-if="filters.length > 0"
+                    >
                         <template v-slot="{ tags, tagVariant, removeTag }">
                             <div class="d-inline-block" style="font-size: 1rem">
                                 <b-form-tag
@@ -375,4 +380,15 @@ export default {
     display: block !important;
     margin-right: 1rem;
 }
-</style>
\ No newline at end of file
+</style>
+<style scoped>
+.b-form-tags {
+    border: none;
+}
+.input-group-tag {
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+}
+</style>
diff --git a/resources/assets/js/components/search/MyCasesFilter.vue b/resources/assets/js/components/search/MyCasesFilter.vue
index e626db99e..6145c0a16 100644
--- a/resources/assets/js/components/search/MyCasesFilter.vue
+++ b/resources/assets/js/components/search/MyCasesFilter.vue
@@ -40,47 +40,52 @@
         <h5 class="v-search-title">{{ title }}</h5>
         <div class="pm-mc-text-icon">
             <i :class="icon"></i>
-      </div>  
-      <b-input-group class="w-75 p-1">
-        <div class="input-group mb-3">
-          <div class="input-group-prepend">
-            <span
-              class="input-group-text bg-primary-pm text-white"
-              id="popover-target-1"
-              @click="searchClickHandler"
+        </div>
+        <b-input-group class="w-75 p-1">
+            <div class="input-group-tag mb-3">
+                <div class="input-group-prepend">
+                    <span
+                        class="input-group-text bg-primary-pm text-white"
+                        id="popover-target-1"
+                        @click="searchClickHandler"
+                    >
+                        <b-icon icon="search"></b-icon>
+                    </span>
+                    <b-tooltip target="popover-target-1">{{$t('ID_MY_CASES_SEARCH')}}</b-tooltip>
+                </div>
+            <b-form-tags
+                input-id="tags-pills"
+                v-model="searchTags"
+                :disabled="true"
+                v-if="filters.length > 0"
             >
-              <b-icon icon="search"></b-icon
-            ></span>
-              <b-tooltip target="popover-target-1">{{$t('ID_MY_CASES_SEARCH')}}</b-tooltip>
-          </div>
-          <b-form-tags input-id="tags-pills" v-model="searchTags">
-            <template v-slot="{ tags, tagVariant, removeTag }">
-              <div class="d-inline-block" style="font-size: 1rem">
-                <b-form-tag
-                  v-for="tag in tags"
-                  @remove="customRemove(removeTag, tag)"
-                  :key="tag"
-                  :title="tag"
-                  :variant="tagVariant"
-                  class="mr-1 badge badge-light"
-                >
-                  <div :id="tag">
-                    <i class="fas fa-tags"></i>
-                    {{ tagContent(tag) }}
-                  </div>
+                <template v-slot="{ tags, tagVariant, removeTag }" >
+                    <div class="d-inline-block" style="font-size: 1rem">
+                        <b-form-tag
+                            v-for="tag in tags"
+                            @remove="customRemove(removeTag, tag)"
+                            :key="tag"
+                            :title="tag"
+                            :variant="tagVariant"
+                            class="mr-1 badge badge-light"
+                        >
+                            <div :id="tag">
+                                <i class="fas fa-tags"></i>
+                                {{ tagContent(tag) }}
+                            </div>
 
-                  <component
-                    :filters="filters"
-                    v-bind:is="tagComponent(tag)"
-                    v-bind:info="tagInfo(tag)"
-                    v-bind:tag="tag"
-                    v-bind:filter="dataToFilter(tag)"
-                    @updateSearchTag="updateSearchTag"
-                  />
-                </b-form-tag>
-              </div>
-            </template>
-          </b-form-tags>
+                            <component
+                                :filters="filters"
+                                v-bind:is="tagComponent(tag)"
+                                v-bind:info="tagInfo(tag)"
+                                v-bind:tag="tag"
+                                v-bind:filter="dataToFilter(tag)"
+                                @updateSearchTag="updateSearchTag"
+                            />
+                        </b-form-tag>
+                    </div>
+                </template>
+            </b-form-tags>
         </div>
       </b-input-group>
     </div>
@@ -478,4 +483,14 @@ export default {
   line-height: 40px;
 }
 </style>
-
+<style scoped>
+.b-form-tags {
+    border: none;
+}
+.input-group-tag {
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+}
+</style>