feat: cancel edit on service dialog

src/pages/04_product-service/MainPage.vue

@@ -100,7 +100,6 @@ const stat = ref<
 
 import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
-import { time } from 'console';
 import { storeToRefs } from 'pinia';
 
 const { t } = useI18n();
@@ -618,12 +617,14 @@ const prevService = ref<ServiceCreate>({
   code: '',
   productTypeId: '',
 });
+const currentService = ref<ServiceById>();
 
 async function assignFormDataProductService(id: string) {
   const res = await fetchListServiceById(id);
 
   if (res) {
     statusToggle.value = res.status === 'INACTIVE' ? false : true;
+    currentService.value = JSON.parse(JSON.stringify(res));
 
     prevService.value = {
       code: res.code,
@@ -657,7 +658,7 @@ async function assignFormDataProductService(id: string) {
         product: item.productOnWork.map((productOnWorkItem) => {
           return {
             ...productOnWorkItem.product,
-            nameEn: '',
+            nameEn: productOnWorkItem.product.name,
           };
         }),
       };
@@ -918,6 +919,28 @@ async function fetchSearch() {
   }
 }
 
+function cloneData() {
+  if (!currentService.value) return;
+  formDataProductService.value = {
+    ...prevService.value,
+    attributes: JSON.parse(JSON.stringify(currentService.value.attributes)),
+  };
+
+  workItems.value = currentService.value.work.map((item) => {
+    return {
+      id: item.id,
+      name: item.name,
+      attributes: JSON.parse(JSON.stringify(item.attributes)),
+      product: item.productOnWork.map((productOnWorkItem) => {
+        return {
+          ...productOnWorkItem.product,
+          nameEn: productOnWorkItem.product.name,
+        };
+      }),
+    };
+  });
+}
+
 onMounted(async () => {
   calculateStats();
   await fetchListGroups();
@@ -2116,7 +2139,7 @@ watch(currentPageService, async () => {
     :undo="
       () => {
         infoServiceEdit = false;
-        formDataProductService = { ...prevService };
+        cloneData();
         statusToggle = prevService.status === 'INACTIVE' ? false : true;
       }
     "
@@ -2142,12 +2165,6 @@ watch(currentPageService, async () => {
           v-if="currentServiceTab === 'serviceInformation'"
           dense
           service
-          @service-properties="
-            () => {
-              tempValueProperties = formDataProductService.attributes;
-              openPropertiesDialog('service');
-            }
-          "
           v-model:service-code="formDataProductService.code"
           v-model:service-description="formDataProductService.detail"
           v-model:service-name-th="formDataProductService.name"