refactor(TravelThermograph): refs #7527 use popups

This commit is contained in:
Alex Moreno 2025-04-14 09:05:36 +02:00
parent 16a3a76530
commit a672fd96e7
5 changed files with 396 additions and 340 deletions

View File

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

View File

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

View File

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

View File

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

View File

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