salix-front/src/pages/Zone/ZoneList.vue

<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { computed, ref } from 'vue';
import axios from 'axios';

import { toCurrency } from 'src/filters';
import { toTimeFormat } from 'src/filters/date';
import { useVnConfirm } from 'composables/useVnConfirm';
import useNotify from 'src/composables/useNotify.js';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputTime from 'src/components/common/VnInputTime.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import ZoneFilterPanel from './ZoneFilterPanel.vue';
import ZoneSearchbar from './Card/ZoneSearchbar.vue';
import FetchData from 'src/components/FetchData.vue';

const { t } = useI18n();
const router = useRouter();
const { notify } = useNotify();
const { viewSummary } = useSummaryDialog();
const { openConfirmationModal } = useVnConfirm();
const tableRef = ref();
const warehouseOptions = ref([]);
const validAddresses = ref([]);

const tableFilter = {
    include: [
        {
            relation: 'agencyMode',
            scope: {
                fields: ['id', 'name'],
            },
        },
        {
            relation: 'address',
            scope: {
                fields: ['id', 'nickname', 'provinceFk', 'postalCode'],
                include: [
                    {
                        relation: 'province',
                        scope: {
                            fields: ['id', 'name'],
                        },
                    },
                    {
                        relation: 'postcode',
                        scope: {
                            fields: ['code', 'townFk'],
                            include: {
                                relation: 'town',
                                scope: {
                                    fields: ['id', 'name'],
                                },
                            },
                        },
                    },
                ],
            },
        },
    ],
};

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('list.id'),
        chip: {
            condition: () => true,
        },
        isId: true,
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        name: 'name',
        label: t('list.name'),
        isTitle: true,
        create: true,
        columnFilter: {
            optionLabel: 'name',
            optionValue: 'id',
        },
    },
    {
        align: 'left',
        name: 'agencyModeFk',
        label: t('list.agency'),
        cardVisible: true,
        columnFilter: {
            component: 'select',
            inWhere: true,
            attrs: {
                url: 'AgencyModes',
                fields: ['id', 'name'],
            },
        },
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row?.agencyMode?.name),
    },
    {
        align: 'left',
        name: 'price',
        label: t('list.price'),
        cardVisible: true,
        format: (row) => toCurrency(row.price),
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        name: 'hour',
        label: t('list.close'),
        cardVisible: true,
        format: (row) => toTimeFormat(row.hour),
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'addressFk',
        label: t('list.addressFk'),
        cardVisible: true,
        columnFilter: false,
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, ZoneSummary),
                isPrimary: true,
            },
            {
                title: t('globals.clone'),
                icon: 'vn:clone',
                action: (row) => handleClone(row.id),
                isPrimary: true,
            },
        ],
    },
]);

async function clone(id) {
    const { data } = await axios.post(`Zones/${id}/clone`);
    notify(t('globals.dataSaved'), 'positive');
    router.push({ name: 'ZoneBasicData', params: { id: data.id } });
}
const handleClone = (id) => {
    openConfirmationModal(
        t('list.confirmCloneTitle'),
        t('list.confirmCloneSubtitle'),
        () => clone(id)
    );
};

function showValidAddresses(row) {
    if (row.addressFk) {
        const isValid = validAddresses.value.some(
            (address) => address.addressFk === row.addressFk
        );
        if (isValid)
            return `${row.address?.nickname},
            ${row.address?.postcode?.town?.name} (${row.address?.province?.name})`;
        else return '-';
    }
    return '-';
}
</script>

<template>
    <FetchData
        url="RoadmapAddresses"
        auto-load
        @on-fetch="(data) => (validAddresses = data)"
    />
    <ZoneSearchbar />
    <RightMenu>
        <template #right-panel>
            <ZoneFilterPanel data-key="ZonesList" />
        </template>
    </RightMenu>
    <VnTable
        ref="tableRef"
        data-key="ZonesList"
        url="Zones"
        :create="{
            urlCreate: 'Zones',
            title: t('list.createZone'),
            onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
            formInitialData: {},
        }"
        :user-filter="tableFilter"
        :columns="columns"
        redirect="zone"
        :right-search="false"
    >
        <template #column-addressFk="{ row }">
            {{ showValidAddresses(row) }}
        </template>
        <template #more-create-dialog="{ data }">
            <VnSelect
                url="AgencyModes"
                v-model="data.agencyModeFk"
                option-value="id"
                option-label="name"
                :label="t('list.agency')"
            />
            <VnInput
                v-model="data.price"
                :label="t('list.price')"
                min="0"
                type="number"
                required="true"
            />
            <VnInput
                v-model="data.bonus"
                :label="t('zone.bonus')"
                min="0"
                type="number"
            />
            <VnInput
                v-model="data.travelingDays"
                :label="t('zone.travelingDays')"
                type="number"
                min="0"
            />
            <VnInputTime v-model="data.hour" :label="t('list.close')" />
            <VnSelect
                url="Warehouses"
                v-model="data.warehouseFK"
                option-value="id"
                option-label="name"
                :label="t('list.warehouse')"
                :options="warehouseOptions"
            />
            <QCheckbox
                v-model="data.isVolumetric"
                :label="t('list.isVolumetric')"
                :toggle-indeterminate="false"
            />
        </template>
    </VnTable>
</template>

<i18n>
es:
    Search zone: Buscar zona
    You can search zones by id or name: Puedes buscar zonas por id o nombre
</i18n>