feat: #8217 send just changes

src/components/CrudModel.vue

@@ -10,6 +10,7 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
+import getDifferences from 'src/filters/getDifferences';
 
 const { push } = useRouter();
 const quasar = useQuasar();
@@ -267,28 +268,6 @@ function getChanges() {
     return changes;
 }
 
-function getDifferences(obj1, obj2) {
-    let diff = {};
-    delete obj1.$index;
-    delete obj2.$index;
-
-    for (let key in obj1) {
-        if (obj2[key] && JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])) {
-            diff[key] = obj2[key];
-        }
-    }
-    for (let key in obj2) {
-        if (
-            obj1[key] === undefined ||
-            JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])
-        ) {
-            diff[key] = obj2[key];
-        }
-    }
-
-    return diff;
-}
-
 function isEmpty(obj) {
     if (obj == null) return true;
     if (obj === undefined) return true;

src/components/FormModel.vue

@@ -13,6 +13,7 @@ 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();
@@ -195,7 +196,19 @@ async function fetch() {
         originalData.value = {};
     }
 }
-
+function HandleRequestArgs() {
+    const isUrlCreate = $props.urlCreate;
+    const differences = getDifferences(formData.value, originalData.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,
+    };
+}
 async function save() {
     if ($props.observeFormChanges && !hasChanges.value)
         return notify('globals.noChanges', 'negative');
@@ -203,10 +216,8 @@ async function save() {
     isLoading.value = true;
     try {
         formData.value = trimData(formData.value);
-        const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
+        const { method, body, url } = HandleRequestArgs();
-        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);

src/filters/getDifferences.js

@@ -0,0 +1,21 @@
+export default function getDifferences(obj1, obj2) {
+    let diff = {};
+    delete obj1.$index;
+    delete obj2.$index;
+
+    for (let key in obj1) {
+        if (obj2[key] && JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])) {
+            diff[key] = obj2[key];
+        }
+    }
+    for (let key in obj2) {
+        if (
+            obj1[key] === undefined ||
+            JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])
+        ) {
+            diff[key] = obj2[key];
+        }
+    }
+
+    return diff;
+}

src/filters/index.js

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