salix-front-mindshore-fork2/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 { useRole } from 'src/composables/useRole';
import axios from 'axios';
import { useQuasar } from 'quasar';

import { toCurrency, toDate, toDateHourMin } from 'src/filters';
import { useState } from 'composables/useState';
import { useStateStore } from 'stores/useStateStore';
import { usePrintService } from 'composables/usePrintService';
import { useSession } from 'composables/useSession';
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 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 } = usePrintService();
const { t } = useI18n();
const { hasAny } = useRole();

const session = useSession();
const tokenMultimedia = session.getTokenMultimedia();
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 companyLastId = 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 companyFilterColumn = {
    align: 'left',
    name: 'companyId',
    label: t('Company'),
    component: 'select',
    attrs: {
        url: 'Companies',
        optionLabel: 'code',
        sortBy: 'code',
        limit: 0,
    },
    columnFilter: {
        event: {
            remove: () => (companyId.value = null),
            'update:modelValue': (newCompanyFk) => {
                if (!newCompanyFk) return;
                vnFilterRef.value.addFilter(newCompanyFk);
                companyLastId.value = newCompanyFk;
            },
            blur: () =>
                !companyId.value &&
                (companyId.value = companyLastId.value ?? user.value.companyFk),
        },
    },
    visible: false,
    create: true,
};
const referenceColumn = {
    align: 'left',
    name: 'description',
    label: t('Reference'),
};
const onlyCreate = {
    visible: false,
    columnFilter: false,
    create: true,
};

const columns = computed(() => [
    {
        align: 'left',
        name: 'payed',
        label: t('Date'),
        format: ({ payed }) => toDate(payed),
        cardVisible: true,
        create: true,
        columnCreate: {
            component: 'date',
        },
    },
    {
        align: 'left',
        name: 'created',
        label: t('Creation date'),
        format: ({ created }) => toDateHourMin(created),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'workerFk',
        label: t('Employee'),
        columnField: {
            component: 'userLink',
            attrs: ({ row }) => {
                return {
                    workerId: row.workerFk,
                    name: row.userName,
                };
            },
        },
        cardVisible: true,
    },
    { ...referenceColumn, isTitle: true, class: 'extend' },
    companyFilterColumn,
    {
        align: 'right',
        name: 'bankFk',
        label: t('Bank'),
        cardVisible: true,
        create: true,
    },
    {
        align: 'right',
        name: 'amountPaid',
        label: t('Amount'),
        component: 'number',
        ...onlyCreate,
    },
    {
        align: 'right',
        name: 'debit',
        label: t('Debit'),
        format: ({ debit }) => debit && toCurrency(debit),
        isId: true,
    },
    {
        align: 'right',
        name: 'credit',
        label: t('Havings'),
        format: ({ credit }) => credit && toCurrency(credit),
        cardVisible: true,
    },
    {
        align: 'right',
        name: 'balance',
        label: t('Balance'),
        format: ({ balance }) => toCurrency(balance),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'isConciliate',
        label: t('Conciliated'),
        cardVisible: true,
    },
    { ...referenceColumn, ...onlyCreate },
    {
        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 = user.value.companyFk;
});

async function getClientRisk(reload = false) {
    if (reload || !clientRisk.value?.length) {
        const { data } = await axios.get(`clientRisks`, {
            params: {
                filter: JSON.stringify({
                    include: { relation: 'company', scope: { fields: ['code'] } },
                    where: { clientFk: route.params.id, companyFk: user.value.companyFk },
                }),
            },
        });
        clientRisk.value = data;
    }
    return clientRisk.value;
}

async function getCurrentBalance() {
    const currentBalance = (await getClientRisk()).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;
}

// BORRAR COMPONENTE Y HACER CON VNTABLE
const showNewPaymentDialog = () => {
    quasar.dialog({
        component: CustomerNewPayment,
        componentProps: {
            companyId: companyId.value,
            totalCredit: clientRisk.value[0]?.amount,
            promise: getClientRisk(true),
        },
    });
};

const showBalancePdf = ({ id }) => {
    const url = `api/InvoiceOuts/${id}/download?access_token=${tokenMultimedia}`;
    window.open(url, '_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"
        :create="{
            urlCreate: `Clients/${route.params.id}/createReceipt`,
            mapper: (data) => {
                data.companyFk = data.companyId;
                delete data.companyId;
                return data;
            },
            title: t('New payment'),
            onDataSaved: () => tableRef.reload(),
            formInitialData: { companyId },
        }"
        auto-load
    >
        <template #column-balance="{ rowIndex }">
            {{ toCurrency(balances[rowIndex]?.balance) }}
        </template>
        <template #column-description="{ row }">
            <div class="link" v-if="row.isInvoice">
                {{ 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 })
                "
            >
                <VnInput
                    v-model="scope.value"
                    :disable="!hasAny(['administrative'])"
                    @keypress.enter="scope.set"
                    autofocus
                />
            </QPopupEdit>
        </template>
        <template #column-create-bankFk="{ data, columnName, label }">
            <VnSelect
                url="Accountings"
                :label="label"
                :limit="0"
                option-label="bank"
                sort-by="id"
                v-model="data[columnName]"
            >
                <template #option="scope">
                    <QItem v-bind="scope.itemProps">
                        <QItemLabel>
                            #{{ scope.opt?.id }}: {{ scope.opt?.bank }}
                        </QItemLabel>
                    </QItem>
                </template>
            </VnSelect>
        </template>
    </VnTable>
</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>