feat: use mapper

src/components/FormModel.vue

@@ -13,7 +13,6 @@ import VnConfirm from './ui/VnConfirm.vue';
 import { tMobile } from 'src/composables/tMobile';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useRoute } from 'vue-router';
-import { getDifferences } from 'src/filters';
 
 const { push } = useRouter();
 const quasar = useQuasar();
@@ -103,7 +102,6 @@ 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(() => ({
@@ -143,40 +141,13 @@ 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, flush: 'sync' }
+            { deep: true }
         );
     }
 });
-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,
@@ -224,28 +195,7 @@ async function fetch() {
         originalData.value = {};
     }
 }
-function handleRequestArgs() {
-    const isUrlCreate = $props.urlCreate;
-    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,
-        body: $props.mapper
-            ? $props.mapper(formData.value)
-            : isUrlCreate
-            ? formData.value
-            : 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');
@@ -253,13 +203,12 @@ async function save() {
     isLoading.value = true;
     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);
-
+        const body = $props.mapper
+            ? $props.mapper(formData.value, originalData.value)
+            : formData.value;
+        const method = $props.urlCreate ? 'post' : 'patch';
+        const url =
+            $props.urlCreate || $props.urlUpdate || $props.url || arrayData.store.url;
         let response;
 
         if ($props.saveFn) response = await $props.saveFn(body);
@@ -332,7 +281,6 @@ defineExpose({
 </script>
 <template>
     <div class="column items-center full-width">
-        {{ changes }}
         <QForm
             ref="myForm"
             v-if="formData"

src/filters/getUpdatedValues.js

@@ -0,0 +1,6 @@
+export default function getUpdatedValues(keys, formData) {
+    return keys.reduce((acc, key) => {
+        acc[key] = formData[key];
+        return acc;
+    }, {});
+}

src/filters/index.js

@@ -12,9 +12,11 @@ import dateRange from './dateRange';
 import toHour from './toHour';
 import dashOrCurrency from './dashOrCurrency';
 import getDifferences from './getDifferences';
+import getUpdatedValues from './getUpdatedValues';
 import getParamWhere from './getParamWhere';
 
 export {
+    getUpdatedValues,
     getDifferences,
     toLowerCase,
     toLowerCamel,

src/pages/Customer/Card/CustomerBasicData.vue

@@ -9,6 +9,7 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnAvatar from 'src/components/ui/VnAvatar.vue';
+import { getDifferences, getUpdatedValues } from 'src/filters';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -30,6 +31,13 @@ const exprBuilder = (param, value) => {
         and: [{ active: { neq: false } }, handleSalesModelValue(value)],
     };
 };
+
+function onBeforeSave(formData, originalData) {
+    return getUpdatedValues(
+        Object.keys(getDifferences(formData, originalData)),
+        formData
+    );
+}
 </script>
 <template>
     <FetchData
@@ -43,7 +51,12 @@ const exprBuilder = (param, value) => {
         @on-fetch="(data) => (businessTypes = data)"
         auto-load
     />
-    <FormModel :url="`Clients/${route.params.id}`" auto-load model="customer">
+    <FormModel
+        :url="`Clients/${route.params.id}`"
+        auto-load
+        model="customer"
+        :mapper="onBeforeSave"
+    >
         <template #form="{ data, validate }">
             <VnRow>
                 <VnInput