feat: add close tab

src/pages/05_quotation/preview/ViewForm.vue

@@ -2,10 +2,11 @@
 import { storeToRefs } from 'pinia';
 import { onMounted, nextTick, ref, watch } from 'vue';
 import { precisionRound } from 'src/utils/arithmetic';
+import { useI18n } from 'vue-i18n';
 import ThaiBahtText from 'thai-baht-text';
 
 // NOTE: Import stores
-import { formatNumberDecimal } from 'stores/utils';
+import { dialogWarningClose, formatNumberDecimal } from 'stores/utils';
 import { useConfigStore } from 'stores/config';
 import useBranchStore from 'stores/branch';
 import { baseUrl } from 'stores/utils';
@@ -28,12 +29,14 @@ import ViewHeader from './ViewHeader.vue';
 import ViewFooter from './ViewFooter.vue';
 import BankComponents from './BankComponents.vue';
 import PrintButton from 'src/components/button/PrintButton.vue';
+import { CancelButton } from 'components/button';
 import { convertTemplate } from 'src/utils/string-template';
 
 const configStore = useConfigStore();
 const branchStore = useBranchStore();
 const customerStore = useCustomerStore();
 const quotationStore = useQuotationStore();
+const { t } = useI18n();
 const { data: config } = storeToRefs(configStore);
 
 type Product = {
@@ -323,6 +326,20 @@ function calcPrice(c: Product) {
   return precisionRound(price + vat);
 }
 
+async function closeTab() {
+  dialogWarningClose(t, {
+    message: t('dialog.message.close'),
+    action: () => {
+      window.close();
+    },
+    cancel: () => {},
+  });
+}
+
+function closeAble() {
+  return window.opener !== null;
+}
+
 watch(elements, () => {});
 
 function print() {
@@ -333,7 +350,15 @@ function print() {
 <template>
   <div class="toolbar">
     <PrintButton solid @click="print" />
+    <CancelButton
+      outlined
+      id="btn-close"
+      @click="closeTab()"
+      :label="$t('dialog.action.close')"
+      v-if="closeAble()"
+    />
   </div>
+
   <div
     class="row justify-between container color-quotation"
     :class="{
@@ -641,7 +666,7 @@ function print() {
   position: sticky;
   top: 0;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   padding: 1rem;