wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Merge pull request 'feature/TravelSubmodules' (#83) from feature/TravelSubmodules into dev 

Reviewed-on: hyervoni/salix-front-mindshore#83
Reviewed-by: Carlos Fonseca <cfonseca@verdnatura.es>
This commit is contained in:
William Buezas 2024-01-30 15:50:23 +00:00
parent f911a644e1 b440545ac9
commit f0778daaa6
20 changed files with 1158 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/FormModel.vue
View File

@ -128,7 +128,7 @@ async function save() {
try {
const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
let response
let response;
if ($props.urlCreate) {
response = await axios.post($props.urlCreate, body);
notify('globals.dataCreated', 'positive');

3
src/components/ui/CardDescriptor.vue
View File

@ -81,6 +81,7 @@ function viewSummary(id) {
<div class="descriptor">
<template v-if="entity">
<div class="header bg-primary q-pa-sm justify-between">
<slot name="header-extra-action" />
<QBtn
@click.stop="viewSummary(entity.id)"
round
@ -118,7 +119,7 @@ function viewSummary(id) {
icon="more_vert"
round
size="md"
v-if="slots.menu"
:class="{ invisible: !slots.menu }"
>
<QTooltip>
{{ t('components.cardDescriptor.moreOptions') }}

3
src/composables/useState.js
View File

@ -9,6 +9,7 @@ const user = ref({
lang: '',
darkMode: null,
companyFk: null,
warehouseFk: null,
});
const roles = ref([]);
@ -25,6 +26,7 @@ export function useState() {
lang: user.value.lang,
darkMode: user.value.darkMode,
companyFk: user.value.companyFk,
warehouseFk: user.value.warehouseFk,
};
});
}
@ -37,6 +39,7 @@ export function useState() {
lang: data.lang,
darkMode: data.darkMode,
companyFk: data.companyFk,
warehouseFk: data.warehouseFk,
};
}

1
src/composables/useUserConfig.js
View File

@ -12,6 +12,7 @@ export function useUserConfig() {
const user = state.getUser().value;
user.darkMode = data.darkMode;
user.companyFk = data.companyFk;
user.warehouseFk = data.warehouseFk;
state.setUser(user);
return data;

31
src/i18n/en/index.js
View File

@ -1036,8 +1036,8 @@ export default {
extraCommunity: 'Extra community',
travelCreate: 'New travel',
basicData: 'Basic data',
history: 'History',
thermographs: 'Termographs',
history: 'Log',
thermographs: 'Thermograph',
},
summary: {
confirmed: 'Confirmed',
@ -1049,7 +1049,9 @@ export default {
entries: 'Entries',
cloneShipping: 'Clone travel',
CloneTravelAndEntries: 'Clone travel and his entries',
deleteTravel: 'Delete travel',
AddEntry: 'Add entry',
thermographs: 'Thermographs',
},
variables: {
search: 'Id/Reference',
@ -1061,6 +1063,31 @@ export default {
continent: 'Continent out',
totalEntries: 'Total entries',
},
basicData: {
reference: 'Reference',
agency: 'Agency',
shipped: 'Shipped',
landed: 'Landed',
warehouseOut: 'Warehouse Out',
warehouseIn: 'Warehouse In',
delivered: 'Delivered',
received: 'Received',
},
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',
description: 'Description',
},
},
components: {

27
src/i18n/es/index.js
View File

@ -1049,7 +1049,9 @@ export default {
entries: 'Entradas',
cloneShipping: 'Clonar envío',
CloneTravelAndEntries: 'Clonar travel y sus entradas',
deleteTravel: 'Eliminar envío',
AddEntry: 'Añadir entrada',
thermographs: 'Termógrafos',
},
variables: {
search: 'Id/Referencia',
@ -1061,6 +1063,31 @@ export default {
continent: 'Cont. Salida',
totalEntries: 'Ent. totales',
},
basicData: {
reference: 'Referencia',
agency: 'Agencia',
shipped: 'F. Envío',
landed: 'F. entrega',
warehouseOut: 'Alm. salida',
warehouseIn: 'Alm. entrada',
delivered: 'Enviada',
received: 'Recibida',
},
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',
description: 'Descripción',
},
},
components: {
topbar: {},

23
src/pages/Entry/EntryCreate.vue
View File

@ -1,7 +1,7 @@
<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
@ -9,20 +9,27 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useState } from 'src/composables/useState';
import { toDate } from 'src/filters';
const state = useState();
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const user = state.getUser();
const newEntryForm = reactive({
supplierFk: null,
travelFk: route.query?.travelFk || null,
companyFk: null,
companyFk: user.value.companyFk || null,
});
const suppliersOptions = ref([]);
const travelsOptionsOptions = ref([]);
const companiesOptions = ref([]);
const redirectToEntryBasicData = (_, { id }) => {
router.push({ name: 'EntryBasicData', params: { id } });
};
</script>
<template>
@ -48,12 +55,14 @@ const companiesOptions = ref([]);
@on-fetch="(data) => (companiesOptions = data)"
auto-load
/>
<!-- Agregar searchbar de entries -->
<QPage>
<VnSubToolbar />
<FormModel url-create="Entries" model="entry" :form-initial-data="newEntryForm">
<FormModel
url-create="Entries"
model="entry"
:form-initial-data="newEntryForm"
@on-data-saved="redirectToEntryBasicData"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnSelectFilter

104
src/pages/Travel/Card/TravelBasicData.vue Normal file
View File

@ -0,0 +1,104 @@
<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
const route = useRoute();
const { t } = useI18n();
const agenciesOptions = ref([]);
</script>
<template>
<FetchData
url="AgencyModes"
@on-fetch="(data) => (agenciesOptions = data)"
auto-load
/>
<FormModel
:url="`Travels/${route.params.id}`"
:url-update="`Travels/${route.params.id}`"
model="travel"
auto-load
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
v-model="data.ref"
:label="t('travel.basicData.reference')"
/>
</div>
<div class="col">
<VnSelectFilter
:label="t('travel.basicData.agency')"
v-model="data.agencyModeFk"
:options="agenciesOptions"
option-value="id"
option-label="name"
map-options
hide-selected
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInputDate
v-model="data.shipped"
:label="t('travel.basicData.shipped')"
/>
</div>
<div class="col">
<VnInputDate
v-model="data.landed"
:label="t('travel.basicData.landed')"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('travel.basicData.warehouseOut')"
v-model="data.warehouseOutFk"
:options="agenciesOptions"
option-value="id"
option-label="name"
map-options
hide-selected
/>
</div>
<div class="col">
<VnSelectFilter
:label="t('travel.basicData.warehouseIn')"
v-model="data.warehouseInFk"
:options="agenciesOptions"
option-value="id"
option-label="name"
map-options
hide-selected
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox
:label="t('travel.basicData.delivered')"
v-model="data.isDelivered"
/>
</div>
<div class="col">
<QCheckbox
:label="t('travel.basicData.received')"
v-model="data.isReceived"
/>
</div>
</VnRow>
</template>
</FormModel>
</template>

1
src/pages/Travel/Card/TravelCard.vue
View File

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

51
src/pages/Travel/Card/TravelDescriptor.vue
View File

@ -2,10 +2,13 @@
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate } from 'src/filters';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
import useCardDescription from 'src/composables/useCardDescription';
import { toDate } from 'src/filters';
const $props = defineProps({
id: {
@ -28,6 +31,7 @@ const filter = {
'warehouseInFk',
'warehouseOutFk',
'cargoSupplierFk',
'agencyModeFk',
],
include: [
{
@ -66,6 +70,25 @@ const setData = (entity) => {
@on-fetch="setData"
data-key="travelData"
>
<template #header-extra-action>
<QBtn
round
flat
dense
size="md"
icon="local_airport"
color="white"
class="link"
:to="{ name: 'TravelList' }"
>
<QTooltip>
{{ t('Go to module index') }}
</QTooltip>
</QBtn>
</template>
<template #menu="{ entity }">
<TravelDescriptorMenuItems :travel="entity" />
</template>
<template #body="{ entity }">
<VnLv :label="t('globals.wareHouseIn')" :value="entity.warehouseIn.name" />
<VnLv :label="t('globals.wareHouseOut')" :value="entity.warehouseOut.name" />
@ -73,8 +96,32 @@ const setData = (entity) => {
<VnLv :label="t('globals.landed')" :value="toDate(entity.landed)" />
<VnLv :label="t('globals.totalEntries')" :value="entity.totalEntries" />
</template>
<template #actions="{ entity }">
<QCardActions>
<QBtn
:to="{
name: 'TravelList',
query: {
params: JSON.stringify({
agencyModeFk: entity.agencyModeFk,
}),
},
}"
size="md"
icon="local_airport"
color="primary"
>
<QTooltip>{{ t('All travels with current agency') }}</QTooltip>
</QBtn>
</QCardActions>
</template>
</CardDescriptor>
</template>
<i18n>
<i18n>
es:
Go to module index: Ir al índice del módulo
The travel will be deleted: El envío será eliminado
Do you want to delete this travel?: ¿Quieres eliminar este envío?
All travels with current agency: Todos los envíos con la agencia actual
</i18n>

108
src/pages/Travel/Card/TravelDescriptorMenuItems.vue Normal file
View File

@ -0,0 +1,108 @@
<script setup>
import { computed } from 'vue';
import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnConfirm from 'components/ui/VnConfirm.vue';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
import { useRole } from 'src/composables/useRole';
const $props = defineProps({
travel: {
type: Object,
default: () => {},
},
});
const { t } = useI18n();
const router = useRouter();
const quasar = useQuasar();
const { notify } = useNotify();
const role = useRole();
const redirectToCreateView = (queryParams) => {
router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
};
const cloneTravel = () => {
const stringifiedTravelData = JSON.stringify($props.travel);
redirectToCreateView(stringifiedTravelData);
};
const cloneTravelWithEntries = () => {
try {
axios.post(`Travels/${$props.travel.id}/cloneWithEntries`);
notify('globals.dataSaved', 'positive');
} catch (err) {
console.err('Error cloning travel with entries');
}
};
const isBuyer = computed(() => {
return role.hasAny(['buyer']);
});
const openDeleteEntryDialog = (id) => {
quasar
.dialog({
component: VnConfirm,
componentProps: {
title: t('The travel will be deleted'),
message: t('Do you want to delete this travel?'),
},
})
.onOk(async () => {
await deleteTravel(id);
});
};
const deleteTravel = async (id) => {
try {
await axios.delete(`Travels/${id}`);
router.push({ name: 'TravelList' });
notify('globals.dataDeleted', 'positive');
} catch (err) {
console.error('Error deleting travel');
}
};
</script>
<template>
<QItem v-ripple clickable @click="cloneTravel(travel)">
<QItemSection>{{ t('travel.summary.cloneShipping') }}</QItemSection>
</QItem>
<QItem v-ripple clickable @click="cloneTravelWithEntries()">
<QItemSection>
{{ t('travel.summary.CloneTravelAndEntries') }}
</QItemSection>
</QItem>
<QItem
v-if="isBuyer && travel.totalEntries === 0"
v-ripple
clickable
@click="openDeleteEntryDialog(travel.id)"
>
<QItemSection>
{{ t('travel.summary.deleteTravel') }}
</QItemSection>
</QItem>
<QItem v-ripple clickable>
<QItemSection>
<RouterLink
:to="{ name: 'EntryCreate', query: { travelFk: travel.id } }"
class="color-vn-text"
>
{{ t('travel.summary.AddEntry') }}
</RouterLink>
</QItemSection>
</QItem>
</template>
<i18n>
es:
The travel will be deleted: El envío será eliminado
Do you want to delete this travel?: ¿Quieres eliminar este envío?
</i18n>

6
src/pages/Travel/Card/TravelLog.vue Normal file
View File

@ -0,0 +1,6 @@
<script setup>
import VnLog from 'src/components/common/VnLog.vue';
</script>
<template>
<VnLog model="Entry" url="/TravelLogs"></VnLog>
</template>

346
src/pages/Travel/Card/TravelSummary.vue
View File

@ -1,22 +1,20 @@
<script setup>
import { onMounted, ref, computed, onUpdated } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { QCheckbox, QIcon } from 'quasar';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import FetchData from 'src/components/FetchData.vue';
import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
import travelService from 'src/services/travel.service';
import { toDate, toCurrency } from 'src/filters';
import { getUrl } from 'src/composables/getUrl';
import axios from 'axios';
onUpdated(() => summaryRef.value.fetch());
const route = useRoute();
const { t } = useI18n();
const $props = defineProps({
id: {
type: Number,
@ -25,115 +23,50 @@ const $props = defineProps({
},
});
const router = useRouter();
const route = useRoute();
const { t } = useI18n();
const entityId = computed(() => $props.id || route.params.id);
const entries = ref([]);
const summaryRef = ref();
const travel = ref();
const travelUrl = ref();
const travel = ref();
const entries = ref([]);
const thermographs = ref([]);
const warehouses = ref([]);
onMounted(async () => {
travelUrl.value = (await getUrl('travel/')) + entityId.value;
});
const cloneTravel = () => {
const stringifiedTravelData = JSON.stringify(travel.value);
redirectToCreateView(stringifiedTravelData);
};
const cloneTravelWithEntries = () => {
try {
axios.post(`Travels/${$props.id}/cloneWithEntries`);
} catch (err) {
console.err('Error cloning travel with entries');
}
};
const headerMenuOptions = [
{ name: t('travel.summary.cloneShipping'), action: cloneTravel },
{ name: t('travel.summary.CloneTravelAndEntries'), action: cloneTravelWithEntries },
{ name: t('travel.summary.AddEntry'), action: null },
];
const tableColumnComponents = {
isConfirmed: {
component: () => QCheckbox,
props: (prop) => ({
disable: true,
'model-value': Boolean(prop.value),
}),
},
id: {
component: () => 'span',
props: () => {},
event: () => openEntryDescriptor(),
},
supplierName: {
component: () => 'span',
props: () => {},
event: () => {},
},
reference: {
component: () => 'span',
props: () => {},
event: () => {},
},
freightValue: {
component: () => 'span',
props: () => {},
event: () => {},
},
packageValue: {
component: () => 'span',
props: () => {},
event: () => {},
},
cc: {
component: () => 'span',
props: () => {},
event: () => {},
},
pallet: {
component: () => 'span',
props: () => {},
event: () => {},
},
m3: {
component: () => 'span',
props: () => {},
event: () => {},
},
observation: {
component: (props) => (props.value ? QIcon : null),
props: () => ({ name: 'insert_drive_file', color: 'primary', size: '25px' }),
},
};
const entriesTableColumns = computed(() => {
return [
{
label: t('travel.summary.confirmed'),
field: 'isConfirmed',
name: 'isConfirmed',
align: 'left',
align: 'center',
showValue: false,
},
{
label: t('travel.summary.entryId'),
field: 'id',
name: 'id',
align: 'left',
align: 'center',
showValue: false,
},
{
label: t('supplier.pageTitles.supplier'),
field: 'supplierName',
name: 'supplierName',
align: 'left',
showValue: true,
},
{
label: t('globals.reference'),
field: 'reference',
name: 'reference',
align: 'left',
showValue: true,
},
{
label: t('travel.summary.freight'),
@ -143,6 +76,7 @@ const entriesTableColumns = computed(() => {
format: (val) => {
return toCurrency(val);
},
showValue: true,
},
{
label: t('travel.summary.package'),
@ -152,16 +86,62 @@ const entriesTableColumns = computed(() => {
format: (val) => {
return toCurrency(val);
},
showValue: true,
},
{ label: 'CC', field: 'cc', name: 'cc', align: 'left' },
{ label: 'Pallet', field: 'pallet', name: 'pallet', align: 'left' },
{ label: 'm³', field: 'm3', name: 'm3', align: 'left' },
{ label: 'CC', field: 'cc', name: 'cc', align: 'left', showValue: true },
{
label: 'Pallet',
field: 'pallet',
name: 'pallet',
align: 'left',
showValue: true,
},
{ label: 'm³', field: 'm3', name: 'm3', align: 'left', showValue: true },
{
label: '',
field: 'observation',
name: 'observation',
align: 'left',
toolTip: 'Observation three',
showValue: false,
},
];
});
const thermographsTableColumns = computed(() => {
return [
{
label: t('travel.thermographs.code'),
field: 'thermographFk',
name: 'thermographFk',
align: 'left',
},
{
label: t('travel.thermographs.temperature'),
field: 'temperatureFk',
name: 'temperatureFk',
align: 'left',
},
{
label: t('travel.thermographs.state'),
field: 'result',
name: 'result',
align: 'left',
},
{
label: t('travel.thermographs.destination'),
field: 'warehouseFk',
name: 'destination',
align: 'left',
format: (val) =>
warehouses.value.find((warehouse) => warehouse.id === val).name,
},
{
label: t('travel.thermographs.created'),
field: 'created',
name: 'created',
align: 'left',
format: (val) => toDate(val),
},
];
});
@ -171,22 +151,79 @@ const entriesTableRows = computed(() => {
return entries.value;
});
async function setTravelData(data) {
if (data) {
travel.value = data;
const entriesResponse = await travelService.getTravelEntries(travel.value.id);
if (entriesResponse.data) entries.value = entriesResponse.data;
}
}
const entriesTotalHb = computed(() => {
return entriesTableRows.value.reduce((acc, { hb }) => acc + hb, 0);
});
const redirectToCreateView = (queryParams) => {
router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
const entriesTotalFreight = computed(() => {
return toCurrency(
entriesTableRows.value.reduce((acc, { freightValue }) => acc + freightValue, 0)
);
});
const entriesTotalCc = computed(() => {
return entriesTableRows.value.reduce((acc, { cc }) => acc + cc, 0);
});
const entriesTotalPallet = computed(() => {
return entriesTableRows.value.reduce((acc, { pallet }) => acc + pallet, 0);
});
const entriesTotalM3 = computed(() => {
return entriesTableRows.value.reduce((acc, { m3 }) => acc + m3, 0);
});
const getTravelEntries = async (id) => {
try {
const { data } = await axios.get(`Travels/${id}/getEntries`);
entries.value = data;
} catch (err) {
console.error('Error fetching travel entries');
}
};
const openEntryDescriptor = () => {};
const getTravelThermographs = async (id) => {
try {
const filter = {
include: {
relation: 'warehouse',
scope: {
fields: ['id', 'name'],
},
},
where: { travelFk: id },
};
const { data } = await axios.get('TravelThermographs', {
params: { filter: JSON.parse(JSON.stringify(filter)) },
});
thermographs.value = data;
} catch (err) {
console.error('Error fetching travel thermographs');
}
};
async function setTravelData(travelData) {
try {
if (travelData) {
travel.value = travelData;
await getTravelEntries(travel.value.id);
await getTravelThermographs(travel.value.id);
}
} catch (err) {
console.error(`Error setting travel data`, err);
}
}
</script>
<template>
<FetchData
url="Warehouses"
:filter="{ fields: ['id', 'name'] }"
order="name"
@on-fetch="(data) => (warehouses = data)"
auto-load
/>
<CardSummary
ref="summaryRef"
:url="`Travels/${entityId}/getTravel`"
@ -207,10 +244,8 @@ const openEntryDescriptor = () => {};
{{ t('components.cardDescriptor.moreOptions') }}
</QTooltip>
<QMenu>
<QList dense v-for="option in headerMenuOptions" :key="option">
<QItem v-ripple clickable @click="option.action">
{{ option.name }}
</QItem>
<QList>
<TravelDescriptorMenuItems :travel="travel" />
</QList>
</QMenu>
</QBtn>
@ -225,11 +260,10 @@ const openEntryDescriptor = () => {};
/>
<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>
@ -242,11 +276,10 @@ const openEntryDescriptor = () => {};
/>
<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>
@ -258,10 +291,9 @@ const openEntryDescriptor = () => {};
<VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
</QCard>
<QCard class="full-width" v-if="entriesTableRows.length > 0">
<a class="header" :href="travelUrl + 'entry'">
<span class="header">
{{ t('travel.summary.entries') }}
<QIcon name="open_in_new" color="primary" />
</a>
</span>
<QTable
:rows="entriesTableRows"
:columns="entriesTableColumns"
@ -269,35 +301,71 @@ const openEntryDescriptor = () => {};
row-key="id"
class="full-width q-mt-md"
>
<template #body-cell="props">
<QTd :props="props">
<component
:is="
tableColumnComponents[props.col.name].component(props)
"
v-bind="
tableColumnComponents[props.col.name].props(props)
"
@click="
tableColumnComponents[props.col.name].event(props)
"
class="col-content"
>
<template
v-if="
props.col.name !== 'observation' &&
props.col.name !== 'isConfirmed'
"
>{{ props.value }}</template
>
<QTooltip v-if="props.col.toolTip">{{
props.col.toolTip
}}</QTooltip>
</component>
<template #header="props">
<QTr :props="props" class="bg">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
{{ t(col.label) }}
</QTh>
</QTr>
</template>
<template #body-cell-isConfirmed="{ col, value }">
<QTd>
<QIcon
v-if="col.name === 'isConfirmed'"
:name="value ? 'check' : 'close'"
:color="value ? 'positive' : 'negative'"
size="sm"
/>
</QTd>
</template>
<template #body-cell-id="{ col, value }">
<QTd>
<QBtn v-if="col.name === 'id'" flat color="blue" dense>
{{ value }}
<EntryDescriptorProxy :id="value" />
</QBtn>
</QTd>
</template>
<template #body-cell-observation="{ value }">
<QTd>
<QIcon name="insert_drive_file" color="primary" size="24px">
<QTooltip>{{ value }}</QTooltip>
</QIcon>
</QTd>
</template>
<template #bottom-row>
<QTd></QTd>
<QTd></QTd>
<QTd></QTd>
<QTd></QTd>
<QTd class="text-bold">{{ entriesTotalHb }}</QTd>
<QTd class="text-bold">{{ entriesTotalFreight }}</QTd>
<QTd class="text-bold">{{ entriesTotalCc }}</QTd>
<QTd class="text-bold">{{ entriesTotalPallet }}</QTd>
<QTd class="text-bold">{{ entriesTotalM3 }}</QTd>
</template>
</QTable>
</QCard>
<QCard class="full-width" v-if="thermographs.length > 0">
<RouterLink
class="header"
:to="{
name: 'TravelThermographsIndex',
params: { id: travel.id },
}"
>
{{ t('travel.summary.thermographs') }}
<QIcon name="open_in_new" color="primary" />
</RouterLink>
<QTable
:rows="thermographs"
:columns="thermographsTableColumns"
hide-bottom
row-key="id"
class="full-width q-mt-md"
/>
</QCard>
</template>
</CardSummary>
</template>

209
src/pages/Travel/Card/TravelThermographs.vue Normal file
View File

@ -0,0 +1,209 @@
<script setup>
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';
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 warehouses = ref([]);
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',
format: (val) =>
warehouses.value.find((warehouse) => warehouse.id === val).name,
},
{
label: t('travel.thermographs.created'),
field: 'created',
name: 'created',
align: 'left',
format: (val) => toDate(val),
},
{
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, { 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) => {
await axios.delete('Travels/deleteThermograph', { 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"
:filter="thermographFilter"
:params="{ travelFk: route.params.id }"
auto-load
>
<template #body="{ rows }">
<QTable
:rows="rows"
:columns="TableColumns"
:no-data-label="t('No results')"
:rows-per-page-options="[0]"
row-key="id"
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="{ row }">
<QTd auto-width>
<QIcon
name="edit"
color="primary"
size="sm"
class="cursor-pointer"
@click="redirectToThermographForm('edit', row)"
>
<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?
No results: Sin resultados
</i18n>

325
src/pages/Travel/Card/TravelThermographsForm.vue Normal file
View File

@ -0,0 +1,325 @@
<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(async () => {
await getAllowedFileTypes();
if (props.viewAction === 'create') {
setCreateDefaultParams();
} else {
await setEditDefaultParams();
}
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 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();
};
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 = 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>
<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"
:disable="viewAction === 'edit'"
/>
</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 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
: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>

12
src/pages/Travel/ExtraCommunity.vue
View File

@ -16,7 +16,7 @@ import { toCurrency } from 'src/filters';
import { useArrayData } from 'composables/useArrayData';
import { toDate } from 'src/filters';
import { usePrintService } from 'composables/usePrintService';
import travelService from 'src/services/travel.service';
import axios from 'axios';
const router = useRouter();
const stateStore = useStateStore();
@ -222,9 +222,13 @@ const openReportPdf = () => {
};
const saveFieldValue = async (val, field, index) => {
const id = rows.value[index].id;
const params = { [field]: val };
await travelService.updateTravel(id, params);
try {
const id = rows.value[index].id;
const params = { [field]: val };
await axios.patch(`Travels/${id}`, params);
} catch (err) {
console.error('Error updating travel');
}
};
const navigateToTravelId = (id) => {

67
src/pages/Travel/TravelCreate.vue
View File

@ -1,7 +1,7 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { reactive, ref, onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@ -9,10 +9,11 @@ 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();
const router = useRouter();
const newTravelForm = reactive({
ref: null,
@ -43,6 +44,10 @@ onBeforeMount(() => {
}
}
});
const redirectToTravelBasicData = (_, { id }) => {
router.push({ name: 'TravelBasicData', params: { id } });
};
</script>
<template>
@ -63,6 +68,7 @@ onBeforeMount(() => {
model="travel"
:form-initial-data="newTravelForm"
:observe-form-changes="viewAction === 'create'"
@on-data-saved="redirectToTravelBasicData"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
@ -82,62 +88,13 @@ onBeforeMount(() => {
</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">

26
src/pages/Travel/TravelList.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
@ -9,6 +9,7 @@ import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
import TravelFilter from './TravelFilter.vue';
import FetchData from 'components/FetchData.vue';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters/index';
@ -18,6 +19,8 @@ const quasar = useQuasar();
const { t } = useI18n();
const stateStore = useStateStore();
const warehouses = ref([]);
const navigateToTravelId = (id) => {
router.push({ path: `/travel/${id}` });
};
@ -35,6 +38,10 @@ const redirectCreateEntryView = (travelData) => {
router.push({ name: 'EntryCreate', query: { travelFk: travelData.id } });
};
const getWarehouseName = (id) => {
return warehouses.value.find((warehouse) => warehouse.id === id).name;
};
const viewSummary = (id) => {
quasar.dialog({
component: TravelSummaryDialog,
@ -50,6 +57,13 @@ onMounted(async () => {
</script>
<template>
<FetchData
url="Warehouses"
:filter="{ fields: ['id', 'name'] }"
order="name"
@on-fetch="(data) => (warehouses = data)"
auto-load
/>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<TravelFilter data-key="TravelList" />
@ -77,8 +91,9 @@ onMounted(async () => {
:value="row.agencyModeName"
/>
<VnLv
v-if="warehouses.length > 0"
:label="t('globals.wareHouseOut')"
:value="row.warehouseOutFk"
:value="getWarehouseName(row.warehouseOutFk)"
/>
<VnLv
:label="t('globals.shipped')"
@ -89,10 +104,10 @@ onMounted(async () => {
:value="toDate(row.landed)"
/>
<VnLv
v-if="warehouses.length > 0"
:label="t('globals.wareHouseIn')"
:value="row.warehouseInFk"
:value="getWarehouseName(row.warehouseInFk)"
/>
<VnLv
:label="t('globals.totalEntries')"
:value="row.totalEntries"
@ -143,9 +158,6 @@ onMounted(async () => {
en:
addEntry: Add entry
es:
addEntry: Añadir entrada
</i18n>

39
src/router/modules/travel.js
View File

@ -69,9 +69,8 @@ export default {
meta: {
title: 'basicData',
icon: 'vn:settings',
// roles: [],
},
// component: () => import(),
component: () => import('src/pages/Travel/Card/TravelBasicData.vue'),
},
{
name: 'TravelHistory',
@ -79,19 +78,45 @@ export default {
meta: {
title: 'history',
icon: 'history',
// roles: [],
},
// component: () => import(),
component: () => import('src/pages/Travel/Card/TravelLog.vue'),
},
{
name: 'TravelThermographs',
path: 'thermographs',
path: 'thermographs/:thermographId?',
meta: {
title: 'thermographs',
icon: 'vn:thermometer',
// roles: [],
},
// component: () => import(),
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'
),
},
],
},
],
},

23
src/services/travel.service.js
View File

@ -1,23 +0,0 @@
import axios from 'axios';
const travelService = {
getTravelEntries: async (param) => {
try {
return await axios.get(`Travels/${param}/getEntries`);
} catch (err) {
console.error(`Error fetching travel entries`, err);
return err.response;
}
},
updateTravel: async (id, params) => {
try {
return await axios.patch(`Travels/${id}`, params);
} catch (err) {
console.error(`Error updating travel`, err);
return err.response;
}
},
};
export default travelService;