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] 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',