feat: refs #8217 implement onBeforeSave function for form data processing

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

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,

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,
+    );
+}