Cambios solicitados

src/composables/inputSelectFilterFn.js

@@ -1,33 +0,0 @@
-/**
- * Filtra las opciones basadas en un valor de entrada y actualiza las opciones filtradas.
- *
- * @param {string} val - El valor de entrada para filtrar las opciones. (la emite el evento @filter del componente QSelect)
- * @param {Function} update - Función de actualización que debe ser llamada para actualizar las opciones filtradas.(la provee el evento @filter del componente QSelect)
- * @param {Function} abort - Función que puede ser llamada para abortar o cancelar el filtrado actual. (la provee el evento @filter del componente QSelect)
- * @param {Object} optionsToFilter - Objeto que contiene las opciones originales y filtradas.
- */
-
-function normalizeString(text) {
-    return text
-        .toLowerCase()
-        .normalize('NFD')
-        .replace(/[\u0300-\u036f]/g, '');
-}
-
-export function inputSelectFilter(val, update, abort, optionsToFilter) {
-    if (val === '') {
-        update(() => {
-            optionsToFilter.filtered = JSON.parse(
-                JSON.stringify(optionsToFilter.original)
-            );
-        });
-        return;
-    }
-
-    update(() => {
-        const searchQuery = val.toLowerCase();
-        optionsToFilter.filtered = optionsToFilter.original.filter((option) =>
-            normalizeString(option.label).includes(normalizeString(searchQuery))
-        );
-    });
-}

src/composables/useUserConfig.js

@@ -1,8 +1,10 @@
 import axios from 'axios';
 import { useState } from './useState';
