From fe5fdf723b163a2fb12b562016c2d5557d26a1d0 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 17 Apr 2025 22:27:53 +0200
Subject: [PATCH] refactor: refs #8217 clean up code and improve readability in
 various components and tests

---
 src/components/CrudModel.vue                 |  1 -
 src/components/FormModel.vue                 | 58 +++++++++++++-------
 src/components/__tests__/CrudModel.spec.js   |  3 +-
 src/components/__tests__/FormModel.spec.js   |  8 ++-
 src/components/common/VnLocation.vue         |  4 +-
 src/filters/__tests__/getDifferences.spec.js | 41 ++++++++++++++
 src/filters/getDifferences.js                | 25 ++++-----
 7 files changed, 102 insertions(+), 38 deletions(-)
 create mode 100644 src/filters/__tests__/getDifferences.spec.js

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index ae7bea029..96b550205 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -98,7 +98,6 @@ defineExpose({
     reset,
     hasChanges,
     saveChanges,
-
     getChanges,
     formData,
     originalData,
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index f32b3da4c..b8f783a84 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -113,7 +113,7 @@ const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
 const isResetting = ref(false);
 const hasChanges = ref(!$props.observeFormChanges);
-const originalData = computed(() => state.get(modelValue) ?? {});
+const originalData = computed(() => state.get(modelValue));
 const formData = ref();
 const defaultButtons = computed(() => ({
     save: {
@@ -223,30 +223,49 @@ async function fetch() {
     }
 }
 
+async function handleResponse(response, showCreatedNotification = false) {
+    if (showCreatedNotification) {
+        notify('globals.dataCreated', 'positive');
+    }
+    updateAndEmit('onDataSaved', {
+        val: formData.value,
+        res: response?.data,
+        old: originalData.value,
+    });
+    if ($props.reload) await arrayData.fetch({});
+    hasChanges.value = false;
+}
+
+async function create() {
+    formData.value = trimData(formData.value);
+    const url = $props.urlCreate;
+    const response = await Promise.resolve(
+        $props.saveFn ? $props.saveFn(formData.value) : axios.post(url, formData.value),
+    );
+    await handleResponse(response, true);
+}
+
+async function update() {
+    formData.value = trimData(formData.value);
+    const body = $props.mapper(originalData.value, formData.value);
+    const url = $props.urlUpdate || $props.url || arrayData.store.url;
+    const response = await Promise.resolve(
+        $props.saveFn ? $props.saveFn(body) : axios.patch(url, body),
+    );
+    await handleResponse(response);
+}
+
 async function save() {
     if ($props.observeFormChanges && !hasChanges.value)
         return notify('globals.noChanges', 'negative');
 
     isLoading.value = true;
     try {
-        formData.value = trimData(formData.value);
-        const body = $props.mapper(originalData.value, formData.value);
-        const method = $props.urlCreate ? 'post' : 'patch';
-        const url =
-            $props.urlCreate || $props.urlUpdate || $props.url || arrayData.store.url;
-        const response = await Promise.resolve(
-            $props.saveFn ? $props.saveFn(body) : axios[method](url, body),
-        );
-
-        if ($props.urlCreate) notify('globals.dataCreated', 'positive');
-
-        updateAndEmit('onDataSaved', {
-            val: formData.value,
-            res: response?.data,
-            old: originalData.value,
-        });
-        if ($props.reload) await arrayData.fetch({});
-        hasChanges.value = false;
+        if ($props.urlCreate != null) {
+            await create();
+        } else {
+            await update();
+        }
     } finally {
         isLoading.value = false;
     }
@@ -326,7 +345,6 @@ defineExpose({
 <template>
     <div class="column items-center full-width">
         <QForm
-            id="formModel"
             v-on="$attrs"
             ref="myForm"
             v-if="formData"
diff --git a/src/components/__tests__/CrudModel.spec.js b/src/components/__tests__/CrudModel.spec.js
index 475f56aec..7c672157d 100644
--- a/src/components/__tests__/CrudModel.spec.js
+++ b/src/components/__tests__/CrudModel.spec.js
@@ -115,6 +115,7 @@ describe('CrudModel', () => {
             expect(result).toEqual({
                 a: null,
                 b: 4,
+                c: 3,
                 d: 5,
             });
         });
@@ -241,7 +242,7 @@ describe('CrudModel', () => {
 
             await vm.saveChanges(data);
 
-            expect(postMock).toHaveBeenCalledWith(vm.url + '/crud', data);
+            expect(postMock).toHaveBeenCalledWith(`${vm.url}/crud`, data);
             expect(vm.isLoading).toBe(false);
             expect(vm.hasChanges).toBe(false);
             expect(vm.originalData).toEqual(JSON.parse(JSON.stringify(vm.formData)));
diff --git a/src/components/__tests__/FormModel.spec.js b/src/components/__tests__/FormModel.spec.js
index 86cb37ed6..e292085d4 100644
--- a/src/components/__tests__/FormModel.spec.js
+++ b/src/components/__tests__/FormModel.spec.js
@@ -3,11 +3,17 @@ import { createWrapper } from 'app/test/vitest/helper';
 import { default as axios } from 'axios';
 
 import FormModel from 'src/components/FormModel.vue';
+import { useState } from 'src/composables/useState';
 
 describe('FormModel', () => {
     const model = 'mockModel';
     const url = 'mockUrl';
     const formInitialData = { mockKey: 'mockVal' };
+    let state;
+    beforeEach(() => {
+        state = useState();
+        state.set(model, formInitialData);
+    });
 
     describe('modelValue', () => {
         it('should use the provided model', () => {
@@ -118,7 +124,7 @@ describe('FormModel', () => {
                 propsData: {
                     url,
                     model,
-                    formInitialData: { ...formInitialData, key1: 'valueKey1' },
+                    formInitialData,
                 },
             });
             await vm.$nextTick();
diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 5028e876d..fbff1d222 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -21,7 +21,7 @@ watch(
     (newValue) => {
         if (!modelValue.value) return;
         modelValue.value = formatLocation(newValue) ?? null;
-    }
+    },
 );
 
 const mixinRules = [requiredFieldRule];
@@ -45,7 +45,7 @@ const formatLocation = (obj, properties = locationProperties) => {
     });
 
     const filteredParts = parts.filter(
-        (part) => part !== null && part !== undefined && part !== ''
+        (part) => part !== null && part !== undefined && part !== '',
     );
 
     return filteredParts.join(', ');
diff --git a/src/filters/__tests__/getDifferences.spec.js b/src/filters/__tests__/getDifferences.spec.js
new file mode 100644
index 000000000..1c28b77b6
--- /dev/null
+++ b/src/filters/__tests__/getDifferences.spec.js
@@ -0,0 +1,41 @@
+import getDifferences from '../getDifferences';
+
+describe('getDifferences', () => {
+    it('should handle empty initialData', () => {
+        const initialData = {};
+        const formData = { name: 'John' };
+        expect(getDifferences(initialData, formData)).toEqual({ name: 'John' });
+    });
+
+    it('should detect when formData has a key not present in initialData', () => {
+        const initialData = { age: 30 };
+        const formData = { name: 'John' };
+        expect(getDifferences(initialData, formData)).toEqual({ age: 30, name: 'John' });
+    });
+
+    it('should detect when formData has different value for existing key', () => {
+        const initialData = { name: 'John', age: 30 };
+        const formData = { name: 'Jane', age: 30 };
+        expect(getDifferences(initialData, formData)).toEqual({ name: 'Jane' });
+    });
+
+    it('should detect when formData has null value for existing key', () => {
+        const initialData = { name: 'John' };
+        const formData = { name: null };
+        expect(getDifferences(initialData, formData)).toEqual({ name: null });
+    });
+
+    it('should handle missing keys in formData', () => {
+        const initialData = { name: 'John', age: 30 };
+        const formData = { name: 'John' };
+        expect(getDifferences(initialData, formData)).toEqual({ age: 30 });
+    });
+
+    it('should handle complex objects', () => {
+        const initialData = { user: { name: 'John', age: 30 } };
+        const formData = { user: { name: 'John', age: 31 } };
+        expect(getDifferences(initialData, formData)).toEqual({
+            user: { name: 'John', age: 31 },
+        });
+    });
+});
diff --git a/src/filters/getDifferences.js b/src/filters/getDifferences.js
index 13ed784c5..5107170cf 100644
--- a/src/filters/getDifferences.js
+++ b/src/filters/getDifferences.js
@@ -1,23 +1,22 @@
-export default function getDifferences(initialData, formData) {
+export default function getDifferences(initialData = {}, formData = {}) {
     const diff = {};
-    if (!initialData) return diff;
-    if (!formData) return initialData;
-    delete initialData.$index;
-    delete formData.$index;
+    delete initialData?.$index;
+    delete formData?.$index;
 
+    // Añadimos los valores que están en initialData
     for (const key in initialData) {
-        if (
-            formData[key] &&
-            JSON.stringify(initialData[key]) !== JSON.stringify(formData[key])
-        ) {
+        if (!Object.prototype.hasOwnProperty.call(formData, key)) {
+            // Caso 1: initialData tiene una clave que no tiene formData
+            diff[key] = initialData[key];
+        } else if (JSON.stringify(initialData[key]) !== JSON.stringify(formData[key])) {
+            // Caso 2 y 3: valores diferentes o null en formData
             diff[key] = formData[key];
         }
     }
+
+    // Añadimos las claves nuevas de formData
     for (const key in formData) {
-        if (
-            initialData[key] === undefined ||
-            JSON.stringify(initialData[key]) !== JSON.stringify(formData[key])
-        ) {
+        if (!Object.prototype.hasOwnProperty.call(initialData, key)) {
             diff[key] = formData[key];
         }
     }