PMCORE-2574

resources/assets/js/components/search/CasesFilter.vue

@@ -19,8 +19,10 @@
       </template>
     </SearchPopover>
 
-    <div class="w-75 p-1">
-      <b-input-group class="w-100 p-1">
+    <div class="p-1 v-flex">
+      <h5 class="v-search-title">{{ title }}</h5>
+
+      <b-input-group class="w-75 p-1">
         <div class="input-group mb-3">
           <div class="input-group-prepend">
             <span
@@ -75,7 +77,7 @@ import api from "./../../api/index";
 
 export default {
   name: "Cases",
-  props: ["filters"],
+  props: ["filters", "title"],
   components: {
     SearchPopover,
     CaseIntegerNumber,
@@ -311,4 +313,13 @@ export default {
 .bg-primary-pm {
   background-color: #0099dd;
 }
+
+.v-flex {
+  display: flex;
+}
+
+.v-search-title {
+  padding-right: 20px;
+  line-height: 40px;
+}
 </style>

resources/assets/js/components/search/MyCasesFilter.vue

@@ -19,29 +19,30 @@
             </template>
         </SearchPopover>
 
-        <div class="w-75 p-1">
+    <div class="p-1 v-flex">
+      <h5 class="v-search-title">{{ title }}</h5>
 
-            <b-input-group class="w-100 p-1">
-                <b-button pill variant="primary" id="popover-target-1" @click="searchClickHandler">
-                    <b-icon icon="search"></b-icon>
-                </b-button>
-                <b-form-tags
-                    input-id="tags-pills"
-                    v-model="searchTags"
-                    size="sm"
+      <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"
             >
+              <b-icon icon="search"></b-icon
+            ></span>
+          </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;"
-                        >
+              <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"
+                  class="mr-1 badge badge-light"
                 >
                   <div :id="tag">
                     <i class="fas fa-tags"></i>
@@ -55,11 +56,11 @@
                     v-bind:filter="dataToFilter(tag)"
                     @updateSearchTag="updateSearchTag"
                   />
-                                
                 </b-form-tag>
               </div>
             </template>
           </b-form-tags>
+        </div>
       </b-input-group>
     </div>
     </div>
@@ -76,7 +77,7 @@ import api from "./../../api/index";
 
 export default { 
     name: "MyCasesFilter",
-    props: ["filters"],
+    props: ["filters","title"],
     components:{
         SearchPopover,
         CaseIntegerNumber,
@@ -341,11 +342,17 @@ export default {
 .bv-example-row-flex-cols .row {
     min-height: 10rem;
 }
+.bg-primary-pm {
+  background-color: #0099dd;
+}
+
+.v-flex {
+  display: flex;
+}
+
+.v-search-title {
+  padding-right: 20px;
+  line-height: 40px;
+}
 </style>
 
-    },
-};
-</script>
-<style scoped>
-
-</style>

resources/assets/js/home/Draft.vue

@@ -4,6 +4,7 @@
     <modal-new-request ref="newRequest"></modal-new-request>
     <CasesFilter
       :filters="filters"
+      :title="$t('ID_DRAFT')"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />

resources/assets/js/home/MyCases.vue

@@ -3,6 +3,7 @@
         <button-fleft :data="newCase"></button-fleft>
         <MyCasesFilter
             :filters="filters"
+            :title="$t('ID_MY_CASES')"
             @onRemoveFilter="onRemoveFilter"
             @onUpdateFilters="onUpdateFilters"
         />

resources/assets/js/home/Paused.vue

@@ -4,6 +4,7 @@
     <modal-new-request ref="newRequest"></modal-new-request>
     <CasesFilter
       :filters="filters"
+      :title="$t('ID_PAUSED')"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />

resources/assets/js/home/Todo.vue

@@ -4,6 +4,7 @@
     <modal-new-request ref="newRequest"></modal-new-request>
     <CasesFilter
       :filters="filters"
+      :title="$t('ID_CASES_STATUS_TO_DO')"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />

resources/assets/js/home/Unassigned.vue

@@ -4,6 +4,7 @@
     <modal-new-request ref="newRequest"></modal-new-request>
     <CasesFilter
       :filters="filters"
+      :title="$t('ID_UNASSIGNED')"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />