refactor: refs #6942 use router hook

src/components/FormModel.vue

@@ -179,7 +179,7 @@ async function fetch() {
     }
 }
 
-async function save(emit = true) {
+async function save() {
     if ($props.observeFormChanges && !hasChanges.value)
         return notify('globals.noChanges', 'negative');
 
@@ -199,7 +199,7 @@ async function save(emit = true) {
         hasChanges.value = false;
         isLoading.value = false;
 
-        if (emit) updateAndEmit(response?.data, 'onDataSaved');
+        updateAndEmit(response?.data, 'onDataSaved');
     } catch (err) {
         console.error(err);
         notify('errors.writeRequest', 'negative');
@@ -207,7 +207,7 @@ async function save(emit = true) {
 }
 
 async function saveAndGo() {
-    await save(null);
+    await save();
     push({ path: $props.goTo });
 }
 
@@ -242,7 +242,7 @@ function updateAndEmit(val, evt) {
     emit(evt, state.get($props.model));
 }
 
-defineExpose({ save, saveAndGo, isLoading, hasChanges });
+defineExpose({ save, isLoading, hasChanges });
 </script>
 <template>
     <div class="column items-center full-width">

src/components/ui/CardDescriptor.vue

@@ -56,7 +56,7 @@ onBeforeMount(async () => {
     });
     store = arrayData.store;
     entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
-
+    // It enables to load data only once if the module is the same as the dataKey
     if ($props.dataKey !== useRoute().meta.moduleName) await getData();
     watch(
         () => [$props.url, $props.filter],
@@ -99,12 +99,7 @@ const emit = defineEmits(['onFetch']);
                         {{ t('components.smartCard.openSummary') }}
                     </QTooltip>
                 </QBtn>
-                <RouterLink
-                    :to="{
-                        name: `${module}Summary`,
-                        params: { id: entity.id },
-                    }"
-                >
+                <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
                     <QBtn
                         class="link"
                         color="white"

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { ref, reactive, computed, onBeforeMount, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref, reactive, computed, onBeforeMount } from 'vue';
+import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
@@ -135,14 +135,11 @@ onBeforeMount(async () => {
     totalAmount.value = data.totalDueDay;
 });
 
-watch(
-    () => currentRoute.value.params.id,
-    async (newId) => {
-        invoiceInCorrection.correcting.length = 0;
-        invoiceInCorrection.corrected = null;
-        if (newId) await setInvoiceCorrection(entityId.value);
-    }
-);
+onBeforeRouteLeave(async (to, from) => {
+    invoiceInCorrection.correcting.length = 0;
+    invoiceInCorrection.corrected = null;
+    if (to.params.id !== from.params.id) await setInvoiceCorrection(entityId.value);
+});
 
 async function setInvoiceCorrection(id) {
     const [{ data: correctingData }, { data: correctedData }] = await Promise.all([