salix-front/src/pages/Customer/Card/CustomerBalance.vue

<script setup>
import { computed, onBeforeMount, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useAcl } from 'src/composables/useAcl';
import axios from 'axios';
import { useQuasar } from 'quasar';
import { getClientRisk } from '../composables/getClientRisk';

import { toCurrency, toDate, toDateHourMin } from 'src/filters';
import { useState } from 'composables/useState';
import { useStateStore } from 'stores/useStateStore';
import { usePrintService } from 'composables/usePrintService';
import { useVnConfirm } from 'composables/useVnConfirm';

import VnTable from 'components/VnTable/VnTable.vue';
import VnInput from 'components/common/VnInput.vue';
import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
import VnFilter from 'components/VnTable/VnFilter.vue';

import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';

const { openConfirmationModal } = useVnConfirm();
const { sendEmail, openReport } = usePrintService();
const { t } = useI18n();
const { hasAny } = useAcl();

const quasar = useQuasar();
const route = useRoute();
const state = useState();
const stateStore = useStateStore();
const user = state.getUser();

const clientRisk = ref([]);
const tableRef = ref();
const companyId = ref();
const companyUser = ref(user.value.companyFk);
const balances = ref([]);
const vnFilterRef = ref({});
const filter = computed(() => {
    return {
        clientId: route.params.id,
        companyId: companyId.value ?? companyUser.value,
    };
});

const companyFilterColumn = {
    align: 'left',
    name: 'companyId',
    label: t('Company'),
    component: 'select',
    attrs: {
        url: 'Companies',
        optionLabel: 'code',
        optionValue: 'id',
        sortBy: 'code',
    },
    columnFilter: {
        event: {
            remove: () => (companyId.value = null),
            'update:modelValue': (newCompanyFk) => {
                if (!newCompanyFk) return;
                vnFilterRef.value.addFilter(newCompanyFk);
                companyUser.value = newCompanyFk;
            },
            blur: () => !companyId.value && (companyId.value = companyUser.value),
        },
    },
    visible: false,
};

const columns = computed(() => [
    {
        align: 'left',
        name: 'payed',
        label: t('Date'),
        format: ({ payed }) => toDate(payed),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'created',
        label: t('Creation date'),
        format: ({ created }) => toDateHourMin(created),
        cardVisible: true,
        style: 'color: var(--vn-label-color)',
    },
    {
        align: 'left',
        label: t('Employee'),
        columnField: {
            component: 'userLink',
            attrs: ({ row }) => {
                return {
                    workerId: row.workerFk,
                    name: row.userName,
                };
            },
        },
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'description',
        label: t('Reference'),
        isTitle: true,
        class: 'extend',
    },
    {
        align: 'left',
        name: 'bankFk',
        label: t('Bank'),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'debit',
        label: t('Debit'),
        format: ({ debit }) => debit && toCurrency(debit),
        isId: true,
    },
    {
        align: 'left',
        name: 'credit',
        label: t('Havings'),
        format: ({ credit }) => credit && toCurrency(credit),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'balance',
        label: t('Balance'),
        format: ({ balance }) => toCurrency(balance),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'isConciliate',
        label: t('Conciliated'),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'tableActions',
        actions: [
            {
                title: t('globals.downloadPdf'),
                icon: 'cloud_download',
                show: (row) => row.isInvoice,
                action: (row) => showBalancePdf(row),
            },
            {
                title: t('Send compensation'),
                icon: 'outgoing_mail',
                show: (row) => !!row.isCompensation,
                action: ({ id }) =>
                    openConfirmationModal(
                        t('Send compensation'),
                        t('Do you want to report compensation to the client by mail?'),
                        () => sendEmail(`Receipts/${id}/balance-compensation-email`)
                    ),
            },
        ],
    },
]);

onBeforeMount(() => {
    stateStore.rightDrawer = true;
    companyId.value = companyUser.value;
});

async function getClientRisks() {
    const filter = {
        where: { clientFk: route.params.id, companyFk: companyUser.value },
    };
    const { data } = await getClientRisk(filter);
    clientRisk.value = data;
    return clientRisk.value;
}

