perf: formModel

src/components/FormModel.vue

@@ -103,6 +103,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 changes = ref({});
 const originalData = ref({});
 const formData = computed(() => state.get(modelValue));
 const defaultButtons = computed(() => ({
@@ -142,13 +143,40 @@ onMounted(async () => {
                 hasChanges.value =
                     !isResetting.value &&
                     JSON.stringify(newVal) !== JSON.stringify(originalData.value);
+                console.error(getDifferences(originalData.value, newVal));
+                console.error(getDifferences(newVal, originalData.value));
+                console.error(getDiff(newVal, originalData.value));
+                console.error(getDiff(originalData.value, newVal));
+                console.error(getDifferencess(originalData.value, newVal));
+                changes.value = {
+                    ...changes.value,
+                    ...getDifferences(originalData.value, oldVal),
+                };
                 isResetting.value = false;
             },
-            { deep: true }
+            { deep: true, flush: 'sync' }
         );
     }
 });
+function getDifferencess(oldVal, newVal) {
+    return Object.keys(newVal).reduce((diff, key) => {
+        if (oldVal[key] !== newVal[key]) {
+            diff[key] = newVal[key];
+        }
+        return diff;
+    }, {});
+}
+function getDiff(o2, o1) {
+    let diff = Object.keys(o2).reduce((diff, key) => {
+        if (o1[key] === o2[key]) return diff;
+        return {
+            ...diff,
+            [key]: o2[key],
+        };
+    }, {});
 
+    return diff;
+}
 if (!$props.url)
     watch(
         () => arrayData.store.data,
@@ -209,6 +237,12 @@ function handleRequestArgs() {
             : differences,
     };
 }
+function getUpdatedValues(keys, formData) {
+    return keys.reduce((acc, key) => {
+        acc[key] = formData[key];
+        return acc;
+    }, {});
+}
 async function save() {
     if ($props.observeFormChanges && !hasChanges.value)
         return notify('globals.noChanges', 'negative');
@@ -217,11 +251,16 @@ async function save() {
     try {
         formData.value = trimData(formData.value);
         const { method, body, url } = handleRequestArgs();
+        // Obtener las claves del objeto original
+        const originalKeys = Object.keys(body);
+
+        // Construir el objeto con valores actualizados
+        const updatedValues = getUpdatedValues(originalKeys, formData.value);
 
         let response;
 
-        if ($props.saveFn) response = await $props.saveFn(body);
+        if ($props.saveFn) response = await $props.saveFn(updatedValues);
-        else response = await axios[method](url, body);
+        else response = await axios[method](url, updatedValues);
 
         if ($props.urlCreate) notify('globals.dataCreated', 'positive');
 
@@ -290,6 +329,7 @@ defineExpose({
 </script>
 <template>
     <div class="column items-center full-width">
+        {{ changes }}
         <QForm
             ref="myForm"
             v-if="formData"

test/cypress/integration/client/clientBasicData.spec.js

@@ -7,8 +7,8 @@ describe('Client basic data', () => {
     });
     it('Should load layout', () => {
         cy.get('.q-card').should('be.visible');
-        cy.get('[data-cy="customerPhone"]').filter('input').should('be.visible');
+        cy.dataCy('customerPhone').filter('input').should('be.visible');
-        cy.get('[data-cy="customerPhone"]').filter('input').type('123456789');
+        cy.dataCy('customerPhone').filter('input').type('123456789');
         cy.get('.q-btn-group > .q-btn--standard').click();
         cy.intercept('PATCH', '/api/Clients/1102', (req) => {
             const { body } = req;

test/cypress/support/commands.js

@@ -262,3 +262,7 @@ Cypress.Commands.add('openUserPanel', () => {
         '.column > .q-avatar > .q-avatar__content > .q-img > .q-img__container > .q-img__image'
     ).click();
 });
+
+Cypress.Commands.add('dataCy', (tag, attr = 'data-cy') => {
+    return cy.get(`[${attr}="${tag}"]`);
+});