refactor(01): dialog before submit (abbreviation alert) & i18n

src/boot/axios.ts

@@ -50,7 +50,7 @@ api.interceptors.response.use(
       icon: 'mdi-alert',
       title:
         err.response.status >= 400 && err.response.status < 500
-          ? 'warning'
+          ? 'form.warning.title'
           : 'errorOccurred',
       persistent: true,
       enablei18n: true,

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

@@ -82,4 +82,6 @@ export default {
   relationCustomerNotFound: 'Customer cannot be found.',
 
   relationCustomerBranchNotFound: 'Customer Branch cannot be found.',
+
+  sameBranchCodeExists: 'This Head Office Abbreviation is already in use.',
 };

src/i18n/en-US/index.ts

@@ -110,6 +110,10 @@ export default {
       unsave:
         'You have unsaved changes. Are you sure you want to close this window?',
     },
+    info: {
+      cantChange:
+        'The {field} cannot be changed later. Do you want to use "{name}"',
+    },
   },
   customer: {
     employer: 'Employer',
@@ -147,4 +151,7 @@ export default {
       attachment: 'Attachment',
     },
   },
+  backend: {
+    sameBranchCodeExists: 'This Head Office Abbreviation is already in use.',
+  },
 };

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

@@ -81,4 +81,6 @@ export default {
   relationCustomerNotFound: 'ไม่พบลูกค้า',
 
   relationCustomerBranchNotFound: 'ไม่พบสาขาลูกค้า',
+
+  sameBranchCodeExists: 'ตัวย่อสำนักงานใหญ่นี้ถูกใช้แล้ว',
 };

src/i18n/th-th/index.ts

@@ -111,6 +111,10 @@ export default {
       unsave:
         'คุณมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก คุณต้องการปิดหน้าต่างนี้หรือไม่',
     },
+    info: {
+      cantChange:
+        '{field} ไม่สามารถแก้ไขภายหลังได้ คุณต้องการใช้ "{name}" ใช่หรือไม่',
+    },
   },
   customer: {
     employer: 'นายจ้าง',
@@ -150,4 +154,7 @@ export default {
       attachment: 'เอกสารเพิ่มเติม',
     },
   },
+  backend: {
+    sameBranchCodeExists: 'ตัวย่อสำนักงานใหญ่นี้ถูกใช้แล้ว',
+  },
 };

src/pages/01_branch-management/MainPage.vue

@@ -491,7 +491,8 @@ async function triggerChangeStatus(
   return await new Promise((resolve) => {
     dialog({
       color: status !== 'INACTIVE' ? 'warning' : 'info',
-      icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
+      icon:
+        status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline',
       title: t('confirmChangeStatusTitle'),
       actionText:
         status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
@@ -532,27 +533,41 @@ async function onSubmit() {
   }
 
   if (formType.value === 'create') {
-    if (formTypeBranch.value === 'subBranch') {
+    dialog({
-      const currentRecord = branchData.value.result.find(
+      color: 'info',
-        (x) => x.id === formData.value.headOfficeId,
+      icon: 'mdi-message-processing-outline',
-      );
+      message: t('form.info.cantChange', {
+        field: t('formDialogHqAbbreviation'),
+        name: formData.value.code,
+      }),
+      actionText: t('agree'),
+      persistent: true,
+      title: t('form.warning.title'),
+      cancel: () => {},
+      action: async () => {
+        if (formTypeBranch.value === 'subBranch') {
+          const currentRecord = branchData.value.result.find(
+            (x) => x.id === formData.value.headOfficeId,
+          );
 
-      formData.value.headOfficeId = currentRecord?.id;
+          formData.value.headOfficeId = currentRecord?.id;
-      formData.value.code = formData.value.code?.slice(0, -6);
+          formData.value.code = formData.value.code?.slice(0, -6);
-      delete formData.value['codeHeadOffice'];
+          delete formData.value['codeHeadOffice'];
-    }
+        }
 
-    await branchStore.create(
+        await branchStore.create(
-      {
+          {
-        ...formData.value,
+            ...formData.value,
-        qrCodeImage: profileFile.value,
+            qrCodeImage: profileFile.value,
-        imageUrl: profileFileImg.value,
+            imageUrl: profileFileImg.value,
+          },
+          formBankBook.value,
+        );
+
+        await branchStore.fetchList({ pageSize: 99999 });
+        modal.value = false;
       },
-      formBankBook.value,
+    });
-    );
-
-    await branchStore.fetchList({ pageSize: 99999 });
-    modal.value = false;
   }
 
   const _stats = await branchStore.stats();