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

<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toHour } from 'src/filters';
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 VnSection from 'src/components/common/VnSection.vue';

const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const tableRef = ref([]);
const dataKey = 'RouteList';
const routeFilter = {
    include: [
        {
            relation: 'workers',
            scope: {
                fields: ['id', 'firstName'],
            },
        },
    ],
};
const columns = computed(() => [
    {
        align: 'right',
        isId: true,
        name: 'id',
        label: 'Id',
        chip: {
            condition: () => true,
        },
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'workerFk',
        label: t('route.Worker'),
        component: 'select',
        attrs: {
            url: 'Workers/activeWithInheritedRole',
            fields: ['id', 'name'],
            useLike: false,
            optionFilter: 'firstName',
            find: {
                value: 'workerFk',
                label: 'workerUserName',
            },
        },
        create: true,
        cardVisible: true,
        format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'agencyName',
        label: t('route.Agency'),
        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'agencyModes',
            fields: ['id', 'name'],
            find: {
                value: 'agencyModeFk',
                label: 'agencyName',
            },
        },
        create: true,
        columnClass: 'expand',
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'vehiclePlateNumber',
        label: t('route.Vehicle'),
        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'vehicles',
            fields: ['id', 'numberPlate'],
            optionLabel: 'numberPlate',
            optionFilterValue: 'numberPlate',
            find: {
                value: 'vehicleFk',
                label: 'vehiclePlateNumber',
            },
        },
        create: true,
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'started',
        label: t('route.hourStarted'),
        cardVisible: true,
        columnFilter: false,
        format: (row) => toHour(row.started),
    },
    {
        align: 'left',
        name: 'finished',
        label: t('route.hourFinished'),
        cardVisible: true,
        columnFilter: false,
        format: (row) => toHour(row.started),
    },
    {
        align: 'left',
        name: 'description',
        label: t('route.Description'),
        cardVisible: true,
        isTitle: true,
        create: true,
        field: 'description',
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'isOk',
        label: t('route.Served'),
        component: 'checkbox',
        columnFilter: false,
        columnClass: 'shrink',
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                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
                :data-key
                :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>
            </VnTable>
        </template>
    </VnSection>
</template>