From 1164748e1b524224bfd355f671448a9153274ec5 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 6 Aug 2024 15:47:33 +0700
Subject: [PATCH] refactor:  detect unsave and confirmation of employee

---
 src/pages/03_customer-management/MainPage.vue | 37 +++++++++++++++++++
 src/pages/03_customer-management/form.ts      | 11 ++++++
 2 files changed, 48 insertions(+)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 49960447..b75ae851 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -408,6 +408,31 @@ async function editCustomerForm(id: string) {
   customerFormState.value.editCustomerId = id;
 }
 
+function employeeConfirmUnsave(close = true) {
+  dialog({
+    color: 'warning',
+    icon: 'mdi-alert',
+    title: t('form.warning.title'),
+    actionText: t('ok'),
+    persistent: true,
+    message: t('form.warning.unsave'),
+    action: () => {
+      employeeFormStore.resetFormDataEmployee();
+      employeeFormState.value.editReadonly = true;
+      employeeFormState.value.dialogModal = !close;
+    },
+    cancel: () => {},
+  });
+}
+
+function employeeFormUndo(close = true) {
+  if (employeeFormStore.isFormDataDifferent()) {
+    return employeeConfirmUnsave(close);
+  }
+  employeeFormStore.resetFormDataEmployee();
+  employeeFormState.value.editReadonly = true;
+}
+
 function customerConfirmUnsave(close = true) {
   dialog({
     color: 'warning',
@@ -1838,6 +1863,18 @@ function createEmployeeForm() {
   <DialogForm
     :title="$t('form.title.create', { name: 'Employee' })"
     v-model:modal="employeeFormState.dialogModal"
+    :undo="() => employeeFormUndo(false)"
+    :before-close="
+      () => {
+        console.log('asd');
+
+        if (employeeFormStore.isFormDataDifferent()) {
+          employeeConfirmUnsave();
+          return true;
+        }
+        return false;
+      }
+    "
   >
     <div class="q-mx-lg q-mt-lg">
       <ProfileBanner
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 9aa6f864..e16787e0 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -243,6 +243,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     isEmployeeEdit: boolean;
     profileSubmit: boolean;
     formDataEmployeeSameAddr: boolean;
+    editReadonly: boolean;
     infoEmployeePersonCard: {
       id: string;
       img: string;
@@ -275,6 +276,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     isEmployeeEdit: false,
     profileSubmit: false,
     formDataEmployeeSameAddr: true,
+    editReadonly: false,
     infoEmployeePersonCard: [],
     formDataEmployeeOwner: undefined,
   });
@@ -367,6 +369,13 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     structuredClone(defaultFormData),
   );
 
+  function isFormDataDifferent() {
+    return (
+      JSON.stringify(resetEmployeeData) !==
+      JSON.stringify(currentFromDataEmployee.value)
+    );
+  }
+
   function resetFormDataEmployee(cb?: (...args: any[]) => unknown) {
     currentFromDataEmployee.value = structuredClone(resetEmployeeData);
     cb?.();
@@ -452,5 +461,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     assignFormDataEmployee,
 
     employeeFilterOwnerBranch,
+
+    isFormDataDifferent,
   };
 });