diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue index 09a78c298..d45bb51c1 100644 --- a/src/components/FormModel.vue +++ b/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); - else response = await axios[method](url, body); + if ($props.saveFn) response = await $props.saveFn(updatedValues); + else response = await axios[method](url, updatedValues); if ($props.urlCreate) notify('globals.dataCreated', 'positive'); @@ -290,6 +329,7 @@ defineExpose({