add header options menu in travel summary

src/i18n/en/index.js

@@ -424,7 +424,7 @@ export default {
             comercial: 'Comercial',
         },
     },
-    shelving:{
+    shelving: {
         pageTitles: {
             shelving: 'Shelving',
             shelvingList: 'Shelving List',
@@ -441,14 +441,14 @@ export default {
             parking: 'Parking',
             priority: 'Priority',
             worker: 'Worker',
-            recyclable: 'Recyclable'
+            recyclable: 'Recyclable',
         },
         basicData: {
             code: 'Code',
             parking: 'Parking',
             priority: 'Priority',
-            recyclable: 'Recyclable'
+            recyclable: 'Recyclable',
-        }
+        },
     },
     worker: {
         pageTitles: {
@@ -637,6 +637,9 @@ export default {
             delivered: 'Delivered',
             received: 'Received',
             entries: 'Entries',
+            cloneShipping: 'Clone travel',
+            CloneTravelAndEntries: 'Clone travel and his entries',
+            AddEntry: 'Add entry',
         },
     },
     components: {

src/i18n/es/index.js

@@ -426,7 +426,7 @@ export default {
             comercial: 'Comercial',
         },
     },
-    shelving:{
+    shelving: {
         pageTitles: {
             shelving: 'Carros',
             shelvingList: 'Listado de carros',
@@ -443,14 +443,14 @@ export default {
             parking: 'Parking',
             priority: 'Prioridad',
             worker: 'Trabajador',
-            recyclable: 'Reciclable'
+            recyclable: 'Reciclable',
         },
         basicData: {
             code: 'Código',
             parking: 'Parking',
             priority: 'Prioridad',
-            recyclable: 'Reciclable'
+            recyclable: 'Reciclable',
-        }
+        },
     },
     worker: {
         pageTitles: {
@@ -639,6 +639,9 @@ export default {
             delivered: 'Enviada',
             received: 'Recibida',
             entries: 'Entradas',
+            cloneShipping: 'Clonar envío',
+            CloneTravelAndEntries: 'Clonar travel y sus entradas',
+            AddEntry: 'Añadir entrada',
         },
     },
     components: {

src/pages/Travel/Card/TravelSummary.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, ref, computed, onUpdated } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@@ -23,6 +23,7 @@ const $props = defineProps({
     },
 });
 
+const router = useRouter();
 const entityId = computed(() => $props.id || route.params.id);
 const entries = ref([]);
 const summaryRef = ref();
@@ -33,13 +34,16 @@ onMounted(async () => {
     travelUrl.value = (await getUrl('travel/')) + entityId.value;
 });
 
-async function setTravelData(data) {
+const cloneTravel = () => {
-    if (data) {
+    const stringifiedTravelData = JSON.stringify(travel.value);
-        travel.value = data;
+    redirectToCreateView(stringifiedTravelData);
-        const entriesResponse = await travelService.getTravelEntries(travel.value.id);
+};
-        if (entriesResponse.data) entries.value = entriesResponse.data;
+
-    }
+const headerMenuOptions = [
-}
+    { name: t('travel.summary.cloneShipping'), action: cloneTravel },
+    { name: t('travel.summary.CloneTravelAndEntries'), action: cloneTravel },
+    { name: t('travel.summary.AddEntry'), action: cloneTravel },
+];
 
 const tableColumnComponents = {
     isConfirmed: {
@@ -148,6 +152,18 @@ const entriesTableRows = computed(() => {
     if (!entries.value && !entries.value.length > 0) return [];
     return entries.value;
 });
+
+async function setTravelData(data) {
+    if (data) {
+        travel.value = data;
+        const entriesResponse = await travelService.getTravelEntries(travel.value.id);
+        if (entriesResponse.data) entries.value = entriesResponse.data;
+    }
+}
+
+const redirectToCreateView = (queryParams) => {
+    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
+};
 </script>
 
 <template>
@@ -165,6 +181,21 @@ const entriesTableRows = computed(() => {
             <span>{{ travel.ref }} - {{ travel.id }}</span>
         </template>
 
+        <template #header-right>
+            <QBtn color="white" dense flat icon="more_vert" round size="md">
+                <QTooltip>
+                    {{ t('components.cardDescriptor.moreOptions') }}
+                </QTooltip>
+                <QMenu>
+                    <QList dense v-for="option in headerMenuOptions" :key="option">
+                        <QItem v-ripple clickable @click="option.action">
+                            {{ option.name }}
+                        </QItem>
+                    </QList>
+                </QMenu>
+            </QBtn>
+        </template>
+
         <template #body>
             <QCard class="vn-one">
                 <VnLv

src/pages/Travel/TravelCreate.vue

@@ -5,6 +5,7 @@ import FetchData from 'components/FetchData.vue';
 import { useTravelStore } from 'src/stores/travel';
 import { useRouter, useRoute } from 'vue-router';
 import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
+import { toDate } from 'src/filters';
 import { onBeforeMount } from 'vue';
 
 const { t } = useI18n();
@@ -12,7 +13,7 @@ const route = useRoute();
 const router = useRouter();
 const travelStore = useTravelStore();
 
-const newTravelData = reactive({
+const newTravelDataForm = reactive({
     ref: null,
     agencyModeFk: null,
     shipped: null,
@@ -34,14 +35,18 @@ const warehousesOptions = reactive({
 onBeforeMount(() => {
     if (route.query.travelData) {
         const travelData = JSON.parse(route.query.travelData);
-        for (let key in travelData) {
+        for (let key in newTravelDataForm) {
-            newTravelData[key] = travelData[key];
+            if (key === 'landed' || key === 'shipped') {
+                newTravelDataForm[key] = travelData[key].substring(0, 10);
+            } else {
+                newTravelDataForm[key] = travelData[key];
+            }
         }
     }
 });
 
 const createTravel = async () => {
-    const response = await travelStore.createTravel(newTravelData);
+    const response = await travelStore.createTravel(newTravelDataForm);
     if (response.status === 200) router.push({ path: `/travel/${response.data.id}` });
 };
 
@@ -58,8 +63,8 @@ const onFetchWarehouses = (warehouses) => {
 };
 
 const canSubmit = computed(() => {
-    for (const key in newTravelData) {
+    for (const key in newTravelDataForm) {
-        if (!newTravelData[key]) return false;
+        if (!newTravelDataForm[key]) return false;
     }
     return true;
 });
@@ -80,14 +85,14 @@ const redirectToTravelList = () => {
         >
             <QCard class="row q-pa-xl full-width card">
                 <QInput
-                    v-model="newTravelData.ref"
+                    v-model="newTravelDataForm.ref"
                     :label="t('travel.shared.reference')"
                     filled
                     style="max-width: 100%"
                 />
                 <QSelect
                     :options="agenciesOptions.filtered"
-                    v-model="newTravelData.agencyModeFk"
+                    v-model="newTravelDataForm.agencyModeFk"
                     filled
                     use-input
                     @filter="
@@ -100,14 +105,14 @@ const redirectToTravelList = () => {
                     style="max-width: 100%"
                 />
                 <QInput
-                    v-model="newTravelData.shipped"
+                    v-model="newTravelDataForm.shipped"
                     type="date"
                     filled
                     mask="date"
                     :label="t('travel.shared.shipped')"
                 />
                 <QInput
-                    v-model="newTravelData.landed"
+                    v-model="newTravelDataForm.landed"
                     type="date"
                     filled
                     mask="date"
@@ -115,7 +120,7 @@ const redirectToTravelList = () => {
                 />
                 <QSelect
                     :options="warehousesOptions.filtered"
-                    v-model="newTravelData.warehouseOutFk"
+                    v-model="newTravelDataForm.warehouseOutFk"
                     filled
                     use-input
                     @filter="
@@ -128,7 +133,7 @@ const redirectToTravelList = () => {
                 />
                 <QSelect
                     :options="warehousesOptions.filtered"
-                    v-model="newTravelData.warehouseInFk"
+                    v-model="newTravelDataForm.warehouseInFk"
                     filled
                     use-input
                     @filter="

src/pages/Travel/TravelList.vue

@@ -21,16 +21,9 @@ const navigateToTravelId = (id) => {
 };
 
 const cloneTravel = (travelData) => {
-    const params = JSON.stringify({
+    const stringifiedTravelData = JSON.stringify(travelData);
-        ref: travelData.ref,
+    console.log('clone data:: ', stringifiedTravelData);
-        agencyModeFk: travelData.agencyModeFk,
+    redirectToCreateView(stringifiedTravelData);
-        shipped: travelData.shipped,
-        landed: travelData.landed,
-        warehouseInFk: travelData.warehouseInFk,
-        warehouseOutFk: travelData.warehouseOutFk,
-    });
-
-    redirectToCreateView(params);
 };
 
 const redirectToCreateView = (queryParams) => {