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,
@@ -198,7 +226,10 @@ async function fetch() {
 }
 function handleRequestArgs() {
     const isUrlCreate = $props.urlCreate;
-    const differences = getDifferences(formData.value, originalData.value);
+    const differences = getUpdatedValues(
+        Object.keys(getDifferences(formData.value, originalData.value)),
+        formData.value
+    );
     return {
         method: isUrlCreate ? 'post' : 'patch',
         url: isUrlCreate || $props.urlUpdate || $props.url || arrayData.store.url,
@@ -209,6 +240,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,6 +254,11 @@ 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;
 
@@ -290,6 +332,7 @@ defineExpose({
 </script>
 <template>
     <div class="column items-center full-width">
+        {{ changes }}
         <QForm
             ref="myForm"
             v-if="formData"

src/pages/Customer/Card/CustomerBasicData.vue

@@ -94,6 +94,7 @@ const exprBuilder = (param, value) => {
                     :rules="validate('client.phone')"
                     clearable
                     v-model="data.phone"
+                    data-cy="customerPhone"
                 />
                 <VnInput
                     :label="t('customer.basicData.mobile')"

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

@@ -3,11 +3,17 @@ describe('Client basic data', () => {
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
-        cy.visit('#/customer/1110/basic-data', {
-            timeout: 5000,
-        });
+        cy.visit('#/customer/1102/basic-data');
     });
     it('Should load layout', () => {
         cy.get('.q-card').should('be.visible');
+        cy.dataCy('customerPhone').filter('input').should('be.visible');
+        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;
+            cy.wrap(body).should('have.property', 'phone', '123456789');
+        });
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
     });
 });

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}"]`);
+});