From 71e2cdebe4411664b46d1296beb72f01fb7cde71 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 18 Jan 2024 11:19:23 -0300
Subject: [PATCH 01/16] WIP

---
 src/i18n/en/index.js                        |  12 ++-
 src/i18n/es/index.js                        |  10 ++
 src/pages/Travel/Card/TravelBasicData.vue   | 104 ++++++++++++++++++++
 src/pages/Travel/Card/TravelLog.vue         |   6 ++
 src/pages/Travel/Card/TravelTermographs.vue |   1 +
 src/router/modules/travel.js                |  10 +-
 6 files changed, 136 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/Travel/Card/TravelBasicData.vue
 create mode 100644 src/pages/Travel/Card/TravelLog.vue
 create mode 100644 src/pages/Travel/Card/TravelTermographs.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 152c5e644..99d1b532c 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -1077,7 +1077,7 @@ export default {
             extraCommunity: 'Extra community',
             travelCreate: 'New travel',
             basicData: 'Basic data',
-            history: 'History',
+            history: 'Log',
             thermographs: 'Termographs',
         },
         summary: {
@@ -1102,6 +1102,16 @@ 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',
+        },
     },
     item: {
         pageTitles: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index d0c2731a9..b96fe3a6b 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -1102,6 +1102,16 @@ 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',
+        },
     },
     item: {
         pageTitles: {
diff --git a/src/pages/Travel/Card/TravelBasicData.vue b/src/pages/Travel/Card/TravelBasicData.vue
new file mode 100644
index 000000000..2edaac853
--- /dev/null
+++ b/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>
diff --git a/src/pages/Travel/Card/TravelLog.vue b/src/pages/Travel/Card/TravelLog.vue
new file mode 100644
index 000000000..1a2667ff7
--- /dev/null
+++ b/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>
diff --git a/src/pages/Travel/Card/TravelTermographs.vue b/src/pages/Travel/Card/TravelTermographs.vue
new file mode 100644
index 000000000..c86c49242
--- /dev/null
+++ b/src/pages/Travel/Card/TravelTermographs.vue
@@ -0,0 +1 @@
+<template>Travel termographs</template>
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index 43c444ae2..f9b2153da 100644
--- a/src/router/modules/travel.js
+++ b/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,9 +78,8 @@ export default {
                     meta: {
                         title: 'history',
                         icon: 'history',
-                        // roles: [],
                     },
-                    // component: () => import(),
+                    component: () => import('src/pages/Travel/Card/TravelLog.vue'),
                 },
                 {
                     name: 'TravelThermographs',
@@ -89,9 +87,9 @@ export default {
                     meta: {
                         title: 'thermographs',
                         icon: 'vn:thermometer',
-                        // roles: [],
                     },
-                    // component: () => import(),
+                    component: () =>
+                        import('src/pages/Travel/Card/TravelTermographs.vue'),
                 },
             ],
         },

From c9bd3d413a069a306b46374f6cf0c2d888966ed1 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 19 Jan 2024 09:24:57 -0300
Subject: [PATCH 02/16] Travel termographs WIP

---
 src/i18n/en/index.js                        |   7 +
 src/i18n/es/index.js                        |   7 +
 src/pages/Travel/Card/TravelTermographs.vue | 134 +++++++++++++++++++-
 3 files changed, 147 insertions(+), 1 deletion(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 99d1b532c..aa1a4946d 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -1112,6 +1112,13 @@ export default {
             delivered: 'Delivered',
             received: 'Received',
         },
+        termographs: {
+            code: 'Code',
+            temperature: 'Temperature',
+            state: 'State',
+            destination: 'Destination',
+            created: 'Created',
+        },
     },
     item: {
         pageTitles: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index b96fe3a6b..4ff78e6e1 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -1112,6 +1112,13 @@ export default {
             delivered: 'Enviada',
             received: 'Recibida',
         },
+        termographs: {
+            code: 'Código',
+            temperature: 'Temperatura',
+            state: 'Estado',
+            destination: 'Destino',
+            created: 'Fecha creación',
+        },
     },
     item: {
         pageTitles: {
diff --git a/src/pages/Travel/Card/TravelTermographs.vue b/src/pages/Travel/Card/TravelTermographs.vue
index c86c49242..0d43843e7 100644
--- a/src/pages/Travel/Card/TravelTermographs.vue
+++ b/src/pages/Travel/Card/TravelTermographs.vue
@@ -1 +1,133 @@
-<template>Travel termographs</template>
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+
+import axios from 'axios';
+// import useNotify from 'src/composables/useNotify.js';
+import { toDate } from 'src/filters';
+
+const route = useRoute();
+// const router = useRouter();
+const { t } = useI18n();
+// const { notify } = useNotify();
+
+const termographFilter = {
+    include: {
+        relation: 'warehouse',
+        scope: {
+            fields: ['id', 'name'],
+        },
+    },
+};
+
+const TableColumns = computed(() => {
+    return [
+        {
+            label: t('travel.termographs.code'),
+            field: 'thermographFk',
+            name: 'thermographFk',
+            align: 'left',
+        },
+        {
+            label: t('travel.termographs.temperature'),
+            field: 'temperatureFk',
+            name: 'temperatureFk',
+            align: 'left',
+        },
+        {
+            label: t('travel.termographs.state'),
+            field: 'result',
+            name: 'result',
+            align: 'left',
+        },
+        {
+            label: t('travel.termographs.destination'),
+            // field: (row) => row.warehouse.name,
+            field: 'warehouseFk',
+            name: 'destination',
+            align: 'left',
+        },
+        {
+            label: t('travel.termographs.created'),
+            field: 'created',
+            name: 'created',
+            align: 'left',
+            format: (val) => toDate(val),
+        },
+    ];
+});
+
+const saveChange = async (rowData) => {
+    await axios.patch(`Buys/${rowData.id}`, rowData);
+};
+
+const openRemoveDialog = async () => {
+    // quasar
+    //     .dialog({
+    //         component: VnConfirm,
+    //         componentProps: {
+    //             title: t('Confirm deletion'),
+    //             message:
+    //                 rowsSelected.value.length > 1
+    //                     ? t('Are you sure you want to delete this buys?')
+    //                     : t('Are you sure you want to delete this buy?'),
+    //             data: rowsSelected.value,
+    //         },
+    //     })
+    //     .onOk(async () => {
+    //         try {
+    //             await deleteBuys();
+    //             const notifyMessage =
+    //                 rowsSelected.value.length > 1 ? t('Buys deleted') : t('Buy deleted');
+    //             notify(notifyMessage, 'positive');
+    //         } catch (err) {
+    //             console.error('Error deleting buys');
+    //         }
+    //     });
+};
+
+const deleteTermograph = async () => {
+    // await axios.post('Buys/deleteBuys', { buys: rowsSelected.value });
+    // entryBuysPaginateRef.value.fetch();
+};
+
+const redirectToCreateView = () => {
+    // router.push({ name: 'EntryBuysImport' });
+};
+</script>
+
+<template>
+    <VnPaginate
+        data-key="TravelTermograph"
+        url="TravelThermographs"
+        :filter="termographFilter"
+        :params="{ travelFk: route.params.id }"
+        auto-load
+    >
+        <template #body="{ rows }">
+            <QTable
+                :rows="rows"
+                :columns="TableColumns"
+                row-key="id"
+                hide-bottom
+                class="full-width q-mt-md"
+            >
+            </QTable>
+        </template>
+    </VnPaginate>
+    <QPageSticky :offset="[20, 20]">
+        <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+        <QTooltip>
+            {{ t('Add termograph') }}
+        </QTooltip>
+    </QPageSticky>
+</template>
+
+<i18n>
+es:
+    Add termograph: Añadir termógrafo
+
+</i18n>

From 7b542dc3bb9ba7e36cf607c5961d9407f31a23da Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 22 Jan 2024 11:22:22 -0300
Subject: [PATCH 03/16] WIP

---
 src/composables/useState.js                   |   1 +
 src/i18n/en/index.js                          |  11 +-
 src/i18n/es/index.js                          |   9 +-
 src/pages/Travel/Card/TravelCard.vue          |   1 -
 src/pages/Travel/Card/TravelTermographs.vue   | 133 ---------
 src/pages/Travel/Card/TravelThermographs.vue  | 188 ++++++++++++
 .../Travel/Card/TravelThermographsForm.vue    | 271 ++++++++++++++++++
 src/router/modules/travel.js                  |  31 +-
 8 files changed, 506 insertions(+), 139 deletions(-)
 delete mode 100644 src/pages/Travel/Card/TravelTermographs.vue
 create mode 100644 src/pages/Travel/Card/TravelThermographs.vue
 create mode 100644 src/pages/Travel/Card/TravelThermographsForm.vue

diff --git a/src/composables/useState.js b/src/composables/useState.js
index 6ad8eb22c..e0b742a73 100644
--- a/src/composables/useState.js
+++ b/src/composables/useState.js
@@ -9,6 +9,7 @@ const user = ref({
     lang: '',
     darkMode: null,
     companyFk: null,
+    warehouseFk: null,
 });
 
 const roles = ref([]);
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index aa1a4946d..424976df4 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -1078,7 +1078,7 @@ export default {
             travelCreate: 'New travel',
             basicData: 'Basic data',
             history: 'Log',
-            thermographs: 'Termographs',
+            thermographs: 'Thermograph',
         },
         summary: {
             confirmed: 'Confirmed',
@@ -1112,12 +1112,19 @@ export default {
             delivered: 'Delivered',
             received: 'Received',
         },
-        termographs: {
+        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',
         },
     },
     item: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 4ff78e6e1..f726dbd4e 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -1112,12 +1112,19 @@ export default {
             delivered: 'Enviada',
             received: 'Recibida',
         },
-        termographs: {
+        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',
         },
     },
     item: {
diff --git a/src/pages/Travel/Card/TravelCard.vue b/src/pages/Travel/Card/TravelCard.vue
index 34ecc25ee..1b185592b 100644
--- a/src/pages/Travel/Card/TravelCard.vue
+++ b/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>
diff --git a/src/pages/Travel/Card/TravelTermographs.vue b/src/pages/Travel/Card/TravelTermographs.vue
deleted file mode 100644
index 0d43843e7..000000000
--- a/src/pages/Travel/Card/TravelTermographs.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-
-import axios from 'axios';
-// import useNotify from 'src/composables/useNotify.js';
-import { toDate } from 'src/filters';
-
-const route = useRoute();
-// const router = useRouter();
-const { t } = useI18n();
-// const { notify } = useNotify();
-
-const termographFilter = {
-    include: {
-        relation: 'warehouse',
-        scope: {
-            fields: ['id', 'name'],
-        },
-    },
-};
-
-const TableColumns = computed(() => {
-    return [
-        {
-            label: t('travel.termographs.code'),
-            field: 'thermographFk',
-            name: 'thermographFk',
-            align: 'left',
-        },
-        {
-            label: t('travel.termographs.temperature'),
-            field: 'temperatureFk',
-            name: 'temperatureFk',
-            align: 'left',
-        },
-        {
-            label: t('travel.termographs.state'),
-            field: 'result',
-            name: 'result',
-            align: 'left',
-        },
-        {
-            label: t('travel.termographs.destination'),
-            // field: (row) => row.warehouse.name,
-            field: 'warehouseFk',
-            name: 'destination',
-            align: 'left',
-        },
-        {
-            label: t('travel.termographs.created'),
-            field: 'created',
-            name: 'created',
-            align: 'left',
-            format: (val) => toDate(val),
-        },
-    ];
-});
-
-const saveChange = async (rowData) => {
-    await axios.patch(`Buys/${rowData.id}`, rowData);
-};
-
-const openRemoveDialog = async () => {
-    // quasar
-    //     .dialog({
-    //         component: VnConfirm,
-    //         componentProps: {
-    //             title: t('Confirm deletion'),
-    //             message:
-    //                 rowsSelected.value.length > 1
-    //                     ? t('Are you sure you want to delete this buys?')
-    //                     : t('Are you sure you want to delete this buy?'),
-    //             data: rowsSelected.value,
-    //         },
-    //     })
-    //     .onOk(async () => {
-    //         try {
-    //             await deleteBuys();
-    //             const notifyMessage =
-    //                 rowsSelected.value.length > 1 ? t('Buys deleted') : t('Buy deleted');
-    //             notify(notifyMessage, 'positive');
-    //         } catch (err) {
-    //             console.error('Error deleting buys');
-    //         }
-    //     });
-};
-
-const deleteTermograph = async () => {
-    // await axios.post('Buys/deleteBuys', { buys: rowsSelected.value });
-    // entryBuysPaginateRef.value.fetch();
-};
-
-const redirectToCreateView = () => {
-    // router.push({ name: 'EntryBuysImport' });
-};
-</script>
-
-<template>
-    <VnPaginate
-        data-key="TravelTermograph"
-        url="TravelThermographs"
-        :filter="termographFilter"
-        :params="{ travelFk: route.params.id }"
-        auto-load
-    >
-        <template #body="{ rows }">
-            <QTable
-                :rows="rows"
-                :columns="TableColumns"
-                row-key="id"
-                hide-bottom
-                class="full-width q-mt-md"
-            >
-            </QTable>
-        </template>
-    </VnPaginate>
-    <QPageSticky :offset="[20, 20]">
-        <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
-        <QTooltip>
-            {{ t('Add termograph') }}
-        </QTooltip>
-    </QPageSticky>
-</template>
-
-<i18n>
-es:
-    Add termograph: Añadir termógrafo
-
-</i18n>
diff --git a/src/pages/Travel/Card/TravelThermographs.vue b/src/pages/Travel/Card/TravelThermographs.vue
new file mode 100644
index 000000000..33160f2b5
--- /dev/null
+++ b/src/pages/Travel/Card/TravelThermographs.vue
@@ -0,0 +1,188 @@
+<script setup>
+import { computed } 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 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 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',
+        },
+        {
+            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) => {
+    router.push({
+        name: action === 'create' ? 'TravelThermographsCreate' : 'TravelThermographsEdit',
+    });
+};
+
+const removeThermograph = async (id) => {
+    await axios.delete('Travels/deleteThermograph', { id });
+};
+</script>
+
+<template>
+    <VnPaginate
+        data-key="TravelThermographs"
+        url="TravelThermographs"
+        :filter="thermographFilter"
+        :params="{ travelFk: route.params.id }"
+        auto-load
+    >
+        <template #body="{ rows }">
+            <QTable
+                :rows="rows"
+                :columns="TableColumns"
+                row-key="id"
+                hide-bottom
+                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>
+                    <QTd auto-width>
+                        <QIcon
+                            name="edit"
+                            color="primary"
+                            size="sm"
+                            class="cursor-pointer"
+                            @click="redirectToThermographForm('edit')"
+                        >
+                            <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?
+</i18n>
diff --git a/src/pages/Travel/Card/TravelThermographsForm.vue b/src/pages/Travel/Card/TravelThermographsForm.vue
new file mode 100644
index 000000000..da0a4ee2b
--- /dev/null
+++ b/src/pages/Travel/Card/TravelThermographsForm.vue
@@ -0,0 +1,271 @@
+<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(() => {
+    getAllowedFileTypes();
+
+    if (props.viewAction === 'create') {
+        setCreateDefaultParams();
+    }
+
+    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 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 = () => {
+    // `travels/${route.params.id}/updateThermograph`;
+};
+</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"
+                        />
+                    </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 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>
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index f9b2153da..5d9884dc2 100644
--- a/src/router/modules/travel.js
+++ b/src/router/modules/travel.js
@@ -88,8 +88,35 @@ export default {
                         title: 'thermographs',
                         icon: 'vn:thermometer',
                     },
-                    component: () =>
-                        import('src/pages/Travel/Card/TravelTermographs.vue'),
+                    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'
+                                ),
+                        },
+                    ],
                 },
             ],
         },

