64 lines
1.9 KiB
Vue
64 lines
1.9 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
|
import VnLv from 'components/ui/VnLv.vue';
|
|
import useCardDescription from 'composables/useCardDescription';
|
|
import { dashIfEmpty, toDateHourMin } from 'src/filters';
|
|
import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
|
|
import RoadmapDescriptorMenu from 'pages/Route/Roadmap/RoadmapDescriptorMenu.vue';
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
const entityId = computed(() => {
|
|
return $props.id || route.params.id;
|
|
});
|
|
|
|
const filter = { include: [{ relation: 'supplier' }] };
|
|
const data = ref(useCardDescription());
|
|
const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
|
|
</script>
|
|
|
|
<template>
|
|
<CardDescriptor
|
|
module="Roadmap"
|
|
:url="`Roadmaps/${entityId}`"
|
|
:filter="filter"
|
|
:title="data.title"
|
|
:subtitle="data.subtitle"
|
|
data-key="Roadmap"
|
|
@on-fetch="setData"
|
|
>
|
|
<template #body="{ entity }">
|
|
<VnLv :label="t('Roadmap')" :value="entity?.name" />
|
|
<VnLv :label="t('ETD')" :value="toDateHourMin(entity?.etd)" />
|
|
<VnLv :label="t('Carrier')">
|
|
<template #value>
|
|
<span class="link" v-if="entity?.supplier?.id">
|
|
{{ dashIfEmpty(entity?.supplier?.nickname) }}
|
|
<SupplierDescriptorProxy :id="entity?.supplier?.id" />
|
|
</span>
|
|
</template>
|
|
</VnLv>
|
|
</template>
|
|
<template #menu="{ entity }">
|
|
<RoadmapDescriptorMenu :route="entity" />
|
|
</template>
|
|
</CardDescriptor>
|
|
</template>
|
|
<i18n>
|
|
es:
|
|
Roadmap: Troncal
|
|
Carrier: Transportista
|
|
</i18n>
|