feat: add close tab

src/pages/09_task-order/document_view/MainPage.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia';
 import { onMounted, nextTick, ref } from 'vue';
+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 { precisionRound } from 'src/utils/arithmetic';
 
@@ -12,6 +13,7 @@ import { precisionRound } from 'src/utils/arithmetic';
 import { Branch } from 'stores/branch/types';
 
 // NOTE: Import Components
+import { CancelButton } from 'components/button';
 import ViewHeader from './ViewHeader.vue';
 import ViewFooter from './ViewFooter.vue';
 import PrintButton from 'src/components/button/PrintButton.vue';
@@ -29,6 +31,7 @@ const route = useRoute();
 const taskOrder = useTaskOrderStore();
 const configStore = useConfigStore();
 const config = storeToRefs(configStore).data;
+const { t } = useI18n();
 const viewType = ref<'docOrder' | 'docReceive'>('docOrder');
 
 type Data = TaskOrder;
@@ -250,11 +253,32 @@ onMounted(async () => {
 function print() {
   window.print();
 }
+
+async function closeTab() {
+  dialogWarningClose(t, {
+    message: t('dialog.message.close'),
+    action: () => {
+      window.close();
+    },
+    cancel: () => {},
+  });
+}
+
+function closeAble() {
+  return window.opener !== null;
+}
 </script>
 
 <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"
@@ -489,7 +513,7 @@ function print() {
   position: sticky;
   top: 0;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   padding: 1rem;