From 02c5aa2a1cb3bebe957282302f3dfef83da8b347 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 25 Jun 2024 15:46:52 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20undo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 40 ++++++++++++++++---
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 650592ab..c699b95c 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/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)"