salix-front/src/pages/Supplier/SupplierList.vue

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

const { viewSummary } = useSummaryDialog();
const { t } = useI18n();
const tableRef = ref();
const dataKey = 'SupplierList';
const provincesOptions = ref([]);
const columns = computed(() => [
    {
        align: 'left',
        label: t('globals.id'),
        name: 'id',
        isId: true,
        chip: {
            condition: () => true,
        },
    },
    {
        align: 'left',
        label: t('globals.name'),
        name: 'socialName',
        attrs: {
            uppercase: true,
        },
        columnFilter: {
            name: 'search',
            attrs: {
                uppercase: false,
            },
        },
        isTitle: true,
    },
    {
        align: 'left',
        label: t('supplier.list.tableVisibleColumns.nif'),
        name: 'nif',
        columnFilter: {
            inWhere: true,
        },
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('globals.alias'),
        name: 'alias',
        columnFilter: {
            name: 'nickname',
        },
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('supplier.list.tableVisibleColumns.account'),
        name: 'account',
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('supplier.list.payMethod'),
        name: 'payMethod',
        columnFilter: {
            inWhere: true,
            name: 'payMethodFk',
            component: 'select',
            attrs: {
                url: 'payMethods',
                fields: ['id', 'name'],
                find: {
                    value: 'payMethodFk',
                    label: 'name',
                },
            },
        },
        visible: false,
    },
    {
        align: 'left',
        label: t('supplier.summary.payDay'),
        name: 'payDay',
        columnFilter: {
            inWhere: true,
        },
        visible: false,
    },
    {
        align: 'left',
        label: t('globals.country'),
        name: 'country',
        columnFilter: {
            component: 'select',
            name: 'countryFk',
            attrs: {
                url: 'countries',
                fields: ['id', 'name'],
            },
        },
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                isPrimary: true,
                action: (row) => viewSummary(row.id, SupplierSummary, 'md-width'),
            },
        ],
    },
]);

const filterColumns = computed(() => {
    const copy = [...columns.value];
    copy.splice(copy.length - 1, 0, {
        align: 'left',
        label: t('globals.params.provinceFk'),
        name: 'provinceFk',
        options: provincesOptions.value,
        columnFilter: {
            component: 'select',
        },
    });

    return copy;
});
</script>
<template>
    <FetchData
        url="Provinces"
        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
        @on-fetch="(data) => (provincesOptions = data)"
        auto-load
    />
    <VnSection
        :data-key="dataKey"
        :columns="filterColumns"
        prefix="supplier"
        :array-data-props="{
            url: 'Suppliers/filter',
            order: 'id ASC',
        }"
    >
        <template #body>
            <VnTable
                ref="tableRef"
                :data-key="dataKey"
                :create="{
                    urlCreate: 'Suppliers/newSupplier',
                    title: t('Create Supplier'),
                    onDataSaved: ({ id }) => tableRef.redirect(id),
                    formInitialData: {},
                    mapper: (data) => {
                        data.name = data.socialName;
                        delete data.socialName;
                        return data;
                    },
                }"
                :columns="columns"
                redirect="supplier"
                :right-search="false"
            >
                <template #more-create-dialog="{ data }">
                    <VnInput
                        :label="t('globals.name')"
                        v-model="data.socialName"
                        :uppercase="true"
                    />
                </template>
            </VnTable>
        </template>
    </VnSection>
</template>

<i18n>
 es:
    Search suppliers: Buscar proveedores
    Create Supplier: Crear proveedor
</i18n>