From 2459e32f00469c8dbc68ca945a6bf0c1f0882ddb Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sat, 27 Jan 2024 10:49:49 -0300
Subject: [PATCH 04/16] In TravelList show warehouses name instead warehouseFk

---
 src/pages/Travel/TravelList.vue | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index dbbdaca93..2ce6349a6 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/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"
@@ -136,9 +151,6 @@ onMounted(async () => {
 en:
     addEntry: Add entry
 
-
 es:
     addEntry: Añadir entrada
-
-
 </i18n>

From a84f665bc671409be25bf8241aae7f23ff4056ac Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sat, 27 Jan 2024 13:14:02 -0300
Subject: [PATCH 05/16] TravelSummary improvements

---
 src/pages/Travel/Card/TravelSummary.vue | 107 ++++++------------------
 src/pages/Travel/TravelCreate.vue       |   8 +-
 2 files changed, 33 insertions(+), 82 deletions(-)

diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 4f0e8860a..ccef57b0e 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -6,6 +6,7 @@ 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 travelService from 'src/services/travel.service';
 import { toDate, toCurrency } from 'src/filters';
@@ -55,60 +56,6 @@ const headerMenuOptions = [
     { 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 [
         {
@@ -182,8 +129,6 @@ async function setTravelData(data) {
 const redirectToCreateView = (queryParams) => {
     router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
 };
-
-const openEntryDescriptor = () => {};
 </script>
 
 <template>
@@ -269,31 +214,31 @@ const openEntryDescriptor = () => {};
                     row-key="id"
                     class="full-width q-mt-md"
                 >
-                    <template #body-cell="props">
-                        <QTd :props="props">
-                            <component
-                                :is="
-                                    tableColumnComponents[props.col.name].component(props)
-                                "
-                                v-bind="
-                                    tableColumnComponents[props.col.name].props(props)
-                                "
-                                @click="
-                                    tableColumnComponents[props.col.name].event(props)
-                                "
-                                class="col-content"
-                            >
-                                <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>
+                    <template #body-cell-isConfirmed="{ row }">
+                        <QTd auto-width>
+                            <QIcon
+                                :name="row.isConfirmed ? 'check' : 'close'"
+                                :color="row.isConfirmed ? 'positive' : 'negative'"
+                                size="sm"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-id="{ row }">
+                        <QTd auto-width>
+                            <QBtn flat color="blue">
+                                {{ row.id }}
+                                <EntryDescriptorProxy :id="row.id" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-observation="{ row }">
+                        <QTd auto-width>
+                            <QIcon
+                                v-if="row.observation"
+                                name="insert_drive_file"
+                                color="primary"
+                                size="sm"
+                            />
                         </QTd>
                     </template>
                 </QTable>
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index c8ac7e690..2a85a5894 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/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';
@@ -13,6 +13,7 @@ import { toDate } from 'src/filters';
 
 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">

From 0ff70a378d57ddd81cbb0c604cad044a8b1d96b0 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sat, 27 Jan 2024 16:08:02 -0300
Subject: [PATCH 06/16] Travel termographs and general improvements

---
 src/i18n/en/index.js                          |  1 +
 src/i18n/es/index.js                          |  1 +
 src/pages/Travel/Card/TravelSummary.vue       | 18 +++---
 src/pages/Travel/Card/TravelThermographs.vue  | 31 ++++++++--
 .../Travel/Card/TravelThermographsForm.vue    | 62 +++++++++++++++++--
 src/pages/Travel/TravelCreate.vue             | 59 ++----------------
 src/router/modules/travel.js                  |  2 +-
 7 files changed, 99 insertions(+), 75 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 424976df4..6a075378e 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -1125,6 +1125,7 @@ export default {
             warehouse: 'Warehouse',
             travelFileDescription: 'Travel id { travelId }',
             file: 'File',
+            description: 'Description',
         },
     },
     item: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index f726dbd4e..b3169d0a9 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -1125,6 +1125,7 @@ export default {
             warehouse: 'Almacén',
             travelFileDescription: 'Id envío { travelId }',
             file: 'Fichero',
+            description: 'Descripción',
         },
     },
     item: {
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index ccef57b0e..b2380fe6b 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -170,11 +170,10 @@ const redirectToCreateView = (queryParams) => {
                 />
                 <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
                     <template #value>
-                        <QCheckbox
-                            v-model="travel.isDelivered"
-                            disable
-                            dense
-                            class="full-width q-my-xs"
+                        <QIcon
+                            :name="travel.isDelivered ? 'check' : 'close'"
+                            :color="travel.isDelivered ? 'positive' : 'negative'"
+                            size="sm"
                         />
                     </template>
                 </VnLv>
@@ -187,11 +186,10 @@ const redirectToCreateView = (queryParams) => {
                 />
                 <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
                     <template #value>
-                        <QCheckbox
-                            v-model="travel.isReceived"
-                            disable
-                            dense
-                            class="full-width q-mb-xs"
+                        <QIcon
+                            :name="travel.isReceived ? 'check' : 'close'"
+                            :color="travel.isReceived ? 'positive' : 'negative'"
+                            size="sm"
                         />
                     </template>
                 </VnLv>
diff --git a/src/pages/Travel/Card/TravelThermographs.vue b/src/pages/Travel/Card/TravelThermographs.vue
index 33160f2b5..f4fa23100 100644
--- a/src/pages/Travel/Card/TravelThermographs.vue
+++ b/src/pages/Travel/Card/TravelThermographs.vue
@@ -1,11 +1,12 @@
 <script setup>
-import { computed } from 'vue';
+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';
@@ -18,6 +19,8 @@ const router = useRouter();
 const { t } = useI18n();
 const { notify } = useNotify();
 
+const warehouses = ref([]);
+
 const thermographFilter = {
     include: {
         relation: 'warehouse',
@@ -54,6 +57,8 @@ const TableColumns = computed(() => {
             field: 'warehouseFk',
             name: 'destination',
             align: 'left',
+            format: (val) =>
+                warehouses.value.find((warehouse) => warehouse.id === val).name,
         },
         {
             label: t('travel.thermographs.created'),
@@ -95,10 +100,17 @@ const openRemoveDialog = async (id) => {
         });
 };
 
-const redirectToThermographForm = (action) => {
-    router.push({
+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) => {
@@ -107,6 +119,13 @@ const removeThermograph = async (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"
@@ -135,14 +154,14 @@ const removeThermograph = async (id) => {
                         </QIcon>
                     </QTd>
                 </template>
-                <template #body-cell-editFile>
+                <template #body-cell-editFile="{ row }">
                     <QTd auto-width>
                         <QIcon
                             name="edit"
                             color="primary"
                             size="sm"
                             class="cursor-pointer"
-                            @click="redirectToThermographForm('edit')"
+                            @click="redirectToThermographForm('edit', row)"
                         >
                             <QTooltip>{{ t('Edit file') }}</QTooltip>
                         </QIcon>
diff --git a/src/pages/Travel/Card/TravelThermographsForm.vue b/src/pages/Travel/Card/TravelThermographsForm.vue
index da0a4ee2b..ea407ec69 100644
--- a/src/pages/Travel/Card/TravelThermographsForm.vue
+++ b/src/pages/Travel/Card/TravelThermographsForm.vue
@@ -52,11 +52,13 @@ const thermographForm = reactive({
     description: null,
 });
 
-onBeforeMount(() => {
-    getAllowedFileTypes();
+onBeforeMount(async () => {
+    await getAllowedFileTypes();
 
     if (props.viewAction === 'create') {
         setCreateDefaultParams();
+    } else {
+        await setEditDefaultParams();
     }
 
     if (route.query.thermographData) {
@@ -103,6 +105,30 @@ const setCreateDefaultParams = async () => {
     }).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();
 };
@@ -128,8 +154,25 @@ const createThermograph = async () => {
     }
 };
 
-const updateThermograph = () => {
-    // `travels/${route.params.id}/updateThermograph`;
+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>
 
@@ -197,6 +240,7 @@ const updateThermograph = () => {
                             :options="thermographsOptions"
                             option-value="thermographFk"
                             option-label="thermographFk"
+                            :disable="viewAction === 'edit'"
                         />
                     </div>
                     <div class="col">
@@ -243,6 +287,16 @@ const updateThermograph = () => {
                         />
                     </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
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index 2a85a5894..8afacdfd6 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -9,7 +9,7 @@ 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();
@@ -88,62 +88,13 @@ const redirectToTravelBasicData = (_, { id }) => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput
-                            rounded
-                            placeholder="dd-mm-aaa"
+                        <VnInputDate
+                            v-model="data.shipped"
                             :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
-                            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>
+                        <VnInputDate :label="t('globals.landed')" v-model="data.landed" />
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index 5d9884dc2..c34ebe757 100644
--- a/src/router/modules/travel.js
+++ b/src/router/modules/travel.js
@@ -83,7 +83,7 @@ export default {
                 },
                 {
                     name: 'TravelThermographs',
-                    path: 'thermographs',
+                    path: 'thermographs/:thermographId?',
                     meta: {
                         title: 'thermographs',
                         icon: 'vn:thermometer',

From 344ad0281f19638184a628ad6b575f4b5f288d90 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 29 Jan 2024 10:57:43 -0300
Subject: [PATCH 07/16] Improvements WIP

---
 src/pages/Travel/Card/TravelDescriptor.vue   | 20 ++++++-
 src/pages/Travel/Card/TravelSummary.vue      | 59 ++++++++++++++++++--
 src/pages/Travel/Card/TravelThermographs.vue |  4 +-
 3 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/src/pages/Travel/Card/TravelDescriptor.vue b/src/pages/Travel/Card/TravelDescriptor.vue
index 6a45710ad..c696d9577 100644
--- a/src/pages/Travel/Card/TravelDescriptor.vue
+++ b/src/pages/Travel/Card/TravelDescriptor.vue
@@ -66,6 +66,22 @@ 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 #body="{ entity }">
             <VnLv :label="t('globals.wareHouseIn')" :value="entity.warehouseIn.name" />
             <VnLv :label="t('globals.wareHouseOut')" :value="entity.warehouseOut.name" />
@@ -75,6 +91,8 @@ const setData = (entity) => {
         </template>
     </CardDescriptor>
 </template>
-<i18n>
 
+<i18n>
+es:
+    Go to module index: Ir al índice del módulo
 </i18n>
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index b2380fe6b..d809f9142 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -62,25 +62,29 @@ const entriesTableColumns = computed(() => {
             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'),
@@ -90,6 +94,7 @@ const entriesTableColumns = computed(() => {
             format: (val) => {
                 return toCurrency(val);
             },
+            showValue: true,
         },
         {
             label: t('travel.summary.package'),
@@ -99,16 +104,24 @@ const entriesTableColumns = computed(() => {
             format: (val) => {
                 return toCurrency(val);
             },
+            showValue: true,
         },
-        { label: 'CC', field: 'cc', name: 'cc', align: 'left' },
-        { label: 'Pallet', field: 'pallet', name: 'pallet', align: 'left' },
-        { label: 'm³', field: 'm3', name: 'm3', align: 'left' },
+        { label: 'CC', field: 'cc', name: 'cc', align: 'left', showValue: true },
+        {
+            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,
         },
     ];
 });
@@ -212,7 +225,7 @@ const redirectToCreateView = (queryParams) => {
                     row-key="id"
                     class="full-width q-mt-md"
                 >
-                    <template #body-cell-isConfirmed="{ row }">
+                    <!-- <template #body-cell-isConfirmed="{ row }">
                         <QTd auto-width>
                             <QIcon
                                 :name="row.isConfirmed ? 'check' : 'close'"
@@ -238,6 +251,40 @@ const redirectToCreateView = (queryParams) => {
                                 size="sm"
                             />
                         </QTd>
+                    </template> -->
+                    <!-- <template #body="props">
+                        <QTr :props="props" :key="`m_${props.row.index}`">
+                            <QTd v-for="col in props.cols" :key="col.name" :props="props">
+                                <template v-if="col.showValue">{{ col.value }}</template>
+                            </QTd>
+                        </QTr>
+                        <QTr
+                            :props="props"
+                            :key="`e_${props.row.index}`"
+                            class="q-virtual-scroll--with-prev"
+                        >
+                            <QTd colspan="100%">
+                                <div class="text-left">
+                                    This is the second row generated from the same data:
+                                </div>
+                            </QTd>
+                        </QTr>
+                    </template> -->
+                    <template #body-cell="props">
+                        <QTd :props="props">
+                            <QTr :props="props" :key="`m_${props.row.index}`">
+                                <template v-if="props.col.showValue">
+                                    {{ props.value }}
+                                </template>
+                            </QTr>
+                        </QTd>
+                        <QTd :props="props">
+                            <QTr :props="props" :key="`m_${props.row.index}`">
+                                <template v-if="props.col.showValue">
+                                    {{ props.value }}
+                                </template>
+                            </QTr>
+                        </QTd>
                     </template>
                 </QTable>
             </QCard>
diff --git a/src/pages/Travel/Card/TravelThermographs.vue b/src/pages/Travel/Card/TravelThermographs.vue
index f4fa23100..a8374086b 100644
--- a/src/pages/Travel/Card/TravelThermographs.vue
+++ b/src/pages/Travel/Card/TravelThermographs.vue
@@ -137,8 +137,9 @@ const removeThermograph = async (id) => {
             <QTable
                 :rows="rows"
                 :columns="TableColumns"
+                :no-data-label="t('No results')"
+                :rows-per-page-options="[0]"
                 row-key="id"
-                hide-bottom
                 class="full-width q-mt-md"
             >
                 <template #body-cell-downloadFile="{ row }">
@@ -204,4 +205,5 @@ es:
     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>

From 087d22e77d65a05e32138be426df485303a32bfd Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 29 Jan 2024 16:33:39 -0300
Subject: [PATCH 08/16] Mejoras y cosas faltantes

---
 src/i18n/en/index.js                          |   2 +
 src/i18n/es/index.js                          |   2 +
 src/pages/Travel/Card/TravelDescriptor.vue    |  31 +-
 .../Travel/Card/TravelDescriptorMenuItems.vue | 108 +++++++
 src/pages/Travel/Card/TravelSummary.vue       | 268 +++++++++++-------
 src/pages/Travel/ExtraCommunity.vue           |  12 +-
 src/services/travel.service.js                |  23 --
 7 files changed, 323 insertions(+), 123 deletions(-)
 create mode 100644 src/pages/Travel/Card/TravelDescriptorMenuItems.vue
 delete mode 100644 src/services/travel.service.js

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 6a075378e..814bf0c22 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -1090,7 +1090,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',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index b3169d0a9..6b5b3ad7c 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -1090,7 +1090,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',
diff --git a/src/pages/Travel/Card/TravelDescriptor.vue b/src/pages/Travel/Card/TravelDescriptor.vue
index c696d9577..c7501b1d4 100644
--- a/src/pages/Travel/Card/TravelDescriptor.vue
+++ b/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: [
         {
@@ -82,6 +86,9 @@ const setData = (entity) => {
                 </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" />
@@ -89,10 +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>
 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>
diff --git a/src/pages/Travel/Card/TravelDescriptorMenuItems.vue b/src/pages/Travel/Card/TravelDescriptorMenuItems.vue
new file mode 100644
index 000000000..17b9333ca
--- /dev/null
+++ b/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>
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index d809f9142..3b025096f 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -1,23 +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,
@@ -26,36 +23,21 @@ 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 entriesTableColumns = computed(() => {
     return [
         {
@@ -126,25 +108,122 @@ const entriesTableColumns = computed(() => {
     ];
 });
 
+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),
+        },
+    ];
+});
+
 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 entriesTotalHb = computed(() => {
+    return entriesTableRows.value.reduce((acc, { hb }) => acc + hb, 0);
+});
+
+const entriesTotalFreight = computed(() => {
+    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 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);
     }
 }
-
-const redirectToCreateView = (queryParams) => {
-    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
-};
 </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`"
@@ -165,10 +244,8 @@ const redirectToCreateView = (queryParams) => {
                     {{ 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>
+                        <TravelDescriptorMenuItems :travel="travel" />
                     </QList>
                 </QMenu>
             </QBtn>
@@ -214,10 +291,9 @@ const redirectToCreateView = (queryParams) => {
                 <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" />
-                </a>
+                </span>
                 <QTable
                     :rows="entriesTableRows"
                     :columns="entriesTableColumns"
@@ -225,69 +301,71 @@ const redirectToCreateView = (queryParams) => {
                     row-key="id"
                     class="full-width q-mt-md"
                 >
-                    <!-- <template #body-cell-isConfirmed="{ row }">
-                        <QTd auto-width>
+                    <template #header="props">
+                        <QTr :props="props" class="bg">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                    <template #body-cell-isConfirmed="{ col, value }">
+                        <QTd>
                             <QIcon
-                                :name="row.isConfirmed ? 'check' : 'close'"
-                                :color="row.isConfirmed ? 'positive' : 'negative'"
+                                v-if="col.name === 'isConfirmed'"
+                                :name="value ? 'check' : 'close'"
+                                :color="value ? 'positive' : 'negative'"
                                 size="sm"
                             />
                         </QTd>
                     </template>
-                    <template #body-cell-id="{ row }">
-                        <QTd auto-width>
-                            <QBtn flat color="blue">
-                                {{ row.id }}
-                                <EntryDescriptorProxy :id="row.id" />
+                    <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="{ row }">
-                        <QTd auto-width>
-                            <QIcon
-                                v-if="row.observation"
-                                name="insert_drive_file"
-                                color="primary"
-                                size="sm"
-                            />
-                        </QTd>
-                    </template> -->
-                    <!-- <template #body="props">
-                        <QTr :props="props" :key="`m_${props.row.index}`">
-                            <QTd v-for="col in props.cols" :key="col.name" :props="props">
-                                <template v-if="col.showValue">{{ col.value }}</template>
-                            </QTd>
-                        </QTr>
-                        <QTr
-                            :props="props"
-                            :key="`e_${props.row.index}`"
-                            class="q-virtual-scroll--with-prev"
-                        >
-                            <QTd colspan="100%">
-                                <div class="text-left">
-                                    This is the second row generated from the same data:
-                                </div>
-                            </QTd>
-                        </QTr>
-                    </template> -->
-                    <template #body-cell="props">
-                        <QTd :props="props">
-                            <QTr :props="props" :key="`m_${props.row.index}`">
-                                <template v-if="props.col.showValue">
-                                    {{ props.value }}
-                                </template>
-                            </QTr>
-                        </QTd>
-                        <QTd :props="props">
-                            <QTr :props="props" :key="`m_${props.row.index}`">
-                                <template v-if="props.col.showValue">
-                                    {{ props.value }}
-                                </template>
-                            </QTr>
+                    <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>
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 2dcd4bb51..f08cc64cb 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -16,8 +16,8 @@ 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 VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import axios from 'axios';
 
 const router = useRouter();
 const stateStore = useStateStore();
@@ -223,9 +223,13 @@ const openReportPdf = () => {
 };
 
 const saveFieldValue = async (val, field, index) => {
-    const id = rows.value[index].id;
-    const params = { [field]: val };
-    await travelService.updateTravel(id, params);
+    try {
+        const id = rows.value[index].id;
+        const params = { [field]: val };
+        await axios.patch(`Travels/${id}`, params);
+    } catch (err) {
+        console.error('Error updating travel');
+    }
 };
 
 const navigateToTravelId = (id) => {
diff --git a/src/services/travel.service.js b/src/services/travel.service.js
deleted file mode 100644
index 469b8b237..000000000
--- a/src/services/travel.service.js
+++ /dev/null
@@ -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;

From 018f251f3db0591c0c6eb3b5133f51f5ac6f30da Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 6 Feb 2024 15:00:25 -0300
Subject: [PATCH 09/16] small improvements

---
 src/i18n/en/index.js                         |  1 +
 src/i18n/es/index.js                         |  1 +
 src/pages/Travel/Card/TravelSummary.vue      | 52 +++++++++++++-------
 src/pages/Travel/Card/TravelThermographs.vue | 11 ++++-
 4 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 814bf0c22..e15a144cc 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -1093,6 +1093,7 @@ export default {
             deleteTravel: 'Delete travel',
             AddEntry: 'Add entry',
             thermographs: 'Thermographs',
+            hb: 'HB',
         },
         variables: {
             search: 'Id/Reference',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 6b5b3ad7c..8a140c36f 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -1093,6 +1093,7 @@ export default {
             deleteTravel: 'Eliminar envío',
             AddEntry: 'Añadir entrada',
             thermographs: 'Termógrafos',
+            hb: 'HB',
         },
         variables: {
             search: 'Id/Referencia',
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 3b025096f..28f081a02 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -44,14 +44,14 @@ const entriesTableColumns = computed(() => {
             label: t('travel.summary.confirmed'),
             field: 'isConfirmed',
             name: 'isConfirmed',
-            align: 'center',
+            align: 'left',
             showValue: false,
         },
         {
             label: t('travel.summary.entryId'),
             field: 'id',
             name: 'id',
-            align: 'center',
+            align: 'left',
             showValue: false,
         },
         {
@@ -68,6 +68,13 @@ const entriesTableColumns = computed(() => {
             align: 'left',
             showValue: true,
         },
+        {
+            label: t('travel.summary.hb'),
+            field: 'hb',
+            name: 'hb',
+            align: 'left',
+            showValue: true,
+        },
         {
             label: t('travel.summary.freight'),
             field: 'freightValue',
@@ -151,27 +158,33 @@ const entriesTableRows = computed(() => {
     return entries.value;
 });
 
-const entriesTotalHb = computed(() => {
-    return entriesTableRows.value.reduce((acc, { hb }) => acc + hb, 0);
-});
+const entriesTotalHb = computed(() =>
+    entriesTableRows.value.reduce((acc, { hb }) => acc + hb, 0)
+);
 
-const entriesTotalFreight = computed(() => {
-    return toCurrency(
+const entriesTotalFreight = computed(() =>
+    toCurrency(
         entriesTableRows.value.reduce((acc, { freightValue }) => acc + freightValue, 0)
-    );
-});
+    )
+);
 
-const entriesTotalCc = computed(() => {
-    return entriesTableRows.value.reduce((acc, { cc }) => acc + cc, 0);
-});
+const entriesTotalPackageValue = computed(() =>
+    toCurrency(
+        entriesTableRows.value.reduce((acc, { packageValue }) => acc + packageValue, 0)
+    )
+);
 
-const entriesTotalPallet = computed(() => {
-    return entriesTableRows.value.reduce((acc, { pallet }) => acc + pallet, 0);
-});
+const entriesTotalCc = computed(() =>
+    entriesTableRows.value.reduce((acc, { cc }) => acc + cc, 0)
+);
 
-const entriesTotalM3 = computed(() => {
-    return entriesTableRows.value.reduce((acc, { m3 }) => acc + m3, 0);
-});
+const entriesTotalPallet = computed(() =>
+    entriesTableRows.value.reduce((acc, { pallet }) => acc + pallet, 0)
+);
+
+const entriesTotalM3 = computed(() =>
+    entriesTableRows.value.reduce((acc, { m3 }) => acc + m3, 0)
+);
 
 const getTravelEntries = async (id) => {
     try {
@@ -320,7 +333,7 @@ async function setTravelData(travelData) {
                     </template>
                     <template #body-cell-id="{ col, value }">
                         <QTd>
-                            <QBtn v-if="col.name === 'id'" flat color="blue" dense>
+                            <QBtn v-if="col.name === 'id'" flat color="blue">
                                 {{ value }}
                                 <EntryDescriptorProxy :id="value" />
                             </QBtn>
@@ -340,6 +353,7 @@ async function setTravelData(travelData) {
                         <QTd></QTd>
                         <QTd class="text-bold">{{ entriesTotalHb }}</QTd>
                         <QTd class="text-bold">{{ entriesTotalFreight }}</QTd>
+                        <QTd class="text-bold">{{ entriesTotalPackageValue }}</QTd>
                         <QTd class="text-bold">{{ entriesTotalCc }}</QTd>
                         <QTd class="text-bold">{{ entriesTotalPallet }}</QTd>
                         <QTd class="text-bold">{{ entriesTotalM3 }}</QTd>
diff --git a/src/pages/Travel/Card/TravelThermographs.vue b/src/pages/Travel/Card/TravelThermographs.vue
index a8374086b..226097e31 100644
--- a/src/pages/Travel/Card/TravelThermographs.vue
+++ b/src/pages/Travel/Card/TravelThermographs.vue
@@ -19,6 +19,7 @@ const router = useRouter();
 const { t } = useI18n();
 const { notify } = useNotify();
 
+const thermographPaginateRef = ref(null);
 const warehouses = ref([]);
 
 const thermographFilter = {
@@ -58,7 +59,7 @@ const TableColumns = computed(() => {
             name: 'destination',
             align: 'left',
             format: (val) =>
-                warehouses.value.find((warehouse) => warehouse.id === val).name,
+                warehouses.value.find((warehouse) => warehouse.id === val)?.name,
         },
         {
             label: t('travel.thermographs.created'),
@@ -114,7 +115,12 @@ const redirectToThermographForm = (action, { id = null }) => {
 };
 
 const removeThermograph = async (id) => {
-    await axios.delete('Travels/deleteThermograph', { id });
+    try {
+        await axios.delete(`Travels/deleteThermograph?id=${id}`);
+        await thermographPaginateRef.value.fetch();
+    } catch (err) {
+        console.error('Error removing termograph');
+    }
 };
 </script>
 
@@ -127,6 +133,7 @@ const removeThermograph = async (id) => {
         auto-load
     />
     <VnPaginate
+        ref="thermographPaginateRef"
         data-key="TravelThermographs"
         url="TravelThermographs"
         :filter="thermographFilter"

From f59c2409f19631aa6716fbd554d6f48e9ad62856 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 7 Feb 2024 15:01:51 -0300
Subject: [PATCH 10/16] travels corrections and improvements

---
 src/pages/Entry/EntryCreate.vue              |  8 +-
 src/pages/Travel/Card/TravelSummary.vue      |  2 +-
 src/pages/Travel/Card/TravelThermographs.vue |  2 +-
 src/pages/Travel/TravelCreate.vue            |  6 +-
 src/pages/Travel/TravelFilter.vue            | 85 ++++----------------
 src/pages/Travel/TravelList.vue              | 48 +++++++++--
 src/router/modules/travel.js                 |  1 -
 7 files changed, 61 insertions(+), 91 deletions(-)

diff --git a/src/pages/Entry/EntryCreate.vue b/src/pages/Entry/EntryCreate.vue
index d0a2f7df1..8c434217a 100644
--- a/src/pages/Entry/EntryCreate.vue
+++ b/src/pages/Entry/EntryCreate.vue
@@ -23,11 +23,11 @@ const stateStore = useStateStore();
 const user = state.getUser();
 const newEntryForm = reactive({
     supplierFk: null,
-    travelFk: route.query?.travelFk || null,
+    travelFk: Number(route.query?.travelFk) || null,
     companyFk: user.value.companyFk || null,
 });
 const suppliersOptions = ref([]);
-const travelsOptionsOptions = ref([]);
+const travelsOptions = ref([]);
 const companiesOptions = ref([]);
 
 const redirectToEntryBasicData = (_, { id }) => {
@@ -47,7 +47,7 @@ const redirectToEntryBasicData = (_, { id }) => {
         url="Travels/filter"
         :filter="{ fields: ['id', 'warehouseInName'] }"
         order="id"
-        @on-fetch="(data) => (travelsOptionsOptions = data)"
+        @on-fetch="(data) => (travelsOptions = data)"
         auto-load
     />
     <FetchData
@@ -110,7 +110,7 @@ const redirectToEntryBasicData = (_, { id }) => {
                             :label="t('Travel')"
                             class="full-width"
                             v-model="data.travelFk"
-                            :options="travelsOptionsOptions"
+                            :options="travelsOptions"
                             option-value="id"
                             option-label="warehouseInName"
                             map-options
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 28f081a02..cf9a9ada0 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -301,7 +301,7 @@ async function setTravelData(travelData) {
                 <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
                 <VnLv :label="t('globals.reference')" :value="travel.ref" />
                 <VnLv label="m³" :value="travel.m3" />
-                <VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
+                <VnLv :label="t('globals.totalEntries')" :value="travel.totalEntries" />
             </QCard>
             <QCard class="full-width" v-if="entriesTableRows.length > 0">
                 <span class="header">
diff --git a/src/pages/Travel/Card/TravelThermographs.vue b/src/pages/Travel/Card/TravelThermographs.vue
index 226097e31..a0bdf9c41 100644
--- a/src/pages/Travel/Card/TravelThermographs.vue
+++ b/src/pages/Travel/Card/TravelThermographs.vue
@@ -101,7 +101,7 @@ const openRemoveDialog = async (id) => {
         });
 };
 
-const redirectToThermographForm = (action, { id = null }) => {
+const redirectToThermographForm = (action, id) => {
     const routeDetails = {
         name: action === 'create' ? 'TravelThermographsCreate' : 'TravelThermographsEdit',
     };
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index 8afacdfd6..abee03562 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -36,11 +36,7 @@ onBeforeMount(() => {
     if (route.query.travelData) {
         const travelData = JSON.parse(route.query.travelData);
         for (let key in newTravelForm) {
-            if (key === 'landed' || key === 'shipped') {
-                newTravelForm[key] = travelData[key].substring(0, 10);
-            } else {
-                newTravelForm[key] = travelData[key];
-            }
+            newTravelForm[key] = travelData[key];
         }
     }
 });
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
index 62439a2e4..c1c0d1bee 100644
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@@ -6,8 +6,7 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
-
-import { toDate } from 'src/filters';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -60,7 +59,7 @@ const decrement = (paramsObj, key) => {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params }">
+        <template #body="{ params, searchFn }">
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -75,6 +74,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.agencyModeFk')"
                         v-model="params.agencyModeFk"
+                        @update:model-value="searchFn()"
                         :options="agenciesOptions"
                         option-value="agencyFk"
                         option-label="name"
@@ -90,6 +90,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.warehouseOutFk')"
                         v-model="params.warehouseOutFk"
+                        @update:model-value="searchFn()"
                         :options="warehousesOptions"
                         option-value="id"
                         option-label="name"
@@ -105,6 +106,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.warehouseInFk')"
                         v-model="params.warehouseInFk"
+                        @update:model-value="searchFn()"
                         :options="warehousesOptions"
                         option-value="id"
                         option-label="name"
@@ -147,68 +149,20 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <QInput
-                        dense
-                        outlined
-                        rounded
-                        placeholder="dd-mm-aaa"
+                    <VnInputDate
+                        v-model="params.landedFrom"
                         :label="t('params.landedFrom')"
-                        :model-value="toDate(params.landedFrom)"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="params.landedFrom">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                :label="t('globals.close')"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
+                        is-outlined
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
                 <QItemSection>
-                    <QInput
-                        dense
-                        outlined
-                        rounded
-                        placeholder="dd-mm-aaa"
-                        :model-value="toDate(params.landedTo)"
+                    <VnInputDate
                         :label="t('params.landedTo')"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="params.landedTo">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                :label="t('globals.close')"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
+                        v-model="params.landedTo"
+                        is-outlined
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -216,6 +170,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.continent')"
                         v-model="params.continent"
+                        @update:model-value="searchFn()"
                         :options="continentsOptions"
                         option-value="code"
                         option-label="name"
@@ -261,18 +216,6 @@ const decrement = (paramsObj, key) => {
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.input-number >>> input[type='number'] {
-    -moz-appearance: textfield;
-}
-.input-number >>> input::-webkit-outer-spin-button,
-.input-number >>> input::-webkit-inner-spin-button {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-}
-</style>
-
 <i18n>
 en:
     params:
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 2ce6349a6..1232f8476 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -51,6 +51,18 @@ const viewSummary = (id) => {
     });
 };
 
+const getDateQBadgeColor = (date) => {
+    let today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+
+    date = new Date(date);
+    date.setHours(0, 0, 0, 0);
+
+    const timeDifference = today - date;
+    if (timeDifference == 0) return 'warning';
+    if (timeDifference < 0) return 'success';
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -95,14 +107,34 @@ onMounted(async () => {
                                 :label="t('globals.wareHouseOut')"
                                 :value="getWarehouseName(row.warehouseOutFk)"
                             />
-                            <VnLv
-                                :label="t('globals.shipped')"
-                                :value="toDate(row.shipped)"
-                            />
-                            <VnLv
-                                :label="t('globals.landed')"
-                                :value="toDate(row.landed)"
-                            />
+                            <VnLv :label="t('globals.shipped')">
+                                <template #value>
+                                    <QBadge
+                                        v-if="getDateQBadgeColor(row.shipped)"
+                                        :color="getDateQBadgeColor(row.shipped)"
+                                        class="q-ma-none"
+                                        dense
+                                        style="font-size: 14px"
+                                    >
+                                        {{ toDate(row.shipped) }}
+                                    </QBadge>
+                                    <span v-else>{{ toDate(row.shipped) }}</span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('globals.landed')">
+                                <template #value>
+                                    <QBadge
+                                        v-if="getDateQBadgeColor(row.landed)"
+                                        :color="getDateQBadgeColor(row.landed)"
+                                        class="q-ma-none"
+                                        dense
+                                        style="font-size: 14px"
+                                    >
+                                        {{ toDate(row.landed) }}
+                                    </QBadge>
+                                    <span v-else>{{ toDate(row.landed) }}</span>
+                                </template>
+                            </VnLv>
                             <VnLv
                                 v-if="warehouses.length > 0"
                                 :label="t('globals.wareHouseIn')"
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index c34ebe757..a9670525f 100644
--- a/src/router/modules/travel.js
+++ b/src/router/modules/travel.js
@@ -43,7 +43,6 @@ export default {
                     name: 'TravelCreate',
                     meta: {
                         title: 'travelCreate',
-                        icon: '',
                     },
                     component: () => import('src/pages/Travel/TravelCreate.vue'),
                 },

From 4dc31bfdcec15f752a40ef88df4fd70282230a29 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 8 Feb 2024 07:58:52 -0300
Subject: [PATCH 11/16] Travel summary corrections

---
 src/pages/Travel/Card/TravelSummary.vue | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index cf9a9ada0..2ed6a0487 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, onUpdated } from 'vue';
+import { ref, computed, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -10,7 +10,6 @@ import FetchData from 'src/components/FetchData.vue';
 import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
 
 import { toDate, toCurrency } from 'src/filters';
-import { getUrl } from 'src/composables/getUrl';
 import axios from 'axios';
 
 onUpdated(() => summaryRef.value.fetch());
@@ -28,16 +27,11 @@ const { t } = useI18n();
 
 const entityId = computed(() => $props.id || route.params.id);
 const summaryRef = 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 entriesTableColumns = computed(() => {
     return [
         {
@@ -243,9 +237,13 @@ async function setTravelData(travelData) {
         @on-fetch="(data) => setTravelData(data)"
     >
         <template #header-left>
-            <a class="header link" :href="travelUrl">
+            <router-link
+                class="header link"
+                :to="{ name: 'TravelSummary', params: { id: entityId } }"
+            >
                 <QIcon name="open_in_new" color="white" size="sm" />
-            </a>
+                <QTooltip>{{ t('travel.pageTitles.summary') }}</QTooltip>
+            </router-link>
         </template>
         <template #header>
             <span>{{ travel.ref }} - {{ travel.id }}</span>
@@ -383,4 +381,3 @@ async function setTravelData(travelData) {
         </template>
     </CardSummary>
 </template>
-<style lang="scss" scoped></style>

From c8153b641463dced58dc2e31a99744823d6c259c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 8 Feb 2024 08:01:16 -0300
Subject: [PATCH 12/16] Add action to qfile icon

---
 src/pages/Travel/Card/TravelThermographsForm.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/Travel/Card/TravelThermographsForm.vue b/src/pages/Travel/Card/TravelThermographsForm.vue
index ea407ec69..de53a266b 100644
--- a/src/pages/Travel/Card/TravelThermographsForm.vue
+++ b/src/pages/Travel/Card/TravelThermographsForm.vue
@@ -40,6 +40,7 @@ const thermographsOptions = ref([]);
 const dmsTypesOptions = ref([]);
 const companiesOptions = ref([]);
 const warehousesOptions = ref([]);
+const inputFileRef = ref(null);
 
 const thermographForm = reactive({
     thermographId: null,
@@ -300,13 +301,18 @@ const updateThermograph = async () => {
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QFile
+                            ref="inputFileRef"
                             :label="t('travel.thermographs.file')"
                             multiple
                             :accept="allowedFileTypes"
                             v-model="thermographForm.files"
                         >
                             <template #append>
-                                <QIcon name="vn:attach" class="cursor-pointer">
+                                <QIcon
+                                    name="vn:attach"
+                                    class="cursor-pointer"
+                                    @click="inputFileRef.pickFiles()"
+                                >
                                     <QTooltip>{{ t('Select files') }}</QTooltip>
                                 </QIcon>
                             </template>

From 770f17a3624ff4f8a08f677f9e90e02d2da3ba6c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 8 Feb 2024 08:21:41 -0300
Subject: [PATCH 13/16] Fix edit thermograph id problem

---
 src/pages/Travel/Card/TravelThermographs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Travel/Card/TravelThermographs.vue b/src/pages/Travel/Card/TravelThermographs.vue
index a0bdf9c41..179d53b72 100644
--- a/src/pages/Travel/Card/TravelThermographs.vue
+++ b/src/pages/Travel/Card/TravelThermographs.vue
@@ -169,7 +169,7 @@ const removeThermograph = async (id) => {
                             color="primary"
                             size="sm"
                             class="cursor-pointer"
-                            @click="redirectToThermographForm('edit', row)"
+                            @click="redirectToThermographForm('edit', row.id)"
                         >
                             <QTooltip>{{ t('Edit file') }}</QTooltip>
                         </QIcon>

From f24b9f5a75e55eb17903482da337d440189bcdb0 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 8 Feb 2024 08:26:36 -0300
Subject: [PATCH 14/16] Adjust thermograph notify

---
 src/pages/Travel/Card/TravelThermographs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Travel/Card/TravelThermographs.vue b/src/pages/Travel/Card/TravelThermographs.vue
index 179d53b72..96f8c55c3 100644
--- a/src/pages/Travel/Card/TravelThermographs.vue
+++ b/src/pages/Travel/Card/TravelThermographs.vue
@@ -94,7 +94,6 @@ const openRemoveDialog = async (id) => {
         .onOk(async () => {
             try {
                 await removeThermograph(id);
-                notify(t('Thermograph removed'), 'positive');
             } catch (err) {
                 console.error('Error removing thermograph');
             }
@@ -118,6 +117,7 @@ const removeThermograph = async (id) => {
     try {
         await axios.delete(`Travels/deleteThermograph?id=${id}`);
         await thermographPaginateRef.value.fetch();
+        notify(t('Thermograph removed'), 'positive');
     } catch (err) {
         console.error('Error removing termograph');
     }

From c67f4cf858897cd2684946f44bd02c6eae808c68 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 8 Feb 2024 23:30:08 -0300
Subject: [PATCH 15/16] Thermograph create form and general improvements

---
 src/components/CreateThermographForm.vue      | 113 ++++++++++++++++++
 src/components/EditPictureForm.vue            |  10 +-
 src/components/common/VnInput.vue             |   5 +
 src/components/common/VnSelectFilter.vue      |   9 +-
 src/i18n/en/index.js                          |   5 +-
 src/i18n/es/index.js                          |   5 +-
 .../Travel/Card/TravelThermographsForm.vue    |  49 +++++---
 7 files changed, 164 insertions(+), 32 deletions(-)
 create mode 100644 src/components/CreateThermographForm.vue

diff --git a/src/components/CreateThermographForm.vue b/src/components/CreateThermographForm.vue
new file mode 100644
index 000000000..f3e1ca481
--- /dev/null
+++ b/src/components/CreateThermographForm.vue
@@ -0,0 +1,113 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModelPopup from './FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+
+const thermographFormData = reactive({
+    thermographId: null,
+    model: 'DISPOSABLE',
+    warehouseId: null,
+    temperatureFk: 'cool',
+});
+
+const thermographsModels = ref(null);
+const warehousesOptions = ref([]);
+const temperaturesOptions = ref([]);
+
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (thermographsModels = data)"
+        auto-load
+        url="Thermographs/getThermographModels"
+    />
+    <FetchData
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+    />
+    <FetchData
+        @on-fetch="(data) => (temperaturesOptions = data)"
+        auto-load
+        url="Temperatures"
+    />
+    <FormModelPopup
+        url-create="Thermographs/createThermograph"
+        model="thermograph"
+        :title="t('New thermograph')"
+        :form-initial-data="thermographFormData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('Identifier')"
+                        v-model="data.thermographId"
+                        :required="true"
+                        :rules="validate('thermograph.id')"
+                    />
+                </div>
+
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Model')"
+                        :options="thermographsModels"
+                        hide-selected
+                        option-label="value"
+                        option-value="value"
+                        v-model="data.model"
+                        :required="true"
+                        :rules="validate('thermograph.model')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-xl">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Warehouse')"
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.warehouseId"
+                        :required="true"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Temperature')"
+                        :options="temperaturesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        v-model="data.temperatureFk"
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Identifier: Identificador
+    Model: Modelo
+    Warehouse: Almacén
+    Temperature: Temperatura
+</i18n>
diff --git a/src/components/EditPictureForm.vue b/src/components/EditPictureForm.vue
index 44d44587f..9f69896b5 100644
--- a/src/components/EditPictureForm.vue
+++ b/src/components/EditPictureForm.vue
@@ -276,13 +276,9 @@ const makeRequest = async () => {
                                     </QIcon>
                                     <QIcon name="info" class="cursor-pointer">
                                         <QTooltip>{{
-                                            t(
-                                                'components.editPictureForm.allowedFilesText',
-                                                {
-                                                    allowedContentTypes:
-                                                        allowedContentTypes,
-                                                }
-                                            )
+                                            t('globals.allowedFilesText', {
+                                                allowedContentTypes: allowedContentTypes,
+                                            })
                                         }}</QTooltip>
                                     </QIcon>
                                 </template>
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 76e91a5d8..8a01e0bee 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
 
@@ -14,6 +15,9 @@ const $props = defineProps({
     },
 });
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const value = computed({
     get() {
         return $props.modelValue;
@@ -46,6 +50,7 @@ const onEnterPress = () => {
         type="text"
         :class="{ required: $attrs.required }"
         @keyup.enter="onEnterPress()"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <template v-if="$slots.prepend" #prepend>
             <slot name="prepend" />
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index accf92fc6..95844ac22 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -1,7 +1,8 @@
 <script setup>
-import FetchData from 'src/components/FetchData.vue';
-import { onMounted } from 'vue';
 import { ref, toRefs, computed, watch } from 'vue';
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -55,6 +56,9 @@ const $props = defineProps({
     },
 });
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const { optionLabel, optionValue, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
@@ -164,6 +168,7 @@ watch(modelValue, (newValue) => {
         fill-input
         ref="vnSelectRef"
         :class="{ required: $attrs.required }"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <template v-if="isClearable" #append>
             <QIcon
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index e15a144cc..2b308480e 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -64,6 +64,8 @@ export default {
         markAll: 'Mark all',
         noResults: 'No results',
         system: 'System',
+        fieldRequired: 'Field required',
+        allowedFilesText: 'Allowed file types: { allowedContentTypes }',
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -1173,9 +1175,6 @@ export default {
             addToPinned: 'Add to pinned',
             removeFromPinned: 'Remove from pinned',
         },
-        editPictureForm: {
-            allowedFilesText: 'Allowed file types: { allowedContentTypes }',
-        },
         VnLv: {
             copyText: '{copyValue} has been copied to the clipboard',
         },
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 8a140c36f..7f91a1f48 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -64,6 +64,8 @@ export default {
         markAll: 'Marcar todo',
         noResults: 'Sin resultados',
         system: 'Sistema',
+        fieldRequired: 'Campo requerido',
+        allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -1173,9 +1175,6 @@ export default {
             addToPinned: 'Añadir a fijados',
             removeFromPinned: 'Eliminar de fijados',
         },
-        editPictureForm: {
-            allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
-        },
         VnLv: {
             copyText: '{copyValue} se ha copiado al portapepeles',
         },
diff --git a/src/pages/Travel/Card/TravelThermographsForm.vue b/src/pages/Travel/Card/TravelThermographsForm.vue
index de53a266b..db37d78a5 100644
--- a/src/pages/Travel/Card/TravelThermographsForm.vue
+++ b/src/pages/Travel/Card/TravelThermographsForm.vue
@@ -5,8 +5,10 @@ import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import CreateThermographForm from 'src/components/CreateThermographForm.vue';
 
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
@@ -34,8 +36,9 @@ const thermographFilter = {
     },
     order: 'thermographFk ASC',
 };
+const fetchTravelThermographsRef = ref(null);
+const allowedContentTypes = ref('');
 const user = state.getUser();
-const allowedFileTypes = ref(null);
 const thermographsOptions = ref([]);
 const dmsTypesOptions = ref([]);
 const companiesOptions = ref([]);
@@ -54,8 +57,6 @@ const thermographForm = reactive({
 });
 
 onBeforeMount(async () => {
-    await getAllowedFileTypes();
-
     if (props.viewAction === 'create') {
         setCreateDefaultParams();
     } else {
@@ -70,16 +71,6 @@ onBeforeMount(async () => {
     }
 });
 
-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 = {
@@ -175,10 +166,21 @@ const updateThermograph = async () => {
         console.error('Error creating thermograph');
     }
 };
+
+const onThermographCreated = async (data) => {
+    await fetchTravelThermographsRef.value.fetch();
+    thermographForm.thermographId = data.thermographId;
+};
 </script>
 
 <template>
     <FetchData
+        url="DmsContainers/allowedContentTypes"
+        @on-fetch="(data) => (allowedContentTypes = data.join(', '))"
+        auto-load
+    />
+    <FetchData
+        ref="fetchTravelThermographsRef"
         url="TravelThermographs"
         @on-fetch="(data) => (thermographsOptions = data)"
         :filter="thermographFilter"
@@ -235,14 +237,20 @@ const updateThermograph = async () => {
             <QCard class="q-pa-lg">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelectDialog
                             :label="t('travel.thermographs.thermograph')"
                             v-model="thermographForm.thermographId"
                             :options="thermographsOptions"
                             option-value="thermographFk"
                             option-label="thermographFk"
                             :disable="viewAction === 'edit'"
-                        />
+                        >
+                            <template #form>
+                                <CreateThermographForm
+                                    @on-data-saved="onThermographCreated($event, data)"
+                                />
+                            </template>
+                        </VnSelectDialog>
                     </div>
                     <div class="col">
                         <VnInput
@@ -304,17 +312,24 @@ const updateThermograph = async () => {
                             ref="inputFileRef"
                             :label="t('travel.thermographs.file')"
                             multiple
-                            :accept="allowedFileTypes"
+                            :accept="allowedContentTypes"
                             v-model="thermographForm.files"
                         >
                             <template #append>
                                 <QIcon
                                     name="vn:attach"
-                                    class="cursor-pointer"
+                                    class="cursor-pointer q-mr-sm"
                                     @click="inputFileRef.pickFiles()"
                                 >
                                     <QTooltip>{{ t('Select files') }}</QTooltip>
                                 </QIcon>
+                                <QIcon name="info" class="cursor-pointer">
+                                    <QTooltip>{{
+                                        t('globals.allowedFilesText', {
+                                            allowedContentTypes: allowedContentTypes,
+                                        })
+                                    }}</QTooltip>
+                                </QIcon>
                             </template>
                         </QFile>
                     </div>

From 1b316573385f08d51a2b8279ace91d71732fb6d6 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 9 Feb 2024 08:51:39 -0300
Subject: [PATCH 16/16] Add tooltip to VnSelegDialog Action icon and small
 corrections

---
 src/components/CreateThermographForm.vue         | 1 +
 src/components/common/VnSelectDialog.vue         | 8 +++++++-
 src/pages/Travel/Card/TravelThermographs.vue     | 2 +-
 src/pages/Travel/Card/TravelThermographsForm.vue | 2 ++
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/CreateThermographForm.vue b/src/components/CreateThermographForm.vue
index f3e1ca481..d4511a0e7 100644
--- a/src/components/CreateThermographForm.vue
+++ b/src/components/CreateThermographForm.vue
@@ -110,4 +110,5 @@ es:
     Model: Modelo
     Warehouse: Almacén
     Temperature: Temperatura
+    New thermograph: Nuevo termógrafo
 </i18n>
diff --git a/src/components/common/VnSelectDialog.vue b/src/components/common/VnSelectDialog.vue
index 2ec3d1b1a..355a25109 100644
--- a/src/components/common/VnSelectDialog.vue
+++ b/src/components/common/VnSelectDialog.vue
@@ -24,6 +24,10 @@ const $props = defineProps({
         type: String,
         default: 'add',
     },
+    tooltip: {
+        type: String,
+        default: '',
+    },
 });
 
 const role = useRole();
@@ -55,7 +59,9 @@ const toggleForm = () => {
                 :name="actionIcon"
                 :size="actionIcon === 'add' ? 'xs' : 'sm'"
                 :class="['default-icon', { '--add-icon': actionIcon === 'add' }]"
-            />
+            >
+                <QTooltip v-if="tooltip">{{ tooltip }}</QTooltip>
+            </QIcon>
             <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
                 <slot name="form" />
             </QDialog>
diff --git a/src/pages/Travel/Card/TravelThermographs.vue b/src/pages/Travel/Card/TravelThermographs.vue
index 96f8c55c3..435d9054f 100644
--- a/src/pages/Travel/Card/TravelThermographs.vue
+++ b/src/pages/Travel/Card/TravelThermographs.vue
@@ -198,7 +198,7 @@ const removeThermograph = async (id) => {
             color="primary"
             @click="redirectToThermographForm('create')"
         />
-        <QTooltip>
+        <QTooltip class="text-no-wrap">
             {{ t('Add thermograph') }}
         </QTooltip>
     </QPageSticky>
diff --git a/src/pages/Travel/Card/TravelThermographsForm.vue b/src/pages/Travel/Card/TravelThermographsForm.vue
index db37d78a5..6758cb6ff 100644
--- a/src/pages/Travel/Card/TravelThermographsForm.vue
+++ b/src/pages/Travel/Card/TravelThermographsForm.vue
@@ -244,6 +244,7 @@ const onThermographCreated = async (data) => {
                             option-value="thermographFk"
                             option-label="thermographFk"
                             :disable="viewAction === 'edit'"
+                            :tooltip="t('New thermograph')"
                         >
                             <template #form>
                                 <CreateThermographForm
@@ -343,4 +344,5 @@ const onThermographCreated = async (data) => {
 es:
     Select files: Selecciona ficheros
     Thermograph created: Termógrafo creado
+    New thermograph: Nuevo termógrafo
 </i18n>