From f12c9e9df6236bbe81b54fca9eb37607fce7b4de Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 24 Feb 2025 16:38:43 +0700
Subject: [PATCH] feat: add cancel button functionality and improve close tab
 logic in task order views

---
 .../09_task-order/order_view/MainPage.vue     | 14 +++++-----
 .../09_task-order/receive_view/MainPage.vue   | 27 ++++++++++++++-----
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/pages/09_task-order/order_view/MainPage.vue b/src/pages/09_task-order/order_view/MainPage.vue
index 0451b76b..9b13b24d 100644
--- a/src/pages/09_task-order/order_view/MainPage.vue
+++ b/src/pages/09_task-order/order_view/MainPage.vue
@@ -1209,19 +1209,19 @@ watch(
           {{ $t('general.view', { msg: $t('general.example') }) }}
         </MainButton>
         <div class="row" style="gap: var(--size-2)">
+          <UndoButton outlined @click="undo()" v-if="state.mode === 'edit'" />
+          <CancelButton
+            v-if="state.mode !== 'edit'"
+            :label="$t('dialog.action.close')"
+            outlined
+            @click="closeTab()"
+          />
           <template
             v-if="
               fullTaskOrder?.taskOrderStatus === TaskOrderStatus.Pending ||
               state.mode === 'create'
             "
           >
-            <UndoButton outlined @click="undo()" v-if="state.mode === 'edit'" />
-            <CancelButton
-              @click="closeTab()"
-              :label="$t('dialog.action.close')"
-              v-if="state.mode === 'info'"
-              outlined
-            />
             <SaveButton
               v-if="state.mode && ['create', 'edit'].includes(state.mode)"
               @click="() => formDocument.submit()"
diff --git a/src/pages/09_task-order/receive_view/MainPage.vue b/src/pages/09_task-order/receive_view/MainPage.vue
index e6072bcc..62dd9308 100644
--- a/src/pages/09_task-order/receive_view/MainPage.vue
+++ b/src/pages/09_task-order/receive_view/MainPage.vue
@@ -3,9 +3,10 @@ import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
 import { computed, onMounted, ref, watch } from 'vue';
 import { getUserId } from 'src/services/keycloak';
+import { useI18n } from 'vue-i18n';
 
 // NOTE: Import Components
-import { SaveButton } from 'src/components/button';
+import { SaveButton, CancelButton } from 'src/components/button';
 import { StateButton } from 'components/button';
 import InfoMessengerExpansion from '../expansion/receive/InfoMessengerExpansion.vue';
 import InfoProductExpansion from '../expansion/receive/InfoProductExpansion.vue';
@@ -31,6 +32,7 @@ import { useTaskOrderStore } from 'src/stores/task-order';
 
 const route = useRoute();
 const taskOrderFormStore = useTaskOrderForm();
+const { t } = useI18n();
 
 const { currentFormData, state, fullTaskOrder } =
   storeToRefs(taskOrderFormStore);
@@ -342,6 +344,16 @@ function sortList(
   });
 }
 
+async function closeTab() {
+  dialogWarningClose(t, {
+    message: t('dialog.message.close'),
+    action: () => {
+      window.close();
+    },
+    cancel: () => {},
+  });
+}
+
 onMounted(async () => {
   initTheme();
   initLang();
@@ -756,12 +768,15 @@ watch([currentFormData.value.taskStatus], () => {
 
     <!-- SEC: footer -->
 
-    <footer
-      v-if="fullTaskOrder.taskOrderStatus !== TaskOrderStatus.Pending"
-      class="surface-1 q-pa-md full-width"
-    >
-      <nav class="row justify-end">
+    <footer class="surface-1 q-pa-md full-width">
+      <nav class="row justify-end" style="gap: var(--size-2)">
+        <CancelButton
+          :label="$t('dialog.action.close')"
+          outlined
+          @click="closeTab()"
+        />
         <SaveButton
+          v-if="fullTaskOrder.taskOrderStatus !== TaskOrderStatus.Pending"
           :disabled="
             fullTaskOrder.taskList.some(
               (t) =>