feat: detect unsave and confirmation

src/i18n/en-US/index.ts

@@ -99,6 +99,11 @@ export default {
       invalid: 'Invalid value.',
       invalidCustomeMessage: 'Invalid value. {msg}',
     },
+    warning: {
+      title: 'Warning {msg}',
+      unsave:
+        'You have unsaved changes. Are you sure you want to close this window?',
+    },
   },
   customer: {
     form: {

src/i18n/th-th/index.ts

@@ -100,6 +100,11 @@ export default {
       invalid: 'ค่าที่ไม่ถูกต้อง',
       invalidCustomeMessage: 'ค่าที่ไม่ถูกต้อง {msg}',
     },
+    warning: {
+      title: 'แจ้งเตือน {msg}',
+      unsave:
+        'คุณมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก คุณต้องการปิดหน้าต่างนี้หรือไม่',
+    },
   },
   customer: {
     form: {

src/pages/03_customer-management/MainPage.vue

@@ -29,6 +29,7 @@ import SideMenu from 'src/components/SideMenu.vue';
 import BasicInformation from 'src/components/03_customer-management/employee/BasicInformation.vue';
 import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
 import FormBasicInfo from './components/FormBasicInfo.vue';
+import FormBranch from './components/FormBranch.vue';
 import CustomerInfoComponent from './components/CustomerBranch.vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
 
@@ -82,6 +83,7 @@ async function init() {
       currentCustomer.value = _data;
       utilsStore.currentTitle.path.push({
         text: currentCustomer.value.customerName,
+        i18n: false,
       });
     } else {
       router.push('/customer-management');
@@ -398,6 +400,30 @@ async function editCustomerForm(id: string) {
   customerFormState.value.editCustomerId = id;
 }
 
+function customerConfirmUnsave() {
+  dialog({
+    color: 'warning',
+    icon: 'mdi-alert',
+    title: t('form.warning.title'),
+    actionText: t('ok'),
+    persistent: true,
+    message: t('form.warning.unsave'),
+    action: () => {
+      customerFormStore.resetForm();
+      customerFormState.value.editReadonly = true;
+    },
+    cancel: () => {},
+  });
+}
+
+function customerFormUndo() {
+  if (customerFormStore.isFormDataDifferent()) {
+    return customerConfirmUnsave();
+  }
+  customerFormStore.resetForm();
+  customerFormState.value.editReadonly = true;
+}
+
 function createCustomerForm(customerType: 'CORP' | 'PERS') {
   customerFormState.value.dialogModal = true;
   customerFormState.value.dialogType = 'create';
@@ -1657,11 +1683,7 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
     :title="$t('form.title.create', { name: 'Employer' })"
     :edit="customerFormState.dialogType === 'edit'"
     :isEdit="customerFormState.editReadonly === false"
-    :undo="
-      () => (
-        customerFormStore.resetForm(), (customerFormState.editReadonly = true)
-      )
-    "
+    :undo="() => customerFormUndo()"
     :deleteData="
       () =>
         customerFormState.editCustomerId &&
@@ -1669,8 +1691,8 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
     "
     :editData="() => (customerFormState.editReadonly = false)"
     :show="
-      async () =>
-        await fetchListOfOptionBranch().then(() => {
+      () =>
+        fetchListOfOptionBranch().then(() => {
           customerFormStore.resetForm(
             customerFormState.dialogType === 'create',
           );
@@ -1682,7 +1704,15 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
         await fetchListCustomer();
       }
     "
-    :close="() => (customerFormState.dialogModal = false)"
+    :before-close="
+      () => {
+        if (customerFormStore.isFormDataDifferent()) {
+          customerConfirmUnsave();
+          return true;
+        }
+        return false; // close
+      }
+    "
     no-footer
   >
     <div class="q-mx-lg q-mt-lg">
@@ -1713,13 +1743,19 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
         style="height: 100%; max-height: 100; overflow-y: auto"
         v-if="$q.screen.gt.sm"
       >
-        <div class="q-py-md q-pl-md">
+        <div class="q-py-md q-pl-md q-pr-sm">
           <SideMenu
             :menu="[
               {
                 name: $t('customer.form.group.basicInfo'),
                 anchor: 'form-basic-info-customer',
               },
+              ...(customerFormData.customerBranch?.map((v) => ({
+                name: $t('customer.form.branch.title', {
+                  name: v.branchNo || 0,
+                }),
+                anchor: `form-branch-customer-no-${v.branchNo}`,
+              })) || []),
             ]"
             background="transparent"
             :active="{
@@ -1731,11 +1767,12 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
         </div>
       </div>
       <div
-        class="col-12 col-md-10 q-pa-md"
+        class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
         id="customer-form-content"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
         <FormBasicInfo
+          class="q-mb-xl"
           :readonly="
             customerFormState.dialogType === 'edit' &&
             customerFormState.editReadonly === true
@@ -1750,6 +1787,15 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
           v-model:registered-branch-id="customerFormData.registeredBranchId"
           v-model:branch-options="registerAbleBranchOption"
         />
+        <FormBranch
+          id="form-branch-customer"
+          :editable="
+            customerFormState.dialogType === 'create' ||
+            customerFormState.editReadonly === false
+          "
+          @add-branch="customerFormStore.addCurrentCustomerBranch()"
+          v-model:customer-branch="customerFormData.customerBranch"
+        />
       </div>
     </div>
 

src/pages/03_customer-management/components/FormBranch.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { CustomerCreate } from 'src/stores/customer/types';
+
+const branch = defineModel<CustomerCreate['customerBranch']>('customerBranch', {
+  default: [],
+});
+
+defineProps<{
+  editable?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="row q-col-gutter-md">
+    <div class="col-12 text-weight-bold text-body1 row items-center">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-briefcase"
+        style="background-color: var(--surface-3)"
+      />
+      <span>{{ $t('customer.form.group.branch') }}</span>
+      <q-btn
+        type="button"
+        rounded
+        flat
+        dense
+        unelevated
+        color="primary"
+        @click="$emit('addBranch')"
+        v-if="editable"
+        icon="mdi-plus"
+        class="q-ml-md"
+      />
+    </div>
+
+    <template v-for="item in branch">
+      <span
+        class="col-12 text-weight-bold"
+        :id="`form-branch-customer-no-${item.branchNo}`"
+      >
+        {{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
+      </span>
+    </template>
+  </div>
+</template>

src/stores/utils/index.ts

@@ -167,6 +167,7 @@ const useUtilsStore = defineStore('utilsStore', () => {
     title: string;
     path: {
       text: string;
+      i18n?: boolean;
       argsi18n?: Record<string, string>;
       handler?: () => unknown;
     }[];