From 9121e795335cadbc35f433b46458792735c95db7 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 9 Dec 2024 14:20:03 +0100
Subject: [PATCH] perf: refs #7134 use ForModelPopup

---
 src/components/common/VnAccountNumber.vue     |   9 +-
 .../Supplier/Card/SupplierFiscalData.vue      |   2 -
 .../Supplier/Card/SupplierNewPayment.vue      | 141 +++++++-----------
 3 files changed, 63 insertions(+), 89 deletions(-)

diff --git a/src/components/common/VnAccountNumber.vue b/src/components/common/VnAccountNumber.vue
index c4fa78674..f66684a0f 100644
--- a/src/components/common/VnAccountNumber.vue
+++ b/src/components/common/VnAccountNumber.vue
@@ -9,7 +9,7 @@ const $props = defineProps({
     },
     insertable: {
         type: Boolean,
-        default: false,
+        default: true,
     },
 });
 
@@ -79,5 +79,10 @@ function accountShortToStandard() {
 </script>
 
 <template>
-    <QInput @keydown="handleKeydown" ref="vnInputRef" v-model="internalValue" />
+    <QInput
+        @keydown="handleKeydown"
+        ref="vnInputRef"
+        v-model="internalValue"
+        :maxlength="10"
+    />
 </template>
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index 1a79be8bc..46e377139 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/src/pages/Supplier/Card/SupplierFiscalData.vue
@@ -106,8 +106,6 @@ function handleLocation(data, location) {
                     :label="t('supplier.fiscalData.account')"
                     clearable
                     data-cy="supplierFiscalDataAccount"
-                    insertable
-                    :maxlength="10"
                 />
                 <VnSelect
                     :label="t('supplier.fiscalData.sageTaxTypeFk')"
diff --git a/src/pages/Supplier/Card/SupplierNewPayment.vue b/src/pages/Supplier/Card/SupplierNewPayment.vue
index 9f6d2f5e4..3b17b151c 100644
--- a/src/pages/Supplier/Card/SupplierNewPayment.vue
+++ b/src/pages/Supplier/Card/SupplierNewPayment.vue
@@ -9,7 +9,7 @@ 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 FormModelPopup from 'components/FormModelPopup.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputNumber from 'components/common/VnInputNumber.vue';
@@ -74,39 +74,44 @@ const filterRecordFindOne = {
 };
 
 const initialData = reactive({
-    amountPaid: $props.totalCredit,
-    supplierFk: route.params.id,
-    companyFk: $props.companyId,
-    bankFk: $props.bankId,
-    email: recordFindOne.value.email,
+    received: '2001-01-01T11:00:00.000Z',
+    supplierFk: '1',
+    amount: 123123,
     currencyFk: 1,
+    bankFk: 3,
+    concept: 'Credit Card, ',
+    amountToReturn: null,
+    orderBy: 'issued',
+    payMethodFk: 1,
+    bankingFees: 0,
+    companyFk: 442,
+    divisa: null,
 });
 
 onBeforeMount(() => {
-    urlCreate.value = `Suppliers/${route.params.id}/createReceipt`;
+    urlCreate.value = `Suppliers/${route.params.id}/createPayment`;
 });
 
 function setPaymentType(accounting) {
     if (!accounting) return;
     accountingType.value = accounting.accountingType;
 
-    initialData.description = [];
-    initialData.payed = Date.vnNew();
+    initialData.concept = [];
+    initialData.received = 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
+        initialData.received.setDate(
+            initialData.received.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);
+    if (accountingType.value.code == 'compensation') return (initialData.concept = '');
+    if (accountingType.value.receiptconcept)
+        initialData.concept.push(accountingType.value.receiptconcept);
+    if (initialData.concept) initialData.concept.push(initialData.concept);
 
-    initialData.description = initialData.description.join(', ');
+    initialData.concept = initialData.concept.join(', ');
 }
 
 const calculateFromAmount = (event) => {
@@ -115,17 +120,18 @@ const calculateFromAmount = (event) => {
 };
 
 const calculateFromDeliveredAmount = (event) => {
-    initialData.amountToReturn = parseFloat(event) - initialData.amountPaid;
+    initialData.amountToReturn = parseFloat(event) - initialData.amount;
 };
 
 function onBeforeSave(data) {
-    const exceededAmount = data.amountPaid > maxAmount.value;
+    const exceededAmount = data.amount > 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 supplier`), 'negative');
 
+    data.dueDate = data.received;
     data.bankFk = data.bankFk.id;
     return data;
 }
@@ -144,25 +150,7 @@ async function onDataSaved(formData, { id }) {
     }
 }
 
-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() {
+async function getAmount() {
     const filter = {
         where: {
             supplierFk: route.params.id,
@@ -170,7 +158,7 @@ async function getAmountPaid() {
         },
     };
     const { data } = await getSupplierRisk(filter);
-    initialData.amountPaid = (data?.length && data[0].amount) || undefined;
+    initialData.amount = (data?.length && data[0].amount) || undefined;
 }
 </script>
 
@@ -195,7 +183,7 @@ async function getAmountPaid() {
             @on-fetch="(data) => (currenciesOptions = data)"
             auto-load
         />
-        <FormModel
+        <FormModelPopup
             ref="formModelRef"
             :form-initial-data="initialData"
             :observe-form-changes="false"
@@ -203,7 +191,7 @@ async function getAmountPaid() {
             :mapper="onBeforeSave"
             @on-data-saved="onDataSaved"
         >
-            <template #form="{ data, validate }">
+            <template #form-inputs="{ data, validate }">
                 <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
                     <QIcon name="close" size="sm" />
                 </span>
@@ -213,7 +201,7 @@ async function getAmountPaid() {
                     <VnInputDate
                         :label="t('Date')"
                         :required="true"
-                        v-model="data.payed"
+                        v-model="data.received"
                     />
                     <VnSelect
                         :label="t('Company')"
@@ -224,7 +212,7 @@ async function getAmountPaid() {
                         option-label="code"
                         option-value="id"
                         v-model="data.companyFk"
-                        @update:model-value="getAmountPaid()"
+                        @update:model-value="getAmount()"
                     />
                 </VnRow>
                 <VnRow>
@@ -251,33 +239,30 @@ async function getAmountPaid() {
                             </QItem>
                         </template>
                     </VnSelect>
-                    <VnInputNumber
-                        :label="t('Amount')"
-                        :required="true"
-                        @update:model-value="calculateFromAmount($event)"
-                        clearable
-                        v-model.number="data.amountPaid"
+                    <VnSelect
+                        :label="t('supplier.billingData.payMethodFk')"
+                        v-model="data.payMethodFk"
+                        url="Paymethods"
+                        auto-load
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        :rules="validate('supplier.payMethodFk')"
                     />
                 </VnRow>
-                <div v-if="data.bankFk?.accountingType?.code == 'compensation'">
-                    <div class="text-h6">
-                        {{ t('Compensation') }}
-                    </div>
-                    <VnRow>
-                        <VnAccountNumber
-                            :label="t('Compensation account')"
-                            clearable
-                            required
-                            v-model="data.compensationAccount"
-                            @blur="accountShortToStandard"
-                        />
-                    </VnRow>
-                </div>
+
+                <VnInputNumber
+                    :label="t('Amount')"
+                    :required="true"
+                    @update:model-value="calculateFromAmount($event)"
+                    clearable
+                    v-model.number="data.amount"
+                />
                 <VnInput
                     :label="t('Reference')"
                     :required="true"
                     clearable
-                    v-model="data.description"
+                    v-model="data.concept"
                 />
 
                 <div v-if="data.bankFk?.accountingType?.code == 'cash'">
@@ -305,7 +290,12 @@ async function getAmountPaid() {
                         v-if="$props.extraFields.includes('orderBy')"
                         :label="t('Type')"
                         v-model="data.orderBy"
-                        :options="['issued', ' bookEntried', ' booked', ' dueDate']"
+                        :options="[
+                            { id: 'issued', name: 'Fecha de expedición' },
+                            { id: 'bookEntried', name: 'Fecha de asiento' },
+                            { id: 'booked', name: 'Fecha contable' },
+                            { id: 'dueDate', name: 'Fecha de vencimiento' },
+                        ]"
                         option-value="id"
                         option-label="name"
                         hide-selected
@@ -327,27 +317,8 @@ async function getAmountPaid() {
                         v-model="data.divisa"
                     />
                 </VnRow>
-                <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>
+        </FormModelPopup>
     </QDialog>
 </template>