feat: add lodash for improved object comparison and update caching logic

package-lock.json

@@ -16,6 +16,7 @@
         "chart.js": "^4.4.7",
         "chartjs-plugin-datalabels": "^2.2.0",
         "date-fns": "^3.6.0",
+        "lodash": "^4.17.21",
         "pinia": "^2.3.0",
         "qrcode": "^1.5.4",
         "quasar": "^2.17.4",
@@ -33,6 +34,7 @@
         "@intlify/unplugin-vue-i18n": "^2.0.0",
         "@intlify/vue-i18n-loader": "^4.2.0",
         "@quasar/app-vite": "^2.2.1",
+        "@types/lodash": "^4.17.20",
         "autoprefixer": "^10.4.20",
         "eslint": "^8.57.1",
         "eslint-config-prettier": "^9.1.0",
@@ -2244,6 +2246,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -6234,7 +6243,6 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.merge": {

package.json

@@ -22,6 +22,7 @@
     "chart.js": "^4.4.7",
     "chartjs-plugin-datalabels": "^2.2.0",
     "date-fns": "^3.6.0",
+    "lodash": "^4.17.21",
     "pinia": "^2.3.0",
     "qrcode": "^1.5.4",
     "quasar": "^2.17.4",
@@ -39,6 +40,7 @@
     "@intlify/unplugin-vue-i18n": "^2.0.0",
     "@intlify/vue-i18n-loader": "^4.2.0",
     "@quasar/app-vite": "^2.2.1",
+    "@types/lodash": "^4.17.20",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",

src/api/cacheService.js

@@ -83,7 +83,7 @@ const clearCache = async (cacheKey) => {
             new Promise((resolve) => {
               const deleteRequest = store.delete(key);
               deleteRequest.onsuccess = () => resolve();
-            }),
+            })
         );
 
       Promise.all(deletePromises).then(() => resolve());
@@ -104,10 +104,6 @@ const isCacheableValue = (value) => {
     return false;
   }
 
-  if (Array.isArray(value) && value.length === 0) {
-    return false;
-  }
-
   if (
     typeof value === "object" &&
     !Array.isArray(value) &&
@@ -116,6 +112,14 @@ const isCacheableValue = (value) => {
     return false;
   }
 
+  if (Array.isArray(value?.payload) && value?.payload?.length === 0) {
+    return false;
+  }
+
+  if (value?.payload == null) {
+    return false;
+  }
+
   return true;
 };
 

src/composables/useFormUpdateTracker.js

@@ -1,5 +1,5 @@
 import { reactive, computed, toRaw, isReactive, watch } from "vue";
-import { isEqual as isEqualDates, parse, isValid } from "date-fns";
+import { isEqual } from "lodash";
 
 export const useFormUpdateTracker = (initialFormValue) => {
   const form = reactive(deepClone(initialFormValue));
@@ -17,14 +17,10 @@ export const useFormUpdateTracker = (initialFormValue) => {
   watch(
     form,
     (newValue) => {
-      const changes = diff(newValue, originalForm);
-      Object.keys(changes).forEach((key) => {
-        if (changes[key] === null) {
-          delete updatedFields[key];
-        } else {
-          updatedFields[key] = deepClone(changes[key]);
-        }
-      });
+      const changes = diff(toRaw(newValue), originalForm);
+      let tempObj = {}
+      Object.assign(tempObj, changes);
+      updatedFields.value = tempObj
     },
     { deep: true },
   );
@@ -169,83 +165,3 @@ function deepClone(obj) {
   }
   return JSON.parse(JSON.stringify(obj));
 }
-
-/**
- * Attempts to parse a string into a Date object using a list of expected formats.
- * @param {string} str The string to parse.
- * @returns {Date|null} A valid Date object or null if parsing fails.
- */
-function tryParseDate(str) {
-  if (typeof str !== "string") {
-    return null;
-  }
-
-  const dateFormats = ["yyyy-MM-dd HH:mm:ss", "yyyy-MM-dd HH:mm", "yyyy-MM-dd"];
-
-  for (const format of dateFormats) {
-    const parsedDate = parse(str, format, new Date());
-    if (isValid(parsedDate)) {
-      return parsedDate;
-    }
-  }
-
-  return null;
-}
-
-/**
- * Compares two values for deep equality.
- * Handles arrays, objects, primitives, Date objects, and common date string formats.
- * @param {*} a The first value to compare.
- * @param {*} b The second value to compare.
- * @returns {boolean} True if the values are equal, false otherwise.
- */
-export function isEqual(a, b) {
-  if (a === b) return true;
-
-  if (
-    typeof a !== "object" ||
-    typeof b !== "object" ||
-    a === null ||
-    b === null
-  ) {
-    if (typeof a === "string" && typeof b === "string") {
-      const dateA = tryParseDate(a);
-      const dateB = tryParseDate(b);
-
-      if (dateA && dateB) {
-        return isEqualDates(dateA, dateB);
-      }
-    }
-    return false;
-  }
-
-  if (a instanceof Date && b instanceof Date) {
-    return isEqualDates(a, b);
-  }
-
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-      if (!isEqual(a[i], b[i])) return false;
-    }
-    return true;
-  }
-
-  if (Array.isArray(a) || Array.isArray(b)) return false;
-
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-
-  if (aKeys.length !== bKeys.length) return false;
-
-  for (const key of aKeys) {
-    if (
-      !Object.prototype.hasOwnProperty.call(b, key) ||
-      !isEqual(a[key], b[key])
-    ) {
-      return false;
-    }
-  }
-
-  return true;
-}