From a672fd96e7f7422166e6c7b89637f7c8e986741f Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 14 Apr 2025 09:05:36 +0200
Subject: [PATCH] refactor(TravelThermograph): refs #7527 use popups

---
 src/pages/Route/Card/RouteBasicData.vue       | 136 ++++++
 src/pages/Travel/Card/TravelThermographs.vue  | 159 ++++---
 .../Travel/Card/TravelThermographsForm.vue    | 407 ++++++++----------
 src/router/modules/route.js                   |   2 +-
 src/router/modules/travel.js                  |  32 +-
 5 files changed, 396 insertions(+), 340 deletions(-)
 create mode 100644 src/pages/Route/Card/RouteBasicData.vue

diff --git a/src/pages/Route/Card/RouteBasicData.vue b/src/pages/Route/Card/RouteBasicData.vue
new file mode 100644
index 000000000..667204b15
--- /dev/null
+++ b/src/pages/Route/Card/RouteBasicData.vue
@@ -0,0 +1,136 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInput from 'components/common/VnInput.vue';
+import axios from 'axios';
+import VnInputTime from 'components/common/VnInputTime.vue';
+import filter from './RouteFilter.js';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const shelvingId = ref(route.params?.id || null);
+const isNew = Boolean(!shelvingId.value);
+const defaultInitialData = {
+    agencyModeFk: null,
+    dated: null,
+    description: '',
+    vehicleFk: null,
+    workerFk: null,
+    isOk: false,
+};
+const maxDistance = ref();
+const onSave = (data, response) => {
+    if (isNew) {
+        axios.post(`Routes/${response?.id}/updateWorkCenter`);
+        router.push({ name: 'RouteSummary', params: { id: response?.id } });
+    }
+};
+</script>
+<template>
+    <VnSubToolbar v-if="isNew" />
+    <FetchData
+        url="RouteConfigs/findOne"
+        @on-fetch="({ kmMax }) => (maxDistance = kmMax)"
+        auto-load
+        sort-by="id ASC"
+    />
+    <FormModel
+        :url-create="isNew ? 'Routes' : null"
+        :observe-form-changes="!isNew"
+        :filter="filter"
+        model="Route"
+        :auto-load="!isNew"
+        :form-initial-data="isNew ? defaultInitialData : null"
+        @on-data-saved="onSave"
+    >
+        <template #form="{ data }">
+            <VnRow>
+                <VnSelectWorker v-model="data.workerFk" />
+                <VnSelect
+                    :label="t('Vehicle')"
+                    v-model="data.vehicleFk"
+                    url="Vehicles/active"
+                    sort-by="numberPlate ASC"
+                    option-value="id"
+                    option-label="numberPlate"
+                    :input-debounce="0"
+                />
+            </VnRow>
+            <VnRow>
+                <VnSelect
+                    :label="t('Agency')"
+                    v-model="data.agencyModeFk"
+                    url="AgencyModes/isActive"
+                    sort-by="name"
+                    option-value="id"
+                    option-label="name"
+                    :input-debounce="0"
+                />
+                <VnInputDate v-model="data.dated" :label="t('Dated')" />
+            </VnRow>
+            <template v-if="!isNew">
+                <VnRow>
+                    <VnInput v-model="data.kmStart" :label="t('Km Start')" clearable />
+                    <QInput
+                        v-model.number="data.kmEnd"
+                        :label="t('Km End')"
+                        clearable
+                        type="number"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnInputTime
+                        v-model="data.started"
+                        :label="t('Hour started')"
+                        clearable
+                    />
+                    <VnInputTime
+                        v-model="data.finished"
+                        :label="t('Hour finished')"
+                        clearable
+                    />
+                    <div class="col flex items-center">
+                        <QCheckbox
+                            size="sm"
+                            v-model="data.isOk"
+                            :label="t('Is served')"
+                            clearable
+                        />
+                    </div>
+                </VnRow>
+            </template>
+            <VnInput
+                v-model="data.description"
+                :label="t('Description')"
+                type="textarea"
+                :rows="3"
+                clearable
+            />
+        </template>
+    </FormModel>
+</template>
+<i18n>
+es:
+    Worker: Trabajador
+    Vehicle: Vehículo
+    Agency: Agencia
+    Km Start: Km de inicio
+    Km End: Km de fin
+    Hour started: Hora inicio
+    Hour finished: Hora fin
+    Description: Descripción
+    Is served: Se ha servido
+    Dated: Fecha
+    The km can not exceed: La distancia debe ser inferior a {maxDistance}
+en:
+    The km can not exceed: Distance must be lesser than {maxDistance}
+</i18n>
diff --git a/src/pages/Travel/Card/TravelThermographs.vue b/src/pages/Travel/Card/TravelThermographs.vue
index 2376bd6d2..fddbda2a1 100644
--- a/src/pages/Travel/Card/TravelThermographs.vue
+++ b/src/pages/Travel/Card/TravelThermographs.vue
@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'src/components/FetchData.vue';
 
