perf: refs #7134 #7134 global dialog newPayment and composable getRisk

src/components/CreateNewPayment.vue

@@ -0,0 +1,333 @@
+<script setup>
+import { onBeforeMount, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import axios from 'axios';
+import { getClientRisk } from 'src/composables/getRisk';
+import { useDialogPluginComponent } from 'quasar';
+
+import { usePrintService } from 'composables/usePrintService';
+import useNotify from 'src/composables/useNotify.js';
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInputNumber from 'components/common/VnInputNumber.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const { notify } = useNotify();
+const { sendEmail, openReport } = usePrintService();
+const { dialogRef } = useDialogPluginComponent();
+
+const $props = defineProps({
+    companyId: {
+        type: Number,
+        required: true,
+    },
+    totalCredit: {
+        type: Number,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        default: null,
+    },
+});
+
+const closeButton = ref(null);
+const urlCreate = ref([]);
+const companyOptions = ref([]);
+const bankOptions = ref([]);
+const clientFindOne = ref([]);
+const viewReceipt = ref();
+const shouldSendEmail = ref(false);
+const maxAmount = ref();
+const accountingType = ref({});
+const isCash = ref(false);
+const formModelRef = ref(false);
+
+const filterBanks = {
+    fields: ['id', 'bank', 'accountingTypeFk'],
+    include: { relation: 'accountingType' },
+    order: 'id',
+    limit: 30,
+};
+
+const filterClientFindOne = {
+    fields: ['email'],
+    where: {
+        id: route.params.id,
+    },
+};
+
+const initialData = reactive({
+    amountPaid: $props.totalCredit,
+    clientFk: route.params.id,
+    companyFk: $props.companyId,
+    email: clientFindOne.value.email,
+});
+
+onBeforeMount(() => {
+    urlCreate.value = `Clients/${route.params.id}/createReceipt`;
+});
+
+function setPaymentType(accounting) {
+    if (!accounting) return;
+    accountingType.value = accounting.accountingType;
+
+    initialData.description = [];
+    initialData.payed = Date.vnNew();
+    isCash.value = accountingType.value.code == 'cash';
+    viewReceipt.value = isCash.value;
+    if (accountingType.value.daysInFuture)
+        initialData.payed.setDate(
+            initialData.payed.getDate() + accountingType.value.daysInFuture
+        );
+    maxAmount.value = accountingType.value && accountingType.value.maxAmount;
+
+    if (accountingType.value.code == 'compensation')
+        return (initialData.description = '');
+    if (accountingType.value.receiptDescription)
+        initialData.description.push(accountingType.value.receiptDescription);
+    if (initialData.description) initialData.description.push(initialData.description);
+
+    initialData.description = initialData.description.join(', ');
+}
+
+const calculateFromAmount = (event) => {
+    initialData.amountToReturn =
+        parseFloat(initialData.deliveredAmount) + parseFloat(event) * -1;
+};
+
+const calculateFromDeliveredAmount = (event) => {
+    initialData.amountToReturn = parseFloat(event) - initialData.amountPaid;
+};
+
+function onBeforeSave(data) {
+    const exceededAmount = data.amountPaid > maxAmount.value;
+    if (isCash.value && exceededAmount)
+        return notify(t('Amount exceeded', { maxAmount: maxAmount.value }), 'negative');
+
+    if (isCash.value && shouldSendEmail.value && !data.email)
+        return notify(t('There is no assigned email for this client'), 'negative');
+
+    data.bankFk = data.bankFk.id;
+    return data;
+}
+
+async function onDataSaved(formData, { id }) {
+    try {
+        if (shouldSendEmail.value && isCash.value)
+            await sendEmail(`Receipts/${id}/receipt-email`, {
+                recipient: formData.email,
+            });
+
+        if (viewReceipt.value) openReport(`Receipts/${id}/receipt-pdf`);
+    } finally {
+        if ($props.promise) $props.promise();
+        if (closeButton.value) closeButton.value.click();
+    }
+}
+
+async function accountShortToStandard({ target: { value } }) {
+    if (!value) return (initialData.description = '');
+    initialData.compensationAccount = value.replace('.', '0'.repeat(11 - value.length));
+    const params = { bankAccount: initialData.compensationAccount };
+    const { data } = await axios(`Clients/getClientOrSupplierReference`, { params });
+    if (!data.clientId) {
+        initialData.description = t('Supplier Compensation Reference', {
+            supplierId: data.supplierId,
+            supplierName: data.supplierName,
+        });
+        return;
+    }
+    initialData.description = t('Client Compensation Reference', {
+        clientId: data.clientId,
+        clientName: data.clientName,
+    });
+}
+
+async function getAmountPaid() {
+    const filter = {
+        where: {
+            clientFk: route.params.id,
+            companyFk: initialData.companyFk,
+        },
+    };
+
+    const { data } = await getClientRisk(filter);
+    initialData.amountPaid = (data?.length && data[0].amount) || undefined;
+}
+</script>
+
+<template>
+    <QDialog ref="dialogRef" persistent>
+        <FetchData
+            @on-fetch="(data) => (companyOptions = data)"
+            auto-load
+            url="Companies"
+        />
+        <FetchData
+            :filter="filterBanks"
+            @on-fetch="(data) => (bankOptions = data)"
+            auto-load
+            url="Accountings"
+        />
+        <FetchData
+            :filter="filterClientFindOne"
+            @on-fetch="({ email }) => (initialData.email = email)"
+            auto-load
+            url="Clients/findOne"
+        />
+        <FormModel
+            ref="formModelRef"
+            :form-initial-data="initialData"
+            :observe-form-changes="false"
+            :url-create="urlCreate"
+            :mapper="onBeforeSave"
+            @on-data-saved="onDataSaved"
+        >
+            <template #form="{ data, validate }">
+                <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
+                    <QIcon name="close" size="sm" />
+                </span>
+
+                <h5 class="q-mt-none">{{ t('New payment') }}</h5>
+
+                <VnRow>
+                    <VnInputDate
+                        :label="t('Date')"
+                        :required="true"
+                        v-model="data.payed"
+                    />
+                    <VnSelect
+                        :label="t('Company')"
+                        :options="companyOptions"
+                        :required="true"
+                        :rules="validate('entry.companyFk')"
+                        hide-selected
+                        option-label="code"
+                        option-value="id"
+                        v-model="data.companyFk"
+                        @update:model-value="getAmountPaid()"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnSelect
+                        :label="t('Bank')"
+                        v-model="data.bankFk"
+                        url="Accountings"
+                        option-label="bank"
+                        :include="{ relation: 'accountingType' }"
+                        sort-by="id"
+                        :limit="0"
+                        @update:model-value="
+                            (value, options) => setPaymentType(value, options)
+                        "
+                        :emit-value="false"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ scope.opt.id }}:&ensp;{{ scope.opt.bank }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                    <VnInputNumber
+                        :label="t('Amount')"
+                        :required="true"
+                        @update:model-value="calculateFromAmount($event)"
+                        clearable
+                        v-model.number="data.amountPaid"
+                    />
+                </VnRow>
+                <div v-if="data.bankFk?.accountingType?.code == 'compensation'">
+                    <div class="text-h6">
+                        {{ t('Compensation') }}
+                    </div>
+                    <VnRow>
+                        <VnInputNumber
+                            :label="t('Compensation account')"
+                            clearable
+                            v-model="data.compensationAccount"
+                            @blur="accountShortToStandard"
+                        />
+                    </VnRow>
+                </div>
+                <VnInput
+                    :label="t('Reference')"
+                    :required="true"
+                    clearable
+                    v-model="data.description"
+                />
+
+                <div v-if="data.bankFk?.accountingType?.code == 'cash'">
+                    <div class="text-h6">{{ t('Cash') }}</div>
+                    <VnRow>
+                        <VnInputNumber
+                            :label="t('Delivered amount')"
+                            @update:model-value="calculateFromDeliveredAmount($event)"
+                            clearable
+                            v-model="data.deliveredAmount"
+                        />
+                        <VnInputNumber
+                            :label="t('Amount to return')"
+                            disable
+                            v-model="data.amountToReturn"
+                        />
+                    </VnRow>
+                    <VnRow>
+                        <QCheckbox v-model="viewReceipt" :label="t('View recipt')" />
+                        <QCheckbox v-model="shouldSendEmail" :label="t('Send email')" />
+                    </VnRow>
+                </div>
+                <div class="q-mt-lg row justify-end">
+                    <QBtn
+                        :disabled="formModelRef.isLoading"
+                        :label="t('globals.cancel')"
+                        :loading="formModelRef.isLoading"
+                        class="q-ml-sm"
+                        color="primary"
+                        flat
+                        type="reset"
+                        v-close-popup
+                    />
+                    <QBtn
+                        :disabled="formModelRef.isLoading"
+                        :label="t('globals.save')"
+                        :loading="formModelRef.isLoading"
+                        color="primary"
+                        type="submit"
+                    />
+                </div>
+            </template>
+        </FormModel>
+    </QDialog>
+</template>
+
+<i18n>
+es:
+    New payment: Añadir pago
+    Date: Fecha
+    Company: Empresa
+    Bank: Caja
+    Amount: Importe
+    Reference: Referencia
+    Cash: Efectivo
+    Delivered amount: Cantidad entregada
+    Amount to return: Cantidad a devolver
+    View recipt: Ver recibido
+    Send email: Enviar correo
+    Compensation: Compensación
+    Compensation account: Cuenta para compensar
+    Supplier Compensation Reference: ({supplierId}) Ntro Proveedor {supplierName}
+    Client Compensation Reference: ({clientId}) Ntro Cliente {clientName}
+    There is no assigned email for this client: No hay correo asignado para este cliente
+    Amount exceeded: Según ley contra el fraude no se puede recibir cobros por importe igual o superior a {maxAmount}
+</i18n>

src/composables/getRisk.js

@@ -0,0 +1,22 @@
+import axios from 'axios';
+
+export async function getClientRisk(_filter) {
+    const filter = {
+        ..._filter,
+        include: { relation: 'company', scope: { fields: ['code'] } },
+    };
+
+    return await axios(`ClientRisks`, {
+        params: { filter: JSON.stringify(filter) },
+    });
+}
+export async function getSupplierRisk(_filter) {
+    const filter = {
+        ..._filter,
+        include: { relation: 'company', scope: { fields: ['code'] } },
+    };
+
+    return await axios(`ClientRisks`, {
+        params: { filter: JSON.stringify(filter) },
+    });
+}

src/pages/Customer/Card/CustomerBalance.vue

@@ -5,7 +5,7 @@ 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 { getClientRisk } from 'src/composables/getRisk';
 
 import { toCurrency, toDate, toDateHourMin } from 'src/filters';
 import { useState } from 'composables/useState';

src/pages/Customer/components/CustomerNewPayment.vue

@@ -3,7 +3,7 @@ import { onBeforeMount, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
-import { getClientRisk } from '../composables/getClientRisk';
+import { getClientRisk } from 'src/composables/getRisk';
 import { useDialogPluginComponent } from 'quasar';
 
 import { usePrintService } from 'composables/usePrintService';

src/pages/Supplier/composables/getSupplierRisk.js

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+export async function getClientRisk(_filter) {
+    const filter = {
+        ..._filter,
+        include: { relation: 'company', scope: { fields: ['code'] } },
+    };
+
+    return await axios(`ClientRisks`, {
+        params: { filter: JSON.stringify(filter) },
+    });
+}