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 FetchData from 'components/FetchData.vue';

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 VnSelect from 'src/components/common/VnSelect.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 currentBalance = ref({});
const quasar = useQuasar();
const route = useRoute();
const state = useState();
const stateStore = useStateStore();
const user = state.getUser();

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

const columns = computed(() => [
    {
        align: 'right',
        name: 'payed',
        label: t('Date'),
        format: ({ payed }) => toDate(payed),
        cardVisible: true,
    },
    {
        align: 'right',
        name: 'created',
        label: t('Creation date'),
        format: ({ created }) => toDateHourMin(created),
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('Employee'),
        columnField: {
            component: 'userLink',
            attrs: ({ row }) => ({ workerId: row.workerFk, name: row.userName }),
        },
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'description',
        label: t('Reference'),
        isTitle: true,
        class: 'extend',
    },
    {
        align: 'right',
        name: 'bankFk',
        label: t('Bank'),
        cardVisible: true,
    },
    {
        align: 'right',
        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;
});

async function getCurrentBalance(data) {
    currentBalance.value[companyId.value] = {
        amount: 0,
        code: companies.value.find((c) => c.id === companyId.value)?.code,
    };

    for (const balance of data) {
        currentBalance.value[balance.companyFk] = {
            code: balance.company.code,
            amount: balance.amount,
        };
    }
}

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>
    <FetchData
        url="Companies"
        auto-load
        @on-fetch="(data) => (companies = data)"
    ></FetchData>
    <FetchData
        v-if="companies.length > 0"
        url="clientRisks"
        :filter="{
            include: { relation: 'company', scope: { fields: ['code'] } },
            where: { clientFk: route.params.id },
        }"
        auto-load
        @on-fetch="getCurrentBalance"
    ></FetchData>

    <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">
                    {{ currentBalance[companyId]?.code }}:
                    {{ toCurrency(currentBalance[companyId]?.amount) }}
                </div>
            </div>
        </template>
        <template #st-actions>
            <div>
                <VnSelect
                    :label="t('Company')"
                    ref="vnFilterRef"
                    v-model="companyId"
                    data-key="CustomerBalance"
                    :options="companies"
                    option-label="code"
                    option-value="id"
                ></VnSelect>
            </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"
        :disable-option="{ card: true }"
        auto-load
    >
        <template #column-balance="{ rowIndex }">
            {{ toCurrency(balances[rowIndex]?.balance) }}
        </template>
        <template #column-description="{ row }">
            <div class="link" v-if="row.isInvoice">
                {{ t('bill', { ref: row.description }) }}
                <InvoiceOutDescriptorProxy :id="row.description" />
            </div>
            <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>