From fcce551071cdc1fbe63c156b243a74c8dce03fb5 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 24 Feb 2025 16:54:40 +0700
Subject: [PATCH] feat: add close tab functionality with CancelButton in
 RequestListView

---
 src/pages/08_request-list/RequestListView.vue | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index 116ae387..5010461c 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -11,6 +11,7 @@ import PropertiesExpansion from './PropertiesExpansion.vue';
 import FormGroupHead from './FormGroupHead.vue';
 import AvatarGroup from 'src/components/shared/AvatarGroup.vue';
 import { StateButton } from 'components/button';
+import { CancelButton } from 'components/button';
 import DutyExpansion from './DutyExpansion.vue';
 import MessengerExpansion from './MessengerExpansion.vue';
 
@@ -20,6 +21,7 @@ import {
   dialog,
   getEmployeeName,
   getCustomerName,
+  dialogWarningClose,
 } from 'src/stores/utils';
 import { dateFormatJS } from 'src/utils/datetime';
 import { useRequestList } from 'src/stores/request-list';
@@ -37,7 +39,7 @@ import ProductExpansion from './ProductExpansion.vue';
 import { useRoute } from 'vue-router';
 import { useWorkflowTemplate } from 'src/stores/workflow-template';
 import { WorkflowTemplate } from 'src/stores/workflow-template/types';
-import { initLang, initTheme, Lang } from 'src/utils/ui';
+import { initLang, initTheme } from 'src/utils/ui';
 import {
   EmployeePassportPayload,
   EmployeeVisaPayload,
@@ -330,6 +332,16 @@ function goToDebitNote(opt?: { tab?: string; id?: string }) {
 
   window.open(url.toString(), '_blank');
 }
+
+function closeTab() {
+  dialogWarningClose(t, {
+    message: t('dialog.message.close'),
+    action: () => {
+      window.close();
+    },
+    cancel: () => {},
+  });
+}
 </script>
 <template>
   <div class="column surface-0 fullscreen" v-if="data">
@@ -859,6 +871,15 @@ function goToDebitNote(opt?: { tab?: string; id?: string }) {
         </div>
       </section>
     </main>
+
+    <!-- SEC: Footer -->
+    <footer class="surface-1 q-pa-md full-width text-right">
+      <CancelButton
+        @click="closeTab()"
+        :label="$t('dialog.action.close')"
+        outlined
+      />
+    </footer>
   </div>
 </template>
 <style scoped></style>