src/composables/useState.js

@@ -9,6 +9,7 @@ const user = ref({
     lang: '',
     darkMode: null,
     companyFk: null,
+    warehouseFk: null,
 });
 
 const roles = ref([]);

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: {

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: {

src/pages/Travel/Card/TravelCard.vue

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

src/pages/Travel/Card/TravelTermographs.vue

@@ -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>

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>

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>

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'
+                                ),
+                        },
+                    ],
                 },
             ],
         },