fear: refs #6942 save and continue btn

src/components/CrudModel.vue

@@ -1,6 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useValidator } from 'src/composables/useValidator';
@@ -10,6 +11,7 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
 
+const { push } = useRouter();
 const quasar = useQuasar();
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -56,6 +58,11 @@ const $props = defineProps({
         type: Function,
         default: null,
     },
+    goTo: {
+        type: String,
+        default: '',
+        description: 'It is used for redirect on click "save and continue"',
+    },
 });
 
 const isLoading = ref(false);
@@ -122,6 +129,11 @@ async function onSubmit() {
     await saveChanges();
 }
 
+async function onSumbitAndGo() {
+    await onSubmit();
+    push({ path: $props.goTo });
+}
+
 async function saveChanges(data) {
     if ($props.saveFn) return $props.saveFn(data, getChanges);
     const changes = data || getChanges();
@@ -298,7 +310,25 @@ watch(formUrl, async () => {
                 :title="t('globals.reset')"
                 v-if="$props.defaultReset"
             />
+            <QBtnDropdown
+                v-if="$props.goTo && $props.defaultSave"
+                @click="onSubmit"
+                :label="tMobile('globals.save')"
+                :disable="!hasChanges"
+                color="primary"
+                icon="save"
+                split
+            >
+                <QList>
+                    <QItem color="primary" clickable v-close-popup @click="onSumbitAndGo">
+                        <QItemSection>
+                            <QItemLabel>{{ t('globals.saveAndContinue') }}</QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                </QList>
+            </QBtnDropdown>
             <QBtn
+                v-else-if="!$props.goTo && $props.defaultSave"
                 :label="tMobile('globals.save')"
                 ref="saveButtonRef"
                 color="primary"
@@ -306,7 +336,6 @@ watch(formUrl, async () => {
                 @click="onSubmit"
                 :disable="!hasChanges"
                 :title="t('globals.save')"
-                v-if="$props.defaultSave"
             />
             <slot name="moreAfterActions" />
         </QBtnGroup>

src/components/FormModel.vue

@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
-import { onBeforeRouteLeave } from 'vue-router';
+import { onBeforeRouteLeave, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
@@ -11,6 +11,7 @@ import useNotify from 'src/composables/useNotify.js';
 import SkeletonForm from 'components/ui/SkeletonForm.vue';
 import VnConfirm from './ui/VnConfirm.vue';
 
+const { push } = useRouter();
 const quasar = useQuasar();
 const state = useState();
 const stateStore = useStateStore();
@@ -65,6 +66,11 @@ const $props = defineProps({
         type: Function,
         default: null,
     },
+    goTo: {
+        type: String,
+        default: '',
+        description: 'It is used for redirect on click "save and continue"',
+    },
 });
 
 const emit = defineEmits(['onFetch', 'onDataSaved']);
@@ -174,6 +180,11 @@ async function save() {
     isLoading.value = false;
 }
 
+async function saveAndGo() {
+    await save();
+    push({ path: $props.goTo });
+}
+
 function reset() {
     state.set($props.model, originalData.value);
     originalData.value = JSON.parse(JSON.stringify(originalData.value));
@@ -241,7 +252,27 @@ watch(formUrl, async () => {
                     :disable="!hasChanges"
                     :title="t('globals.reset')"
                 />
+                <QBtnDropdown
+                    v-if="$props.goTo"
+                    @click="save"
+                    :label="tMobile('globals.save')"
+                    :disable="!hasChanges"
+                    color="primary"
+                    icon="save"
+                    split
+                >
+                    <QList>
+                        <QItem color="primary" clickable v-close-popup @click="saveAndGo">
+                            <QItemSection>
+                                <QItemLabel>{{
+                                    t('globals.saveAndContinue')
+                                }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QList>
+                </QBtnDropdown>
                 <QBtn
+                    v-else
                     :label="tMobile('globals.save')"
                     color="primary"
                     icon="save"

src/i18n/en/index.js

@@ -26,6 +26,7 @@ export default {
         create: 'Create',
         edit: 'Edit',
         save: 'Save',
+        saveAndContinue: 'Save and continue',
         remove: 'Remove',
         reset: 'Reset',
         close: 'Close',

src/i18n/es/index.js

@@ -26,6 +26,7 @@ export default {
         create: 'Crear',
         edit: 'Modificar',
         save: 'Guardar',
+        saveAndContinue: 'Guardar y continuar',
         remove: 'Eliminar',
         reset: 'Restaurar',
         close: 'Cerrar',

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
@@ -14,8 +14,7 @@ import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const quasar = useQuasar();
-const route = useRoute();
+const { currentRoute } = useRouter();
-const router = useRouter();
 const { t } = useI18n();
 
 const dms = ref({});
@@ -23,6 +22,7 @@ const editDownloadDisabled = ref(false);
 const arrayData = useArrayData('InvoiceIn');
 const invoiceIn = computed(() => arrayData.store.data);
 const userConfig = ref(null);
+const invoiceId = currentRoute.value.params.id;
 
 const expenses = ref([]);
 const currencies = ref([]);
@@ -182,12 +182,10 @@ async function upsert() {
     />
     <FormModel
         v-if="invoiceIn"
-        :url="`InvoiceIns/${route.params.id}`"
+        :url="`InvoiceIns/${invoiceId}`"
-        model="invoiceIn"
+        model="InvoiceIn"
+        :go-to="`/invoice-in/${invoiceId}/vat`"
         auto-load
-        @on-data-saved="
-            router.push({ name: 'InvoiceInVat', params: { id: route.params.id } })
-        "
     >
         <template #form="{ data }">
             <VnRow>

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
@@ -11,13 +11,13 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import CrudModel from 'src/components/CrudModel.vue';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 
-const route = useRoute();
+const { currentRoute } = useRouter();
-const router = useRouter();
 const { t } = useI18n();
 const quasar = useQuasar();
 
 const arrayData = useArrayData('InvoiceIn');
 const invoiceIn = computed(() => arrayData.store.data);
+const invoiceId = currentRoute.value.params.id;
 
 const expenses = ref([]);
 const sageTaxTypes = ref([]);
@@ -108,7 +108,7 @@ const filter = {
         'transactionTypeSageFk',
     ],
     where: {
-        invoiceInFk: route.params.id,
+        invoiceInFk: invoiceId,
     },
 };
 
@@ -177,12 +177,10 @@ const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + taxRate(cur), 0);
         data-key="InvoiceInTaxes"
         url="InvoiceInTaxes"
         :filter="filter"
-        :data-required="{ invoiceInFk: route.params.id }"
+        :data-required="{ invoiceInFk: invoiceId }"
         auto-load
         v-model:selected="rowsSelected"
-        @save-changes="
+        :go-to="`/invoice-in/${invoiceId}/due-day`"
-            router.push({ name: 'InvoiceInDueDay', params: { id: route.params.id } })
-        "
     >
         <template #body="{ rows }">
             <QTable