refactor(Travel): refs #7527 use popup to create

src/components/VnTable/VnTable.vue

@@ -230,6 +230,7 @@ watch(
 defineExpose({
     create: createForm,
     showForm,
+    openForm,
     reload,
     redirect: redirectFn,
     selected,
@@ -628,6 +629,11 @@ const rowCtrlClickFunction = computed(() => {
         };
     return () => {};
 });
+
+function openForm(data) {
+    showForm.value = !showForm.value;
+    createForm.value = { ...$props.create, ...data };
+}
 </script>
 <template>
     <RightMenu v-if="$props.rightSearch" :overlay="overlay">
@@ -997,9 +1003,7 @@ const rowCtrlClickFunction = computed(() => {
                 <QBtn
                     @click="
                         () =>
-                            createAsDialog
-                                ? (showForm = !showForm)
-                                : handleOnDataSaved(create)
+                            createAsDialog ? openForm(create) : handleOnDataSaved(create)
                     "
                     class="cursor-pointer fill-icon"
                     color="primary"
@@ -1018,10 +1022,7 @@ const rowCtrlClickFunction = computed(() => {
     </CrudModel>
     <QPageSticky v-if="$props.create" :offset="[20, 20]" style="z-index: 2">
         <QBtn
-            @click="
-                () =>
-                    createAsDialog ? (showForm = !showForm) : handleOnDataSaved(create)
-            "
+            @click="() => (createAsDialog ? openForm(create) : handleOnDataSaved(create))"
             color="primary"
             fab
             icon="add"

src/i18n/locale/en.yml

@@ -277,7 +277,6 @@ globals:
         travel: Travels
         create: Create
         extraCommunity: Extra community
-        travelCreate: New travel
         history: Log
         thermographs: Thermograph
         items: Items

src/i18n/locale/es.yml

@@ -280,7 +280,6 @@ globals:
         travel: Envíos
         create: Crear
         extraCommunity: Extra comunitarios
-        travelCreate: Nuevo envío
         history: Historial
         thermographs: Termógrafos
         items: Artículos

src/pages/Travel/Card/TravelDescriptorMenuItems.vue

@@ -21,25 +21,21 @@ const { t } = useI18n();
 const router = useRouter();
 const quasar = useQuasar();
 const { notify } = useNotify();
+const canDelete = computed(() => useAcl().hasAcl('Travel', '*', 'WRITE'));
 
-const redirectToCreateView = (queryParams) => {
-    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
-};
+function cloneTravel() {
+    router.push({
+        name: 'TravelList',
+        query: { createForm: JSON.stringify($props.travel) },
+    });
+}
 
-const cloneTravel = () => {
-    const stringifiedTravelData = JSON.stringify($props.travel);
-    redirectToCreateView(stringifiedTravelData);
-};
-
-const cloneTravelWithEntries = async () => {
+async function cloneTravelWithEntries() {
     const { data } = await axios.post(`Travels/${$props.travel.id}/cloneWithEntries`);
     notify('globals.dataSaved', 'positive');
     router.push({ name: 'TravelBasicData', params: { id: data.id } });
-};
-
-const canDelete = computed(() => useAcl().hasAcl('Travel', '*', 'WRITE'));
-
-const openDeleteEntryDialog = (id) => {
+}
+function openDeleteEntryDialog(id) {
     quasar
         .dialog({
             component: VnConfirm,
@@ -51,13 +47,13 @@ const openDeleteEntryDialog = (id) => {
         .onOk(async () => {
             await deleteTravel(id);
         });
-};
+}
 
-const deleteTravel = async (id) => {
+async function deleteTravel(id) {
     await axios.delete(`Travels/${id}`);
     router.push({ name: 'TravelList' });
     notify('globals.dataDeleted', 'positive');
-};
+}
 </script>
 
 <template>

src/pages/Travel/TravelCreate.vue

@@ -1,97 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { ref, onBeforeMount } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-
-import FetchData from 'components/FetchData.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-
-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-
-const agenciesOptions = ref([]);
-const warehousesOptions = ref([]);
-const viewAction = ref();
-
-const newTravelForm = ref({});
-onBeforeMount(() => {
-    viewAction.value = route.query.travelData ? 'clone' : 'create';
-
-    if (route.query.travelData) {
-        const travelData = JSON.parse(route.query.travelData);
-
-        newTravelForm.value = { ...newTravelForm.value, ...travelData };
-        delete newTravelForm.value.id;
-    }
-});
-
-const redirectToTravelBasicData = (_, { id }) => {
-    router.push({ name: 'TravelBasicData', params: { id } });
-};
-</script>
-
-<template>
-    <FetchData
-        url="AgencyModes"
-        :filter="{ fields: ['id', 'name'], order: ['name ASC'] }"
-        @on-fetch="(data) => (agenciesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Warehouses"
-        @on-fetch="(data) => (warehousesOptions = data)"
-        auto-load
-    />
-    <QPage>
-        <VnSubToolbar />
-        <FormModel
-            url-create="Travels"
-            model="travelCreate"
-            :form-initial-data="newTravelForm"
-            :observe-form-changes="viewAction === 'create'"
-            @on-data-saved="redirectToTravelBasicData"
-        >
-            <template #form="{ data }">
-                <VnRow>
-                    <VnInput v-model="data.ref" :label="t('globals.reference')" />
-                    <VnSelect
-                        :label="t('globals.agency')"
-                        v-model="data.agencyModeFk"
-                        :options="agenciesOptions"
-                        option-value="agencyFk"
-                        option-label="name"
-                        hide-selected
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnInputDate v-model="data.shipped" :label="t('globals.shipped')" />
-                    <VnInputDate :label="t('globals.landed')" v-model="data.landed" />
-                </VnRow>
-                <VnRow>
-                    <VnSelect
-                        :label="t('globals.warehouseOut')"
-                        v-model="data.warehouseOutFk"
-                        :options="warehousesOptions"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
-                    />
-                    <VnSelect
-                        :label="t('globals.warehouseIn')"
-                        v-model="data.warehouseInFk"
-                        :options="warehousesOptions"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
-                    />
-                </VnRow>
-            </template>
-        </FormModel>
-    </QPage>
-</template>

src/pages/Travel/TravelList.vue

@@ -28,22 +28,6 @@ const $props = defineProps({
 });
 const entityId = computed(() => $props.id || route.params.id);
 
-const cloneTravel = (travelData) => {
-    const stringifiedTravelData = JSON.stringify(travelData);
-    redirectToCreateView(stringifiedTravelData);
-};
-
-const redirectToCreateView = (queryParams) => {
-    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
-};
-
-const redirectCreateEntryView = (travelData) => {
-    router.push({
-        name: 'EntryList',
-        query: { createForm: JSON.stringify({ travelFk: travelData.id }) },
-    });
-};
-
 const columns = computed(() => [
     {
         name: 'status',
@@ -210,6 +194,19 @@ const columns = computed(() => [
         ],
     },
 ]);
+
+function cloneTravel(travelData) {
+    const data = { formInitialData: travelData };
+    delete data.formInitialData.id;
+    tableRef.value.openForm({ formInitialData: travelData });
+}
+
+function redirectCreateEntryView(travelData) {
+    router.push({
+        name: 'EntryList',
+        query: { createForm: JSON.stringify({ travelFk: travelData.id }) },
+    });
+}
 </script>
 
 <template>

src/router/modules/travel.js

@@ -91,15 +91,6 @@ export default {
                     },
                     component: () => import('src/pages/Travel/ExtraCommunity.vue'),
                 },
-                {
-                    path: 'create',
-                    name: 'TravelCreate',
-                    meta: {
-                        title: 'travelCreate',
-                        icon: 'add',
-                    },
-                    component: () => import('src/pages/Travel/TravelCreate.vue'),
-                },
             ],
         },
     ],