From b36caa48e2f96cb4acabf14bff0734fe51d8b960 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 24 Feb 2025 16:49:10 +0700
Subject: [PATCH] feat: add btn cancel

---
 src/pages/05_quotation/QuotationForm.vue | 28 +++++++++++-------------
 src/pages/12_debit-note/FormPage.vue     | 25 ++++++++++++++++++++-
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index d02e4f14..2abf03ae 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -54,7 +54,7 @@ import {
   SaveButton,
   EditButton,
   UndoButton,
-  CloseButton,
+  CancelButton,
   MainButton,
 } from 'components/button';
 import QuotationFormReceipt from './QuotationFormReceipt.vue';
@@ -2233,14 +2233,9 @@ async function formDownload() {
     </article>
 
     <footer class="surface-1 q-pa-md full-width">
-      <div
-        class="row full-width"
-        :class="{
-          'justify-between': view !== View.InvoicePre,
-          'justify-end': view === View.InvoicePre,
-        }"
-      >
+      <div class="row full-width justify-end">
         <MainButton
+          class="q-mr-auto"
           v-if="
             view !== View.InvoicePre &&
             view !== View.PaymentPre &&
@@ -2255,6 +2250,14 @@ async function formDownload() {
           {{ $t('general.view', { msg: $t('general.example') }) }}
         </MainButton>
 
+        <CancelButton
+          outlined
+          id="btn-close"
+          @click="closeTab()"
+          :label="$t('dialog.action.close')"
+          v-if="quotationFormState.mode === 'info' && closeAble()"
+        />
+
         <div
           v-if="
             view === View.Accepted &&
@@ -2293,6 +2296,7 @@ async function formDownload() {
         </template>
 
         <div
+          class="q-ml-sm"
           v-if="
             view === View.Invoice &&
             ((quotationFormData.quotationStatus !== 'PaymentPending' &&
@@ -2317,7 +2321,7 @@ async function formDownload() {
         </div>
 
         <div
-          class="row"
+          class="row q-ml-sm"
           style="gap: var(--size-2)"
           v-if="
             (view === View.Quotation &&
@@ -2332,12 +2336,6 @@ async function formDownload() {
             id="btn-undo"
             v-if="quotationFormState.mode === 'edit'"
           />
-          <CloseButton
-            outlined
-            id="btn-close"
-            @click="closeTab()"
-            v-if="quotationFormState.mode === 'info' && closeAble()"
-          />
           <SaveButton
             type="submit"
             id="btn-save"
diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index 222bb034..b9fab96e 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -41,6 +41,7 @@ import {
   SaveButton,
   UndoButton,
   EditButton,
+  CancelButton,
 } from 'src/components/button';
 import { RequestWork } from 'src/stores/request-list/types';
 import { storeToRefs } from 'pinia';
@@ -893,6 +894,20 @@ function storeDataLocal() {
   window.open(url, '_blank');
 }
 
+async function closeTab() {
+  dialogWarningClose(t, {
+    message: t('dialog.message.close'),
+    action: () => {
+      window.close();
+    },
+    cancel: () => {},
+  });
+}
+
+function closeAble() {
+  return window.opener !== null;
+}
+
 watch(
   () => pageState.mode,
   () => toggleMode(pageState.mode),
@@ -1267,7 +1282,15 @@ async function submitAccepted() {
           {{ $t('general.view', { msg: $t('general.example') }) }}
         </MainButton>
 
-        <div class="row q-gutter-x-sm">
+        <CancelButton
+          outlined
+          id="btn-close"
+          @click="closeTab()"
+          :label="$t('dialog.action.close')"
+          v-if="pageState.mode === 'info' && closeAble()"
+        />
+
+        <div class="row q-gutter-x-sm q-ml-xs">
           <UndoButton
             outlined
             v-if="pageState.mode === 'edit'"