salix-front/src/pages/Route/Vehicle/VehicleList.vue

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import VnTable from 'components/VnTable/VnTable.vue';
import FetchData from 'src/components/FetchData.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VehicleSummary from 'src/pages/Route/Vehicle/Card/VehicleSummary.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSection from 'src/components/common/VnSection.vue';

const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const warehouses = ref([]);
const companies = ref([]);
const countries = ref([]);
const vehicleStates = ref([]);
const vehicleTypes = ref([]);

const columns = computed(() => [
    {
        name: 'isActive',
        columnFilter: false,
        align: 'center',
    },
    {
        name: 'id',
        label: t('globals.id'),
        isId: true,
        chip: {
            condition: () => true,
        },
    },
    {
        name: 'description',
        label: t('globals.description'),
    },
    {
        name: 'tradeMark',
        label: t('vehicle.tradeMark'),
        cardVisible: true,
    },
    {
        name: 'numberPlate',
        label: t('vehicle.numberPlate'),
        isTitle: true,
    },
    {
        name: 'vehicleTypeFk',
        label: t('globals.type'),
        format: (row) => row.type,
        columnFilter: {
            component: 'select',
            name: 'vehicleTypeFk',
            options: vehicleTypes.value,
        },
        cardVisible: true,
    },
    {
        name: 'vehicleStateFk',
        label: t('globals.state'),
        columnFilter: {
            component: 'select',
            name: 'vehicleStateFk',
            optionLabel: 'state',
            options: vehicleStates.value,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.state),
    },
    {
        name: 'chassis',
        label: t('vehicle.chassis'),
    },
    {
        name: 'leasing',
        label: t('vehicle.leasing'),
    },
    {
        name: 'warehouseFk',
        label: t('globals.warehouse'),
        format: (row, dashIfEmpty) => dashIfEmpty(row.warehouse),
        columnFilter: {
            component: 'select',
            name: 'warehouseFk',
            options: warehouses.value,
        },
        cardVisible: true,
    },
    {
        name: 'companyFk',
        label: t('globals.company'),
        format: (row, dashIfEmpty) => dashIfEmpty(row.company),
        columnFilter: {
            component: 'select',
            name: 'companyFk',
            optionLabel: 'code',
            options: companies.value,
        },
    },
    {
        name: 'countryCodeFk',
        label: t('globals.country'),
        columnFilter: {
            component: 'select',
            name: 'countryCodeFk',
            optionValue: 'code',
            optionLabel: 'code',
            options: countries.value,
        },
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.openSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, VehicleSummary),
            },
        ],
    },
]);
</script>
<template>
    <FetchData
        url="Warehouses"
        :filter="{ fields: ['id', 'name'] }"
        @on-fetch="(data) => (warehouses = data)"
        auto-load
    />
    <FetchData
        url="Companies"
        :filter="{ fields: ['id', 'code'] }"
        @on-fetch="(data) => (companies = data)"
        auto-load
    />
    <FetchData
        url="Countries"
        :filter="{ fields: ['name', 'code'] }"
        @on-fetch="(data) => (countries = data)"
        auto-load
    />
    <FetchData
        url="VehicleStates"
        :filter="{ fields: ['id', 'state'] }"
        @on-fetch="(data) => (vehicleStates = data)"
        auto-load
    />
    <FetchData
        url="VehicleTypes"
        :filter="{ fields: ['id', 'name'] }"
        @on-fetch="(data) => (vehicleTypes = data)"
        auto-load
    />
    <VnSection
        data-key="VehicleList"
        :columns="columns"
        prefix="vehicle"
        :array-data-props="{
            url: 'Vehicles/filter',
        }"
    >
        <template #body>
            <VnTable
                ref="tableRef"
                data-key="VehicleList"
                :columns="columns"
                redirect="route/vehicle"
                :create="{
                    urlCreate: 'Vehicles',
                    title: t('vehicle.create'),
                    onDataSaved: ({ id }) => $refs.tableRef.redirect(id),
                    formInitialData: { isActive: true, isKmTruckRate: false },
                }"
                :use-model="true"
                :right-search="false"
            >
                <template #column-isActive="{ row }">
                    <span>
                        <QIcon
                            v-if="!row.isActive"
                            name="vn:inactive-car"
                            color="primary"
                            size="xs"
                        >
                            <QTooltip>{{ $t('globals.inactive') }}</QTooltip>
                        </QIcon>
                    </span>
                </template>
                <template #more-create-dialog="{ data }">
                    <VnInput
                        v-model="data.numberPlate"
                        :label="$t('vehicle.numberPlate')"
                        :uppercase="true"
                    />
                    <VnInput v-model="data.tradeMark" :label="$t('vehicle.tradeMark')" />
                    <VnInput v-model="data.model" :label="$t('globals.model')" />
                    <VnSelect
                        v-model="data.vehicleTypeFk"
                        :label="$t('globals.type')"
                        :options="vehicleTypes"
                    />
                    <VnSelect
                        v-model="data.warehouseFk"
                        :label="$t('globals.warehouse')"
                        :options="warehouses"
                    />
                    <VnSelect
                        v-model="data.countryCodeFk"
                        :label="$t('globals.country')"
                        option-value="code"
                        option-label="name"
                        :options="countries"
                    />
                    <VnInput
                        v-model="data.description"
                        :label="$t('globals.description')"
                    />
                    <QCheckbox to v-model="data.isActive" :label="$t('globals.active')" />
                </template>
            </VnTable>
        </template>
    </VnSection>
</template>