@@ -13,6 +13,7 @@ import useNotify from 'src/composables/useNotify.js';
 import { toDate, toCelsius } from 'src/filters';
 import { downloadFile } from 'src/composables/downloadFile';
 import { useArrayData } from 'src/composables/useArrayData';
+import TravelThermographsForm from './TravelThermographsForm.vue';
 
 const route = useRoute();
 const quasar = useQuasar();
@@ -23,7 +24,8 @@ const { notify } = useNotify();
 const travel = computed(() => useArrayData('Travel').store.data);
 const thermographPaginateRef = ref();
 const warehouses = ref([]);
-
+const showForm = ref(false);
+const formData = ref({});
 const thermographFilter = {
     include: [
         {
@@ -38,8 +40,10 @@ const thermographFilter = {
                 fields: ['id', 'name'],
             },
         },
+        {
+            relation: 'dms',
+        },
     ],
-    where: { travelFk: route.params.id },
     order: ['created'],
 };
 
@@ -59,23 +63,23 @@ const TableColumns = computed(() => {
         },
         {
             label: t('travel.thermographs.carrier'),
-            field: (row) => row.agencyMode?.name,
             name: 'agencyModeFk',
             align: 'left',
+            format: (row) => row.agencyMode?.name,
         },
         {
             label: t('globals.maxTemperature'),
             field: 'maxTemperature',
             name: 'maxTemperature',
             align: 'left',
-            format: (val) => toCelsius(val),
+            format: ({ maxTemperature }) => toCelsius(maxTemperature),
         },
         {
             label: t('globals.minTemperature'),
             field: 'minTemperature',
             name: 'minTemperature',
             align: 'left',
-            format: (val) => toCelsius(val),
+            format: ({ minTemperature }) => toCelsius(minTemperature),
         },
         {
             label: t('globals.state'),
@@ -88,60 +92,47 @@ const TableColumns = computed(() => {
             field: 'warehouseFk',
             name: 'destination',
             align: 'left',
-            format: (val) =>
-                warehouses.value.find((warehouse) => warehouse.id === val)?.name,
+            format: ({ warehouseFk }) =>
+                warehouses.value.find((warehouse) => warehouse.id === warehouseFk)?.name,
         },
         {
             label: t('globals.created'),
             field: 'created',
             name: 'created',
             align: 'left',
-            format: (val) => toDate(val),
+            format: ({ created }) => toDate(created),
         },
         {
             name: 'downloadFile',
             align: 'left',
+            columnFilter: false,
         },
         {
             name: 'editFile',
             align: 'left',
+            columnFilter: false,
         },
         {
             name: 'removeThermograph',
             align: 'left',
+            columnFilter: false,
         },
     ];
 });
 
 const openRemoveDialog = async (id) => {
-    quasar
-        .dialog({
-            component: VnConfirm,
-            componentProps: {
-                message: t('Are you sure you want to remove the thermograph?'),
-            },
-        })
-        .onOk(async () => {
-            await removeThermograph(id);
-        });
-};
-
-const redirectToThermographForm = (action, id) => {
-    const routeDetails = {
-        name: action === 'create' ? 'TravelThermographsCreate' : 'TravelThermographsEdit',
-    };
-
-    if (action === 'edit' && id) {
-        routeDetails.query = { id };
-    } else if (action === 'create') {
-        routeDetails.query = { agencyModeFk: travel.value?.agencyModeFk };
-    }
-    router.push(routeDetails);
+    quasar.dialog({
+        component: VnConfirm,
+        componentProps: {
+            message: t('Are you sure you want to remove the thermograph?'),
+            promise: () => removeThermograph(id),
+        },
+    });
 };
 
 const removeThermograph = async (id) => {
     await axios.delete(`Travels/deleteThermograph?id=${id}`);
-    await thermographPaginateRef.value.fetch();
+    await thermographPaginateRef.value.reload();
     notify(t('Thermograph removed'), 'positive');
 };
 </script>
