feat: confirm close while edit work name

src/components/FormDialog.vue

@@ -139,7 +139,6 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
               padding="xs"
               class="close-btn"
               :class="{ dark: $q.dark.isActive }"
-              v-close-popup
               @click="close"
             />
           </div>

src/i18n/en-US/alert-dialog.ts

@@ -1,6 +1,8 @@
 export default {
   warning: 'Warning',
   warningForgetInput: 'You have incomplete information.',
+  warningClose:
+    "You haven't saved your data. Do you want to close this window?",
 
   errorOccurred: 'An error occurred.',
 

src/i18n/th-th/alert-dialog.ts

@@ -1,6 +1,7 @@
 export default {
   warning: 'เตือน',
   warningForgetInput: 'คุณกรอกข้อมูลไม่ครบ',
+  warningClose: 'คุณยังไม่ได้บันทึกการแก้ไข ยืนยันที่จะปิดใช่หรือไม่',
 
   errorOccurred: 'เกิดข้อผิดพลาด.',
 

src/pages/04_product-service/MainPage.vue

@@ -22,7 +22,7 @@ import useOptionStore from 'src/stores/options';
 import { Status } from 'src/stores/types';
 import NoData from 'components/NoData.vue';
 
-import { dialog } from 'src/stores/utils';
+import { dialog, dialogWarningClose } from 'src/stores/utils';
 
 import useProductServiceStore from 'src/stores/product-service';
 import {
@@ -647,16 +647,20 @@ function confirmDeleteWork(id: string) {
   });
 }
 
-function confirmCloseWork() {
-  dialog({
-    color: 'negative',
-    icon: 'mdi-alert',
-    title: t('deleteConfirmTitle'),
-    actionText: t('delete'),
-    message: t('deleteConfirmMessage'),
-    action: async () => {},
-    cancel: () => {},
-  });
+function triggerConfirmCloseWork() {
+  const isWorkNameEdit =
+    workNameRef.value && workNameRef.value.isWorkNameEdit
+      ? workNameRef.value.isWorkNameEdit()
+      : false;
+  if (isWorkNameEdit) {
+    dialogWarningClose(t, {
+      action: () => {
+        manageWorkNameDialog.value = false;
+      },
+    });
+  } else {
+    manageWorkNameDialog.value = false;
+  }
 }
 
 const tempValueProperties = ref<Attributes>({
@@ -1785,8 +1789,9 @@ watch(currentStatus, async () => {
     no-footer
     height="65vh"
     width="65%"
-    :title="$t('manage')"
     v-model:modal="manageWorkNameDialog"
+    :title="$t('manage')"
+    :close="triggerConfirmCloseWork"
   >
     <WorkNameManagement
       ref="workNameRef"

src/stores/utils/index.ts

@@ -1,6 +1,6 @@
 import { Dialog } from 'quasar';
 import GlobalDialog from 'components/GlobalDialog.vue';
-import { useI18n } from 'vue-i18n';
+import { ComposerTranslation, useI18n } from 'vue-i18n';
 
 export function dialog(opts: {
   title: string;
@@ -20,6 +20,28 @@ export function dialog(opts: {
   });
 }
 
+export function dialogWarningClose(
+  t: ComposerTranslation,
+  opts: {
+    action?: (...args: unknown[]) => unknown;
+    cancel?: (...args: unknown[]) => unknown;
+  },
+) {
+  dialog({
+    color: 'warning',
+    icon: 'mdi-alert',
+    title: t('warning'),
+    actionText: t('ok'),
+    message: t('warningClose'),
+    action: async () => {
+      if (opts.action) opts.action();
+    },
+    cancel: () => {
+      if (opts.cancel) opts.cancel();
+    },
+  });
+}
+
 export function calculateAge(birthDate: Date | null | string) {
   const { locale } = useI18n();