async function getCurrentBalance() {
    const currentBalance = (await getClientRisks()).find((balance) => {
        return balance.companyFk === companyId.value;
    });
    return currentBalance && currentBalance.amount;
}

async function onFetch(data) {
    balances.value = [];
    for (const [index, balance] of data.entries()) {
        if (index === 0) {
            balance.balance = await getCurrentBalance();
            continue;
        }
        const previousBalance = data[index - 1];
        balance.balance =
            previousBalance?.balance - (previousBalance?.debit - previousBalance?.credit);
    }
    balances.value = data;
}

const showNewPaymentDialog = () => {
    quasar.dialog({
        component: CustomerNewPayment,
        componentProps: {
            companyId: companyId.value,
            totalCredit: clientRisk.value[0]?.amount,
            promise: () => tableRef.value.reload(),
        },
    });
};

const showBalancePdf = ({ id }) => {
    openReport(`InvoiceOuts/${id}/download`, {}, '_blank');
};
</script>

<template>
    <VnSubToolbar class="q-mb-md">
        <template #st-data>
            <div class="column justify-center q-px-md q-py-sm">
                <span class="text-bold">{{ t('Total by company') }}</span>
                <div class="row justify-center" v-if="clientRisk?.length">
                    {{ clientRisk[0].company.code }}:
                    {{ toCurrency(clientRisk[0].amount) }}
                </div>
            </div>
        </template>
        <template #st-actions>
            <div>
                <VnFilter
                    ref="vnFilterRef"
                    v-model="companyId"
                    data-key="CustomerBalance"
                    :column="companyFilterColumn"
                    search-url="balance"
                />
            </div>
        </template>
    </VnSubToolbar>
    <VnTable
        ref="tableRef"
        data-key="CustomerBalance"
        url="Receipts/filter"
        search-url="balance"
        :user-params="filter"
        :columns="columns"
        :right-search="false"
        :is-editable="false"
        :column-search="false"
        @on-fetch="onFetch"
        :disable-option="{ card: true }"
        auto-load
    >
        <template #column-balance="{ rowIndex }">
            {{ toCurrency(balances[rowIndex]?.balance) }}
        </template>
        <template #column-description="{ row }">
            <span class="link" v-if="row.isInvoice" @click.stop>
                {{ t('bill', { ref: row.description }) }}
                <InvoiceOutDescriptorProxy :id="row.id" />
            </span>
            <span v-else class="q-pa-xs dotted rounded-borders" :title="row.description">
                {{ row.description }}
            </span>
            <QPopupEdit
                v-model="row.description"
                v-slot="scope"
                @save="
                    (value) =>
                        value != row.description &&
                        axios.patch(`Receipts/${row.id}`, { description: value })
                "
                auto-save
            >
                <VnInput
                    v-model="scope.value"
                    :disable="
                        !hasAny([{ model: 'Receipt', props: '*', accessType: 'WRITE' }])
                    "
                    @keypress.enter="scope.set"
                    autofocus
                />
            </QPopupEdit>
        </template>
    </VnTable>
    <QPageSticky :offset="[18, 18]" style="z-index: 2">
        <QBtn
            @click.stop="showNewPaymentDialog()"
            color="primary"
            fab
            icon="add"
            shortcut="+"
        />
        <QTooltip>
            {{ t('New payment') }}
        </QTooltip>
    </QPageSticky>
</template>

<i18n>
en:
    bill: 'N/INV {ref}'
es:
    Company: Empresa
    Total by company: Total por empresa
    New payment: Añadir pago
    Date: Fecha
    Creation date: Fecha de creación
    Employee: Empleado
    Reference: Referencia
    bill: 'N/FRA {ref}'
    Bank: Caja
    Debit: Debe
    Havings: Haber
    Balance: Balance
    Conciliated: Conciliado
    Send compensation: Enviar compensación
    Do you want to report compensation to the client by mail?: ¿Desea informar de la compensación al cliente por correo?
</i18n>

<style lang="scss" scoped>
.dotted {
    border: 1px dotted var(--vn-header-color);
}
.dotted:hover {
    border: 1px dotted $primary;
}
</style>