@@ -154,75 +145,77 @@ const removeThermograph = async (id) => {
         @on-fetch="(data) => (warehouses = data)"
         auto-load
     />
-    <VnPaginate
+    <VnTable
         ref="thermographPaginateRef"
         data-key="TravelThermographs"
         url="TravelThermographs"
         :user-filter="thermographFilter"
+        :filter="{ where: { travelFk: route.params.id } }"
+        :columns="TableColumns"
         auto-load
     >
-        <template #body="{ rows }">
-            <QTable
-                :rows="rows"
-                :columns="TableColumns"
-                :no-data-label="t('No results')"
-                row-key="id"
-                class="full-width q-mt-md"
+        <template #column-downloadFile="{ row }">
+            <QIcon
+                name="cloud_download"
+                color="primary"
+                size="sm"
+                class="cursor-pointer"
+                @click="downloadFile(row.dmsFk)"
             >
-                <template #body-cell-downloadFile="{ row }">
-                    <QTd auto-width>
-                        <QIcon
-                            name="cloud_download"
-                            color="primary"
-                            size="sm"
-                            class="cursor-pointer"
-                            @click="downloadFile(row.dmsFk)"
-                        >
-                            <QTooltip>{{ t('Download file') }}</QTooltip>
-                        </QIcon>
-                    </QTd>
-                </template>
-                <template #body-cell-editFile="{ row }">
-                    <QTd auto-width>
-                        <QIcon
-                            name="edit"
-                            color="primary"
-                            size="sm"
-                            class="cursor-pointer"
-                            @click="redirectToThermographForm('edit', row.id)"
-                        >
-                            <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>
+                <QTooltip>{{ t('Download file') }}</QTooltip>
+            </QIcon>
         </template>
-    </VnPaginate>
+        <template #column-editFile="{ row }">
+            <QIcon
+                name="edit"
+                color="primary"
+                size="sm"
+                class="cursor-pointer"
+                @click="
+                    () => {
+                        formData = row;
+                        showForm = !showForm;
+                    }
+                "
+            >
+                <QTooltip>{{ t('Edit file') }}</QTooltip>
+            </QIcon>
+        </template>
+        <template #column-removeThermograph="{ row }">
+            <QIcon
+                name="delete"
+                color="primary"
+                size="sm"
+                class="cursor-pointer"
+                @click="openRemoveDialog(row.id)"
+            >
+                <QTooltip>{{ t('Remove thermograph') }}</QTooltip>
+            </QIcon>
+        </template>
+    </VnTable>
     <QPageSticky :offset="[20, 20]">
         <QBtn
             fab
             icon="add"
             color="primary"
-            @click="redirectToThermographForm('create')"
+            @click="
+                () => {
+                    formData = { dms: {} };
+                    showForm = !showForm;
+                }
+            "
             v-shortcut="'+'"
         />
         <QTooltip class="text-no-wrap">
             {{ t('Add thermograph') }}
         </QTooltip>
     </QPageSticky>
+    <QDialog v-model="showForm">
+        <TravelThermographsForm
+            :form-initial-data="formData"
+            :agencyModeFk="travel?.agencyModeFk"
+        />
+    </QDialog>
 </template>
 
 <i18n>
diff --git a/src/pages/Travel/Card/TravelThermographsForm.vue b/src/pages/Travel/Card/TravelThermographsForm.vue
index 446e5d506..71a4a8074 100644
--- a/src/pages/Travel/Card/TravelThermographsForm.vue
+++ b/src/pages/Travel/Card/TravelThermographsForm.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref, onBeforeMount } from 'vue';
+import { ref, onBeforeMount, useAttrs } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
@@ -11,22 +11,14 @@ 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';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
 
-const props = defineProps({
-    viewAction: {
-        type: String,
-        default: 'create',
-    },
-});
-
-const stateStore = useStateStore();
+const attrs = useAttrs();
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
 const state = useState();
 const { notify } = useNotify();
 
@@ -37,26 +29,23 @@ const dmsTypesOptions = ref([]);
 const companiesOptions = ref([]);
 const warehousesOptions = ref([]);
 const temperaturesOptions = ref([]);
-const thermographForm = ref({});
 const inputFileRef = ref(null);
 const agencyModeOptions = ref([]);
 
