82 lines
2.3 KiB
Vue
82 lines
2.3 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
|
import useCardDescription from 'composables/useCardDescription';
|
|
import VnLv from 'components/ui/VnLv.vue';
|
|
import { dashIfEmpty, toDate } from 'src/filters';
|
|
import RouteDescriptorMenu from 'pages/Route/Card/RouteDescriptorMenu.vue';
|
|
import filter from './RouteFilter.js';
|
|
import axios from 'axios';
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const route = useRoute();
|
|
const zone = ref();
|
|
const zoneId = ref();
|
|
const entityId = computed(() => {
|
|
return $props.id || route.params.id;
|
|
});
|
|
const getZone = async () => {
|
|
const filter = {
|
|
where: { routeFk: $props.id ? $props.id : route.params.id },
|
|
};
|
|
const { data } = await axios.get('Tickets/filter', {
|
|
params: {
|
|
filter: JSON.stringify(filter),
|
|
},
|
|
});
|
|
|
|
if (!data.length) return;
|
|
const firstRecord = data[0];
|
|
|
|
zoneId.value = firstRecord.zoneFk;
|
|
const { data: zoneData } = await axios.get(`Zones/${zoneId.value}`);
|
|
zone.value = zoneData.name;
|
|
};
|
|
const data = ref(useCardDescription());
|
|
const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
|
|
onMounted(async () => {
|
|
getZone();
|
|
});
|
|
</script>
|
|
<template>
|
|
<CardDescriptor
|
|
:url="`Routes/${entityId}`"
|
|
:filter="filter"
|
|
:title="null"
|
|
data-key="Route"
|
|
width="lg-width"
|
|
>
|
|
<template #body="{ entity }">
|
|
<VnLv :label="$t('Date')" :value="toDate(entity?.dated)" />
|
|
<VnLv :label="$t('Agency')" :value="entity?.agencyMode?.name" />
|
|
<VnLv :label="$t('Zone')" :value="zone" />
|
|
<VnLv
|
|
:label="$t('Volume')"
|
|
:value="`${dashIfEmpty(entity?.m3)} / ${dashIfEmpty(
|
|
entity?.vehicle?.m3,
|
|
)} m³`"
|
|
/>
|
|
<VnLv :label="$t('Description')" :value="entity?.description" />
|
|
</template>
|
|
<template #menu="{ entity }">
|
|
<RouteDescriptorMenu :route="entity" />
|
|
</template>
|
|
</CardDescriptor>
|
|
</template>
|
|
<i18n>
|
|
es:
|
|
Date: Fecha
|
|
Agency: Agencia
|
|
Zone: Zona
|
|
Volume: Volumen
|
|
Description: Descripción
|
|
</i18n>
|