salix-front/src/pages/Route/RouteList.vue

<script setup>
import { computed, ref, markRaw } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toHour } from 'src/filters';
import { useRouter } from 'vue-router';
import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import AgencyDescriptorProxy from 'src/pages/Route/Agency/Card/AgencyDescriptorProxy.vue';
import VehicleDescriptorProxy from 'src/pages/Route/Vehicle/Card/VehicleDescriptorProxy.vue';
import VnSection from 'src/components/common/VnSection.vue';
import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';

const { t } = useI18n();
const router = useRouter();
const { viewSummary } = useSummaryDialog();
const tableRef = ref([]);
const dataKey = 'RouteList';
const routeFilter = {
    include: [
        {
            relation: 'workers',
            scope: {
                fields: ['id', 'firstName'],
            },
        },
    ],
};

function redirectToTickets(id) {
    router.push({
        name: 'RouteTickets',
        params: { id },
    });
}

const columns = computed(() => [
    {
        align: 'right',
        isId: true,
        name: 'id',
        label: 'Id',
        chip: {
            condition: () => true,
        },
        columnFilter: false,
        width: '25px',
    },
    {
        align: 'left',
        name: 'workerFk',
        label: t('globals.worker'),
        component: markRaw(VnSelectWorker),
        create: true,
        format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
        columnFilter: false,
        cardVisible: true,
        width: '100px',
    },
    {
        label: t('globals.agency'),
        name: 'agencyModeFk',
        component: 'select',
        attrs: {
            url: 'agencyModes',
            fields: ['id', 'name'],
            find: {
                value: 'agencyModeFk',
                label: 'agencyName',
            },
        },
        create: true,
        columnFilter: true,
        cardVisible: true,
        visible: true,
    },
    {
        name: 'vehicleFk',
        label: t('globals.vehicle'),
        component: 'select',
        attrs: {
            url: 'vehicles',
            fields: ['id', 'numberPlate'],
            optionLabel: 'numberPlate',
            optionFilterValue: 'numberPlate',
            find: {
                value: 'vehicleFk',
                label: 'vehiclePlateNumber',
            },
        },
        create: true,
        columnFilter: true,
        cardVisible: true,
        visible: true,
    },
    {
        align: 'center',
        name: 'started',
        label: t('route.hourStarted'),
        cardVisible: true,
        columnFilter: false,
        format: ({ started }) => toHour(started),
        width: '50px',
    },
    {
        align: 'center',
        name: 'finished',
        label: t('route.hourFinished'),
        cardVisible: true,
        columnFilter: false,
        format: ({ finished }) => toHour(finished),
        width: '50px',
    },
    {
        align: 'left',
        name: 'description',
        label: t('globals.description'),
        cardVisible: true,
        isTitle: true,
        create: true,
        field: 'description',
        columnFilter: false,
    },
    {
        name: 'isOk',
        label: t('route.Served'),
        component: 'checkbox',
        columnFilter: false,
        columnClass: 'shrink',
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('globals.pageTitles.tickets'),
                icon: 'vn:ticket',
                action: (row) => redirectToTickets(row?.id),
                isPrimary: true,
            },
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row?.id, RouteSummary),
                isPrimary: true,
            },
        ],
    },
]);
</script>
<template>
    <VnSection
        :data-key
        :columns="columns"
        prefix="route"
        :array-data-props="{
            url: 'Routes/filter',
            userFilter: routeFilter,
        }"
    >
        <template #advanced-menu>
            <RouteFilter :data-key />
        </template>
        <template #body>
            <VnTable
                :with-filters="false"
                :data-key
                ref="tableRef"
                :columns="columns"
                :right-search="false"
                redirect="route"
                :create="{
                    urlCreate: 'Routes',
                    title: t('route.createRoute'),
                    onDataSaved: ({ id }) => tableRef.redirect(id),
                    formInitialData: {},
                }"
                table-height="85vh"
            >
                <template #column-workerFk="{ row }">
                    <span class="link" @click.stop>
                        {{ row?.workerUserName }}
                        <WorkerDescriptorProxy :id="row?.workerFk" v-if="row?.workerFk" />
                    </span>
                </template>
                <template #column-agencyModeFk="{ row }">
                    <span class="link" @click.stop>
                        {{ row?.agencyName }}
                        <AgencyDescriptorProxy
                            :id="row?.agencyModeFk"
                            v-if="row?.agencyModeFk"
                        />
                    </span>
                </template>
                <template #column-vehicleFk="{ row }">
                    <span class="link" @click.stop>
                        {{ row?.vehiclePlateNumber }}
                        <VehicleDescriptorProxy
                            :id="row?.vehicleFk"
                            v-if="row?.vehicleFk"
                        />
                    </span>
                </template>
            </VnTable>
        </template>
    </VnSection>
</template>