From 0690fb6c251c66a64b8659b717f24d6a7f5d5722 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 24 Mar 2025 15:08:18 +0100
Subject: [PATCH 01/10] feat: refs #8217 implement onBeforeSave function for
 form data processing

---
 src/components/FormModel.vue | 16 ++++------------
 src/filters/index.js         |  2 ++
 src/filters/onBeforeSave.js  |  9 +++++++++
 3 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 src/filters/onBeforeSave.js

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index c4d9a4149..56df95a5e 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -12,7 +12,7 @@ import SkeletonForm from 'components/ui/SkeletonForm.vue';
 import VnConfirm from './ui/VnConfirm.vue';
 import { tMobile } from 'src/composables/tMobile';
 import { useArrayData } from 'src/composables/useArrayData';
-import { getDifferences, getUpdatedValues } from 'src/filters';
+import { getDifferences, getUpdatedValues, onBeforeSave } from 'src/filters';
 
 const { push } = useRouter();
 const quasar = useQuasar();
@@ -69,7 +69,7 @@ const $props = defineProps({
     },
     mapper: {
         type: Function,
-        default: null,
+        default: onBeforeSave,
     },
     clearStoreOnUnmount: {
         type: Boolean,
@@ -221,9 +221,7 @@ async function save() {
     isLoading.value = true;
     try {
         formData.value = trimData(formData.value);
-        const body = $props.mapper
-            ? $props.mapper(formData.value, originalData.value)
-            : formData.value;
+        const body = $props.mapper(formData.value, originalData.value);
         const method = $props.urlCreate ? 'post' : 'patch';
         const url =
             $props.urlCreate || $props.urlUpdate || $props.url || arrayData.store.url;
@@ -289,12 +287,7 @@ function trimData(data) {
     }
     return data;
 }
-function onBeforeSave(formData, originalData) {
-    return getUpdatedValues(
-        Object.keys(getDifferences(formData, originalData)),
-        formData,
-    );
-}
+
 async function onKeyup(evt) {
     if (evt.key === 'Enter' && !('prevent-submit' in attrs)) {
         const input = evt.target;
@@ -331,7 +324,6 @@ defineExpose({
             class="q-pa-md"
             :style="maxWidth ? 'max-width: ' + maxWidth : ''"
             id="formModel"
-            :mapper="onBeforeSave"
         >
             <QCard>
                 <slot
diff --git a/src/filters/index.js b/src/filters/index.js
index bf1429aee..fdbea64fd 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -3,6 +3,7 @@ import toDate from './toDate';
 import toDateString from './toDateString';
 import toDateHourMin from './toDateHourMin';
 import toDateHourMinSec from './toDateHourMinSec';
+import onBeforeSave from './onBeforeSave';
 import toRelativeDate from './toRelativeDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
@@ -19,6 +20,7 @@ import isDialogOpened from './isDialogOpened';
 import toCelsius from './toCelsius';
 
 export {
+    onBeforeSave,
     getUpdatedValues,
     getDifferences,
     isDialogOpened,
diff --git a/src/filters/onBeforeSave.js b/src/filters/onBeforeSave.js
new file mode 100644
index 000000000..2ebf72185
--- /dev/null
+++ b/src/filters/onBeforeSave.js
@@ -0,0 +1,9 @@
+import getDifferences from './getDifferences';
+import getUpdatedValues from './getUpdatedValues';
+
+export default function onBeforeSave(formData, originalData) {
+    return getUpdatedValues(
+        Object.keys(getDifferences(formData, originalData)),
+        formData,
+    );
+}
-- 
2.40.1


From 6c573f61ca4681f003b02ea11d28a33c1985886a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Mar 2025 08:54:05 +0100
Subject: [PATCH 02/10] fix: refs #8217 update formModel template to ensure
 unique ID and handle null obj2 in getDifferences filter

---
 src/components/FormModel.vue  | 2 +-
 src/filters/getDifferences.js | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 56df95a5e..453c12a58 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -316,6 +316,7 @@ defineExpose({
 <template>
     <div class="column items-center full-width">
         <QForm
+            id="formModel"
             ref="myForm"
             v-if="formData"
             @submit.prevent
@@ -323,7 +324,6 @@ defineExpose({
             @reset="reset"
             class="q-pa-md"
             :style="maxWidth ? 'max-width: ' + maxWidth : ''"
-            id="formModel"
         >
             <QCard>
                 <slot
diff --git a/src/filters/getDifferences.js b/src/filters/getDifferences.js
index 3e1061aba..e54b03292 100644
--- a/src/filters/getDifferences.js
+++ b/src/filters/getDifferences.js
@@ -1,6 +1,7 @@
 export default function getDifferences(obj1, obj2) {
     let diff = {};
     delete obj1.$index;
+    if (!obj2) return obj1;
     delete obj2.$index;
 
     for (let key in obj1) {
-- 
2.40.1


From 8050c75a0c38625f0682c166c555f0940d10497b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Mar 2025 08:55:02 +0100
Subject: [PATCH 03/10] Revert "fix: refs #8217 update formModel template to
 ensure unique ID and handle null obj2 in getDifferences filter"

This reverts commit 6c573f61ca4681f003b02ea11d28a33c1985886a.
---
 src/components/FormModel.vue  | 2 +-
 src/filters/getDifferences.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 453c12a58..56df95a5e 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -316,7 +316,6 @@ defineExpose({
 <template>
     <div class="column items-center full-width">
         <QForm
-            id="formModel"
             ref="myForm"
             v-if="formData"
             @submit.prevent
@@ -324,6 +323,7 @@ defineExpose({
             @reset="reset"
             class="q-pa-md"
             :style="maxWidth ? 'max-width: ' + maxWidth : ''"
+            id="formModel"
         >
             <QCard>
                 <slot
diff --git a/src/filters/getDifferences.js b/src/filters/getDifferences.js
index e54b03292..3e1061aba 100644
--- a/src/filters/getDifferences.js
+++ b/src/filters/getDifferences.js
@@ -1,7 +1,6 @@
 export default function getDifferences(obj1, obj2) {
     let diff = {};
     delete obj1.$index;
-    if (!obj2) return obj1;
     delete obj2.$index;
 
     for (let key in obj1) {
-- 
2.40.1


From 6407c2e5826cfe5e19e70c064a978491e2ee46f0 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Mar 2025 08:55:34 +0100
Subject: [PATCH 04/10] fix: refs #8217 handle null obj2 in getDifferences
 filter

---
 src/components/FormModel.vue  | 2 +-
 src/filters/getDifferences.js | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 56df95a5e..453c12a58 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -316,6 +316,7 @@ defineExpose({
 <template>
     <div class="column items-center full-width">
         <QForm
+            id="formModel"
             ref="myForm"
             v-if="formData"
             @submit.prevent
@@ -323,7 +324,6 @@ defineExpose({
             @reset="reset"
             class="q-pa-md"
             :style="maxWidth ? 'max-width: ' + maxWidth : ''"
-            id="formModel"
         >
             <QCard>
                 <slot
diff --git a/src/filters/getDifferences.js b/src/filters/getDifferences.js
index 3e1061aba..e54b03292 100644
--- a/src/filters/getDifferences.js
+++ b/src/filters/getDifferences.js
@@ -1,6 +1,7 @@
 export default function getDifferences(obj1, obj2) {
     let diff = {};
     delete obj1.$index;
+    if (!obj2) return obj1;
     delete obj2.$index;
 
     for (let key in obj1) {
-- 
2.40.1


From 9fb2961022fc411b7eb9b374e4d17178f0c4a037 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Mar 2025 11:31:45 +0100
Subject: [PATCH 05/10] test: refs #8217  add TEST

---
 src/components/FormModel.vue               |  2 +-
 src/components/__tests__/FormModel.spec.js | 23 +++++++++++++++-------
 src/filters/getDifferences.js              |  1 +
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 453c12a58..5b16f9a3e 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -12,7 +12,7 @@ import SkeletonForm from 'components/ui/SkeletonForm.vue';
 import VnConfirm from './ui/VnConfirm.vue';
 import { tMobile } from 'src/composables/tMobile';
 import { useArrayData } from 'src/composables/useArrayData';
-import { getDifferences, getUpdatedValues, onBeforeSave } from 'src/filters';
+import { onBeforeSave } from 'src/filters';
 
 const { push } = useRouter();
 const quasar = useQuasar();
diff --git a/src/components/__tests__/FormModel.spec.js b/src/components/__tests__/FormModel.spec.js
index 3dce04374..adea16c69 100644
--- a/src/components/__tests__/FormModel.spec.js
+++ b/src/components/__tests__/FormModel.spec.js
@@ -92,30 +92,39 @@ describe('FormModel', () => {
             expect(vm.hasChanges).toBe(false);
         });
 
-        it('should call axios.patch with the right data', async () => {
-            const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
-            const { vm } = mount({ propsData: { url, model } });
+        it('should call axios.post with the right data', async () => {
+            const spy = vi.spyOn(axios, 'post').mockResolvedValue({ data: {} });
+            const urlCreate = 'mockUrlCreate';
+            const { vm } = mount({ propsData: { url, urlCreate, model } });
 
             vm.formData = {};
             await vm.$nextTick();
-            vm.formData = { mockKey: 'newVal' };
+            const formData = { mockKey: 'newVal', mockKey2: 'newVal2' };
+            vm.formData = formData;
             await vm.$nextTick();
 
             await vm.save();
             expect(spy).toHaveBeenCalled();
+            expect(spy).toHaveBeenCalledWith(urlCreate, formData);
             vm.formData.mockKey = 'mockVal';
         });
 
-        it('should call axios.post with the right data', async () => {
-            const spy = vi.spyOn(axios, 'post').mockResolvedValue({ data: {} });
+        it('should call axios.patch with the right data', async () => {
+            const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
+
             const { vm } = mount({
-                propsData: { url, model, formInitialData, urlCreate: 'mockUrlCreate' },
+                propsData: {
+                    url,
+                    model,
+                    formInitialData: { ...formInitialData, key1: 'valueKey1' },
+                },
             });
             await vm.$nextTick();
             vm.formData.mockKey = 'newVal';
             await vm.$nextTick();
             await vm.save();
             expect(spy).toHaveBeenCalled();
+            expect(spy).toHaveBeenCalledWith(url, { mockKey: 'newVal' });
             vm.formData.mockKey = 'mockVal';
         });
 
diff --git a/src/filters/getDifferences.js b/src/filters/getDifferences.js
index e54b03292..33244d1cb 100644
--- a/src/filters/getDifferences.js
+++ b/src/filters/getDifferences.js
@@ -1,5 +1,6 @@
 export default function getDifferences(obj1, obj2) {
     let diff = {};
+
     delete obj1.$index;
     if (!obj2) return obj1;
     delete obj2.$index;
-- 
2.40.1


From 9b4f3c71c092452ca77f8b4ad860eee59a578699 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 7 Apr 2025 14:19:39 +0200
Subject: [PATCH 06/10] perf: refs #8217 getDifferences

---
 src/filters/getDifferences.js | 57 +++++++++++++++++++++++++++--------
 1 file changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/filters/getDifferences.js b/src/filters/getDifferences.js
index 33244d1cb..5b123d727 100644
--- a/src/filters/getDifferences.js
+++ b/src/filters/getDifferences.js
@@ -1,23 +1,54 @@
 export default function getDifferences(obj1, obj2) {
-    let diff = {};
+    const diff = {};
 
-    delete obj1.$index;
-    if (!obj2) return obj1;
-    delete obj2.$index;
+    const copyObj1 = { ...obj1 };
+    const copyObj2 = obj2 ? { ...obj2 } : {};
 
-    for (let key in obj1) {
-        if (obj2[key] && JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])) {
-            diff[key] = obj2[key];
+    delete copyObj1.$index;
+    if (copyObj2) delete copyObj2.$index;
+
+    for (const key in copyObj1) {
+        if (copyObj1.hasOwnProperty(key)) {
+            if (
+                !copyObj2.hasOwnProperty(key) ||
+                !deepCompare(copyObj1[key], copyObj2[key])
+            ) {
+                diff[key] = copyObj1[key];
+            }
         }
     }
-    for (let key in obj2) {
-        if (
-            obj1[key] === undefined ||
-            JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])
-        ) {
-            diff[key] = obj2[key];
+
+    for (const key in copyObj2) {
+        if (copyObj2.hasOwnProperty(key) && !copyObj1.hasOwnProperty(key)) {
+            diff[key] = copyObj2[key];
         }
     }
 
     return diff;
 }
+
+function deepCompare(obj1, obj2) {
+    if (
+        typeof obj1 !== 'object' ||
+        obj1 === null ||
+        typeof obj2 !== 'object' ||
+        obj2 === null
+    ) {
+        return obj1 === obj2;
+    }
+
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+
+    for (const key of keys1) {
+        if (!obj2.hasOwnProperty(key) || !deepCompare(obj1[key], obj2[key])) {
+            return false;
+        }
+    }
+
+    return true;
+}
-- 
2.40.1


From 5f43c4eaca0ee15ca653d2d514a0bd0e8ed005df Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 7 Apr 2025 15:04:26 +0200
Subject: [PATCH 07/10] perf: refs #8217 getDifferences fix

---
 src/components/CrudModel.vue  |  1 +
 src/components/FormModel.vue  |  2 +-
 src/filters/getDifferences.js | 60 ++++++++---------------------------
 src/filters/onBeforeSave.js   |  4 +--
 4 files changed, 18 insertions(+), 49 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 6303f48ae..fab1bea96 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -98,6 +98,7 @@ defineExpose({
     reset,
     hasChanges,
     saveChanges,
+
     getChanges,
     formData,
     originalData,
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 5b16f9a3e..d2f346382 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -221,7 +221,7 @@ async function save() {
     isLoading.value = true;
     try {
         formData.value = trimData(formData.value);
-        const body = $props.mapper(formData.value, originalData.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;
diff --git a/src/filters/getDifferences.js b/src/filters/getDifferences.js
index 5b123d727..54a82420b 100644
--- a/src/filters/getDifferences.js
+++ b/src/filters/getDifferences.js
@@ -1,54 +1,22 @@
-export default function getDifferences(obj1, obj2) {
-    const diff = {};
+export default function getDifferences(initialData, formData) {
+    const differences = {};
+    delete initialData.$index;
+    delete formData.$index;
 
-    const copyObj1 = { ...obj1 };
-    const copyObj2 = obj2 ? { ...obj2 } : {};
-
-    delete copyObj1.$index;
-    if (copyObj2) delete copyObj2.$index;
-
-    for (const key in copyObj1) {
-        if (copyObj1.hasOwnProperty(key)) {
+    for (const key in formData) {
+        if (formData.hasOwnProperty(key)) {
             if (
-                !copyObj2.hasOwnProperty(key) ||
-                !deepCompare(copyObj1[key], copyObj2[key])
+                !initialData ||
+                !initialData.hasOwnProperty(key) ||
+                formData[key] !== initialData[key]
             ) {
-                diff[key] = copyObj1[key];
+                //Añadir la diferencia solo si existe initialData
+                if (initialData) {
+                    differences[key] = formData[key];
+                }
             }
         }
     }
 
-    for (const key in copyObj2) {
-        if (copyObj2.hasOwnProperty(key) && !copyObj1.hasOwnProperty(key)) {
-            diff[key] = copyObj2[key];
-        }
-    }
-
-    return diff;
-}
-
-function deepCompare(obj1, obj2) {
-    if (
-        typeof obj1 !== 'object' ||
-        obj1 === null ||
-        typeof obj2 !== 'object' ||
-        obj2 === null
-    ) {
-        return obj1 === obj2;
-    }
-
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-
-    for (const key of keys1) {
-        if (!obj2.hasOwnProperty(key) || !deepCompare(obj1[key], obj2[key])) {
-            return false;
-        }
-    }
-
-    return true;
+    return differences;
 }
diff --git a/src/filters/onBeforeSave.js b/src/filters/onBeforeSave.js
index 2ebf72185..73066ddf9 100644
--- a/src/filters/onBeforeSave.js
+++ b/src/filters/onBeforeSave.js
@@ -1,9 +1,9 @@
 import getDifferences from './getDifferences';
 import getUpdatedValues from './getUpdatedValues';
 
-export default function onBeforeSave(formData, originalData) {
+export default function onBeforeSave(originalData, formData) {
     return getUpdatedValues(
-        Object.keys(getDifferences(formData, originalData)),
+        Object.keys(getDifferences(originalData, formData)),
         formData,
     );
 }
-- 
2.40.1


From 342d0a6b1e699bb294119007735d749370e8641c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 7 Apr 2025 17:40:57 +0200
Subject: [PATCH 08/10] perf: refs #8217 getDifferences fix

---
 src/components/FormModel.vue  |  2 +-
 src/filters/getDifferences.js | 12 +++---------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index d2f346382..54c41f77e 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -111,7 +111,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: {
diff --git a/src/filters/getDifferences.js b/src/filters/getDifferences.js
index 54a82420b..5a1c42b97 100644
--- a/src/filters/getDifferences.js
+++ b/src/filters/getDifferences.js
@@ -1,16 +1,10 @@
 export default function getDifferences(initialData, formData) {
     const differences = {};
-    delete initialData.$index;
-    delete formData.$index;
-
+    if (initialData) delete initialData.$index;
+    if (formData) delete formData.$index;
     for (const key in formData) {
         if (formData.hasOwnProperty(key)) {
-            if (
-                !initialData ||
-                !initialData.hasOwnProperty(key) ||
-                formData[key] !== initialData[key]
-            ) {
-                //Añadir la diferencia solo si existe initialData
+            if (!initialData.hasOwnProperty(key) || formData[key] !== initialData[key]) {
                 if (initialData) {
                     differences[key] = formData[key];
                 }
-- 
2.40.1


From dae5fb5241c8835049544e22d11404a5dbaf02e4 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 17 Apr 2025 20:39:04 +0200
Subject: [PATCH 09/10] refactor: refs #8217 eliminate unnecessary onBeforeSave
 function

---
 src/filters/getDifferences.js                 | 30 +++++++++++------
 src/pages/Claim/Card/ClaimBasicData.vue       |  8 -----
 src/pages/Customer/Card/CustomerBasicData.vue | 32 +------------------
 .../Customer/Card/CustomerFiscalData.vue      |  8 -----
 4 files changed, 21 insertions(+), 57 deletions(-)

diff --git a/src/filters/getDifferences.js b/src/filters/getDifferences.js
index 5a1c42b97..13ed784c5 100644
--- a/src/filters/getDifferences.js
+++ b/src/filters/getDifferences.js
@@ -1,16 +1,26 @@
 export default function getDifferences(initialData, formData) {
-    const differences = {};
-    if (initialData) delete initialData.$index;
-    if (formData) delete formData.$index;
+    const diff = {};
+    if (!initialData) return diff;
+    if (!formData) return initialData;
+    delete initialData.$index;
+    delete formData.$index;
+
+    for (const key in initialData) {
+        if (
+            formData[key] &&
+            JSON.stringify(initialData[key]) !== JSON.stringify(formData[key])
+        ) {
+            diff[key] = formData[key];
+        }
+    }
     for (const key in formData) {
-        if (formData.hasOwnProperty(key)) {
-            if (!initialData.hasOwnProperty(key) || formData[key] !== initialData[key]) {
-                if (initialData) {
-                    differences[key] = formData[key];
-                }
-            }
+        if (
+            initialData[key] === undefined ||
+            JSON.stringify(initialData[key]) !== JSON.stringify(formData[key])
+        ) {
+            diff[key] = formData[key];
         }
     }
 
-    return differences;
+    return diff;
 }
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 7e7d42ae8..0632370d6 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -15,13 +15,6 @@ import VnAvatar from 'src/components/ui/VnAvatar.vue';
 const route = useRoute();
 const { t } = useI18n();
 const workersOptions = ref([]);
-
-function onBeforeSave(formData, originalData) {
-    return getUpdatedValues(
-        Object.keys(getDifferences(formData, originalData)),
-        formData,
-    );
-}
 </script>
 <template>
     <FetchData
@@ -34,7 +27,6 @@ function onBeforeSave(formData, originalData) {
     <FormModel
         model="Claim"
         :url-update="`Claims/updateClaim/${route.params.id}`"
-        :mapper="onBeforeSave"
         auto-load
     >
         <template #form="{ data, validate }">
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 9c9d1b50b..d9669e0a6 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -8,37 +8,12 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import { getDifferences, getUpdatedValues } from 'src/filters';
 
 const route = useRoute();
 const { t } = useI18n();
 
 const businessTypes = ref([]);
 const contactChannels = ref([]);
-const handleSalesModelValue = (val) => {
-    if (!val) val = '';
-    return {
-        or: [
-            { id: val },
-            { name: val },
-            { nickname: { like: '%' + val + '%' } },
-            { code: { like: `${val}%` } },
-        ],
-    };
-};
-
-const exprBuilder = (param, value) => {
-    return {
-        and: [{ active: { neq: false } }, handleSalesModelValue(value)],
-    };
-};
-
-function onBeforeSave(formData, originalData) {
-    return getUpdatedValues(
-        Object.keys(getDifferences(formData, originalData)),
-        formData,
-    );
-}
 </script>
 <template>
     <FetchData
@@ -52,12 +27,7 @@ function onBeforeSave(formData, originalData) {
         @on-fetch="(data) => (businessTypes = data)"
         auto-load
     />
-    <FormModel
-        :url-update="`Clients/${route.params.id}`"
-        auto-load
-        :mapper="onBeforeSave"
-        model="Customer"
-    >
+    <FormModel :url-update="`Clients/${route.params.id}`" auto-load model="Customer">
         <template #form="{ data, validate }">
             <VnRow>
                 <VnInput
diff --git a/src/pages/Customer/Card/CustomerFiscalData.vue b/src/pages/Customer/Card/CustomerFiscalData.vue
index f4efd03b6..d78eff680 100644
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/src/pages/Customer/Card/CustomerFiscalData.vue
@@ -13,7 +13,6 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import VnCheckbox from 'src/components/common/VnCheckbox.vue';
-import { getDifferences, getUpdatedValues } from 'src/filters';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 const quasar = useQuasar();
@@ -31,12 +30,6 @@ function handleLocation(data, location) {
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
 }
-function onBeforeSave(formData, originalData) {
-    return getUpdatedValues(
-        Object.keys(getDifferences(formData, originalData)),
-        formData,
-    );
-}
 
 async function checkEtChanges(data, _, originalData) {
     const equalizatedHasChanged = originalData.isEqualizated != data.isEqualizated;
@@ -75,7 +68,6 @@ async function acceptPropagate({ isEqualizated }) {
         :url-update="`Clients/${route.params.id}/updateFiscalData`"
         auto-load
         model="Customer"
-        :mapper="onBeforeSave"
         observe-form-changes
         @on-data-saved="checkEtChanges"
     >
-- 
2.40.1


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 10/10] 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];
         }
     }
-- 
2.40.1