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

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import { dashIfEmpty, toCurrency, toDate } from 'src/filters';

import useCardDescription from 'src/composables/useCardDescription';

import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
import CustomerDescriptorMenu from './CustomerDescriptorMenu.vue';

const customerDebt = ref();
const customerCredit = ref();
const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
    summary: {
        type: Object,
        default: null,
    },
});

const route = useRoute();
const { t } = useI18n();

const entityId = computed(() => {
    return $props.id || route.params.id;
});

const data = ref(useCardDescription());
const setData = (entity) => {
    customerDebt.value = entity?.debt;
    customerCredit.value = entity?.credit;
    data.value = useCardDescription(entity?.name, entity?.id);
};
const debtWarning = computed(() => {
    return customerDebt.value > customerCredit.value ? 'negative' : 'primary';
});
</script>

<template>
    <CardDescriptor
        module="Customer"
        :url="`Clients/${entityId}/getCard`"
        :title="data.title"
        :subtitle="data.subtitle"
        @on-fetch="setData"
        :summary="$props.summary"
        data-key="customer"
        width="lg-width"
    >
        <template #menu="{ entity }">
            <CustomerDescriptorMenu :customer="entity" />
        </template>
        <template #body="{ entity }">
            <VnLv
                :label="t('customer.summary.payMethod')"
                :value="entity.payMethod.name"
            />

            <VnLv
                :label="t('customer.summary.credit')"
                :value="toCurrency(entity.credit)"
            />
            <VnLv
                :label="t('customer.summary.securedCredit')"
                :value="toCurrency(entity.creditInsurance)"
            />

            <VnLv
                :label="t('customer.card.debt')"
                :value="toCurrency(entity.debt)"
                :info="t('customer.summary.riskInfo')"
            />
            <VnLv :label="t('customer.summary.salesPerson')">
                <template #value>
                    <VnUserLink
                        v-if="entity.salesPersonUser"
                        :name="entity.salesPersonUser.name"
                        :worker-id="entity.salesPersonFk"
                    />
                    <span v-else>{{ dashIfEmpty(entity.salesPersonUser) }}</span>
                </template>
            </VnLv>
            <VnLv
                :label="t('customer.extendedList.tableVisibleColumns.businessTypeFk')"
                :value="entity.businessType.description"
            />
        </template>
        <template #icons="{ entity }">
            <QCardActions class="q-gutter-x-md">
                <QIcon
                    v-if="!entity.isActive"
                    name="vn:disabled"
                    size="xs"
                    color="primary"
                >
                    <QTooltip>{{ t('customer.card.isDisabled') }}</QTooltip>
                </QIcon>
                <QIcon v-if="entity.isFreezed" name="vn:frozen" size="xs" color="primary">
                    <QTooltip>{{ t('customer.card.isFrozen') }}</QTooltip>
                </QIcon>
                <QIcon
                    v-if="!entity.account?.active"
                    color="primary"
                    name="vn:noweb"
                    size="xs"
                >
                    <QTooltip>{{ t('customer.card.webAccountInactive') }}</QTooltip>
                </QIcon>
                <QIcon
                    v-if="entity.debt > entity.credit"
                    name="vn:risk"
                    size="xs"
                    :color="debtWarning"
                >
                    <QTooltip>{{ t('customer.card.hasDebt') }}</QTooltip>
                </QIcon>
                <QIcon
                    v-if="!entity.isTaxDataChecked"
                    name="vn:no036"
                    size="xs"
                    color="primary"
                >
                    <QTooltip>{{ t('customer.card.notChecked') }}</QTooltip>
                </QIcon>
                <QBtn
                    v-if="entity.unpaid"
                    flat
                    size="sm"
                    icon="vn:Client_unpaid"
                    color="primary"
                    :to="{ name: 'CustomerUnpaid' }"
                >
                    <QTooltip>
                        {{ t('Unpaid') }}
                        <br />
                        {{
                            t('unpaidDated', {
                                dated: toDate(customer.unpaid.dated),
                            })
                        }}
                        <br />
                        {{
                            t('unpaidAmount', {
                                amount: toCurrency(customer.unpaid.amount),
                            })
                        }}
                    </QTooltip>
                </QBtn>
            </QCardActions>
        </template>
        <template #actions="{ entity }">
            <QCardActions class="flex justify-center" style="padding-inline: 0">
                <QBtn
                    :to="{
                        name: 'TicketList',
                        query: {
                            from: undefined,
                            to: undefined,
                            table: JSON.stringify({
                                clientFk: entity.id,
                            }),
                        },
                    }"
                    size="md"
                    icon="vn:ticket"
                    color="primary"
                >
                    <QTooltip>{{ t('Customer ticket list') }}</QTooltip>
                </QBtn>
                <QBtn
                    :to="{
                        name: 'InvoiceOutList',
                        query: { table: JSON.stringify({ clientFk: entity.id }) },
                    }"
                    size="md"
                    icon="vn:invoice-out"
                    color="primary"
                >
                    <QTooltip>{{ t('Customer invoice out list') }}</QTooltip>
                </QBtn>
                <QBtn
                    :to="{
                        name: 'OrderList',
                        query: {
                            createForm: JSON.stringify({
                                clientFk: entity.id,
                                addressId: entity.defaultAddressFk,
                            }),
                        },
                    }"
                    size="md"
                    icon="vn:basketadd"
                    color="primary"
                >
                    <QTooltip>{{ t('globals.pageTitles.createOrder') }}</QTooltip>
                </QBtn>
                <QBtn
                    v-if="entity.supplier"
                    :to="{
                        name: 'SupplierSummary',
                        params: { id: entity.supplier.id },
                    }"
                    size="md"
                    icon="vn:supplier"
                    color="primary"
                >
                    <QTooltip>{{ t('Go to supplier') }}</QTooltip>
                </QBtn>
            </QCardActions>
        </template>
    </CardDescriptor>
</template>

<i18n>
en:
    unpaidDated: 'Date {dated}'
    unpaidAmount: 'Amount {amount}'
es:
    Customer ticket list: Listado de tickets del cliente
    Customer invoice out list: Listado de facturas del cliente
    Go to supplier: Ir al proveedor
    Unpaid: Impagado
    unpaidDated: 'Fecha {dated}'
    unpaidAmount: 'Importe {amount}'
</i18n>