+import useNotify from './useNotify';
 
 export function useUserConfig() {
     const state = useState();
+    const { notify } = useNotify();
 
     async function fetch() {
         try {
@@ -14,6 +16,7 @@ export function useUserConfig() {
 
             return data;
         } catch (error) {
+            notify('globals.errors.userConfig', 'negative');
             console.error('Error fetching user config:', error);
         }
     }

src/i18n/en/index.js

@@ -44,6 +44,7 @@ export default {
         statusInternalServerError: 'An internal server error has ocurred',
         statusBadGateway: 'It seems that the server has fall down',
         statusGatewayTimeout: 'Could not contact the server',
+        userConfig: 'Error fetching user config',
     },
     login: {
         title: 'Login',
@@ -399,9 +400,9 @@ export default {
                 chooseValidCompany: 'Choose a valid company',
                 chooseValidPrinter: 'Choose a valid printer',
                 fillDates: 'Invoice date and the max date should be filled',
-                invoiceDateLessThanMaxDate: "Invoice date can't be less than max date",
+                invoiceDateLessThanMaxDate: 'Invoice date can not be less than max date',
                 invoiceWithFutureDate: 'Exists an invoice with a future date',
-                noTicketsToInvoice: "There aren't clients to invoice",
+                noTicketsToInvoice: 'There are not clients to invoice',
                 criticalInvoiceError: 'Critical invoicing error, process stopped',
             },
             table: {

src/i18n/es/index.js

@@ -44,6 +44,7 @@ export default {
         statusInternalServerError: 'Ha ocurrido un error interno del servidor',
         statusBadGateway: 'Parece ser que el servidor ha caído',
         statusGatewayTimeout: 'No se ha podido contactar con el servidor',
+        userConfig: 'Error al obtener configuración de usuario',
     },
     login: {
         title: 'Inicio de sesión',

src/pages/InvoiceOut/InvoiceOutGlobal.vue

@@ -74,20 +74,6 @@ const columns = computed(() => {
     ];
 });
 
-const cardStatusText = computed(() => {
-    return t(`status.${status.value}`);
-});
-
-const percentageStatusText = computed(() => {
-    return `${getPercentage.value}% (${getAddressNumber.value} ${t('of')} ${
-        getNAddresses.value
-    })`;
-});
-
-const pdfStatusText = computed(() => {
-    return `${nPdfs.value} ${t('of')} ${totalPdfs.value} PDFs`;
-});
-
 const rows = computed(() => {
     if (!errors && !errors.length > 0) return [];
     return errors.value.map((row) => {
@@ -110,7 +96,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <QDrawer v-model="stateStore.rightDrawer" :width="256" side="right" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <InvoiceOutGlobalForm />
         </QScrollArea>
@@ -119,9 +105,11 @@ onUnmounted(() => {
     <QPage class="column items-center q-pa-md">
         <QCard v-if="status" class="card">
             <QCardSection class="card-section">
-                <span class="status-text">{{ cardStatusText }}</span>
+                <span class="status-text">{{ t(`status.${status}`) }}</span>
-                <span class="text">{{ percentageStatusText }}</span>
+                <span class="text">{{
-                <span class="text">{{ pdfStatusText }}</span>
+                    `${getPercentage}% (${getAddressNumber} ${t('of')} ${getNAddresses})`
+                }}</span>
+                <span class="text">{{ `${nPdfs} ${t('of')} ${totalPdfs} PDFs` }}</span>
             </QCardSection>
         </QCard>
 

src/pages/InvoiceOut/InvoiceOutGlobalForm.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { onMounted, ref, computed, reactive } from 'vue';
+import { onMounted, ref, computed } 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
 
 const { t } = useI18n();
@@ -16,29 +16,19 @@ const {
     formInitialData,
 
     invoicing,
-    printer,
     status,
 } = storeToRefs(invoiceOutGlobalStore);
 
 // invoiceOutGlobalStore actions
-const { makeInvoice, setPrinterValue, setStatusValue } = invoiceOutGlobalStore;
+const { makeInvoice, setStatusValue } = invoiceOutGlobalStore;
 
 const clientsToInvoice = ref('all');
 
-const companiesOptions = reactive({
+const companiesOptions = ref([]);
-    original: [],
-    filtered: [],
-});
 
-const printersOptions = reactive({
+const printersOptions = ref([]);
-    original: [],
-    filtered: [],
-});
 
-const clientsOptions = reactive({
+const clientsOptions = ref([]);
-    original: [],
-    filtered: [],
-});
 
 const formData = ref({
     companyFk: null,
@@ -50,9 +40,9 @@ const formData = ref({
 
 const optionsInitialData = computed(() => {
     return (
-        companiesOptions.original.length > 0 &&
+        companiesOptions.value.length > 0 &&
-        printersOptions.original.length > 0 &&
+        printersOptions.value.length > 0 &&
-        clientsOptions.original.length > 0
+        clientsOptions.value.length > 0
     );
 });
 
@@ -66,23 +56,15 @@ const getStatus = computed({
 });
 
 const onFetchCompanies = (companies) => {
-    companiesOptions.original = companies.map((company) => {
+    companiesOptions.value = [...companies];
-        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) => {
+    printersOptions.value = [...printers];
-        return { value: printer.id, label: printer.name };
-    });
 };
 
 const onFetchClients = (clients) => {
-    clientsOptions.original = clients.map((client) => {
+    clientsOptions.value = [...clients];
-        return { value: client.id, label: client.name };
-    });
 };
 
 onMounted(async () => {
@@ -99,9 +81,10 @@ onMounted(async () => {
     <QForm
         v-if="!initialDataLoading && optionsInitialData"
         @submit="makeInvoice(formData, clientsToInvoice)"
-        class="q-pa-md text-white"
+        class="form-container q-pa-md"
+        style="max-width: 256px"
     >
-        <div class="q-gutter-md">
+        <div class="column q-gutter-y-md">
             <QRadio
                 v-model="clientsToInvoice"
                 dense
@@ -116,25 +99,17 @@ onMounted(async () => {
                 :label="t('oneClient')"
                 :dark="true"
             />
-            <QSelect
+            <VnSelectFilter
                 v-if="clientsToInvoice === 'one'"
                 :label="t('client')"
-                :options="clientsOptions.filtered"
+                v-model="formData.clientId"
-                use-input
+                :options="clientsOptions"
-                option-value="value"
+                option-value="id"
-                option-label="label"
+                option-label="name"
-                emit-value
+                hide-selected
-                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
                 dense
@@ -194,54 +169,36 @@ onMounted(async () => {
                     </QIcon>
                 </template>
             </QInput>
-            <QSelect
+            <VnSelectFilter
-                v-if="optionsInitialData"
                 :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"
-            />
+                :options="companiesOptions"
-            <QSelect
+                option-value="id"
-                :label="t('printer')"
+                option-label="code"
-                :options="printersOptions.filtered"
+                hide-selected
-                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="
+            <VnSelectFilter
-                    (val, update, abort) =>
+                :label="t('printer')"
-                        inputSelectFilter(val, update, abort, printersOptions)
-                "
                 v-model="formData.printer"
+                :options="printersOptions"
+                option-value="id"
+                option-label="name"
+                hide-selected
+                dense
+                outlined
+                rounded
             />
         </div>
+
         <QBtn
             v-if="!invoicing"
             :label="t('invoiceOut')"
             type="submit"
             color="primary"
-            class="full-width q-mt-md"
+            class="q-mt-md full-width"
             unelevated
             rounded
             dense
@@ -250,7 +207,7 @@ onMounted(async () => {
             v-if="invoicing"
             :label="t('stop')"
             color="primary"
-            class="full-width q-mt-md"
+            class="q-mt-md full-width"
             unelevated
             rounded
             dense
@@ -259,6 +216,12 @@ onMounted(async () => {
     </QForm>
 </template>
 
+<style scoped>
+.form-container > * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
     {
         "en": {

src/pages/Travel/TravelCreate.vue

@@ -1,11 +1,10 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { reactive, computed } from 'vue';
+import { reactive, computed, ref } from 'vue';
 import FetchData from 'components/FetchData.vue';
 import { useTravelStore } from 'src/stores/travel';
 import { useRouter, useRoute } from 'vue-router';
-import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import { toDate } from 'src/filters';
 import { onBeforeMount } from 'vue';
 
 const { t } = useI18n();
@@ -22,15 +21,9 @@ const newTravelDataForm = reactive({
     warehouseInFk: null,
 });
 
-const agenciesOptions = reactive({
+const agenciesOptions = ref([]);
-    original: [],
-    filtered: [],
-});
 
-const warehousesOptions = reactive({
+const warehousesOptions = ref([]);
-    original: [],
-    filtered: [],
-});
 
 onBeforeMount(() => {
     if (route.query.travelData) {
@@ -51,15 +44,11 @@ const createTravel = async () => {
 };
 
 const onFetchAgencies = (agencies) => {
-    agenciesOptions.original = agencies.map((agency) => {
+    agenciesOptions.value = [...agencies];
-        return { value: agency.agencyFk, label: agency.name };
-    });
 };
 
 const onFetchWarehouses = (warehouses) => {
-    warehousesOptions.original = warehouses.map((warehouse) => {
+    warehousesOptions.value = [...warehouses];
-        return { value: warehouse.id, label: warehouse.name };
-    });
 };
 
 const canSubmit = computed(() => {
@@ -88,21 +77,15 @@ const redirectToTravelList = () => {
                     v-model="newTravelDataForm.ref"
                     :label="t('travel.shared.reference')"
                     filled
-                    style="max-width: 100%"
                 />
-                <QSelect
+                <VnSelectFilter
-                    :options="agenciesOptions.filtered"
-                    v-model="newTravelDataForm.agencyModeFk"
-                    filled
-                    use-input
-                    @filter="
-                        (val, update, abort) =>
-                            inputSelectFilter(val, update, abort, agenciesOptions)
-                    "
                     :label="t('travel.shared.agency')"
-                    transition-show="jump-up"
+                    v-model="newTravelDataForm.agencyModeFk"
-                    transition-hide="jump-up"
+                    :options="agenciesOptions"
-                    style="max-width: 100%"
+                    option-value="agencyFk"
+                    option-label="name"
+                    hide-selected
+                    filled
                 />
                 <QInput
                     v-model="newTravelDataForm.shipped"
@@ -118,31 +101,23 @@ const redirectToTravelList = () => {
                     mask="date"
                     :label="t('travel.shared.landed')"
                 />
-                <QSelect
+                <VnSelectFilter
-                    :options="warehousesOptions.filtered"
-                    v-model="newTravelDataForm.warehouseOutFk"
-                    filled
-                    use-input
-                    @filter="
-                        (val, update, abort) =>
-                            inputSelectFilter(val, update, abort, warehousesOptions)
-                    "
                     :label="t('travel.shared.wareHouseOut')"
-                    transition-show="jump-up"
+                    v-model="newTravelDataForm.warehouseOutFk"
-                    transition-hide="jump-up"
+                    :options="warehousesOptions"
-                />
+                    option-value="id"
-                <QSelect
+                    option-label="name"
-                    :options="warehousesOptions.filtered"
+                    hide-selected
-                    v-model="newTravelDataForm.warehouseInFk"
                     filled
-                    use-input
+                />
-                    @filter="
+                <VnSelectFilter
-                        (val, update, abort) =>
-                            inputSelectFilter(val, update, abort, warehousesOptions)
-                    "
                     :label="t('travel.shared.wareHouseIn')"
-                    transition-show="jump-up"
+                    v-model="newTravelDataForm.warehouseInFk"
-                    transition-hide="jump-up"
+                    :options="warehousesOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                    filled
                 />
             </QCard>
             <div class="row">

src/pages/Travel/TravelFilter.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
 import { toDate } from 'src/filters';
 
@@ -14,37 +14,22 @@ const props = defineProps({
     },
 });
 
-const warehousesOptions = reactive({
+const warehousesOptions = ref([]);
-    original: [],
-    filtered: [],
-});
 
-const continentsOptions = reactive({
+const continentsOptions = ref([]);
-    original: [],
-    filtered: [],
-});
 
-const agenciesOptions = reactive({
+const agenciesOptions = ref([]);
-    original: [],
-    filtered: [],
-});
 
 const onFetchWarehouses = (warehouses) => {
-    warehousesOptions.original = warehouses.map((warehouse) => {
+    warehousesOptions.value = [...warehouses];
-        return { value: warehouse.id, label: warehouse.name };
-    });
 };
 
 const onFetchContinents = (continents) => {
-    continentsOptions.original = continents.map((continent) => {
+    continentsOptions.value = [...continents];
-        return { value: continent.code, label: continent.name };
-    });
 };
 
 const onFetchAgencies = (agencies) => {
-    agenciesOptions.original = agencies.map((agency) => {
+    agenciesOptions.value = [...agencies];
-        return { value: agency.agencyFk, label: agency.name };
-    });
 };
 
 const add = (paramsObj, key) => {
@@ -75,7 +60,7 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
+            <QList dense style="max-width: 256px" class="list">
                 <QItem class="q-my-sm">
                     <QItemSection>
                         <QInput
@@ -90,83 +75,46 @@ const decrement = (paramsObj, key) => {
                 </QItem>
                 <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QSelect
+                        <VnSelectFilter
                             :label="t('params.agencyModeFk')"
-                            :options="agenciesOptions.filtered"
-                            use-input
-                            option-value="value"
-                            option-label="label"
-                            emit-value
-                            map-options
-                            transition-show="jump-up"
-                            transition-hide="jump-up"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
-                            @filter="
-                                (val, update, abort) =>
-                                    inputSelectFilter(val, update, abort, agenciesOptions)
-                            "
                             v-model="params.agencyModeFk"
+                            :options="agenciesOptions"
+                            option-value="agencyFk"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QSelect
+                        <VnSelectFilter
-                            :label="t('travel.shared.wareHouseOut')"
+                            :label="t('params.warehouseOutFk')"
-                            :options="warehousesOptions.filtered"
-                            use-input
-                            option-value="value"
-                            option-label="label"
-                            emit-value
-                            map-options
-                            transition-show="jump-up"
-                            transition-hide="jump-up"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
-                            @filter="
-                                (val, update, abort) =>
-                                    inputSelectFilter(
-                                        val,
-                                        update,
-                                        abort,
-                                        warehousesOptions
-                                    )
-                            "
                             v-model="params.warehouseOutFk"
+                            :options="warehousesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QSelect
+                        <VnSelectFilter
-                            :label="t('params.wareHouseIn')"
+                            :label="t('params.warehouseInFk')"
-                            :options="warehousesOptions.filtered"
+                            v-model="params.warehouseInFk"
-                            use-input
+                            :options="warehousesOptions"
-                            option-value="value"
+                            option-value="id"
-                            option-label="label"
+                            option-label="name"
-                            emit-value
+                            hide-selected
-                            map-options
-                            transition-show="jump-up"
-                            transition-hide="jump-up"
                             dense
-                            lazy-rules
                             outlined
                             rounded
-                            @filter="
-                                (val, update, abort) =>
-                                    inputSelectFilter(
-                                        val,
-                                        update,
-                                        abort,
-                                        warehousesOptions
-                                    )
-                            "
-                            v-model="params.warehouseInFk"
                         />
                     </QItemSection>
                 </QItem>
@@ -271,30 +219,16 @@ const decrement = (paramsObj, key) => {
                 </QItem>
                 <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QSelect
+                        <VnSelectFilter
                             :label="t('params.continent')"
-                            :options="continentsOptions.filtered"
+                            v-model="params.continent"
-                            use-input
+                            :options="continentsOptions"
-                            option-value="value"
+                            option-value="code"
-                            option-label="label"
+                            option-label="name"
-                            emit-value
+                            hide-selected
-                            map-options
-                            transition-show="jump-up"
-                            transition-hide="jump-up"
                             dense
-                            lazy-rules
                             outlined
                             rounded
-                            @filter="
-                                (val, update, abort) =>
-                                    inputSelectFilter(
-                                        val,
-                                        update,
-                                        abort,
-                                        continentsOptions
-                                    )
-                            "
-                            v-model="params.continent"
                         />
                     </QItemSection>
                 </QItem>
@@ -336,6 +270,10 @@ const decrement = (paramsObj, key) => {
 </template>
 
 <style scoped>
+.list * {
+    max-width: 100%;
+}
+
 .input-number >>> input[type='number'] {
     -moz-appearance: textfield;
 }
@@ -353,8 +291,8 @@ const decrement = (paramsObj, key) => {
             "params": {
                 "search": "Id/Reference",
                 "agencyModeFk": "Agency",
-                "wareHouseIn": "Warehouse In",
+                "warehouseInFk": "Warehouse In",
-                "wareHouseOut": "Warehouse Out",
+                "warehouseOutFk": "Warehouse Out",
                 "scopeDays": "Days onward",
                 "landedFrom": "Landed from",
                 "landedTo": "Landed to",
@@ -366,8 +304,8 @@ const decrement = (paramsObj, key) => {
             "params":{
                 "search": "Id/Referencia",
                 "agencyModeFk": "Agencia",
-                "wareHouseIn": "Alm. entrada",
+                "warehouseInFk": "Alm. entrada",
-                "wareHouseOut": "Alm. salida",
+                "warehouseOutFk": "Alm. salida",
                 "scopeDays": "Días adelante",
                 "landedFrom": "Llegada desde",
                 "landedTo": "Llegada hasta",

src/stores/travel.js

@@ -21,9 +21,9 @@ export const useTravelStore = defineStore({
         async createTravel(travelData) {
             const params = {
                 ref: travelData.ref,
-                agencyModeFk: travelData.agencyModeFk.value,
+                agencyModeFk: travelData.agencyModeFk,
-                warehouseOutFk: travelData.warehouseOutFk.value,
+                warehouseOutFk: travelData.warehouseOutFk,
-                warehouseInFk: travelData.warehouseInFk.value,
+                warehouseInFk: travelData.warehouseInFk,
                 landed: new Date(travelData.landed),
                 shipped: new Date(travelData.shipped),
             };