salix-front/src/pages/InvoiceIn/Card/InvoiceInVat.vue

<script setup>
import { ref, computed, markRaw } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useArrayData } from 'src/composables/useArrayData';
import { getTotal } from 'src/composables/getTotal';
import { toCurrency } from 'src/filters';
import FetchData from 'src/components/FetchData.vue';
import { getExchange } from 'src/composables/getExchange';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnSelectExpense from 'src/components/common/VnSelectExpense.vue';

const { t } = useI18n();
const arrayData = useArrayData();
const route = useRoute();
const invoiceIn = computed(() => arrayData.store.data);
const currency = computed(() => invoiceIn.value?.currency?.code);
const expenses = ref([]);
const sageTaxTypes = ref([]);
const sageTransactionTypes = ref([]);
const rowsSelected = ref([]);
const invoiceInVatTableRef = ref();

defineProps({ actionIcon: { type: String, default: 'add' } });

function taxRate(invoiceInTax) {
    const sageTaxTypeId = invoiceInTax.taxTypeSageFk;
    const taxRateSelection = sageTaxTypes.value.find(
        (transaction) => transaction.id == sageTaxTypeId,
    );
    const taxTypeSage = taxRateSelection?.rate ?? 0;
    const taxableBase = invoiceInTax?.taxableBase ?? 0;

    return (taxTypeSage / 100) * taxableBase;
}

const columns = computed(() => [
    {
        name: 'expenseFk',
        label: t('Expense'),
        component: markRaw(VnSelectExpense),
        format: (row) => {
            const expense = expenses.value.find((e) => e.id === row.expenseFk);
            return expense ? `${expense.id}: ${expense.name}` : row.expenseFk;
        },
        sortable: true,
        align: 'left',
        isEditable: true,
        create: true,
        width: '250px',
    },
    {
        name: 'taxableBase',
        label: t('Taxable base'),
        component: 'number',
        attrs: {
            clearable: true,
            'clear-icon': 'close',
        },
        sortable: true,
        align: 'left',
        isEditable: true,
        create: true,
    },
    {
        name: 'isDeductible',
        label: t('invoiceIn.isDeductible'),
        component: 'checkbox',
        align: 'center',
        isEditable: true,
        create: true,
        createAttrs: {
            defaultValue: true,
        },
        width: '100px',
    },
    {
        name: 'taxTypeSageFk',
        label: t('Sage iva'),
        component: 'select',
        attrs: {
            options: sageTaxTypes.value,
            optionValue: 'id',
            optionLabel: (row) => `${row.id}: ${row.vat}`,
            filterOptions: ['id', 'vat'],
            'data-cy': 'vat-sageiva',
        },
        format: (row) => {
            const taxType = sageTaxTypes.value.find((t) => t.id === row.taxTypeSageFk);
            return taxType ? `${taxType.id}: ${taxType.vat}` : row.taxTypeSageFk;
        },
        sortable: true,
        align: 'left',
        isEditable: true,
        create: true,
    },
    {
        name: 'transactionTypeSageFk',
        label: t('Sage transaction'),
        component: 'select',
        attrs: {
            options: sageTransactionTypes.value,
            optionValue: 'id',
            optionLabel: (row) => `${row.id}: ${row.transaction}`,
            filterOptions: ['id', 'transaction'],
        },
        format: (row) => {
            const transType = sageTransactionTypes.value.find(
                (t) => t.id === row.transactionTypeSageFk,
            );
            return transType
                ? `${transType.id}: ${transType.transaction}`
                : row.transactionTypeSageFk;
        },
        sortable: true,
        align: 'left',
        isEditable: true,
        create: true,
    },
    {
        name: 'rate',
        label: t('Rate'),
        sortable: false,
        format: (row) => taxRate(row).toFixed(2),
        align: 'left',
    },
    {
        name: 'foreignValue',
        label: t('Foreign value'),
        component: 'number',
        sortable: true,
        align: 'left',
        create: true,
        disable: !isNotEuro(currency.value),
    },
    {
        name: 'total',
        label: t('Total'),
        align: 'left',
        format: (row) => (Number(row.taxableBase || 0) + Number(taxRate(row))).toFixed(2),
    },
]);

const tableRows = computed(
    () => invoiceInVatTableRef.value?.CrudModelRef?.formData || [],
);
const taxableBaseTotal = computed(() => {
    return getTotal(tableRows.value, 'taxableBase');
});
const taxRateTotal = computed(() => {
    return tableRows.value.reduce((sum, row) => sum + Number(taxRate(row)), 0);
});
const combinedTotal = computed(() => {
    return +taxableBaseTotal.value + +taxRateTotal.value;
});

const filter = computed(() => ({
    fields: [
        'id',
        'invoiceInFk',
        'taxableBase',
        'expenseFk',
        'foreignValue',
        'taxTypeSageFk',
        'transactionTypeSageFk',
        'isDeductible',
    ],
    where: {
        invoiceInFk: route.params.id,
    },
}));

const isNotEuro = (code) => code != 'EUR';

async function handleForeignValueUpdate(val, row) {
    if (!isNotEuro(currency.value)) return;
    row.taxableBase = await getExchange(
        val,
        invoiceIn.value?.currencyFk,
        invoiceIn.value?.issued,
    );
}
</script>
<template>
    <FetchData url="Expenses" auto-load @on-fetch="(data) => (expenses = data)" />
    <FetchData url="SageTaxTypes" auto-load @on-fetch="(data) => (sageTaxTypes = data)" />
    <FetchData
        url="sageTransactionTypes"
        auto-load
        @on-fetch="(data) => (sageTransactionTypes = data)"
    />
    <VnTable
        v-if="invoiceIn"
        ref="invoiceInVatTableRef"
        data-key="InvoiceInTaxes"
        url="InvoiceInTaxes"
        save-url="InvoiceInTaxes/crud"
        :filter="filter"
        :data-required="{ invoiceInFk: $route.params.id }"
        :insert-on-load="true"
        auto-load
        v-model:selected="rowsSelected"
        :columns="columns"
        :is-editable="true"
        :table="{ selection: 'multiple', 'row-key': '$index' }"
        footer
        :right-search="false"
        :column-search="false"
        :disable-option="{ card: true }"
        class="q-pa-none"
        :create="{
            urlCreate: 'InvoiceInTaxes',
            title: t('Add tax'),
            formInitialData: { invoiceInFk: $route.params.id, isDeductible: true },
            onDataSaved: () => invoiceInVatTableRef.reload(),
        }"
        :crud-model="{ goTo: `/invoice-in/${$route.params.id}/due-day` }"
    >
        <template #column-footer-taxableBase>
            {{ toCurrency(taxableBaseTotal) }}
        </template>
        <template #column-footer-rate>
            {{ toCurrency(taxRateTotal) }}
        </template>
        <template #column-footer-total>
            {{ toCurrency(combinedTotal) }}
        </template>
    </VnTable>
</template>
<i18n>
es:
    Expense: Gasto
    Create a new expense: Crear nuevo gasto
    Add tax: Añadir Gasto/IVA # Changed label slightly
    Taxable base: Base imp.
    Sage iva: Sage iva # Kept original label
    Sage transaction: Sage transacción
    Rate: Cuota # Changed label
    Foreign value: Divisa
    Total: Total
    invoiceIn.isDeductible: Deducible
</i18n>