PMCORE-3056:UI - Sectional Icons EHX

error key duplicated

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

@@ -31,7 +31,9 @@
 
     <div class="p-1 v-flex">
       <h5 class="v-search-title">{{ title }}</h5>
-
+      <div class="pm-in-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">
@@ -87,7 +89,7 @@ import api from "./../../api/index";
 
 export default {
   name: "Cases",
-  props: ["filters", "title"],
+  props: ["filters", "title", "icon"],
   components: {
     SearchPopover,
     CaseNumber,
@@ -376,7 +378,12 @@ export default {
 }
 
 .v-search-title {
-  padding-right: 20px;
+  padding-right: 10px;
   line-height: 40px;
 }
+.pm-in-text-icon {
+  font-size: 2vw;
+  padding-right: 10px;
+  line-height: 3vw;
+}
 </style>

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

@@ -28,8 +28,10 @@
         </SearchPopover>
 
     <div class="p-1 v-flex">
-      <h5 class="v-search-title">{{ title }}</h5>
-
+        <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">
@@ -86,7 +88,7 @@ import api from "./../../api/index";
 
 export default { 
     name: "MyCasesFilter",
-    props: ["filters","title"],
+    props: ["filters","title", "icon"],
     components:{
         SearchPopover,
         CaseNumber,
@@ -408,8 +410,13 @@ export default {
 }
 
 .v-search-title {
-  padding-right: 20px;
+  padding-right: 10px;
   line-height: 40px;
 }
+.pm-mc-text-icon{
+  font-size: 2vw;
+  padding-right: 10px;
+  line-height: 3vw;
+}
 </style>
 

resources/assets/js/home/Draft/Draft.vue

@@ -5,6 +5,7 @@
     <CasesFilter
       :filters="filters"
       :title="$t('ID_DRAFT')"
+      :icon="icon"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
@@ -226,6 +227,7 @@ export default {
         "actions"
       ],
       tableData: [],
+      icon:"fas fa-edit",
       options: {
         filterable: false,
         headings: {

resources/assets/js/home/Inbox/Todo.vue

@@ -7,6 +7,7 @@
     <CasesFilter
       :filters="filters"
       :title="$t('ID_CASES_STATUS_TO_DO')"
+      :icon="icon"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
@@ -265,6 +266,7 @@ export default {
         "actions"
       ],
       tableData: [],
+      icon:"fas fa-check-circle",
       options: {
         filterable: false,
         headings: {

resources/assets/js/home/MyCases/MyCases.vue

@@ -13,6 +13,8 @@
         <MyCasesFilter
             :filters="filters"
             :title="title"
+            :random="random"
+            :icon="filterHeaderObject.icon"
             @onRemoveFilter="onRemoveFilter"
             @onUpdateFilters="onUpdateFilters"
         />
@@ -101,7 +103,11 @@ export default {
             filter: "CASES_INBOX",
             allView: [],
             filterHeader: "STARTED",
+            filterHeaderObject: {
+                icon:"fas fa-inbox"
+            },
             headers: [],
+            random: _.random(0,1000000000),
             newCase: {
                 title: this.$i18n.t("ID_NEW_CASE"),
                 class: "btn-success",
@@ -533,6 +539,8 @@ export default {
                             that.filterHeader = obj.item;
                             that.$refs["vueTable"].setPage(1); // Reset the page when change the header filter
                             that.$refs["vueTable"].getData();
+                            that.filterHeaderObject = obj;
+                            that.random = _.random(0,1000000000);
                         },
                         class: info[v.id].class
                     });

resources/assets/js/home/Paused/Paused.vue

@@ -6,6 +6,7 @@
     <CasesFilter
       :filters="filters"
       :title="$t('ID_PAUSED')"
+      :icon="icon"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
@@ -265,6 +266,7 @@ export default {
         "actions",
       ],
       tableData: [],
+      icon:"far fa-pause-circle",
       options: {
         filterable: false,
         headings: {

resources/assets/js/home/Unassigned/Unassigned.vue

@@ -5,6 +5,7 @@
     <CasesFilter
       :filters="filters"
       :title="$t('ID_UNASSIGNED')"
+      :icon="icon"
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
@@ -260,6 +261,7 @@ export default {
         "priority",
         "actions",
       ],
+      icon:"fas fa-users",
       options: {
         filterable: false,
         headings: {