Merge pull request 'feat(customer_balance): refs #6943 add functionality from salix' (!589) from 6943-cusotmer-balance into dev

Reviewed-on: verdnatura/salix-front#589
Reviewed-by: Jorge Penades <jorgep@verdnatura.es>

src/components/common/VnSelect.vue

@@ -49,6 +49,10 @@ const $props = defineProps({
         type: Array,
         default: null,
     },
+    include: {
+        type: [Object, Array],
+        default: null,
+    },
     where: {
         type: Object,
         default: null,
@@ -142,7 +146,7 @@ function filter(val, options) {
 async function fetchFilter(val) {
     if (!$props.url || !dataRef.value) return;
 
-    const { fields, sortBy, limit } = $props;
+    const { fields, include, sortBy, limit } = $props;
     const key =
         optionFilterValue.value ??
         (new RegExp(/\d/g).test(val)
@@ -153,7 +157,7 @@ async function fetchFilter(val) {
         ? { [key]: { like: `%${val}%` } }
         : { [key]: val };
     const where = { ...(val ? defaultWhere : {}), ...$props.where };
-    const fetchOptions = { where, limit };
+    const fetchOptions = { where, include, limit };
     if (fields) fetchOptions.fields = fields;
     if (sortBy) fetchOptions.order = sortBy;
     return dataRef.value.fetch(fetchOptions);

src/pages/Customer/Card/CustomerBalance.vue

@@ -17,7 +17,6 @@ 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';
@@ -73,17 +72,6 @@ const companyFilterColumn = {
         },
     },
     visible: false,
-    create: true,
-};
-const referenceColumn = {
-    align: 'left',
-    name: 'description',
-    label: t('Reference'),
-};
-const onlyCreate = {
-    visible: false,
-    columnFilter: false,
-    create: true,
 };
 
 const columns = computed(() => [
@@ -93,10 +81,6 @@ const columns = computed(() => [
         label: t('Date'),
         format: ({ payed }) => toDate(payed),
         cardVisible: true,
-        create: true,
-        columnCreate: {
-            component: 'date',
-        },
     },
     {
         align: 'left',
@@ -120,21 +104,18 @@ const columns = computed(() => [
         },
         cardVisible: true,
     },
-    { ...referenceColumn, isTitle: true, class: 'extend' },
+    {
-    companyFilterColumn,
+        align: 'left',
+        name: 'description',
+        label: t('Reference'),
+        isTitle: true,
+        class: 'extend',
+    },
     {
         align: 'right',
         name: 'bankFk',
         label: t('Bank'),
         cardVisible: true,
-        create: true,
-    },
-    {
-        align: 'right',
-        name: 'amountPaid',
-        label: t('Amount'),
-        component: 'number',
-        ...onlyCreate,
     },
     {
         align: 'right',
@@ -163,7 +144,6 @@ const columns = computed(() => [
         label: t('Conciliated'),
         cardVisible: true,
     },
-    { ...referenceColumn, ...onlyCreate },
     {
         align: 'left',
         name: 'tableActions',
@@ -194,18 +174,16 @@ onBeforeMount(() => {
     companyId.value = user.value.companyFk;
 });
 
-async function getClientRisk(reload = false) {
+async function getClientRisk() {
-    if (reload || !clientRisk.value?.length) {
+    const { data } = await axios.get(`clientRisks`, {
-        const { data } = await axios.get(`clientRisks`, {
+        params: {
-            params: {
+            filter: JSON.stringify({
-                filter: JSON.stringify({
+                include: { relation: 'company', scope: { fields: ['code'] } },
-                    include: { relation: 'company', scope: { fields: ['code'] } },
+                where: { clientFk: route.params.id, companyFk: user.value.companyFk },
-                    where: { clientFk: route.params.id, companyFk: user.value.companyFk },
+            }),
-                }),
+        },
-            },
+    });
-        });
+    clientRisk.value = data;
-        clientRisk.value = data;
-    }
     return clientRisk.value;
 }
 
@@ -230,14 +208,13 @@ async function onFetch(data) {
     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),
+            promise: () => tableRef.value.reload(),
         },
     });
 };
@@ -282,17 +259,6 @@ const showBalancePdf = ({ id }) => {
         :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 }">
@@ -314,6 +280,7 @@ const showBalancePdf = ({ id }) => {
                         value != row.description &&
                         axios.patch(`Receipts/${row.id}`, { description: value })
                 "
+                auto-save
             >
                 <VnInput
                     v-model="scope.value"
@@ -323,25 +290,13 @@ const showBalancePdf = ({ id }) => {
                 />
             </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>
+    <QPageSticky :offset="[18, 18]" style="z-index: 2">
+        <QBtn @click.stop="showNewPaymentDialog()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New payment') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
 
 <i18n>

src/pages/Customer/components/CustomerNewPayment.vue

@@ -2,18 +2,24 @@
 import { onBeforeMount, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import axios from 'axios';
 
 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({
@@ -27,7 +33,7 @@ const $props = defineProps({
     },
     promise: {
         type: Function,
-        required: true,
+        default: null,
     },
 });
 
@@ -36,11 +42,12 @@ const urlCreate = ref([]);
 const companyOptions = ref([]);
 const bankOptions = ref([]);
 const clientFindOne = ref([]);
-const deliveredAmount = ref(null);
-const amountToReturn = ref(null);
 const viewReceipt = ref();
-const sendEmail = ref(false);
+const shouldSendEmail = ref(false);
-const isLoading = ref(false);
+const maxAmount = ref();
+const accountingType = ref({});
+const isCash = ref(false);
+const formModelRef = ref(false);
 
 const filterBanks = {
     fields: ['id', 'bank', 'accountingTypeFk'],
@@ -67,87 +74,123 @@ onBeforeMount(() => {
     urlCreate.value = `Clients/${route.params.id}/createReceipt`;
 });
 
-const setPaymentType = (value) => {
+function setPaymentType(accounting) {
-    // if (id === 1) initialData.description = 'Credit card';
+    if (!accounting) return;
-    // if (id === 2) initialData.description = 'Cash';
+    accountingType.value = accounting.accountingType;
-    // if (id === 3 || id === 3117) initialData.description = '';
+
-    // if (id === 4) initialData.description = 'Transfer';
+    initialData.description = [];
-    // const CASH_CODE = 2;
+    initialData.payed = Date.vnNew();
-    // // const CASH_CODE = 2
+    isCash.value = accountingType.value.code == 'cash';
-    // if (!value) return;
+    viewReceipt.value = isCash.value;
-    // const accountingType = CASH_CODE;
+    if (accountingType.value.daysInFuture)
-    // initialData.description = '';
+        initialData.payed.setDate(
-    // viewReceipt.value = value == CASH_CODE;
+            initialData.payed.getDate() + accountingType.value.daysInFuture
-    // if (accountingType.code == 'compensation') this.receipt.description = '';
+        );
-    // else {
+    maxAmount.value = accountingType.value && accountingType.value.maxAmount;
-    //     if (
+
-    //         accountingType.receiptDescription != null &&
+    if (accountingType.value.code == 'compensation')
-    //         accountingType.receiptDescription != ''
+        return (initialData.description = '');
-    //     )
+    if (accountingType.value.receiptDescription)
-    //         this.receipt.description.push(accountingType.receiptDescription);
+        initialData.description.push(accountingType.value.receiptDescription);
-    //     if (this.originalDescription)
+    if (initialData.description) initialData.description.push(initialData.description);
-    //         this.receipt.description.push(this.originalDescription);
+
-    //     this.receipt.description = this.receipt.description.join(', ');
+    initialData.description = initialData.description.join(', ');
-    // }
+}
-    // this.maxAmount = accountingType && accountingType.maxAmount;
-    // this.receipt.payed = Date.vnNew();
-    // if (accountingType.daysInFuture)
-    //     this.receipt.payed.setDate(
-    //         this.receipt.payed.getDate() + accountingType.daysInFuture
-    //     );
-};
 
 const calculateFromAmount = (event) => {
-    amountToReturn.value = parseFloat(event) * -1 + parseFloat(deliveredAmount.value);
+    initialData.amountToReturn =
+        parseFloat(initialData.deliveredAmount) + parseFloat(event) * -1;
 };
 
 const calculateFromDeliveredAmount = (event) => {
-    amountToReturn.value = parseFloat($props.totalCredit) * -1 + parseFloat(event);
+    initialData.amountToReturn = parseFloat(event) - initialData.amountPaid;
 };
 
-const setClientEmail = (data) => {
+function onBeforeSave(data) {
-    initialData.email = data.email;
+    const exceededAmount = data.amountPaid > maxAmount.value;
-};
+    if (isCash.value && exceededAmount)
+        return notify(t('Amount exceeded', { maxAmount: maxAmount.value }), 'negative');
 
-const onDataSaved = async () => {
+    if (isCash.value && shouldSendEmail.value && !data.email)
-    isLoading.value = true;
+        return notify(t('There is no assigned email for this client'), 'negative');
-    if ($props.promise) {
+
-        try {
+    data.bankFk = data.bankFk.id;
-            await $props.promise();
+    return data;
-        } finally {
+}
-            isLoading.value = false;
+
-            if (closeButton.value) closeButton.value.click();
+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 axios(`ClientRisks`, {
+        params: { filter: JSON.stringify(filter) },
+    });
+    initialData.amountPaid = (data?.length && data[0].amount) || undefined;
+}
 </script>
 
 <template>
-    <QDialog ref="dialogRef">
+    <QDialog ref="dialogRef" persistent>
-        <fetch-data
+        <FetchData
             @on-fetch="(data) => (companyOptions = data)"
             auto-load
             url="Companies"
         />
-        <fetch-data
+        <FetchData
             :filter="filterBanks"
             @on-fetch="(data) => (bankOptions = data)"
             auto-load
             url="Accountings"
         />
-        <fetch-data
+        <FetchData
             :filter="filterClientFindOne"
-            @on-fetch="setClientEmail"
+            @on-fetch="({ email }) => (initialData.email = email)"
             auto-load
             url="Clients/findOne"
         />
-
         <FormModel
-            :default-actions="false"
+            ref="formModelRef"
             :form-initial-data="initialData"
             :observe-form-changes="false"
             :url-create="urlCreate"
-            @on-data-saved="onDataSaved()"
+            :mapper="onBeforeSave"
+            @on-data-saved="onDataSaved"
         >
             <template #form="{ data, validate }">
                 <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
@@ -171,19 +214,22 @@ const onDataSaved = async () => {
                         option-label="code"
                         option-value="id"
                         v-model="data.companyFk"
+                        @update:model-value="getAmountPaid()"
                     />
                 </VnRow>
-
                 <VnRow>
                     <VnSelect
                         :label="t('Bank')"
-                        :options="bankOptions"
-                        :required="true"
-                        @update:model-value="setPaymentType($event)"
-                        hide-selected
-                        option-label="bank"
-                        option-value="id"
                         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">
@@ -200,59 +246,54 @@ const onDataSaved = async () => {
                         :required="true"
                         @update:model-value="calculateFromAmount($event)"
                         clearable
-                        type="number"
                         v-model.number="data.amountPaid"
                     />
                 </VnRow>
-
+                <div v-if="data.bankFk?.accountingType?.code == 'compensation'">
-                <div class="text-h6" v-if="data.bankFk === 3 || data.bankFk === 3117">
+                    <div class="text-h6">
-                    {{ t('Compensation') }}
+                        {{ t('Compensation') }}
-                </div>
+                    </div>
-
+                    <VnRow>
-                <VnRow>
-                    <div class="col" v-if="data.bankFk === 3 || data.bankFk === 3117">
                         <VnInput
                             :label="t('Compensation account')"
                             clearable
                             v-model="data.compensationAccount"
+                            @blur="accountShortToStandard"
                         />
-                    </div>
+                    </VnRow>
-                    <VnInput
+                </div>
-                        :label="t('Reference')"
+                <VnInput
-                        :required="true"
+                    :label="t('Reference')"
-                        clearable
+                    :required="true"
-                        v-model="data.description"
+                    clearable
-                    />
+                    v-model="data.description"
-                </VnRow>
+                />
 
-                <div class="q-mt-lg" v-if="data.bankFk === 2">
+                <div v-if="data.bankFk?.accountingType?.code == 'cash'">
                     <div class="text-h6">{{ t('Cash') }}</div>
                     <VnRow>
-                        <VnInput
+                        <VnInputNumber
                             :label="t('Delivered amount')"
                             @update:model-value="calculateFromDeliveredAmount($event)"
                             clearable
-                            type="number"
+                            v-model="data.deliveredAmount"
-                            v-model="deliveredAmount"
                         />
-                        <VnInput
+                        <VnInputNumber
                             :label="t('Amount to return')"
-                            clearable
                             disable
-                            type="number"
+                            v-model="data.amountToReturn"
-                            v-model="amountToReturn"
                         />
                     </VnRow>
                     <VnRow>
-                        <QCheckbox v-model="viewReceipt" />
+                        <QCheckbox v-model="viewReceipt" :label="t('View recipt')" />
-                        <QCheckbox v-model="sendEmail" />
+                        <QCheckbox v-model="shouldSendEmail" :label="t('Send email')" />
                     </VnRow>
                 </div>
                 <div class="q-mt-lg row justify-end">
                     <QBtn
-                        :disabled="isLoading"
+                        :disabled="formModelRef.isLoading"
                         :label="t('globals.cancel')"
-                        :loading="isLoading"
+                        :loading="formModelRef.isLoading"
                         class="q-ml-sm"
                         color="primary"
                         flat
@@ -260,9 +301,9 @@ const onDataSaved = async () => {
                         v-close-popup
                     />
                     <QBtn
-                        :disabled="isLoading"
+                        :disabled="formModelRef.isLoading"
                         :label="t('globals.save')"
-                        :loading="isLoading"
+                        :loading="formModelRef.isLoading"
                         color="primary"
                         type="submit"
                     />
@@ -287,4 +328,8 @@ es:
     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>