salix-front/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { toCurrency } from 'src/filters';
import VnTable from 'src/components/VnTable/VnTable.vue';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { useArrayData } from 'src/composables/useArrayData';
import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
import TicketDescriptorProxy from '../Ticket/Card/TicketDescriptorProxy.vue';
import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
import VnInputDate from 'components/common/VnInputDate.vue';

const { t } = useI18n();
const tableRef = ref();
const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
const userParams = {
    from: Date.vnFirstDayOfMonth().toISOString(),
    to: Date.vnLastDayOfMonth().toISOString(),
};
useArrayData('InvoiceOutNegative', { userParams });

const columns = computed(() => [
    {
        align: 'left',
        name: 'company',
        label: t('invoiceOutModule.company'),
        component: 'select',
        cardVisible: true,
        attrs: {
            url: 'Companies',
            optionLabel: 'code',
            optionValue: 'id',
        },
        columnField: {
            component: null,
        },
    },
    {
        align: 'left',
        name: 'country',
        label: t('negativeBases.country'),
        component: 'select',
        attrs: {
            url: 'Countries',
            optionLabel: 'name',
            optionValue: 'id',
        },
        columnField: {
            component: null,
        },
    },
    {
        align: 'left',
        name: 'clientId',
        label: t('negativeBases.clientId'),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'clientSocialName',
        label: t('invoiceOutModule.customer'),
        component: 'select',
        isTitle: true,
        cardVisible: true,
        attrs: {
            url: 'Clients',
            optionLabel: 'socialName',
            optionValue: 'socialName',
        },
        columnField: {
            component: null,
        },
    },
    {
        align: 'left',
        name: 'amount',
        label: t('invoiceOutModule.amount'),
        columnFilter: {
            type: 'number',
        },
        format: (row) => toCurrency(row.amount),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'taxableBase',
        label: t('negativeBases.base'),
    },
    {
        align: 'left',
        name: 'ticketFk',
        label: t('negativeBases.ticketId'),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'isActive',
        label: t('negativeBases.active'),
    },
    {
        align: 'left',
        name: 'hasToInvoice',
        label: t('negativeBases.hasToInvoice'),
    },
    {
        align: 'left',
        name: 'hasVerifiedData',
        label: t('negativeBases.verifiedData'),
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
        name: 'workerName',
        component: 'select',
        attrs: {
            url: 'Workers/activeWithInheritedRole',
            fields: ['id', 'name'],
            where: { role: 'salesPerson' },
        },
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.workerName),
    },
]);

const downloadCSV = async () => {
    const filterParams = {
        limit: 20,
        where: {
            and: [],
        },
    };

    for (const [key, value] of Object.entries(userParams)) {
        if (value) {
            filterParams.where.and.push({ [key]: value });
        }
    }

    await invoiceOutGlobalStore.getNegativeBasesCsv(
        userParams.from,
        userParams.to,
        filterParams
    );
};
</script>
<template>
    <VnSubToolbar>
        <template #st-actions>
            <QBtn color="primary" icon-right="download" @click="downloadCSV()">
                <QTooltip>{{ t('Download as CSV') }}</QTooltip>
            </QBtn>
        </template>
    </VnSubToolbar>
    <VnTable
        ref="tableRef"
        data-key="negativeFilter"
        url="InvoiceOuts/negativeBases"
        :user-params="userParams"
        :expr-builder="
            (param, value) => {
                switch (param) {
                    case 'from':
                    case 'to':
                        return;
                    default:
                        return { [param]: value };
                }
            }
        "
        :limit="0"
        :columns="columns"
        auto-load
        :is-editable="false"
        :use-model="true"
    >
        <template #column-clientId="{ row }">
            <span class="link" @click.stop>
                {{ row.clientId }}
                <CustomerDescriptorProxy :id="row.clientId" />
            </span>
        </template>
        <template #column-ticketFk="{ row }">
            <span class="link" @click.stop>
                {{ row.ticketFk }}
                <TicketDescriptorProxy :id="row.ticketFk" />
            </span>
        </template>
        <template #column-workerName="{ row }">
            <span class="link" @click.stop>
                {{ row.workerName }}
                <WorkerDescriptorProxy :id="row.comercialId" />
            </span>
        </template>
        <template #moreFilterPanel="{ params }">
            <VnInputDate
                :label="t('params.from')"
                v-model="params.from"
                class="q-px-xs q-pr-lg"
                filled
                dense
            />
            <VnInputDate
                :label="t('params.to')"
                v-model="params.to"
                class="q-px-xs q-pr-lg"
                filled
                dense
            />
        </template>
    </VnTable>
</template>

<i18n>
es:
    Download as CSV: Descargar como CSV
    params:
        from: Desde
        to: Hasta
en:
    params:
        from: From
        to: To
</i18n>