From 9ac4a1eb30588c414c52c0f46da31b5f5a0fa126 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 19 Jun 2023 21:58:33 +0530
Subject: [PATCH] refactor: multiple fixes to contact header [CW-2081] (#7331)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../contacts/components/ContactsView.vue      | 16 ++--
 .../dashboard/contacts/components/Header.vue  | 82 ++++++++++---------
 .../FluentIcon/dashboard-icons.json           |  1 +
 3 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
index bec3ce529..e59c42cf6 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -3,15 +3,15 @@
     <div class="left-wrap" :class="wrapClass">
       <contacts-header
         :search-query="searchQuery"
-        :segments-id="segmentsId"
-        :on-search-submit="onSearchSubmit"
-        :on-export-submit="onExportSubmit"
-        this-selected-contact-id=""
-        :on-input-search="onInputSearch"
-        :on-toggle-create="onToggleCreate"
-        :on-toggle-import="onToggleImport"
-        :on-toggle-filter="onToggleFilters"
         :header-title="pageTitle"
+        :segments-id="segmentsId"
+        this-selected-contact-id=""
+        @on-input-search="onInputSearch"
+        @on-toggle-create="onToggleCreate"
+        @on-toggle-filter="onToggleFilters"
+        @on-search-submit="onSearchSubmit"
+        @on-toggle-import="onToggleImport"
+        @on-export-submit="onExportSubmit"
         @on-toggle-save-filter="onToggleSaveFilters"
         @on-toggle-delete-filter="onToggleDeleteFilters"
         @on-toggle-edit-filter="onToggleFilters"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index 46ab24a08..4193740be 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -9,20 +9,22 @@
       </div>
       <div class="right-aligned-wrap">
         <div class="search-wrap">
-          <fluent-icon icon="search" class="search-icon" />
+          <div class="search-icon-container">
+            <fluent-icon icon="search" class="search-icon" />
+          </div>
           <input
             type="text"
             :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
             class="contact-search"
             :value="searchQuery"
-            @keyup.enter="onSearchSubmit"
-            @input="onInputSearch"
+            @keyup.enter="submitSearch"
+            @input="inputSearch"
           />
           <woot-button
             :is-loading="false"
             class="clear"
             :class-names="searchButtonClass"
-            @click="onSearchSubmit"
+            @click="submitSearch"
           >
             {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
           </woot-button>
@@ -52,7 +54,7 @@
             color-scheme="secondary"
             data-testid="create-new-contact"
             icon="filter"
-            @click="onToggleFilter"
+            @click="toggleFilter"
           >
             {{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
           </woot-button>
@@ -73,7 +75,7 @@
           color-scheme="success"
           icon="person-add"
           data-testid="create-new-contact"
-          @click="onToggleCreate"
+          @click="toggleCreate"
         >
           {{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
         </woot-button>
@@ -83,7 +85,7 @@
           color-scheme="info"
           icon="upload"
           class="clear"
-          @click="onToggleImport"
+          @click="toggleImport"
         >
           {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
         </woot-button>
@@ -91,9 +93,9 @@
         <woot-button
           v-if="isAdmin"
           color-scheme="info"
-          icon="upload"
+          icon="download"
           class="clear"
-          @click="onExportSubmit"
+          @click="submitExport"
         >
           {{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
         </woot-button>
@@ -121,30 +123,6 @@ export default {
       type: [String, Number],
       default: 0,
     },
-    onInputSearch: {
-      type: Function,
-      default: () => {},
-    },
-    onSearchSubmit: {
-      type: Function,
-      default: () => {},
-    },
-    onToggleCreate: {
-      type: Function,
-      default: () => {},
-    },
-    onToggleImport: {
-      type: Function,
-      default: () => {},
-    },
-    onExportSubmit: {
-      type: Function,
-      default: () => {},
-    },
-    onToggleFilter: {
-      type: Function,
-      default: () => {},
-    },
   },
   data() {
     return {
@@ -176,6 +154,24 @@ export default {
     onToggleDeleteSegmentsModal() {
       this.$emit('on-toggle-delete-filter');
     },
+    toggleCreate() {
+      this.$emit('on-toggle-create');
+    },
+    toggleFilter() {
+      this.$emit('on-toggle-filter');
+    },
+    toggleImport() {
+      this.$emit('on-toggle-import');
+    },
+    submitExport() {
+      this.$emit('on-export-submit');
+    },
+    submitSearch() {
+      this.$emit('on-search-submit');
+    },
+    inputSearch(event) {
+      this.$emit('on-input-search', event);
+    },
   },
 };
 </script>
@@ -220,20 +216,26 @@ export default {
   margin-right: var(--space-small);
   margin-left: var(--space-small);
 
-  .search-icon {
+  .search-icon-container {
+    display: flex;
+    align-items: center;
     position: absolute;
-    top: 1px;
+    height: 100%;
     left: var(--space-one);
-    height: 3.8rem;
-    line-height: 3.6rem;
-    font-size: var(--font-size-medium);
-    color: var(--b-700);
+
+    .search-icon {
+      height: var(--font-size-medium);
+      line-height: 3.6rem;
+      font-size: var(--font-size-small);
+      color: var(--b-700);
+    }
   }
   .contact-search {
     margin: 0;
     height: 3.8rem;
     width: 100%;
-    padding-left: var(--space-large);
+    font-size: var(--font-size-small);
+    padding-left: calc(var(--space-large) + var(--space-smaller));
     padding-right: 6rem;
     border-color: var(--s-100);
   }
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 992be124f..c77b287fa 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -169,6 +169,7 @@
   "subtract-outline": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
   "tag-outline": "M19.75 2A2.25 2.25 0 0 1 22 4.25v5.462a3.25 3.25 0 0 1-.952 2.298l-8.5 8.503a3.255 3.255 0 0 1-4.597.001L3.489 16.06a3.25 3.25 0 0 1-.003-4.596l8.5-8.51A3.25 3.25 0 0 1 14.284 2h5.465Zm0 1.5h-5.465c-.465 0-.91.185-1.239.513l-8.512 8.523a1.75 1.75 0 0 0 .015 2.462l4.461 4.454a1.755 1.755 0 0 0 2.477 0l8.5-8.503a1.75 1.75 0 0 0 .513-1.237V4.25a.75.75 0 0 0-.75-.75ZM17 5.502a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z",
   "upload-outline": "M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.534 6.534 0 0 0-1.597-1.364A2.501 2.501 0 0 0 17.5 9.25h-.756a.75.75 0 0 1-.75-.713 4.25 4.25 0 0 0-8.489 0 .75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h4.4a6.458 6.458 0 0 0-.357 1.5H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Zm-6-1.793V19.5a.5.5 0 0 0 1 0v-4.793l1.646 1.647a.5.5 0 0 0 .708-.708l-2.5-2.5a.5.5 0 0 0-.708 0l-2.5 2.5a.5.5 0 0 0 .708.708L16 14.707Z",
+  "download-outline": "M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.534 6.534 0 0 0-1.597-1.364A2.501 2.501 0 0 0 17.5 9.25h-.756a.75.75 0 0 1-.75-.713 4.25 4.25 0 0 0-8.489 0 .75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h4.4a6.458 6.458 0 0 0-.357 1.5H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Zm-6-3a.5.5 0 0 1 1 0v4.793l1.646-1.647a.5.5 0 0 1 .708.708l-2.5 2.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 .708-.708L16 18.293V13.5Z",
   "video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
   "video-add-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-1.063c.154-.478.255-.98.294-1.5h.769a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6h-8.5A1.75 1.75 0 0 0 3.5 7.75v3.982A6.517 6.517 0 0 0 2 12.81V7.75A3.25 3.25 0 0 1 5.25 4.5h8.5Zm6.75 3.073L17 9.674v4.651l3.5 2.1V7.573ZM12 17.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0ZM7 18l.001 2.503a.5.5 0 1 1-1 0V18H3.496a.5.5 0 0 1 0-1H6v-2.5a.5.5 0 1 1 1 0V17h2.497a.5.5 0 0 1 0 1H7Z",
   "warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",