-onBeforeMount(async () => {
-    if (props.viewAction === 'create') {
-        setCreateDefaultParams();
-    } else {
-        await setEditDefaultParams();
-    }
+const $props = defineProps({
+    agencyModeFk: {
+        type: Number,
+        default: undefined,
+    },
+});
 
-    if (route.query.thermographData) {
-        const thermographData = JSON.parse(route.query.thermographData);
-        for (let key in thermographForm.value) {
-            thermographForm.value[key] = thermographData[key];
-        }
+onBeforeMount(async () => {
+    if (!attrs['form-initial-data'].thermographFk) {
+        await setCreateDefaultParams();
     }
 });
 
-const fetchDmsTypes = async () => {
+async function fetchDmsTypes() {
     const params = {
         filter: {
             where: { code: 'thermograph' },
@@ -64,74 +53,68 @@ const fetchDmsTypes = async () => {
     };
     const { data } = await axios.get('DmsTypes/findOne', { params });
     return data;
-};
+}
 
-const setCreateDefaultParams = async () => {
+async function setCreateDefaultParams() {
     const dataResponse = await fetchDmsTypes();
-    thermographForm.value.companyId = user.value.companyFk;
-    thermographForm.value.warehouseId = user.value.warehouseFk;
-    thermographForm.value.reference = route.params.id;
-    thermographForm.value.dmsTypeId = dataResponse.id;
-    thermographForm.value.state = 'Ok';
-    thermographForm.value.agencyModeFk = +route.query.agencyModeFk;
-    thermographForm.value.description = t('travel.thermographs.travelFileDescription', {
-        travelId: route.params.id,
-    }).toUpperCase();
-};
+    attrs['form-initial-data'].companyFk = user.value.companyFk;
+    attrs['form-initial-data'].warehouseFk = user.value.warehouseFk;
+    attrs['form-initial-data'].dms.reference = route.params.id;
+    attrs['form-initial-data'].dms.dmsTypeFk = dataResponse.id;
+    attrs['form-initial-data'].state = 'Ok';
+    attrs['form-initial-data'].agencyModeFk = $props.agencyModeFk;
+    attrs['form-initial-data'].dms.description = t(
+        'travel.thermographs.travelFileDescription',
+        {
+            travelId: route.params.id,
+        },
+    ).toUpperCase();
+}
 
-const setEditDefaultParams = async () => {
-    const filterObj = { include: { relation: 'dms' } };
-    const filter = encodeURIComponent(JSON.stringify(filterObj));
-    const { data } = await axios.get(
-        `TravelThermographs/${route.query.id}?filter=${filter}`,
-    );
+async function onSubmit(data) {
+    const dataParsed = {
+        travelThermographFk: data.thermographFk,
+        state: data.result,
+        reference: data.dms.reference,
+        warehouseId: +data.warehouseFk,
+        companyId: +data.dms.companyFk,
+        dmsTypeId: +data.dms.dmsTypeFk,
+        description: data.dms.description,
+        hasFile: data.dms.hasFile,
+        maxTemperature: +data.maxTemperature,
+        minTemperature: +data.minTemperature,
+        temperatureFk: data.temperatureFk,
+        agencyModeFk: +data.agencyModeFk,
+    };
 
-    if (data) {
-        thermographForm.value.thermographFk = data.thermographFk;
-        thermographForm.value.state = data.result;
-        thermographForm.value.reference = data.dms?.reference;
-        thermographForm.value.warehouseId = data.warehouseFk;
-        thermographForm.value.companyId = data.dms?.companyFk;
-        thermographForm.value.dmsTypeId = data.dms?.dmsTypeFk;
-        thermographForm.value.description = data.dms?.description || '';
-        thermographForm.value.hasFile = data.dms?.hasFile;
-        thermographForm.value.hasFileAttached = false;
-        thermographForm.value.maxTemperature = data.maxTemperature;
-        thermographForm.value.minTemperature = data.minTemperature;
-        thermographForm.value.temperatureFk = data.temperatureFk;
-        thermographForm.value.travelThermographFk = data.id;
-        thermographForm.value.agencyModeFk = data.agencyModeFk;
-    }
-};
-
-const onSubmit = async () => {
     const formData = new FormData();
-    if (Array.isArray(thermographForm.value.files)) {
-        thermographForm.value.hasFileAttached = true;
-        thermographForm.value.files.forEach((file) => {
+    if (Array.isArray(data.files)) {
+        dataParsed.hasFileAttached = true;
+        data.files.forEach((file) => {
             formData.append(file.name, file);
         });
     }
-    delete thermographForm.value.files;
+    delete data.files;
+
+    delete dataParsed.dms;
     await axios.post(`/travels/${route.params.id}/saveThermograph`, formData, {
-        params: thermographForm.value,
+        params: dataParsed,
         headers: {
             'Content-Type': 'multipart/form-data',
         },
     });
-    router.push({ name: 'TravelThermographsIndex' });
     notify(t('Thermograph created'), 'positive');
-};
+}
 
-const onThermographCreated = async (data) => {
+async function onThermographCreated(newThermograph, data) {
     await fetchTravelThermographsRef.value.fetch();
-    thermographForm.value = {
-        ...thermographForm.value,
+    data = {
         ...data,
-        travelThermographFk: data.id,
-        warehouseId: data.warehouseFk,
+        ...newThermograph,
+        travelThermographFk: newThermograph.id,
+        warehouseId: newThermograph.warehouseFk,
     };
-};
+}
 </script>
 <template>
     <FetchData
@@ -167,161 +150,133 @@ const onThermographCreated = async (data) => {
         auto-load
         url="AgencyModeIncomings"
     />
-
-    <QPage class="column items-center full-width">
-        <QForm
-            :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')"
+    <FormModelPopup
+        v-if="attrs['form-initial-data'].dms?.dmsTypeFk"
+        v-bind="$attrs"
+        :observe-form-changes="viewAction === 'create'"
+        :save-fn="(data) => onSubmit(data)"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow>
+                <VnSelectDialog
+                    :label="t('travel.thermographs.thermograph')"
+                    v-model="data.thermographFk"
+                    url="TravelThermographs"
+                    :fields="['id', 'thermographFk']"
+                    :where="{
+                        or: [{ travelFk: null }, { travelFk: $route.params.id }],
+                    }"
+                    sort-by="thermographFk ASC"
+                    option-label="thermographFk"
+                    option-filter-value="thermographFk"
+                    :disable="!!$attrs['form-initial-data'].thermographFk"
+                    :tooltip="t('New thermograph')"
+                    :roles-allowed-to-create="['logistic']"
+                    data-key="travelThermographSelect"
+                >
+                    <template #form>
+                        <CreateThermographForm
+                            @on-data-saved="
+                                (newThermograph) =>
+                                    onThermographCreated(newThermograph, data)
+                            "
                         />
-                        <QBtn
-                            color="primary"
-                            icon="save"
-                            @click="onSubmit()"
-                            :label="t('globals.save')"
-                        />
-                    </QBtnGroup>
-                </div>
-            </Teleport>
-            <QCard class="q-pa-lg">
-                <VnRow>
-                    <VnSelectDialog
-                        :label="t('travel.thermographs.thermograph')"
-                        v-model="thermographForm.travelThermographFk"
-                        url="TravelThermographs"
-                        :fields="['id', 'thermographFk']"
-                        :where="{
-                            or: [{ travelFk: null }, { travelFk: $route.params.id }],
-                        }"
-                        sort-by="thermographFk ASC"
-                        option-label="thermographFk"
-                        option-filter-value="thermographFk"
-                        :disable="viewAction === 'edit'"
-                        :tooltip="t('New thermograph')"
-                        :roles-allowed-to-create="['logistic']"
-                        data-key="travelThermographSelect"
-                    >
-                        <template #form>
-                            <CreateThermographForm
-                                @on-data-saved="onThermographCreated"
-                            />
-                        </template>
-                    </VnSelectDialog>
-                    <VnInput
-                        v-model="thermographForm.state"
-                        :label="t('globals.state')"
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnSelect
-                        :label="t('travel.thermographs.carrier')"
-                        v-model="thermographForm.agencyModeFk"
-                        :options="agencyModeOptions"
-                        option-value="id"
-                        option-label="name"
-                    />
+                    </template>
+                </VnSelectDialog>
+                <VnInput v-model="data.result" :label="t('globals.state')" />
+            </VnRow>
+            <VnRow>
+                <VnSelect
+                    :label="t('travel.thermographs.carrier')"
+                    v-model="data.agencyModeFk"
+                    :options="agencyModeOptions"
+                    option-value="id"
+                    option-label="name"
+                />
 
-                    <VnInput
-                        v-model="thermographForm.reference"
-                        :label="t('globals.reference')"
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnSelect
-                        :label="t('globals.type')"
-                        v-model="thermographForm.dmsTypeId"
-                        :options="dmsTypesOptions"
-                        option-value="id"
-                        option-label="name"
-                    />
-                    <VnSelect
-                        :label="t('globals.company')"
-                        v-model="thermographForm.companyId"
-                        :options="companiesOptions"
-                        option-value="id"
-                        option-label="code"
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnSelect
-                        :label="t('globals.warehouse')"
-                        v-model="thermographForm.warehouseId"
-                        :options="warehousesOptions"
-                        option-value="id"
-                        option-label="name"
-                    />
-                    <VnSelect
-                        :label="t('travel.thermographs.temperature')"
-                        :options="temperaturesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="code"
-                        v-model="thermographForm.temperatureFk"
-                        :required="true"
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnInputNumber
-                        v-model="thermographForm.maxTemperature"
-                        :label="t('globals.maxTemperature')"
-                    />
-                    <VnInputNumber
-                        v-model="thermographForm.minTemperature"
-                        :label="t('globals.minTemperature')"
-                    />
-                </VnRow>
+                <VnInput v-model="data.dms.reference" :label="t('globals.reference')" />
+            </VnRow>
+            <VnRow>
+                <VnSelect
+                    :label="t('globals.type')"
+                    v-model="data.dms.dmsTypeFk"
+                    :options="dmsTypesOptions"
+                    option-value="id"
+                    option-label="name"
+                />
+                <VnSelect
+                    :label="t('globals.company')"
+                    v-model="data.dms.companyFk"
+                    :options="companiesOptions"
+                    option-value="id"
+                    option-label="code"
+                />
+            </VnRow>
+            <VnRow>
+                <VnSelect
+                    :label="t('globals.warehouse')"
+                    v-model="data.warehouseFk"
+                    :options="warehousesOptions"
+                    option-value="id"
+                    option-label="name"
+                />
+                <VnSelect
+                    :label="t('travel.thermographs.temperature')"
+                    :options="temperaturesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="code"
+                    v-model="data.temperatureFk"
+                    :required="true"
+                />
+            </VnRow>
+            <VnRow>
+                <VnInputNumber
+                    v-model="data.maxTemperature"
+                    :label="t('globals.maxTemperature')"
+                />
+                <VnInputNumber
+                    v-model="data.minTemperature"
+                    :label="t('globals.minTemperature')"
+                />
+            </VnRow>
 
-                <VnRow v-if="viewAction === 'edit'" class="row q-gutter-md q-mb-md">
-                    <QInput
-                        :label="t('globals.description')"
-                        type="textarea"
-                        v-model="thermographForm.description"
-                        fill-input
-                    />
-                </VnRow>
-                <VnRow>
-                    <QFile
-                        ref="inputFileRef"
-                        :label="t('globals.file')"
-                        multiple
-                        :accept="allowedContentTypes"
-                        v-model="thermographForm.files"
-                    >
-                        <template #append>
-                            <QIcon
-                                name="vn:attach"
-                                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>
-                </VnRow>
-            </QCard>
-        </QForm>
-    </QPage>
+            <VnRow v-if="viewAction === 'edit'" class="row q-gutter-md q-mb-md">
+                <QInput
+                    :label="t('globals.description')"
+                    type="textarea"
+                    v-model="data.description"
+                    fill-input
+                />
+            </VnRow>
+            <VnRow>
+                <QFile
+                    ref="inputFileRef"
+                    :label="t('globals.file')"
+                    multiple
+                    :accept="allowedContentTypes"
+                    v-model="data.files"
+                >
+                    <template #append>
+                        <QIcon
+                            name="vn:attach"
+                            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>
+            </VnRow>
+        </template>
+    </FormModelPopup>
 </template>
 <i18n>
     es:
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index d09b7c050..62ad6f227 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -16,7 +16,7 @@ const routeCard = {
                 title: 'basicData',
                 icon: 'vn:settings',
             },
-            component: () => import('pages/Route/Card/RouteForm.vue'),
+            component: () => import('pages/Route/Card/RouteBasicData.vue'),
         },
         {
             name: 'RouteSummary',
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index 317c15b0d..26a1f50e0 100644
--- a/src/router/modules/travel.js
+++ b/src/router/modules/travel.js
@@ -42,37 +42,9 @@ const travelCard = {
                 title: 'thermographs',
                 icon: 'vn:thermometer',
             },
-            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'
-                        ),
-                },
-            ],
+            component: () => import('src/pages/Travel/Card/TravelThermographs.vue'),
         },
-    ]
+    ],
 };
 
 export default {