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

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

const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
const stateStore = useStateStore();
const { t } = useI18n();

const arrayData = useArrayData('InvoiceOutNegative', {
    url: 'InvoiceOuts/negativeBases',
    limit: 0,
    userParams: {
        from: Date.vnFirstDayOfMonth().toISOString(),
        to: Date.vnLastDayOfMonth().toISOString(),
    },
    exprBuilder: (param, value) => {
        switch (param) {
            case 'from':
            case 'to':
                return;
            default:
                return { [param]: value };
        }
    },
});

onBeforeMount(async () => {
    await arrayData.fetch({ append: false });
    stateStore.rightDrawer = true;
});

const columns = computed(() => [
    {
        label: t('invoiceOut.negativeBases.company'),
        field: 'company',
        name: 'company',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.country'),
        field: 'country',
        name: 'country',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.clientId'),
        field: 'clientId',
        name: 'clientId',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.client'),
        field: 'clientSocialName',
        name: 'client',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.amount'),
        field: 'amount',
        name: 'amount',
        align: 'left',
        format: (value) => toCurrency(value),
    },
    {
        label: t('invoiceOut.negativeBases.base'),
        field: 'taxableBase',
        name: 'base',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.ticketId'),
        field: 'ticketFk',
        name: 'ticketId',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.active'),
        field: 'isActive',
        name: 'active',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.hasToInvoice'),
        field: 'hasToInvoice',
        name: 'hasToInvoice',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.verifiedData'),
        field: 'isTaxDataChecked',
        name: 'verifiedData',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.comercial'),
        field: 'workerName',
        name: 'worker',
        align: 'left',
    },
]);

const downloadCSV = async () => {
    const params = {}; // filter.value;
    const filterParams = {
        limit: 20,
        where: {
            and: [],
        },
    };
    for (const param in params) {
        if (params[param]) filterParams.where.and.push({ [param]: params[param] });
    }

    await invoiceOutGlobalStore.getNegativeBasesCsv(
        arrayData.value.store.userParams.from,
        arrayData.value.store.userParams.to,
        params
    );
};
</script>
<template>
    <VnSubToolbar>
        <template #st-actions>
            <QBtn color="primary" icon-right="download" no-caps @click="downloadCSV()">
                <QTooltip>{{ t('Download as CSV') }}</QTooltip>
            </QBtn>
        </template>
    </VnSubToolbar>
    <RightMenu>
        <template #right-panel>
            <InvoiceOutNegativeFilter data-key="InvoiceOutNegative" />
        </template>
    </RightMenu>
    <QPage class="column items-center q-pa-md">
        <QTable
            :columns="columns"
            :rows="arrayData.store.data"
            row-key="clientId"
            class="full-width q-mt-md"
        >
            <template #body-cell-clientId="{ row }">
                <QTd>
                    <QBtn flat dense color="blue"> {{ row.clientId }}</QBtn>
                    <CustomerDescriptorProxy :id="row.clientId" />
                </QTd>
            </template>
            <template #body-cell-ticketId="{ row }">
                <QTd>
                    <QBtn flat dense color="blue"> {{ row.ticketFk }}</QBtn>
                    <TicketDescriptorProxy :id="row.ticketFk" />
                </QTd>
            </template>
            <template #body-cell-worker="{ row }">
                <QTd>
                    <QBtn class="no-uppercase" flat dense color="blue">{{
                        row.workerName
                    }}</QBtn>
                    <WorkerDescriptorProxy :id="row.comercialId" />
                </QTd>
            </template>
            <template #body-cell-active="{ row }">
                <QTd>
                    <QCheckbox :model-value="!!row.isActive" disable />
                </QTd>
            </template>
            <template #body-cell-hasToInvoice="{ row }">
                <QTd>
                    <QCheckbox :model-value="!!row.hasToInvoice" disable />
                </QTd>
            </template>
            <template #body-cell-verifiedData="{ row }">
                <QTd>
                    <QCheckbox :model-value="!!row.isTaxDataChecked" disable />
                </QTd>
            </template>
        </QTable>
    </QPage>
</template>

<style lang="scss" scoped>
.col-content {
    border-radius: 4px;
    padding: 6px;
}
.no-uppercase {
    text-transform: none;
}
</style>

<i18n>
es:
    Download as CSV: Descargar como CSV
</i18n>