Adapt invoices out global form to new design and some improvements

src/pages/InvoiceOut/InvoiceOutGlobalForm.vue

@@ -1,8 +1,11 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { storeToRefs } from 'pinia';
+import { toDate } from 'src/filters';
+import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
+import FetchData from 'components/FetchData.vue';
 
 const { t } = useI18n();
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
@@ -11,9 +14,7 @@ const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
 const {
     initialDataLoading,
     formInitialData,
-    clientsOptions,
+
-    companiesOptions,
-    printersOptions,
     invoicing,
     printer,
     status,
@@ -22,20 +23,37 @@ const {
 // invoiceOutGlobalStore actions
 const { makeInvoice, setPrinterValue, setStatusValue } = invoiceOutGlobalStore;
 
+const clientsToInvoice = ref('all');
+
+const companiesOptions = reactive({
+    original: [],
+    filtered: [],
+});
+
+const printersOptions = reactive({
+    original: [],
+    filtered: [],
+});
+
+const clientsOptions = reactive({
+    original: [],
+    filtered: [],
+});
+
 const formData = ref({
     companyFk: null,
     invoiceDate: null,
     maxShipped: null,
     clientId: null,
+    printer: null,
 });
 
-const getPrinter = computed({
+const optionsInitialData = computed(() => {
-    get() {
+    return (
-        return printer.value;
+        companiesOptions.original.length > 0 &&
-    },
+        printersOptions.original.length > 0 &&
-    set(value) {
+        clientsOptions.original.length > 0
-        setPrinterValue(value.value);
+    );
-    },
 });
 
 const getStatus = computed({
@@ -47,36 +65,39 @@ const getStatus = computed({
     },
 });
 
-const clientsToInvoice = ref('all');
+const onFetchCompanies = (companies) => {
-const filteredClientsOptions = ref([]);
+    companiesOptions.original = companies.map((company) => {
+        return { value: company.id, label: company.code };
+    });
+    // Cuando necesitamos que el select muestre valores inicialmente le damos un valor inicial a los filters
+    companiesOptions.filtered = [...companiesOptions.original];
+};
+
+const onFetchPrinters = (printers) => {
+    printersOptions.original = printers.map((printer) => {
+        return { value: printer.id, label: printer.name };
+    });
+};
+
+const onFetchClients = (clients) => {
+    clientsOptions.original = clients.map((client) => {
+        return { value: client.id, label: client.name };
+    });
+};
 
 onMounted(async () => {
     await invoiceOutGlobalStore.init();
     formData.value = { ...formInitialData.value };
 });
-
-const inputSelectfilter = (val, update) => {
-    if (val === '') {
-        update(() => {
-            filteredClientsOptions.value = JSON.parse(
-                JSON.stringify(clientsOptions.value)
-            );
-        });
-        return;
-    }
-
-    update(() => {
-        const searchQuery = val.toLowerCase();
-        filteredClientsOptions.value = clientsOptions.value.filter(
-            (option) => option.label.toLowerCase().indexOf(searchQuery) > -1
-        );
-    });
-};
 </script>
 
 <template>
+    <FetchData url="Companies" @on-fetch="(data) => onFetchCompanies(data)" auto-load />
+    <FetchData url="Printers" @on-fetch="(data) => onFetchPrinters(data)" auto-load />
+    <FetchData url="Clients" @on-fetch="(data) => onFetchClients(data)" auto-load />
+
     <QForm
-        v-if="!initialDataLoading"
+        v-if="!initialDataLoading && optionsInitialData"
         @submit="makeInvoice(formData, clientsToInvoice)"
         class="q-pa-md text-white"
     >
@@ -97,44 +118,122 @@ const inputSelectfilter = (val, update) => {
             />
             <QSelect
                 v-if="clientsToInvoice === 'one'"
-                :options="filteredClientsOptions"
-                v-model="formData.clientId"
-                filled
-                use-input
                 :label="t('client')"
-                @filter="inputSelectfilter"
+                :options="clientsOptions.filtered"
+                use-input
+                option-value="value"
+                option-label="label"
+                emit-value
+                map-options
                 transition-show="jump-up"
                 transition-hide="jump-up"
+                dense
+                outlined
+                rounded
+                @filter="
+                    (val, update, abort) =>
+                        inputSelectFilter(val, update, abort, clientsOptions)
+                "
+                v-model="formData.clientId"
             />
             <QInput
-                v-model="formData.invoiceDate"
+                dense
-                type="date"
+                outlined
-                filled
+                rounded
-                mask="date"
+                placeholder="dd-mm-aaa"
                 :label="t('invoiceDate')"
+                :model-value="toDate(formData.invoiceDate)"
+            >
+                <template #append>
+                    <QIcon name="event" class="cursor-pointer">
+                        <QPopupProxy
+                            cover
+                            transition-show="scale"
+                            transition-hide="scale"
+                        >
+                            <QDate v-model="formData.invoiceDate">
+                                <div class="row items-center justify-end">
+                                    <QBtn
+                                        v-close-popup
+                                        label="Close"
+                                        color="primary"
+                                        flat
                                     />
+                                </div>
+                            </QDate>
+                        </QPopupProxy>
+                    </QIcon>
+                </template>
+            </QInput>
             <QInput
-                v-model="formData.maxShipped"
+                dense
-                type="date"
+                outlined
-                filled
+                rounded
-                mask="date"
+                placeholder="dd-mm-aaa"
                 :label="t('maxShipped')"
+                :model-value="toDate(formData.maxShipped)"
+            >
+                <template #append>
+                    <QIcon name="event" class="cursor-pointer">
+                        <QPopupProxy
+                            cover
+                            transition-show="scale"
+                            transition-hide="scale"
+                        >
+                            <QDate v-model="formData.maxShipped">
+                                <div class="row items-center justify-end">
+                                    <QBtn
+                                        v-close-popup
+                                        label="Close"
+                                        color="primary"
+                                        flat
                                     />
+                                </div>
+                            </QDate>
+                        </QPopupProxy>
+                    </QIcon>
+                </template>
+            </QInput>
             <QSelect
-                filled
+                v-if="optionsInitialData"
-                :options="companiesOptions"
-                v-model="formData.companyFk"
                 :label="t('company')"
+                :options="companiesOptions.filtered"
+                use-input
+                option-value="value"
+                option-label="label"
+                emit-value
+                map-options
                 transition-show="jump-up"
                 transition-hide="jump-up"
+                dense
+                outlined
+                rounded
+                lazy-rules
+                @filter="
+                    (val, update, abort) =>
+                        inputSelectFilter(val, update, abort, companiesOptions)
+                "
+                v-model="formData.companyFk"
             />
             <QSelect
-                filled
-                :options="printersOptions"
-                v-model="getPrinter"
                 :label="t('printer')"
+                :options="printersOptions.filtered"
+                use-input
+                option-value="value"
+                option-label="label"
+                emit-value
+                map-options
                 transition-show="jump-up"
                 transition-hide="jump-up"
+                dense
+                outlined
+                rounded
+                lazy-rules
+                @filter="
+                    (val, update, abort) =>
+                        inputSelectFilter(val, update, abort, printersOptions)
+                "
+                v-model="formData.printer"
             />
         </div>
         <QBtn

src/services/invoiceOut.service.js

@@ -33,18 +33,6 @@ const invoiceOutService = {
         return await request('GET', 'InvoiceOutConfigs/findOne', params);
     },
 
-    getCompanies: async (filter) => {
-        return await request('GET', 'Companies', { filter });
-    },
-
-    getPrinters: async (filter) => {
-        return await request('GET', 'Printers', { filter });
-    },
-
-    getClients: async (filter) => {
-        return await request('GET', 'Clients', { filter });
-    },
-
     getClientsToInvoice: async (params) => {
         return await request('POST', 'InvoiceOuts/clientsToInvoice', params);
     },

src/stores/invoiceOutGlobal.js

@@ -16,10 +16,8 @@ export const useInvoiceOutGlobalStore = defineStore({
             invoiceDate: null,
             maxShipped: null,
             clientId: null,
+            printer: null,
         },
-        clientsOptions: [],
-        companiesOptions: [],
-        printersOptions: [],
         addresses: [],
         minInvoicingDate: null,
         parallelism: null,
@@ -27,8 +25,8 @@ export const useInvoiceOutGlobalStore = defineStore({
         isInvoicing: false,
         status: null,
         addressIndex: 0,
-        printer: null,
         errors: [],
+        printer: null,
         nRequests: 0,
         nPdfs: 0,
         totalPdfs: 0,
@@ -51,10 +49,7 @@ export const useInvoiceOutGlobalStore = defineStore({
                     .substring(0, 10);
 
                 await Promise.all([
-                    this.fetchClients(),
                     this.fetchParallelism(),
-                    this.fetchCompanies(userInfo.companyFk),
-                    this.fetchPrinters(),
                     this.fetchInvoiceOutConfig(userInfo.companyFk),
                 ]);
 
@@ -64,45 +59,10 @@ export const useInvoiceOutGlobalStore = defineStore({
             }
         },
 
-        async fetchClients() {
-            const clientsFilter = { fields: ['id', 'name'], order: 'id', limit: 30 };
-            const clientsResponse = await invoiceOutService.getClients(clientsFilter);
-            this.clientsOptions = clientsResponse.map((client) => {
-                return { value: client.id, label: client.name };
-            });
-        },
-
-        async fetchCompanies(companyFk) {
-            const companiesFilters = { order: ['code'] };
-            const companiesResponse = await invoiceOutService.getCompanies(
-                companiesFilters
-            );
-            this.companiesOptions = companiesResponse.map((company) => {
-                return { value: company.id, label: company.code };
-            });
-
-            this.formInitialData.companyFk = this.companiesOptions.find(
-                (company) => companyFk === company.value
-            );
-        },
-
-        async fetchPrinters() {
-            const printersFilters = {
-                fields: ['id', 'name'],
-                where: { isLabeler: false },
-                order: 'name ASC',
-                limit: 30,
-            };
-            const printersResponse = await invoiceOutService.getPrinters(printersFilters);
-            this.printersOptions = printersResponse.map((printer) => {
-                return { value: printer.id, label: printer.name };
-            });
-        },
-
         async fetchInvoiceOutConfig(companyFk) {
+            this.formInitialData.companyFk = companyFk;
             const params = { companyFk: companyFk };
             const { issued } = await invoiceOutService.getInvoiceDate(params);
-
             const stringDate = issued.substring(0, 10);
             this.minInvoicingDate = stringDate;
             this.formInitialData.invoiceDate = stringDate;
@@ -118,11 +78,12 @@ export const useInvoiceOutGlobalStore = defineStore({
             this.invoicing = true;
             this.status = 'packageInvoicing';
             try {
+                this.printer = formData.printer;
                 const params = {
                     invoiceDate: new Date(formData.invoiceDate),
                     maxShipped: new Date(formData.maxShipped),
-                    clientId: formData.clientId ? formData.clientId.value : null,
+                    clientId: formData.clientId ? formData.clientId : null,
-                    companyFk: formData.companyFk.value,
+                    companyFk: formData.companyFk,
                 };
 
                 this.validateMakeInvoceParams(params, clientsToInvoice);
@@ -204,7 +165,7 @@ export const useInvoiceOutGlobalStore = defineStore({
                 addressId: address.id,
                 invoiceDate: new Date(formData.invoiceDate),
                 maxShipped: new Date(formData.maxShipped),
-                companyFk: formData.companyFk.value,
+                companyFk: formData.companyFk,
             };
 
             this.status = 'invoicing';
@@ -238,7 +199,7 @@ export const useInvoiceOutGlobalStore = defineStore({
             try {
                 this.nRequests++;
                 this.totalPdfs++;
-                const params = { printerFk: this.printer.value };
+                const params = { printerFk: this.printer };
                 await invoiceOutService.makePdfAndNotify(invoiceId, params);
                 this.nPdfs++;
                 this.nRequests--;
@@ -280,10 +241,6 @@ export const useInvoiceOutGlobalStore = defineStore({
 
         // State mutations actions
 
-        setPrinterValue(printer) {
-            this.printer = printer;
-        },
-
         setStatusValue(status) {
             this.status = status;
         },