Merge pull request 'feature/TravelSubmodules' (#83) from feature/TravelSubmodules into dev

Reviewed-on: hyervoni/salix-front-mindshore#83
Reviewed-by: Carlos Fonseca <cfonseca@verdnatura.es>

src/components/FormModel.vue

@@ -128,7 +128,7 @@ async function save() {
 
     try {
         const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
-        let response
+        let response;
         if ($props.urlCreate) {
             response = await axios.post($props.urlCreate, body);
             notify('globals.dataCreated', 'positive');

src/components/ui/CardDescriptor.vue

@@ -81,6 +81,7 @@ function viewSummary(id) {
     <div class="descriptor">
         <template v-if="entity">
             <div class="header bg-primary q-pa-sm justify-between">
+                <slot name="header-extra-action" />
                 <QBtn
                     @click.stop="viewSummary(entity.id)"
                     round
@@ -118,7 +119,7 @@ function viewSummary(id) {
                     icon="more_vert"
                     round
                     size="md"
-                    v-if="slots.menu"
+                    :class="{ invisible: !slots.menu }"
                 >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}

src/composables/useState.js

@@ -9,6 +9,7 @@ const user = ref({
     lang: '',
     darkMode: null,
     companyFk: null,
+    warehouseFk: null,
 });
 
 const roles = ref([]);
@@ -25,6 +26,7 @@ export function useState() {
                 lang: user.value.lang,
                 darkMode: user.value.darkMode,
                 companyFk: user.value.companyFk,
+                warehouseFk: user.value.warehouseFk,
             };
         });
     }
@@ -37,6 +39,7 @@ export function useState() {
             lang: data.lang,
             darkMode: data.darkMode,
             companyFk: data.companyFk,
+            warehouseFk: data.warehouseFk,
         };
     }
 

src/composables/useUserConfig.js

@@ -12,6 +12,7 @@ export function useUserConfig() {
             const user = state.getUser().value;
             user.darkMode = data.darkMode;
             user.companyFk = data.companyFk;
+            user.warehouseFk = data.warehouseFk;
             state.setUser(user);
 
             return data;

src/i18n/en/index.js

@@ -1036,8 +1036,8 @@ export default {
             extraCommunity: 'Extra community',
             travelCreate: 'New travel',
             basicData: 'Basic data',
-            history: 'History',
+            history: 'Log',
-            thermographs: 'Termographs',
+            thermographs: 'Thermograph',
         },
         summary: {
             confirmed: 'Confirmed',
@@ -1049,7 +1049,9 @@ export default {
             entries: 'Entries',
             cloneShipping: 'Clone travel',
             CloneTravelAndEntries: 'Clone travel and his entries',
+            deleteTravel: 'Delete travel',
             AddEntry: 'Add entry',
+            thermographs: 'Thermographs',
         },
         variables: {
             search: 'Id/Reference',
@@ -1061,6 +1063,31 @@ export default {
             continent: 'Continent out',
             totalEntries: 'Total entries',
         },
+        basicData: {
+            reference: 'Reference',
+            agency: 'Agency',
+            shipped: 'Shipped',
+            landed: 'Landed',
+            warehouseOut: 'Warehouse Out',
+            warehouseIn: 'Warehouse In',
+            delivered: 'Delivered',
+            received: 'Received',
+        },
+        thermographs: {
+            code: 'Code',
+            temperature: 'Temperature',
+            state: 'State',
+            destination: 'Destination',
+            created: 'Created',
+            thermograph: 'Thermograph',
+            reference: 'Reference',
+            type: 'Type',
+            company: 'Company',
+            warehouse: 'Warehouse',
+            travelFileDescription: 'Travel id { travelId }',
+            file: 'File',
+            description: 'Description',
+        },
     },
 
     components: {

src/i18n/es/index.js

@@ -1049,7 +1049,9 @@ export default {
             entries: 'Entradas',
             cloneShipping: 'Clonar envío',
             CloneTravelAndEntries: 'Clonar travel y sus entradas',
+            deleteTravel: 'Eliminar envío',
             AddEntry: 'Añadir entrada',
+            thermographs: 'Termógrafos',
         },
         variables: {
             search: 'Id/Referencia',
@@ -1061,6 +1063,31 @@ export default {
             continent: 'Cont. Salida',
             totalEntries: 'Ent. totales',
         },
+        basicData: {
+            reference: 'Referencia',
+            agency: 'Agencia',
+            shipped: 'F. Envío',
+            landed: 'F. entrega',
+            warehouseOut: 'Alm. salida',
+            warehouseIn: 'Alm. entrada',
+            delivered: 'Enviada',
+            received: 'Recibida',
+        },
+        thermographs: {
+            code: 'Código',
+            temperature: 'Temperatura',
+            state: 'Estado',
+            destination: 'Destino',
+            created: 'Fecha creación',
+            thermograph: 'Termógrafo',
+            reference: 'Referencia',
+            type: 'Tipo',
+            company: 'Empresa',
+            warehouse: 'Almacén',
+            travelFileDescription: 'Id envío { travelId }',
+            file: 'Fichero',
+            description: 'Descripción',
+        },
     },
     components: {
         topbar: {},

src/pages/Entry/EntryCreate.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -9,20 +9,27 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
+import { useState } from 'src/composables/useState';
 import { toDate } from 'src/filters';
 
+const state = useState();
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 
+const user = state.getUser();
 const newEntryForm = reactive({
     supplierFk: null,
     travelFk: route.query?.travelFk || null,
-    companyFk: null,
+    companyFk: user.value.companyFk || null,
 });
-
 const suppliersOptions = ref([]);
 const travelsOptionsOptions = ref([]);
 const companiesOptions = ref([]);
+
+const redirectToEntryBasicData = (_, { id }) => {
+    router.push({ name: 'EntryBasicData', params: { id } });
+};
 </script>
 
 <template>
@@ -48,12 +55,14 @@ const companiesOptions = ref([]);
         @on-fetch="(data) => (companiesOptions = data)"
         auto-load
     />
-
-    <!-- Agregar searchbar de entries -->
-
     <QPage>
         <VnSubToolbar />
-        <FormModel url-create="Entries" model="entry" :form-initial-data="newEntryForm">
+        <FormModel
+            url-create="Entries"
+            model="entry"
+            :form-initial-data="newEntryForm"
+            @on-data-saved="redirectToEntryBasicData"
+        >
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <VnSelectFilter

src/pages/Travel/Card/TravelBasicData.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const agenciesOptions = ref([]);
+</script>
+<template>
+    <FetchData
+        url="AgencyModes"
+        @on-fetch="(data) => (agenciesOptions = data)"
+        auto-load
+    />
+    <FormModel
+        :url="`Travels/${route.params.id}`"
+        :url-update="`Travels/${route.params.id}`"
+        model="travel"
+        auto-load
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.ref"
+                        :label="t('travel.basicData.reference')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('travel.basicData.agency')"
+                        v-model="data.agencyModeFk"
+                        :options="agenciesOptions"
+                        option-value="id"
+                        option-label="name"
+                        map-options
+                        hide-selected
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInputDate
+                        v-model="data.shipped"
+                        :label="t('travel.basicData.shipped')"
+                    />
+                </div>
+                <div class="col">
+                    <VnInputDate
+                        v-model="data.landed"
+                        :label="t('travel.basicData.landed')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('travel.basicData.warehouseOut')"
+                        v-model="data.warehouseOutFk"
+                        :options="agenciesOptions"
+                        option-value="id"
+                        option-label="name"
+                        map-options
+                        hide-selected
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('travel.basicData.warehouseIn')"
+                        v-model="data.warehouseInFk"
+                        :options="agenciesOptions"
+                        option-value="id"
+                        option-label="name"
+                        map-options
+                        hide-selected
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        :label="t('travel.basicData.delivered')"
+                        v-model="data.isDelivered"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        :label="t('travel.basicData.received')"
+                        v-model="data.isReceived"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>

src/pages/Travel/Card/TravelCard.vue

@@ -17,7 +17,6 @@ const stateStore = useStateStore();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/Travel/Card/TravelDescriptor.vue

@@ -2,10 +2,13 @@
 import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { toDate } from 'src/filters';
+
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
+
 import useCardDescription from 'src/composables/useCardDescription';
+import { toDate } from 'src/filters';
 
 const $props = defineProps({
     id: {
@@ -28,6 +31,7 @@ const filter = {
         'warehouseInFk',
         'warehouseOutFk',
         'cargoSupplierFk',
+        'agencyModeFk',
     ],
     include: [
         {
@@ -66,6 +70,25 @@ const setData = (entity) => {
         @on-fetch="setData"
         data-key="travelData"
     >
+        <template #header-extra-action>
+            <QBtn
+                round
+                flat
+                dense
+                size="md"
+                icon="local_airport"
+                color="white"
+                class="link"
+                :to="{ name: 'TravelList' }"
+            >
+                <QTooltip>
+                    {{ t('Go to module index') }}
+                </QTooltip>
+            </QBtn>
+        </template>
+        <template #menu="{ entity }">
+            <TravelDescriptorMenuItems :travel="entity" />
+        </template>
         <template #body="{ entity }">
             <VnLv :label="t('globals.wareHouseIn')" :value="entity.warehouseIn.name" />
             <VnLv :label="t('globals.wareHouseOut')" :value="entity.warehouseOut.name" />
@@ -73,8 +96,32 @@ const setData = (entity) => {
             <VnLv :label="t('globals.landed')" :value="toDate(entity.landed)" />
             <VnLv :label="t('globals.totalEntries')" :value="entity.totalEntries" />
         </template>
+        <template #actions="{ entity }">
+            <QCardActions>
+                <QBtn
+                    :to="{
+                        name: 'TravelList',
+                        query: {
+                            params: JSON.stringify({
+                                agencyModeFk: entity.agencyModeFk,
+                            }),
+                        },
+                    }"
+                    size="md"
+                    icon="local_airport"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('All travels with current agency') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
     </CardDescriptor>
 </template>
-<i18n>
 
+<i18n>
+es:
+    Go to module index: Ir al índice del módulo
+    The travel will be deleted: El envío será eliminado
+    Do you want to delete this travel?: ¿Quieres eliminar este envío?
+    All travels with current agency: Todos los envíos con la agencia actual
 </i18n>

src/pages/Travel/Card/TravelDescriptorMenuItems.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { useRole } from 'src/composables/useRole';
+
+const $props = defineProps({
+    travel: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const { t } = useI18n();
+const router = useRouter();
+const quasar = useQuasar();
+const { notify } = useNotify();
+const role = useRole();
+
+const redirectToCreateView = (queryParams) => {
+    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
+};
+
+const cloneTravel = () => {
+    const stringifiedTravelData = JSON.stringify($props.travel);
+    redirectToCreateView(stringifiedTravelData);
+};
+
+const cloneTravelWithEntries = () => {
+    try {
+        axios.post(`Travels/${$props.travel.id}/cloneWithEntries`);
+        notify('globals.dataSaved', 'positive');
+    } catch (err) {
+        console.err('Error cloning travel with entries');
+    }
+};
+
+const isBuyer = computed(() => {
+    return role.hasAny(['buyer']);
+});
+
+const openDeleteEntryDialog = (id) => {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('The travel will be deleted'),
+                message: t('Do you want to delete this travel?'),
+            },
+        })
+        .onOk(async () => {
+            await deleteTravel(id);
+        });
+};
+
+const deleteTravel = async (id) => {
+    try {
+        await axios.delete(`Travels/${id}`);
+        router.push({ name: 'TravelList' });
+        notify('globals.dataDeleted', 'positive');
+    } catch (err) {
+        console.error('Error deleting travel');
+    }
+};
+</script>
+
+<template>
+    <QItem v-ripple clickable @click="cloneTravel(travel)">
+        <QItemSection>{{ t('travel.summary.cloneShipping') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable @click="cloneTravelWithEntries()">
+        <QItemSection>
+            {{ t('travel.summary.CloneTravelAndEntries') }}
+        </QItemSection>
+    </QItem>
+    <QItem
+        v-if="isBuyer && travel.totalEntries === 0"
+        v-ripple
+        clickable
+        @click="openDeleteEntryDialog(travel.id)"
+    >
+        <QItemSection>
+            {{ t('travel.summary.deleteTravel') }}
+        </QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>
+            <RouterLink
+                :to="{ name: 'EntryCreate', query: { travelFk: travel.id } }"
+                class="color-vn-text"
+            >
+                {{ t('travel.summary.AddEntry') }}
+            </RouterLink>
+        </QItemSection>
+    </QItem>
+</template>
+
+<i18n>
+es:
+    The travel will be deleted: El envío será eliminado
+    Do you want to delete this travel?: ¿Quieres eliminar este envío?
+</i18n>

src/pages/Travel/Card/TravelLog.vue

@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Entry" url="/TravelLogs"></VnLog>
+</template>

src/pages/Travel/Card/TravelSummary.vue

@@ -1,22 +1,20 @@
 <script setup>
 import { onMounted, ref, computed, onUpdated } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import { QCheckbox, QIcon } from 'quasar';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
+import FetchData from 'src/components/FetchData.vue';
+import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
 
-import travelService from 'src/services/travel.service';
 import { toDate, toCurrency } from 'src/filters';
 import { getUrl } from 'src/composables/getUrl';
 import axios from 'axios';
 
 onUpdated(() => summaryRef.value.fetch());
 
-const route = useRoute();
-const { t } = useI18n();
-
 const $props = defineProps({
     id: {
         type: Number,
@@ -25,115 +23,50 @@ const $props = defineProps({
     },
 });
 
-const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
 const entityId = computed(() => $props.id || route.params.id);
-const entries = ref([]);
 const summaryRef = ref();
-const travel = ref();
 const travelUrl = ref();
+const travel = ref();
+const entries = ref([]);
+const thermographs = ref([]);
+const warehouses = ref([]);
 
 onMounted(async () => {
     travelUrl.value = (await getUrl('travel/')) + entityId.value;
 });
 
-const cloneTravel = () => {
-    const stringifiedTravelData = JSON.stringify(travel.value);
-    redirectToCreateView(stringifiedTravelData);
-};
-
-const cloneTravelWithEntries = () => {
-    try {
-        axios.post(`Travels/${$props.id}/cloneWithEntries`);
-    } catch (err) {
-        console.err('Error cloning travel with entries');
-    }
-};
-
-const headerMenuOptions = [
-    { name: t('travel.summary.cloneShipping'), action: cloneTravel },
-    { name: t('travel.summary.CloneTravelAndEntries'), action: cloneTravelWithEntries },
-    { name: t('travel.summary.AddEntry'), action: null },
-];
-
-const tableColumnComponents = {
-    isConfirmed: {
-        component: () => QCheckbox,
-        props: (prop) => ({
-            disable: true,
-            'model-value': Boolean(prop.value),
-        }),
-    },
-    id: {
-        component: () => 'span',
-        props: () => {},
-        event: () => openEntryDescriptor(),
-    },
-    supplierName: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    reference: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    freightValue: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    packageValue: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    cc: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    pallet: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    m3: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    observation: {
-        component: (props) => (props.value ? QIcon : null),
-        props: () => ({ name: 'insert_drive_file', color: 'primary', size: '25px' }),
-    },
-};
-
 const entriesTableColumns = computed(() => {
     return [
         {
             label: t('travel.summary.confirmed'),
             field: 'isConfirmed',
             name: 'isConfirmed',
-            align: 'left',
+            align: 'center',
+            showValue: false,
         },
         {
             label: t('travel.summary.entryId'),
             field: 'id',
             name: 'id',
-            align: 'left',
+            align: 'center',
+            showValue: false,
         },
         {
             label: t('supplier.pageTitles.supplier'),
             field: 'supplierName',
             name: 'supplierName',
             align: 'left',
+            showValue: true,
         },
         {
             label: t('globals.reference'),
             field: 'reference',
             name: 'reference',
             align: 'left',
+            showValue: true,
         },
         {
             label: t('travel.summary.freight'),
@@ -143,6 +76,7 @@ const entriesTableColumns = computed(() => {
             format: (val) => {
                 return toCurrency(val);
             },
+            showValue: true,
         },
         {
             label: t('travel.summary.package'),
@@ -152,16 +86,62 @@ const entriesTableColumns = computed(() => {
             format: (val) => {
                 return toCurrency(val);
             },
+            showValue: true,
         },
-        { label: 'CC', field: 'cc', name: 'cc', align: 'left' },
+        { label: 'CC', field: 'cc', name: 'cc', align: 'left', showValue: true },
-        { label: 'Pallet', field: 'pallet', name: 'pallet', align: 'left' },
+        {
-        { label: 'm³', field: 'm3', name: 'm3', align: 'left' },
+            label: 'Pallet',
+            field: 'pallet',
+            name: 'pallet',
+            align: 'left',
+            showValue: true,
+        },
+        { label: 'm³', field: 'm3', name: 'm3', align: 'left', showValue: true },
         {
             label: '',
             field: 'observation',
             name: 'observation',
             align: 'left',
             toolTip: 'Observation three',
+            showValue: false,
+        },
+    ];
+});
+
+const thermographsTableColumns = computed(() => {
+    return [
+        {
+            label: t('travel.thermographs.code'),
+            field: 'thermographFk',
+            name: 'thermographFk',
+            align: 'left',
+        },
+        {
+            label: t('travel.thermographs.temperature'),
+            field: 'temperatureFk',
+            name: 'temperatureFk',
+            align: 'left',
+        },
+        {
+            label: t('travel.thermographs.state'),
+            field: 'result',
+            name: 'result',
+            align: 'left',
+        },
+        {
+            label: t('travel.thermographs.destination'),
+            field: 'warehouseFk',
+            name: 'destination',
+            align: 'left',
+            format: (val) =>
+                warehouses.value.find((warehouse) => warehouse.id === val).name,
+        },
+        {
+            label: t('travel.thermographs.created'),
+            field: 'created',
+            name: 'created',
+            align: 'left',
+            format: (val) => toDate(val),
         },
     ];
 });
@@ -171,22 +151,79 @@ const entriesTableRows = computed(() => {
     return entries.value;
 });
 
-async function setTravelData(data) {
+const entriesTotalHb = computed(() => {
-    if (data) {
+    return entriesTableRows.value.reduce((acc, { hb }) => acc + hb, 0);
-        travel.value = data;
+});
-        const entriesResponse = await travelService.getTravelEntries(travel.value.id);
-        if (entriesResponse.data) entries.value = entriesResponse.data;
-    }
-}
 
-const redirectToCreateView = (queryParams) => {
+const entriesTotalFreight = computed(() => {
-    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
+    return toCurrency(
+        entriesTableRows.value.reduce((acc, { freightValue }) => acc + freightValue, 0)
+    );
+});
+
+const entriesTotalCc = computed(() => {
+    return entriesTableRows.value.reduce((acc, { cc }) => acc + cc, 0);
+});
+
+const entriesTotalPallet = computed(() => {
+    return entriesTableRows.value.reduce((acc, { pallet }) => acc + pallet, 0);
+});
+
+const entriesTotalM3 = computed(() => {
+    return entriesTableRows.value.reduce((acc, { m3 }) => acc + m3, 0);
+});
+
+const getTravelEntries = async (id) => {
+    try {
+        const { data } = await axios.get(`Travels/${id}/getEntries`);
+        entries.value = data;
+    } catch (err) {
+        console.error('Error fetching travel entries');
+    }
 };
 
-const openEntryDescriptor = () => {};
+const getTravelThermographs = async (id) => {
+    try {
+        const filter = {
+            include: {
+                relation: 'warehouse',
+                scope: {
+                    fields: ['id', 'name'],
+                },
+            },
+            where: { travelFk: id },
+        };
+
+        const { data } = await axios.get('TravelThermographs', {
+            params: { filter: JSON.parse(JSON.stringify(filter)) },
+        });
+        thermographs.value = data;
+    } catch (err) {
+        console.error('Error fetching travel thermographs');
+    }
+};
+
+async function setTravelData(travelData) {
+    try {
+        if (travelData) {
+            travel.value = travelData;
+            await getTravelEntries(travel.value.id);
+            await getTravelThermographs(travel.value.id);
+        }
+    } catch (err) {
+        console.error(`Error setting travel data`, err);
+    }
+}
 </script>
 
 <template>
+    <FetchData
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'] }"
+        order="name"
+        @on-fetch="(data) => (warehouses = data)"
+        auto-load
+    />
     <CardSummary
         ref="summaryRef"
         :url="`Travels/${entityId}/getTravel`"
@@ -207,10 +244,8 @@ const openEntryDescriptor = () => {};
                     {{ t('components.cardDescriptor.moreOptions') }}
                 </QTooltip>
                 <QMenu>
-                    <QList dense v-for="option in headerMenuOptions" :key="option">
+                    <QList>
-                        <QItem v-ripple clickable @click="option.action">
+                        <TravelDescriptorMenuItems :travel="travel" />
-                            {{ option.name }}
-                        </QItem>
                     </QList>
                 </QMenu>
             </QBtn>
@@ -225,11 +260,10 @@ const openEntryDescriptor = () => {};
                 />
                 <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
                     <template #value>
-                        <QCheckbox
+                        <QIcon
-                            v-model="travel.isDelivered"
+                            :name="travel.isDelivered ? 'check' : 'close'"
-                            disable
+                            :color="travel.isDelivered ? 'positive' : 'negative'"
-                            dense
+                            size="sm"
-                            class="full-width q-my-xs"
                         />
                     </template>
                 </VnLv>
@@ -242,11 +276,10 @@ const openEntryDescriptor = () => {};
                 />
                 <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
                     <template #value>
-                        <QCheckbox
+                        <QIcon
-                            v-model="travel.isReceived"
+                            :name="travel.isReceived ? 'check' : 'close'"
-                            disable
+                            :color="travel.isReceived ? 'positive' : 'negative'"
-                            dense
+                            size="sm"
-                            class="full-width q-mb-xs"
                         />
                     </template>
                 </VnLv>
@@ -258,10 +291,9 @@ const openEntryDescriptor = () => {};
                 <VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
             </QCard>
             <QCard class="full-width" v-if="entriesTableRows.length > 0">
-                <a class="header" :href="travelUrl + 'entry'">
+                <span class="header">
                     {{ t('travel.summary.entries') }}
-                    <QIcon name="open_in_new" color="primary" />
+                </span>
-                </a>
                 <QTable
                     :rows="entriesTableRows"
                     :columns="entriesTableColumns"
@@ -269,35 +301,71 @@ const openEntryDescriptor = () => {};
                     row-key="id"
                     class="full-width q-mt-md"
                 >
-                    <template #body-cell="props">
+                    <template #header="props">
-                        <QTd :props="props">
+                        <QTr :props="props" class="bg">
-                            <component
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                :is="
+                                {{ t(col.label) }}
-                                    tableColumnComponents[props.col.name].component(props)
+                            </QTh>
-                                "
+                        </QTr>
-                                v-bind="
+                    </template>
-                                    tableColumnComponents[props.col.name].props(props)
+                    <template #body-cell-isConfirmed="{ col, value }">
-                                "
+                        <QTd>
-                                @click="
+                            <QIcon
-                                    tableColumnComponents[props.col.name].event(props)
+                                v-if="col.name === 'isConfirmed'"
-                                "
+                                :name="value ? 'check' : 'close'"
-                                class="col-content"
+                                :color="value ? 'positive' : 'negative'"
-                            >
+                                size="sm"
-                                <template
+                            />
-                                    v-if="
-                                        props.col.name !== 'observation' &&
-                                        props.col.name !== 'isConfirmed'
-                                    "
-                                    >{{ props.value }}</template
-                                >
-                                <QTooltip v-if="props.col.toolTip">{{
-                                    props.col.toolTip
-                                }}</QTooltip>
-                            </component>
                         </QTd>
                     </template>
+                    <template #body-cell-id="{ col, value }">
+                        <QTd>
+                            <QBtn v-if="col.name === 'id'" flat color="blue" dense>
+                                {{ value }}
+                                <EntryDescriptorProxy :id="value" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-observation="{ value }">
+                        <QTd>
+                            <QIcon name="insert_drive_file" color="primary" size="24px">
+                                <QTooltip>{{ value }}</QTooltip>
+                            </QIcon>
+                        </QTd>
+                    </template>
+                    <template #bottom-row>
+                        <QTd></QTd>
+                        <QTd></QTd>
+                        <QTd></QTd>
+                        <QTd></QTd>
+                        <QTd class="text-bold">{{ entriesTotalHb }}</QTd>
+                        <QTd class="text-bold">{{ entriesTotalFreight }}</QTd>
+                        <QTd class="text-bold">{{ entriesTotalCc }}</QTd>
+                        <QTd class="text-bold">{{ entriesTotalPallet }}</QTd>
+                        <QTd class="text-bold">{{ entriesTotalM3 }}</QTd>
+                    </template>
                 </QTable>
             </QCard>
+
+            <QCard class="full-width" v-if="thermographs.length > 0">
+                <RouterLink
+                    class="header"
+                    :to="{
+                        name: 'TravelThermographsIndex',
+                        params: { id: travel.id },
+                    }"
+                >
+                    {{ t('travel.summary.thermographs') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </RouterLink>
+                <QTable
+                    :rows="thermographs"
+                    :columns="thermographsTableColumns"
+                    hide-bottom
+                    row-key="id"
+                    class="full-width q-mt-md"
+                />
+            </QCard>
         </template>
     </CardSummary>
 </template>

src/pages/Travel/Card/TravelThermographs.vue

@@ -0,0 +1,209 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import FetchData from 'src/components/FetchData.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { toDate } from 'src/filters';
+import { downloadFile } from 'src/composables/downloadFile';
+
+const route = useRoute();
+const quasar = useQuasar();
+const router = useRouter();
+const { t } = useI18n();
+const { notify } = useNotify();
+
+const warehouses = ref([]);
+
+const thermographFilter = {
+    include: {
+        relation: 'warehouse',
+        scope: {
+            fields: ['id', 'name'],
+        },
+    },
+    where: { travelFk: route.params.id },
+    order: ['created'],
+};
+
+const TableColumns = computed(() => {
+    return [
+        {
+            label: t('travel.thermographs.code'),
+            field: 'thermographFk',
+            name: 'thermographFk',
+            align: 'left',
+        },
+        {
+            label: t('travel.thermographs.temperature'),
+            field: 'temperatureFk',
+            name: 'temperatureFk',
+            align: 'left',
+        },
+        {
+            label: t('travel.thermographs.state'),
+            field: 'result',
+            name: 'result',
+            align: 'left',
+        },
+        {
+            label: t('travel.thermographs.destination'),
+            field: 'warehouseFk',
+            name: 'destination',
+            align: 'left',
+            format: (val) =>
+                warehouses.value.find((warehouse) => warehouse.id === val).name,
+        },
+        {
+            label: t('travel.thermographs.created'),
+            field: 'created',
+            name: 'created',
+            align: 'left',
+            format: (val) => toDate(val),
+        },
+        {
+            name: 'downloadFile',
+            align: 'left',
+        },
+        {
+            name: 'editFile',
+            align: 'left',
+        },
+        {
+            name: 'removeThermograph',
+            align: 'left',
+        },
+    ];
+});
+
+const openRemoveDialog = async (id) => {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                message: t('Are you sure you want to remove the thermograph?'),
+            },
+        })
+        .onOk(async () => {
+            try {
+                await removeThermograph(id);
+                notify(t('Thermograph removed'), 'positive');
+            } catch (err) {
+                console.error('Error removing thermograph');
+            }
+        });
+};
+
+const redirectToThermographForm = (action, { id = null }) => {
+    const routeDetails = {
+        name: action === 'create' ? 'TravelThermographsCreate' : 'TravelThermographsEdit',
+    };
+
+    if (action === 'edit' && id) {
+        const params = {};
+        params.thermographId = id;
+        routeDetails.params = params;
+    }
+    router.push(routeDetails);
+};
+
+const removeThermograph = async (id) => {
+    await axios.delete('Travels/deleteThermograph', { id });
+};
+</script>
+
+<template>
+    <FetchData
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'] }"
+        order="name"
+        @on-fetch="(data) => (warehouses = data)"
+        auto-load
+    />
+    <VnPaginate
+        data-key="TravelThermographs"
+        url="TravelThermographs"
+        :filter="thermographFilter"
+        :params="{ travelFk: route.params.id }"
+        auto-load
+    >
+        <template #body="{ rows }">
+            <QTable
+                :rows="rows"
+                :columns="TableColumns"
+                :no-data-label="t('No results')"
+                :rows-per-page-options="[0]"
+                row-key="id"
+                class="full-width q-mt-md"
+            >
+                <template #body-cell-downloadFile="{ row }">
+                    <QTd auto-width>
+                        <QIcon
+                            name="cloud_download"
+                            color="primary"
+                            size="sm"
+                            class="cursor-pointer"
+                            @click="downloadFile(row.dmsFk)"
+                        >
+                            <QTooltip>{{ t('Download file') }}</QTooltip>
+                        </QIcon>
+                    </QTd>
+                </template>
+                <template #body-cell-editFile="{ row }">
+                    <QTd auto-width>
+                        <QIcon
+                            name="edit"
+                            color="primary"
+                            size="sm"
+                            class="cursor-pointer"
+                            @click="redirectToThermographForm('edit', row)"
+                        >
+                            <QTooltip>{{ t('Edit file') }}</QTooltip>
+                        </QIcon>
+                    </QTd>
+                </template>
+                <template #body-cell-removeThermograph="{ row }">
+                    <QTd auto-width>
+                        <QIcon
+                            name="delete"
+                            color="primary"
+                            size="sm"
+                            class="cursor-pointer"
+                            @click="openRemoveDialog(row.id)"
+                        >
+                            <QTooltip>{{ t('Remove thermograph') }}</QTooltip>
+                        </QIcon>
+                    </QTd>
+                </template>
+            </QTable>
+        </template>
+    </VnPaginate>
+    <QPageSticky :offset="[20, 20]">
+        <QBtn
+            fab
+            icon="add"
+            color="primary"
+            @click="redirectToThermographForm('create')"
+        />
+        <QTooltip>
+            {{ t('Add thermograph') }}
+        </QTooltip>
+    </QPageSticky>
+</template>
+
+<i18n>
+es:
+    Add thermograph: Añadir termógrafo
+    Download file: Descargar fichero
+    Edit file: Editar fichero
+    Remove thermograph: Eliminar termógrafo
+    Thermograph removed: Termógrafo eliminado
+    Are you sure you want to remove the thermograph?: ¿Seguro que quieres quitar el termógrafo?
+    No results: Sin resultados
+</i18n>

src/pages/Travel/Card/TravelThermographsForm.vue

@@ -0,0 +1,325 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { reactive, ref, onBeforeMount } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useState } from 'src/composables/useState';
+import { useStateStore } from 'stores/useStateStore';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const props = defineProps({
+    viewAction: {
+        type: String,
+        default: 'create',
+    },
+});
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const state = useState();
+const { notify } = useNotify();
+
+const thermographFilter = {
+    fields: ['thermographFk'],
+    where: {
+        travelFk: null,
+    },
+    order: 'thermographFk ASC',
+};
+const user = state.getUser();
+const allowedFileTypes = ref(null);
+const thermographsOptions = ref([]);
+const dmsTypesOptions = ref([]);
+const companiesOptions = ref([]);
+const warehousesOptions = ref([]);
+
+const thermographForm = reactive({
+    thermographId: null,
+    state: null,
+    reference: null,
+    dmsTypeId: null,
+    companyId: null,
+    warehouseId: null,
+    files: [],
+    description: null,
+});
+
+onBeforeMount(async () => {
+    await getAllowedFileTypes();
+
+    if (props.viewAction === 'create') {
+        setCreateDefaultParams();
+    } else {
+        await setEditDefaultParams();
+    }
+
+    if (route.query.thermographData) {
+        const thermographData = JSON.parse(route.query.thermographData);
+        for (let key in thermographForm) {
+            thermographForm[key] = thermographData[key];
+        }
+    }
+});
+
+const getAllowedFileTypes = async () => {
+    try {
+        const { data } = await axios.get('DmsContainers/allowedContentTypes');
+        const contentTypes = data.join(', ');
+        allowedFileTypes.value = contentTypes;
+    } catch (err) {
+        console.error('Error fetching allowed content types');
+    }
+};
+
+const fetchDmsTypes = async () => {
+    try {
+        const params = {
+            filter: {
+                where: { code: 'miscellaneous' },
+            },
+        };
+        const { data } = await axios.get('DmsTypes/findOne', { params });
+        return data;
+    } catch (err) {
+        console.error('Error fetching Dms Types');
+    }
+};
+
+const setCreateDefaultParams = async () => {
+    const dataResponse = await fetchDmsTypes();
+    thermographForm.companyId = user.value.companyFk;
+    thermographForm.warehouseId = user.value.warehouseFk;
+    thermographForm.reference = route.params.id;
+    thermographForm.dmsTypeId = dataResponse.id;
+    thermographForm.state = 'Ok';
+    thermographForm.description = t('travel.thermographs.travelFileDescription', {
+        travelId: route.params.id,
+    }).toUpperCase();
+};
+
+const setEditDefaultParams = async () => {
+    try {
+        const filterObj = { include: { relation: 'dms' } };
+        const filter = encodeURIComponent(JSON.stringify(filterObj));
+        const { data } = await axios.get(
+            `TravelThermographs/${route.params.thermographId}?filter=${filter}`
+        );
+
+        if (data) {
+            thermographForm.thermographId = data.thermographFk;
+            thermographForm.state = data.result;
+            thermographForm.reference = data.dms?.reference;
+            thermographForm.warehouseId = data.dms?.warehouseFk;
+            thermographForm.companyId = data.dms?.companyFk;
+            thermographForm.dmsTypeId = data.dms?.dmsTypeFk;
+            thermographForm.description = data.dms?.description || '';
+            thermographForm.hasFile = data.dms?.hasFile;
+            thermographForm.hasFileAttached = false;
+        }
+    } catch (err) {
+        console.error('Error fetching termograph');
+    }
+};
+
+const onSubmit = () => {
+    props.viewAction === 'create' ? createThermograph() : updateThermograph();
+};
+
+const createThermograph = async () => {
+    const formData = new FormData();
+
+    thermographForm.files.forEach((file) => {
+        formData.append(file.name, file);
+    });
+
+    try {
+        await axios.post(`/travels/${route.params.id}/createThermograph`, formData, {
+            params: thermographForm,
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            },
+        });
+        router.push({ name: 'TravelThermographsIndex' });
+        notify(t('Thermograph created'), 'positive');
+    } catch (error) {
+        console.error('Error creating thermograph');
+    }
+};
+
+const updateThermograph = async () => {
+    const formData = new FormData();
+
+    thermographForm.files.forEach((file) => {
+        formData.append(file.name, file);
+    });
+
+    try {
+        await axios.post(`travels/${route.params.id}/updateThermograph`, formData, {
+            params: thermographForm,
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            },
+        });
+        router.push({ name: 'TravelThermographsIndex' });
+        notify(t('Thermograph created'), 'positive');
+    } catch (error) {
+        console.error('Error creating thermograph');
+    }
+};
+</script>
+
+<template>
+    <FetchData
+        url="TravelThermographs"
+        @on-fetch="(data) => (thermographsOptions = data)"
+        :filter="thermographFilter"
+        auto-load
+    />
+    <FetchData
+        url="DmsTypes"
+        :filter="{ order: 'name' }"
+        @on-fetch="(data) => (dmsTypesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        @on-fetch="(data) => (companiesOptions = data)"
+        :filter="{ order: 'code' }"
+        auto-load
+    />
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        :filter="{ order: 'name' }"
+        auto-load
+    />
+    <QPage class="column items-center full-width">
+        <QForm
+            model="travel"
+            :form-initial-data="thermographForm"
+            :observe-form-changes="viewAction === 'create'"
+            :default-actions="true"
+            @submit="onSubmit()"
+            class="full-width"
+            style="max-width: 800px"
+        >
+            <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+                <div>
+                    <QBtnGroup push class="q-gutter-x-sm">
+                        <slot name="moreActions" />
+                        <QBtn
+                            color="primary"
+                            icon="restart_alt"
+                            flat
+                            @click="reset()"
+                            :label="t('globals.reset')"
+                        />
+                        <QBtn
+                            color="primary"
+                            icon="save"
+                            @click="onSubmit()"
+                            :label="t('globals.save')"
+                        />
+                    </QBtnGroup>
+                </div>
+            </Teleport>
+            <QCard class="q-pa-lg">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('travel.thermographs.thermograph')"
+                            v-model="thermographForm.thermographId"
+                            :options="thermographsOptions"
+                            option-value="thermographFk"
+                            option-label="thermographFk"
+                            :disable="viewAction === 'edit'"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            v-model="thermographForm.state"
+                            :label="t('travel.thermographs.state')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="thermographForm.reference"
+                            :label="t('travel.thermographs.reference')"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('travel.thermographs.type')"
+                            v-model="thermographForm.dmsTypeId"
+                            :options="dmsTypesOptions"
+                            option-value="id"
+                            option-label="name"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('travel.thermographs.company')"
+                            v-model="thermographForm.companyId"
+                            :options="companiesOptions"
+                            option-value="id"
+                            option-label="code"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('travel.thermographs.warehouse')"
+                            v-model="thermographForm.warehouseId"
+                            :options="warehousesOptions"
+                            option-value="id"
+                            option-label="name"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow v-if="viewAction === 'edit'" class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            :label="t('travel.thermographs.description')"
+                            type="textarea"
+                            v-model="thermographForm.description"
+                            fill-input
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QFile
+                            :label="t('travel.thermographs.file')"
+                            multiple
+                            :accept="allowedFileTypes"
+                            v-model="thermographForm.files"
+                        >
+                            <template #append>
+                                <QIcon name="vn:attach" class="cursor-pointer">
+                                    <QTooltip>{{ t('Select files') }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </QFile>
+                    </div>
+                </VnRow>
+            </QCard>
+        </QForm>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    Select files: Selecciona ficheros
+    Thermograph created: Termógrafo creado
+</i18n>

src/pages/Travel/ExtraCommunity.vue

@@ -16,7 +16,7 @@ import { toCurrency } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { toDate } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
-import travelService from 'src/services/travel.service';
+import axios from 'axios';
 
 const router = useRouter();
 const stateStore = useStateStore();
@@ -222,9 +222,13 @@ const openReportPdf = () => {
 };
 
 const saveFieldValue = async (val, field, index) => {
-    const id = rows.value[index].id;
+    try {
-    const params = { [field]: val };
+        const id = rows.value[index].id;
-    await travelService.updateTravel(id, params);
+        const params = { [field]: val };
+        await axios.patch(`Travels/${id}`, params);
+    } catch (err) {
+        console.error('Error updating travel');
+    }
 };
 
 const navigateToTravelId = (id) => {

src/pages/Travel/TravelCreate.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { reactive, ref, onBeforeMount } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@@ -9,10 +9,11 @@ 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 { toDate } from 'src/filters';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 
 const newTravelForm = reactive({
     ref: null,
@@ -43,6 +44,10 @@ onBeforeMount(() => {
         }
     }
 });
+
+const redirectToTravelBasicData = (_, { id }) => {
+    router.push({ name: 'TravelBasicData', params: { id } });
+};
 </script>
 
 <template>
@@ -63,6 +68,7 @@ onBeforeMount(() => {
             model="travel"
             :form-initial-data="newTravelForm"
             :observe-form-changes="viewAction === 'create'"
+            @on-data-saved="redirectToTravelBasicData"
         >
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
@@ -82,62 +88,13 @@ onBeforeMount(() => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput
+                        <VnInputDate
-                            rounded
+                            v-model="data.shipped"
-                            placeholder="dd-mm-aaa"
                             :label="t('globals.shipped')"
-                            :model-value="toDate(data.shipped)"
+                        />
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="data.shipped">
-                                            <div class="row items-center justify-end">
-                                                <QBtn
-                                                    v-close-popup
-                                                    :label="t('globals.close')"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
                     </div>
                     <div class="col">
-                        <QInput
+                        <VnInputDate :label="t('globals.landed')" v-model="data.landed" />
-                            rounded
-                            placeholder="dd-mm-aaa"
-                            :label="t('globals.landed')"
-                            :model-value="toDate(data.landed)"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="data.landed">
-                                            <div class="row items-center justify-end">
-                                                <QBtn
-                                                    v-close-popup
-                                                    :label="t('globals.close')"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">

src/pages/Travel/TravelList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -9,6 +9,7 @@ import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
 import TravelFilter from './TravelFilter.vue';
+import FetchData from 'components/FetchData.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
@@ -18,6 +19,8 @@ const quasar = useQuasar();
 const { t } = useI18n();
 const stateStore = useStateStore();
 
+const warehouses = ref([]);
+
 const navigateToTravelId = (id) => {
     router.push({ path: `/travel/${id}` });
 };
@@ -35,6 +38,10 @@ const redirectCreateEntryView = (travelData) => {
     router.push({ name: 'EntryCreate', query: { travelFk: travelData.id } });
 };
 
+const getWarehouseName = (id) => {
+    return warehouses.value.find((warehouse) => warehouse.id === id).name;
+};
+
 const viewSummary = (id) => {
     quasar.dialog({
         component: TravelSummaryDialog,
@@ -50,6 +57,13 @@ onMounted(async () => {
 </script>
 
 <template>
+    <FetchData
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'] }"
+        order="name"
+        @on-fetch="(data) => (warehouses = data)"
+        auto-load
+    />
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <TravelFilter data-key="TravelList" />
@@ -77,8 +91,9 @@ onMounted(async () => {
                                 :value="row.agencyModeName"
                             />
                             <VnLv
+                                v-if="warehouses.length > 0"
                                 :label="t('globals.wareHouseOut')"
-                                :value="row.warehouseOutFk"
+                                :value="getWarehouseName(row.warehouseOutFk)"
                             />
                             <VnLv
                                 :label="t('globals.shipped')"
@@ -89,10 +104,10 @@ onMounted(async () => {
                                 :value="toDate(row.landed)"
                             />
                             <VnLv
+                                v-if="warehouses.length > 0"
                                 :label="t('globals.wareHouseIn')"
-                                :value="row.warehouseInFk"
+                                :value="getWarehouseName(row.warehouseInFk)"
                             />
-
                             <VnLv
                                 :label="t('globals.totalEntries')"
                                 :value="row.totalEntries"
@@ -143,9 +158,6 @@ onMounted(async () => {
 en:
     addEntry: Add entry
 
-
 es:
     addEntry: Añadir entrada
-
-
 </i18n>

src/router/modules/travel.js

@@ -69,9 +69,8 @@ export default {
                     meta: {
                         title: 'basicData',
                         icon: 'vn:settings',
-                        // roles: [],
                     },
-                    // component: () => import(),
+                    component: () => import('src/pages/Travel/Card/TravelBasicData.vue'),
                 },
                 {
                     name: 'TravelHistory',
@@ -79,19 +78,45 @@ export default {
                     meta: {
                         title: 'history',
                         icon: 'history',
-                        // roles: [],
                     },
-                    // component: () => import(),
+                    component: () => import('src/pages/Travel/Card/TravelLog.vue'),
                 },
                 {
                     name: 'TravelThermographs',
-                    path: 'thermographs',
+                    path: 'thermographs/:thermographId?',
                     meta: {
                         title: 'thermographs',
                         icon: 'vn:thermometer',
-                        // roles: [],
                     },
-                    // component: () => import(),
+                    redirect: {
+                        name: 'TravelThermographsIndex',
+                    },
+                    children: [
+                        {
+                            name: 'TravelThermographsIndex',
+                            path: 'index',
+                            component: () =>
+                                import('src/pages/Travel/Card/TravelThermographs.vue'),
+                        },
+                        {
+                            name: 'TravelThermographsCreate',
+                            path: 'create',
+                            props: { viewAction: 'create' },
+                            component: () =>
+                                import(
+                                    'src/pages/Travel/Card/TravelThermographsForm.vue'
+                                ),
+                        },
+                        {
+                            name: 'TravelThermographsEdit',
+                            path: 'edit',
+                            props: { viewAction: 'edit' },
+                            component: () =>
+                                import(
+                                    'src/pages/Travel/Card/TravelThermographsForm.vue'
+                                ),
+                        },
+                    ],
                 },
             ],
         },

src/services/travel.service.js

@@ -1,23 +0,0 @@
-import axios from 'axios';
-
-const travelService = {
-    getTravelEntries: async (param) => {
-        try {
-            return await axios.get(`Travels/${param}/getEntries`);
-        } catch (err) {
-            console.error(`Error fetching travel entries`, err);
-            return err.response;
-        }
-    },
-
-    updateTravel: async (id, params) => {
-        try {
-            return await axios.patch(`Travels/${id}`, params);
-        } catch (err) {
-            console.error(`Error updating travel`, err);
-            return err.response;
-        }
-    },
-};
-
-export default travelService;