salix-front-mindshore-fork2/src/pages/Route/Roadmap/RoadmapSummary.vue

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { QIcon, useQuasar } from 'quasar';
import { dashIfEmpty, toDateHourMin } from 'src/filters';
import { useStateStore } from 'stores/useStateStore';
import VnLv from 'components/ui/VnLv.vue';
import CardSummary from 'components/ui/CardSummary.vue';
import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
import VnLinkPhone from 'components/ui/VnLinkPhone.vue';
import RoadmapAddStopDialog from 'pages/Route/Roadmap/RoadmapAddStopDialog.vue';

const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});
const route = useRoute();
const stateStore = useStateStore();
const { t } = useI18n();
const quasar = useQuasar();

const summary = ref(null);
const entityId = computed(() => $props.id || route.params.id);
const isDialog = Boolean($props.id);
const hideRightDrawer = () => {
    if (!isDialog) {
        stateStore.rightDrawer = false;
    }
};
onMounted(hideRightDrawer);
onUnmounted(hideRightDrawer);

const columns = ref([
    {
        name: 'address',
        label: t('Address'),
        field: (row) => dashIfEmpty(row?.address?.nickname),
        sortable: true,
        align: 'left',
    },
    {
        name: 'ETA',
        label: t('ETA'),
        field: (row) => toDateHourMin(row?.eta),
        sortable: false,
        align: 'left',
    },
]);
const filter = {
    include: [
        { relation: 'supplier' },
        { relation: 'worker' },
        {
            relation: 'roadmapStop',
            scope: {
                include: [
                    {
                        relation: 'address',
                        scope: {
                            fields: ['nickname'],
                        },
                    },
                ],
            },
        },
    ],
};

const openAddStopDialog = () => {
    quasar
        .dialog({
            component: RoadmapAddStopDialog,
            componentProps: { roadmapFk: entityId.value },
        })
        .onOk(() => summary.value.fetch());
};
</script>

<template>
    <div class="q-pa-md full-width">
        <CardSummary
            data-key="RoadmapSummary"
            ref="summary"
            :url="`Roadmaps/${entityId}`"
            :filter="filter"
        >
            <template #header-left>
                <RouterLink :to="{ name: `RoadmapSummary`, params: { id: entityId } }">
                    <QIcon name="open_in_new" color="white" size="sm" />
                </RouterLink>
            </template>
            <template #header="{ entity }">
                <span>{{ `${entity?.id} - ${entity?.name}` }}</span>
            </template>
            <template #body="{ entity }">
                <QCard class="vn-one">
                    <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>
                    <VnLv :label="t('ETD')" :value="toDateHourMin(entity?.etd)" />
                    <VnLv
                        :label="t('Tractor Plate')"
                        :value="dashIfEmpty(entity?.tractorPlate)"
                    />
                    <VnLv
                        :label="t('Trailer Plate')"
                        :value="dashIfEmpty(entity?.trailerPlate)"
                    />
                </QCard>
                <QCard class="vn-one">
                    <VnLv :label="t('Phone')" :value="dashIfEmpty(entity?.phone)">
                        <template #value>
                            <span>
                                {{ dashIfEmpty(entity?.phone) }}
                                <VnLinkPhone :phone-number="entity?.phone" />
                            </span>
                        </template>
                    </VnLv>
                    <VnLv
                        :label="t('Worker')"
                        :value="
                            entity?.worker?.firstName
                                ? `${entity?.worker?.firstName} ${entity?.worker?.lastName}`
                                : '-'
                        "
                    />
                    <VnLv
                        :label="t('Observations')"
                        :value="dashIfEmpty(entity?.observations)"
                    />
                </QCard>
                <QCard class="vn-max">
                    <div class="flex items-center">
                        <a class="header" :href="`#/route/roadmap/${entityId}/stops`">
                            {{ t('Stops') }}
                            <QIcon name="open_in_new" color="primary">
                                <QTooltip>
                                    {{ t('Go to stops') }}
                                </QTooltip>
                            </QIcon>
                        </a>
                        <QIcon
                            name="add_circle"
                            color="primary"
                            class="q-ml-lg header cursor-pointer"
                            @click.stop="openAddStopDialog"
                        >
                            <QTooltip>
                                {{ t('Add stop') }}
                            </QTooltip>
                        </QIcon>
                    </div>
                    <QTable
                        :columns="columns"
                        :rows="entity?.roadmapStop"
                        :rows-per-page-options="[0]"
                        row-key="id"
                    />
                </QCard>
            </template>
        </CardSummary>
    </div>
</template>
<i18n>
es:
    Carrier: Transportista
    Tractor Plate: Matrícula tractor
    Trailer Plate: Matrícula trailer
    Phone: Teléfono
    Worker: Trabajador
    Observations: Observaciones
    Stops: Paradas
    Address: Dirección
    Go to stops: Ir a paradas
    Add stop: Añadir parada
</i18n>