fix: refs #6942 formModel watch changes & invoiceInCreate

src/components/FormModel.vue

@@ -109,7 +109,7 @@ const defaultButtons = computed(() => ({
 }));
 
 onMounted(async () => {
-    originalData.value = $props.formInitialData;
+    originalData.value = JSON.parse(JSON.stringify($props.formInitialData ?? {}));
 
     nextTick(() => (componentIsRendered.value = true));
 
@@ -124,7 +124,9 @@ onMounted(async () => {
             () => formData.value,
             (newVal, oldVal) => {
                 if (!oldVal) return;
-                hasChanges.value = !isResetting.value && newVal;
+                hasChanges.value =
+                    !isResetting.value &&
+                    JSON.stringify(newVal) !== JSON.stringify(originalData.value);
                 isResetting.value = false;
             },
             { deep: true }
@@ -145,6 +147,7 @@ watch(formUrl, async () => {
 });
 
 onBeforeRouteLeave((to, from, next) => {
+    console.log('entro aqui antes');
     if (hasChanges.value && $props.observeFormChanges)
         quasar.dialog({
             component: VnConfirm,
@@ -177,7 +180,7 @@ async function fetch() {
     }
 }
 
-async function save() {
+async function save(emit = true) {
     if ($props.observeFormChanges && !hasChanges.value)
         return notify('globals.noChanges', 'negative');
 
@@ -194,18 +197,18 @@ async function save() {
 
         if ($props.urlCreate) notify('globals.dataCreated', 'positive');
 
-        updateAndEmit(response?.data, 'onDataSaved');
         hasChanges.value = false;
+        isLoading.value = false;
+
+        if (emit) updateAndEmit(response?.data, 'onDataSaved');
     } catch (err) {
         console.error(err);
         notify('errors.writeRequest', 'negative');
-    } finally {
-        isLoading.value = false;
     }
 }
 
 async function saveAndGo() {
-    await save();
+    await save(null);
     push({ path: $props.goTo });
 }
 
@@ -240,7 +243,7 @@ function updateAndEmit(val, evt) {
     emit(evt, state.get($props.model));
 }
 
-defineExpose({ save, isLoading, hasChanges });
+defineExpose({ save, saveAndGo, isLoading, hasChanges });
 </script>
 <template>
     <div class="column items-center full-width">

src/pages/InvoiceIn/InvoiceInCreate.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
@@ -29,8 +29,9 @@ const newInvoiceIn = reactive({
 const suppliersOptions = ref([]);
 const companiesOptions = ref([]);
 
-const redirectToInvoiceInBasicData = (_, { id }) =>
+const redirectToInvoiceInBasicData = ({ id }) => {
     router.push({ name: 'InvoiceInBasicData', params: { id } });
+};
 </script>
 
 <template>
@@ -61,13 +62,13 @@ const redirectToInvoiceInBasicData = (_, { id }) =>
         <VnSubToolbar />
         <FormModel
             url-create="InvoiceIns"
-            model="Invoice"
+            model="InvoiceIn"
             :form-initial-data="newInvoiceIn"
             @on-data-saved="redirectToInvoiceInBasicData"
         >
             <template #form="{ data, validate }">
                 <VnRow>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Supplier')"
                         v-model="data.supplierFk"
                         :options="suppliersOptions"
@@ -87,14 +88,14 @@ const redirectToInvoiceInBasicData = (_, { id }) =>
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                     <VnInput
                         :label="t('invoiceIn.summary.supplierRef')"
                         v-model="data.supplierRef"
                     />
                 </VnRow>
                 <VnRow>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Company')"
                         v-model="data.companyFk"
                         :options="companiesOptions"

src/router/modules/invoiceIn.js

@@ -39,10 +39,10 @@ export default {
                 },
                 {
                     path: 'create',
-                    name: 'InvoiceInCreate',
+                    name: 'InvoiceInCreare',
                     meta: {
-                        title: 'create',
+                        title: 'invoiceInCreate',
-                        icon: 'vn:settings',
+                        icon: 'create',
                     },
                     component: () => import('src/pages/InvoiceIn/InvoiceInCreate.vue'),
                 },