Add travel clone feature

src/pages/Travel/TravelCreate.vue

@@ -3,10 +3,12 @@ import { useI18n } from 'vue-i18n';
 import { reactive, computed } from 'vue';
 import FetchData from 'components/FetchData.vue';
 import { useTravelStore } from 'src/stores/travel';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
+import { onBeforeMount } from 'vue';
 
 const { t } = useI18n();
+const route = useRoute();
 const router = useRouter();
 const travelStore = useTravelStore();
 
@@ -29,6 +31,15 @@ const warehousesOptions = reactive({
     filtered: [],
 });
 
+onBeforeMount(() => {
+    if (route.query.travelData) {
+        const travelData = JSON.parse(route.query.travelData);
+        for (let key in travelData) {
+            newTravelData[key] = travelData[key];
+        }
+    }
+});
+
 const createTravel = async () => {
     const response = await travelStore.createTravel(newTravelData);
     if (response.status === 200) router.push({ path: `/travel/${response.data.id}` });
@@ -52,6 +63,10 @@ const canSubmit = computed(() => {
     }
     return true;
 });
+
+const redirectToTravelList = () => {
+    router.push({ name: 'TravelList' });
+};
 </script>
 
 <template>
@@ -66,7 +81,7 @@ const canSubmit = computed(() => {
             <QCard class="row q-pa-xl full-width card">
                 <QInput
                     v-model="newTravelData.ref"
-                    :label="t('travel.list.reference')"
+                    :label="t('travel.shared.reference')"
                     filled
                     style="max-width: 100%"
                 />
@@ -79,7 +94,7 @@ const canSubmit = computed(() => {
                         (val, update, abort) =>
                             inputSelectFilter(val, update, abort, agenciesOptions)
                     "
-                    :label="t('travel.list.agency')"
+                    :label="t('travel.shared.agency')"
                     transition-show="jump-up"
                     transition-hide="jump-up"
                     style="max-width: 100%"
@@ -89,14 +104,14 @@ const canSubmit = computed(() => {
                     type="date"
                     filled
                     mask="date"
-                    :label="t('travel.list.shipped')"
+                    :label="t('travel.shared.shipped')"
                 />
                 <QInput
                     v-model="newTravelData.landed"
                     type="date"
                     filled
                     mask="date"
-                    :label="t('travel.list.landed')"
+                    :label="t('travel.shared.landed')"
                 />
                 <QSelect
                     :options="warehousesOptions.filtered"
@@ -107,7 +122,7 @@ const canSubmit = computed(() => {
                         (val, update, abort) =>
                             inputSelectFilter(val, update, abort, warehousesOptions)
                     "
-                    :label="t('travel.list.wareHouseOut')"
+                    :label="t('travel.shared.wareHouseOut')"
                     transition-show="jump-up"
                     transition-hide="jump-up"
                 />
@@ -120,7 +135,7 @@ const canSubmit = computed(() => {
                         (val, update, abort) =>
                             inputSelectFilter(val, update, abort, warehousesOptions)
                     "
-                    :label="t('travel.list.wareHouseIn')"
+                    :label="t('travel.shared.wareHouseIn')"
                     transition-show="jump-up"
                     transition-hide="jump-up"
                 />
@@ -138,6 +153,7 @@ const canSubmit = computed(() => {
                     class="q-mt-md"
                     flat
                     :disable="!canSubmit"
+                    @click="redirectToTravelList()"
                 />
             </div>
         </QForm>

src/pages/Travel/TravelList.vue

@@ -16,12 +16,25 @@ const travelStore = useTravelStore();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-function navigate(id) {
+const navigateToTravelId = (id) => {
     router.push({ path: `/travel/${id}` });
-}
+};
 
-const redirectToCreateView = () => {
-    router.push({ name: 'TravelCreate' });
+const cloneTravel = (travelData) => {
+    const params = JSON.stringify({
+        ref: travelData.ref,
+        agencyModeFk: travelData.agencyModeFk,
+        shipped: travelData.shipped,
+        landed: travelData.landed,
+        warehouseInFk: travelData.warehouseInFk,
+        warehouseOutFk: travelData.warehouseOutFk,
+    });
+
+    redirectToCreateView(params);
+};
+
+const redirectToCreateView = (queryParams) => {
+    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
 };
 
 const viewSummary = (id) => {
@@ -48,7 +61,7 @@ onMounted(async () => {
                         :key="row.id"
                         :title="row.ref"
                         :id="row.id"
-                        @click="navigate(row.id)"
+                        @click="navigateToTravelId(row.id)"
                     >
                         <template #list-items>
                             <VnLv
@@ -80,7 +93,7 @@ onMounted(async () => {
                         <template #actions>
                             <QBtn
                                 :label="t('travel.list.clone')"
-                                @click.stop="navigate(row.id)"
+                                @click.stop="cloneTravel(row)"
                                 color="white"
                                 outline
                                 type="reset"
@@ -121,12 +134,5 @@ onMounted(async () => {
 </style>
 
 <i18n>
-    {
-        "en": {
-            Search suppliers: Search suppliers
-        },
-        "es": {
-            Search suppliers: Buscar proveedores
-        }
-    }
+
 </i18n>