feat: เพิ่ม undo

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, toRaw } from 'vue';
 import { storeToRefs } from 'pinia';
 
 import { Pagination } from 'src/stores/types';
@@ -816,7 +816,12 @@ async function submitBranch() {
 }
 
 function undo() {
-  if (selectorLabel.value === 'EMPLOYER') infoDrawerEdit.value = false;
+  if (selectorLabel.value === 'EMPLOYER') {
+    formData.value = {
+      ...prevCustomer.value,
+    };
+    infoDrawerEdit.value = false;
+  }
 
   if (selectorLabel.value === 'EMPLOYEE') {
     if (!currentEmployee.value) return;
@@ -839,8 +844,19 @@ async function employeeFilterOwnerBranch(
   });
 }
 
+const prevCustomer = ref<CustomerCreate>({
+  status: 'CREATED',
+  customerType: 'CORP',
+  customerName: '',
+  customerNameEN: '',
+  personName: '',
+  taxNo: '',
+  customerBranch: [],
+  image: null,
+});
+
 async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
-  formData.value = {
+  prevCustomer.value = {
     status: 'CREATED',
     customerType: data.customerType,
     customerName: data.customerName,
@@ -852,7 +868,7 @@ async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
   };
 
   data.branch.forEach((v) => {
-    formData.value.customerBranch?.push({
+    prevCustomer.value.customerBranch?.push({
       id: v.id,
       address: v.address,
       addressEN: v.addressEN,
@@ -881,6 +897,15 @@ async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
       wageRate: v.wageRate,
     });
   });
+
+  cloneData();
+}
+
+function cloneData() {
+  formData.value = {
+    ...prevCustomer.value,
+    customerBranch: structuredClone(toRaw(prevCustomer.value.customerBranch)),
+  };
 }
 
 async function assignFormDataEmployee(id: string) {
@@ -2448,7 +2473,12 @@ watch(selectorLabel, async () => {
     v-model:drawer-open="infoDrawerBranch"
     :badgeLabel="currentBranch.code"
     badgeClass="app-bg-pers"
-    :undo="() => undo()"
+    :undo="
+      () => {
+        cloneData();
+        infoDrawerEdit = false;
+      }
+    "
     :isEdit="infoDrawerEdit"
     :close="() => onCloseBranch()"
     :editData="() => (infoDrawerEdit = true)"