From ffd3154c94a72f16d236bbc8c6f6ad30b4848539 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 11 Apr 2024 17:11:18 +0530
Subject: [PATCH] refactor: move empty state to a separate component

---
 .../routes/dashboard/settings/sla/Index.vue   | 46 ++++---------------
 .../sla/components/BaseEmptyState.vue         | 33 +++++++++++++
 .../settings/sla/components/SLAEmptyState.vue | 23 ++++++++++
 3 files changed, 64 insertions(+), 38 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue

diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
index 80b0fbbc1..9f60ef53d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
@@ -10,44 +10,12 @@
       <SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
     </template>
     <template #body>
-      <div v-if="!records.length" class="w-full min-h-[12rem] relative">
-        <div class="w-full space-y-3">
-          <SLA-list-item
-            class="opacity-25 dark:opacity-20"
-            :sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
-            :description="$t('SLA.LIST.EMPTY.DESC_1')"
-            first-response="20m"
-            next-response="1h"
-            resolution-time="24h"
-            has-business-hours
-          />
-          <SLA-list-item
-            class="opacity-25 dark:opacity-20"
-            :sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
-            :description="$t('SLA.LIST.EMPTY.DESC_2')"
-            first-response="2h"
-            next-response="4h"
-            resolution-time="4d"
-            has-business-hours
-          />
-        </div>
-        <div
-          class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
-        >
-          <p class="max-w-xs text-sm font-medium text-center">
-            {{ $t('SLA.LIST.404') }}
-          </p>
-          <woot-button
-            color-scheme="primary"
-            icon="plus-sign"
-            class="px-5 mt-4 rounded-xl"
-            @click="openAddPopup"
-          >
-            {{ $t('SLA.ADD_ACTION_LONG') }}
-          </woot-button>
-        </div>
-      </div>
-      <div v-if="records.length" class="flex flex-col w-full h-full gap-3">
+      <SLAEmptyState
+        v-if="!records.length"
+        class="w-full min-h-[12rem] relative"
+        @primary-action="openAddPopup"
+      />
+      <div v-else-if="records.length" class="flex flex-col w-full h-full gap-3">
         <SLA-list-item
           v-for="sla in records"
           :key="sla.title"
@@ -84,6 +52,7 @@ import SettingsLayout from '../SettingsLayout.vue';
 import SLAHeader from './components/SLAHeader.vue';
 import SLAListItem from './components/SLAListItem.vue';
 import SLAListItemLoading from './components/SLAListItemLoading.vue';
+import SLAEmptyState from './components/SLAEmptyState.vue';
 import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
 
@@ -97,6 +66,7 @@ export default {
     SLAListItem,
     SLAListItemLoading,
     SettingsLayout,
+    SLAEmptyState,
   },
   mixins: [alertMixin],
   data() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
new file mode 100644
index 000000000..eb8bfd65a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
@@ -0,0 +1,33 @@
+<script setup>
+import SLAListItem from './SLAListItem.vue';
+</script>
+
+<template>
+  <div class="w-full min-h-[12rem] relative">
+    <div class="w-full space-y-3">
+      <SLA-list-item
+        class="opacity-25 dark:opacity-20"
+        :sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
+        :description="$t('SLA.LIST.EMPTY.DESC_1')"
+        first-response="20m"
+        next-response="1h"
+        resolution-time="24h"
+        has-business-hours
+      />
+      <SLA-list-item
+        class="opacity-25 dark:opacity-20"
+        :sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
+        :description="$t('SLA.LIST.EMPTY.DESC_2')"
+        first-response="2h"
+        next-response="4h"
+        resolution-time="4d"
+        has-business-hours
+      />
+    </div>
+    <div
+      class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
new file mode 100644
index 000000000..9ce444aee
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
@@ -0,0 +1,23 @@
+<script setup>
+import BaseEmptyState from './BaseEmptyState.vue';
+import { defineEmits } from 'vue';
+
+const emit = defineEmits(['primary-action']);
+const primaryAction = () => emit('primary-action');
+</script>
+
+<template>
+  <base-empty-state>
+    <p class="max-w-xs text-sm font-medium text-center">
+      {{ $t('SLA.LIST.404') }}
+    </p>
+    <woot-button
+      color-scheme="primary"
+      icon="plus-sign"
+      class="px-5 mt-4 rounded-xl"
+      @click="primaryAction"
+    >
+      {{ $t('SLA.ADD_ACTION_LONG') }}
+    </woot-button>
+  </base-empty-state>
+</template>