src/components/TransferInvoiceForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -24,14 +24,12 @@ const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
 const checked = ref(true);
-let skip = 0;
-
 const transferInvoiceParams = reactive({
     id: $props.invoiceOutData?.id,
     refFk: $props.invoiceOutData?.ref,
 });
+
 const closeButton = ref(null);
-const clientsOptions = ref([]);
 const rectificativeTypeOptions = ref([]);
 const siiTypeInvoiceOutsOptions = ref([]);
 const invoiceCorrectionTypesOptions = ref([]);
@@ -40,46 +38,14 @@ const closeForm = () => {
     if (closeButton.value) closeButton.value.click();
 };
 
-onMounted(async () => {
+const selectedClient = (client) => {
-    await fetchClients();
+    transferInvoiceParams.selectedClientData = client;
-});
-
-const fetchClients = async () => {
-    try {
-        const filter = {
-            skip: skip,
-            order: 'id DESC',
-            limit: 10,
-        };
-        const { data } = await axios.get('http://localhost:9000/api/Clients/filter', {
-            params: {
-                filter: serializeFilter(filter),
-            },
-        });
-        clientsOptions.value = [...clientsOptions.value, ...data];
-        skip += 10;
-    } catch (error) {
-        console.error('Error fetching clients:', error);
-    }
 };
 
-const serializeFilter = (filter) => {
-    let serializedFilter = '{';
-    for (const key in filter) {
-        serializedFilter += `"${key}":${JSON.stringify(filter[key])},`;
-    }
-    serializedFilter = serializedFilter.slice(0, -1);
-    serializedFilter += '}';
-    return serializedFilter;
-};
-
-const handleScroll = async () => {
-    const selectEl = document.querySelector('.vn-select');
-    if (selectEl.scrollTop + selectEl.clientHeight >= selectEl.scrollHeight) {
-        await fetchClients();
-    }
-};
 const transferInvoice = async () => {
+    const hasToInvoiceByAddress =
+        transferInvoiceParams.selectedClientData.hasToInvoiceByAddress;
+
     const params = {
         id: transferInvoiceParams.id,
         cplusRectificationTypeFk: transferInvoiceParams.cplusRectificationTypeFk,
@@ -91,18 +57,27 @@ const transferInvoice = async () => {
     };
 
     try {
-        const clientDetails = await axios.get(
+        if (checked.value && hasToInvoiceByAddress) {
-            `Clients/${transferInvoiceParams.newClientFk}`
+            const response = await new Promise((resolve) => {
-        );
+                quasar
-
+                    .dialog({
-        if (checked.value && clientDetails.data.hasToInvoiceByAddress)
+                        component: VnConfirm,
-            quasar.dialog({
+                        componentProps: {
-                component: VnConfirm,
+                            title: t('Bill destination client'),
-                componentProps: {
+                            message: t('transferInvoiceInfo'),
-                    title: t('Bill destination client'),
+                        },
-                    message: t('confirmationInfo'),
+                    })
-                },
+                    .onOk(() => {
+                        resolve(true);
+                    })
+                    .onCancel(() => {
+                        resolve(false);
+                    });
             });
+            if (!response) {
+                return;
+            }
+        }
 
         const { data } = await axios.post('InvoiceOuts/transferInvoice', params);
         notify(t('Transferred invoice'), 'positive');
@@ -115,19 +90,15 @@ const transferInvoice = async () => {
 </script>
 
 <template>
-    <FetchData
-        url="Clients"
-        @on-fetch="(data) => (clientsOptions = data)"
-        :filter="{ fields: ['id', 'name'], order: 'id', limit: 30 }"
-        auto-load
-    />
     <FetchData
         url="CplusRectificationTypes"
         :filter="{ order: 'description' }"
         @on-fetch="
             (data) => (
                 (rectificativeTypeOptions = data),
-                (transferInvoiceParams.cplusRectificationTypeFk = data[1].id)
+                (transferInvoiceParams.cplusRectificationTypeFk = data.filter(
+                    (type) => type.description == 'I – Por diferencias'
+                )[0].id)
             )
         "
         auto-load
@@ -138,7 +109,9 @@ const transferInvoice = async () => {
         @on-fetch="
             (data) => (
                 (siiTypeInvoiceOutsOptions = data),
-                (transferInvoiceParams.siiTypeInvoiceOutFk = data[3].id)
+                (transferInvoiceParams.siiTypeInvoiceOutFk = data.filter(
+                    (type) => type.code == 'R4'
+                )[0].id)
             )
         "
         auto-load
@@ -159,20 +132,23 @@ const transferInvoice = async () => {
                 <div class="col">
                     <VnSelect
                         :label="t('Client')"
-                        :options="clientsOptions"
                         hide-selected
                         option-label="name"
                         option-value="id"
                         v-model="transferInvoiceParams.newClientFk"
                         :required="true"
-                        @scroll="handleScroll"
+                        url="Clients"
+                        :fields="['id', 'name', 'hasToInvoiceByAddress']"
+                        auto-load
                     >
                         <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
+                            <QItem
+                                v-bind="scope.itemProps"
+                                @click="selectedClient(scope.opt)"
+                            >
                                 <QItemSection>
                                     <QItemLabel>
-                                        #{{ scope.opt?.id }} -
+                                        #{{ scope.opt?.id }} - {{ scope.opt?.name }}
-                                        {{ scope.opt?.name }}
                                     </QItemLabel>
                                 </QItemSection>
                             </QItem>
@@ -230,7 +206,7 @@ const transferInvoice = async () => {
                 <div>
                     <QCheckbox :label="t('Bill destination client')" v-model="checked" />
                     <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
-                        <QTooltip>{{ t('checkInfo') }}</QTooltip>
+                        <QTooltip>{{ t('transferInvoiceInfo') }}</QTooltip>
                     </QIcon>
                 </div>
             </VnRow>
@@ -241,7 +217,8 @@ const transferInvoice = async () => {
 <i18n>
 en:
     checkInfo: New tickets from the destination customer will be generated in the consignee by default.
-    confirmationInfo: Destination customer is marked to bill in the consignee, do you want to continue?
+    transferInvoiceInfo: Destination customer is marked to bill in the consignee, do you want to continue?
+    confirmTransferInvoice: The destination customer has selected to bill in the consignee, do you want to continue?
 es:
     Transfer invoice: Transferir factura
     Transfer client: Transferir cliente
@@ -251,6 +228,6 @@ es:
     Type: Tipo
     Transferred invoice: Factura transferida
     Bill destination client: Facturar cliente destino
-    checkInfo: Los nuevos tickets del cliente destino, serán generados en el consignatario por defecto.
+    transferInvoiceInfo: Los nuevos tickets del cliente destino, serán generados en el consignatario por defecto.
-    confirmationInfo: El cliente destino tiene marcado facturar por consignatario, desea continuar?
+    confirmTransferInvoice: El cliente destino tiene marcado facturar por consignatario, desea continuar?
 </i18n>