From b39e25f9e2c91ee62f8e42e3b489dfb4df5aaabb Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Mon, 11 Nov 2024 23:31:32 +0530
Subject: [PATCH] chore: Fix empty state

---
 .../dashboard/i18n/locale/en/contact.json     |  3 +-
 .../contact/pages/ContactsPageRouteView.vue   | 29 ++++++++++++-------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 0c801ff0d..7727c871f 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -585,7 +585,8 @@
       "TITLE": "No contacts found in this account",
       "SUBTITLE": "Start adding new contacts by clicking on the button below",
       "BUTTON_LABEL": "Add contact",
-      "SEARCH_EMPTY_STATE_TITLE": "No contacts found"
+      "SEARCH_EMPTY_STATE_TITLE": "No contacts matches your search 🔍",
+      "LIST_EMPTY_STATE_TITLE": "No contacts available in this view 📋"
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue
index a3f932c38..843fb86a5 100644
--- a/app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue
@@ -57,6 +57,9 @@ const activeSegment = computed(() =>
 );
 
 const hasContacts = computed(() => contacts.value.length > 0);
+const isContactIndexView = computed(
+  () => route.name === 'contacts_dashboard_index'
+);
 
 const headerTitle = computed(() => {
   if (activeSegmentId.value) {
@@ -180,7 +183,7 @@ onMounted(async () => {
       :show-pagination-footer="!isFetchingList && hasContacts"
       :active-sort="sortState.activeSort"
       :active-ordering="sortState.activeOrdering"
-      :is-empty-state="!hasContacts && searchValue === ''"
+      :is-empty-state="!searchValue && !hasContacts && isContactIndexView"
       @update:current-page="handlePageChange"
       @search="searchContacts"
       @sort="handleSort"
@@ -193,23 +196,27 @@ onMounted(async () => {
       </div>
 
       <template v-else>
-        <div
-          v-if="searchValue && !hasContacts"
-          class="flex items-center justify-center py-10"
-        >
-          <span class="text-base text-n-slate-11">
-            {{ $t('CONTACTS_LAYOUT.EMPTY_STATE.SEARCH_EMPTY_STATE_TITLE') }}
-          </span>
-        </div>
-
         <ContactEmptyState
-          v-else-if="!searchValue && !hasContacts"
+          v-if="!searchValue && !hasContacts && isContactIndexView"
           class="pt-14"
           :title="t('CONTACTS_LAYOUT.EMPTY_STATE.TITLE')"
           :subtitle="t('CONTACTS_LAYOUT.EMPTY_STATE.SUBTITLE')"
           :button-label="t('CONTACTS_LAYOUT.EMPTY_STATE.BUTTON_LABEL')"
         />
 
+        <div
+          v-else-if="(searchValue || !isContactIndexView) && !hasContacts"
+          class="flex items-center justify-center py-10"
+        >
+          <span class="text-base text-n-slate-11">
+            {{
+              searchValue
+                ? t('CONTACTS_LAYOUT.EMPTY_STATE.SEARCH_EMPTY_STATE_TITLE')
+                : t('CONTACTS_LAYOUT.EMPTY_STATE.LIST_EMPTY_STATE_TITLE')
+            }}
+          </span>
+        </div>
+
         <ContactsList v-else :contacts="contacts" />
       </template>
     </ContactsLayout>