feat: implement deepEquals function and enhance form service validation

src/components/04_product-service/BasicInformation.vue

@@ -180,9 +180,11 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
       >
         <q-editor
           dense
-          :model-value="readonly ? detail || '-' : detail || ''"
+          :model-value="
+            readonly ? serviceDescription || '-' : serviceDescription || ''
+          "
           @update:model-value="
-            (v) => (typeof v === 'string' ? (detail = v) : '')
+            (v) => (typeof v === 'string' ? (serviceDescription = v) : '')
           "
           @drop="detailEditorImageDrop"
           min-height="5rem"

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

@@ -66,6 +66,7 @@ import {
   WorkflowTemplate,
 } from 'src/stores/workflow-template/types';
 import { useWorkflowTemplate } from 'src/stores/workflow-template';
+import { deepEquals } from 'src/utils/arr';
 
 const flowStore = useFlowStore();
 const navigatorStore = useNavigator();
@@ -1093,6 +1094,55 @@ function clearFormService() {
   profileFileImg.value = null;
 }
 
+function sameFormService() {
+  const isEdit = dialogServiceEdit.value;
+  const defaultFormService = {
+    code: isEdit ? currentService.value?.code : '',
+    name: isEdit ? currentService.value?.name : '',
+    detail: isEdit ? currentService.value?.detail : '',
+    attributes: isEdit
+      ? currentService.value?.attributes
+      : {
+          workflowId: '',
+          additional: [],
+          showTotalPrice: false,
+          workflowStep: [],
+        },
+    work: isEdit
+      ? currentService.value?.work.map((v) => ({
+          attributes: v.attributes,
+          id: v.id,
+          name: v.name,
+          product: v.productOnWork.map((p) => ({
+            id: p.productId,
+            installmentNo: p.installmentNo,
+            stepCount: p.stepCount,
+          })),
+        }))
+      : [],
+    status: isEdit ? currentService.value?.status : undefined,
+    productGroupId: isEdit ? currentService.value?.productGroupId : '',
+    installments: isEdit ? currentService.value?.installments : 1,
+    selectedImage: isEdit ? currentService.value?.selectedImage : '',
+  };
+
+  if (
+    deepEquals(
+      isEdit
+        ? formService.value
+        : {
+            ...formService.value,
+            selectedImage: '',
+            detail: formService.value.detail.replace(/<\/?[^>]+(>|$)/g, ''),
+          },
+      defaultFormService,
+    )
+  ) {
+    return true;
+  }
+  return false;
+}
+
 function assignFormDataProductServiceCreate() {
   formService.value.work = [];
 
@@ -3957,13 +4007,21 @@ watch(
         submitService();
       }
     "
-    :close="
+    :before-close="
       () => {
-        clearFormService();
+        if (workItems.length > 0 || !sameFormService()) {
-        dialogService = false;
+          dialogWarningClose($t, {
-        serviceTreeView = false;
+            action: () => {
-        onCreateImageList = { selectedImage: '', list: [] };
+              clearFormService();
-        flowStore.rotate();
+              dialogService = false;
+              serviceTreeView = false;
+              onCreateImageList = { selectedImage: '', list: [] };
+              flowStore.rotate();
+            },
+            cancel: () => {},
+          });
+          return true;
+        } else return false;
       }
     "
   >
@@ -4288,12 +4346,21 @@ watch(
         submitService();
       }
     "
-    :close="
+    :before-close="
       () => {
-        clearFormService();
+        if (!sameFormService()) {
-        flowStore.rotate();
+          dialogWarningClose($t, {
-        serviceTreeView = false;
+            action: () => {
-        dialogServiceEdit = false;
+              clearFormService();
+              dialogService = false;
+              serviceTreeView = false;
+              onCreateImageList = { selectedImage: '', list: [] };
+              flowStore.rotate();
+            },
+            cancel: () => {},
+          });
+          return true;
+        } else return false;
       }
     "
   >

src/utils/arr.ts

@@ -13,3 +13,46 @@ export function insertAt<T extends any>(arr: T[], idx: number, item: T) {
 }
 
 export default arr;
+
+export function deepEquals(
+  obj1: Record<string, any>,
+  obj2: Record<string, any>,
+): boolean {
+  // If both objects are the same reference, they are deeply equal
+  if (obj1 === obj2) {
+    return true;
+  }
+
+  // If either object is not an object or null, they are not deeply equal
+  if (
+    typeof obj1 !== 'object' ||
+    obj1 === null ||
+    typeof obj2 !== 'object' ||
+    obj2 === null
+  ) {
+    return false;
+  }
+
+  // Get the set of keys for both objects
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  // If the number of keys is different, they are not deeply equal
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  // Check if all keys in obj1 exist in obj2
+  for (const key of keys1) {
+    if (!keys2.includes(key)) {
+      return false;
+    }
+
+    // Recursively check if the values for each key are deeply equal
+    if (!deepEquals(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+
+  return true;
+}