From 6ab88a8167705022a8702364c4ddbf7c9eb2ddea Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 22 Jan 2025 17:02:07 +0530
Subject: [PATCH] feat: update page layout

---
 .../components-next/captain/PageLayout.vue    | 21 +++++++++++++++++--
 .../dashboard/captain/assistants/Index.vue    | 17 +++++++--------
 .../dashboard/captain/documents/Index.vue     | 15 ++++++-------
 .../dashboard/captain/responses/Index.vue     | 16 +++++++-------
 4 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/app/javascript/dashboard/components-next/captain/PageLayout.vue b/app/javascript/dashboard/components-next/captain/PageLayout.vue
index b0d10b889..bc6729f71 100644
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -1,6 +1,7 @@
 <script setup>
 import Button from 'dashboard/components-next/button/Button.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 defineProps({
   currentPage: {
@@ -23,6 +24,14 @@ defineProps({
     type: String,
     default: '',
   },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false,
+  },
   showPaginationFooter: {
     type: Boolean,
     default: true,
@@ -30,7 +39,6 @@ defineProps({
 });
 
 const emit = defineEmits(['click', 'close', 'update:currentPage']);
-
 const handleButtonClick = () => {
   emit('click');
 };
@@ -69,7 +77,16 @@ const handlePageChange = event => {
     </header>
     <main class="flex-1 px-6 overflow-y-auto xl:px-0">
       <div class="w-full max-w-[960px] mx-auto py-4">
-        <slot name="default" />
+        <div
+          v-if="isFetching"
+          class="flex items-center justify-center py-10 text-n-slate-11"
+        >
+          <Spinner />
+        </div>
+        <div v-else-if="isEmpty">
+          <slot name="emptyState" />
+        </div>
+        <slot v-else name="default" />
       </div>
     </main>
     <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
diff --git a/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue
index 6bba32eb2..6a7f218b2 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue
@@ -5,7 +5,6 @@ import { useMapGetter, useStore } from 'dashboard/composables/store';
 import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.vue';
 import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import CreateAssistantDialog from 'dashboard/components-next/captain/pageComponents/assistant/CreateAssistantDialog.vue';
 import AssistantPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue';
 import { useRouter } from 'vue-router';
@@ -74,15 +73,15 @@ onMounted(() => store.dispatch('captainAssistants/get'));
     :header-title="$t('CAPTAIN.ASSISTANTS.HEADER')"
     :button-label="$t('CAPTAIN.ASSISTANTS.ADD_NEW')"
     :show-pagination-footer="false"
+    :is-fetching="isFetching"
+    :is-empty="!assistants.length"
     @click="handleCreate"
   >
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <div v-else-if="assistants.length" class="flex flex-col gap-4">
+    <template #emptyState>
+      <AssistantPageEmptyState @click="handleCreate" />
+    </template>
+
+    <div class="flex flex-col gap-4">
       <AssistantCard
         v-for="assistant in assistants"
         :id="assistant.id"
@@ -95,8 +94,6 @@ onMounted(() => store.dispatch('captainAssistants/get'));
       />
     </div>
 
-    <AssistantPageEmptyState v-else @click="handleCreate" />
-
     <DeleteDialog
       v-if="selectedAssistant"
       ref="deleteAssistantDialog"
diff --git a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
index cfe088055..31d30a422 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
@@ -106,22 +106,21 @@ onMounted(() => {
     :total-count="documentsMeta.totalCount"
     :current-page="documentsMeta.page"
     :show-pagination-footer="!isFetching && !!documents.length"
+    :is-fetching="isFetching"
+    :is-empty="!documents.length"
     @update:current-page="onPageChange"
     @click="handleCreateDocument"
   >
+    <template #emptyState>
+      <DocumentPageEmptyState @click="handleCreateDocument" />
+    </template>
     <div v-if="shouldShowAssistantSelector" class="mb-4 -mt-3 flex gap-3">
       <AssistantSelector
         :assistant-id="selectedAssistant"
         @update="handleAssistantFilterChange"
       />
     </div>
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <div v-else-if="documents.length" class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4">
       <DocumentCard
         v-for="doc in documents"
         :id="doc.id"
@@ -134,8 +133,6 @@ onMounted(() => {
       />
     </div>
 
-    <DocumentPageEmptyState v-else @click="handleCreateDocument" />
-
     <RelatedResponses
       v-if="showRelatedResponses"
       ref="relationQuestionDialog"
diff --git a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
index e62f8f0e1..5466df8cf 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
@@ -158,10 +158,16 @@ onMounted(() => {
     :current-page="responseMeta.page"
     :header-title="$t('CAPTAIN.RESPONSES.HEADER')"
     :button-label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
+    :is-fetching="isFetching"
+    :is-empty="!responses.length"
     :show-pagination-footer="!isFetching && !!responses.length"
     @update:current-page="onPageChange"
     @click="handleCreate"
   >
+    <template #emptyState>
+      <ResponsePageEmptyState @click="handleCreate" />
+    </template>
+
     <div v-if="shouldShowDropdown" class="mb-4 -mt-3 flex gap-3">
       <OnClickOutside @trigger="isStatusFilterOpen = false">
         <Button
@@ -186,14 +192,8 @@ onMounted(() => {
         @update="handleAssistantFilterChange"
       />
     </div>
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
 
-    <div v-else-if="responses.length" class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4">
       <ResponseCard
         v-for="response in responses"
         :id="response.id"
@@ -210,8 +210,6 @@ onMounted(() => {
       />
     </div>
 
-    <ResponsePageEmptyState v-else @click="handleCreate" />
-
     <DeleteDialog
       v-if="selectedResponse"
       ref="deleteDialog"