Merge branch 'dev' into feature/ms-28-wagons

.vscode/settings.json

@@ -15,8 +15,6 @@
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "cSpell.words": ["axios"],
-
-    "editor.tabSize": 2,
     "files.autoSave": "onFocusChange",
     "files.trimTrailingWhitespace": true,
     "editor.hover.enabled": true,

src/components/common/VnSelectFilter.vue

@@ -89,7 +89,12 @@ const value = computed({
         ref="vnSelectRef"
     >
         <template v-if="isClearable" #append>
-            <QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
+            <QIcon
+                name="close"
+                @click.stop="value = null"
+                class="cursor-pointer"
+                size="18px"
+            />
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
             <slot :name="slotName" v-bind="slotData" />

src/components/ui/CardDescriptor.vue

@@ -57,20 +57,6 @@ async function getData() {
     emit('onFetch', data);
 }
 
-// watch($props, async () => {
-//     entity.value = null;
-//     await fetch();
-// });
-
-const options = [
-    'Transferir factura a ...',
-    'Ver factura ...',
-    'Enviar factura ...',
-    'Eliminar factura',
-    'Asentar factura',
-    'Regenerar PDF factura',
-    'Abono ...',
-];
 const emit = defineEmits(['onFetch']);
 </script>
 
@@ -110,15 +96,21 @@ const emit = defineEmits(['onFetch']);
                     </QBtn>
                 </RouterLink>
 
-                <QBtn color="white" dense flat icon="more_vert" round size="md">
+                <QBtn
+                    color="white"
+                    dense
+                    flat
+                    icon="more_vert"
+                    round
+                    size="md"
+                    v-if="slots.menu"
+                >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}
                     </QTooltip>
                     <QMenu>
-                        <QList dense v-for="option in options" :key="option">
+                        <QList>
-                            <QItem v-ripple clickable>
+                            <slot name="menu" :entity="entity" />
-                                {{ option }}
-                            </QItem>
                         </QList>
                     </QMenu>
                 </QBtn>

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/Card/InvoiceOutDescriptor.vue

@@ -7,6 +7,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+import InvoiceOutDescriptorMenu from './InvoiceOutDescriptorMenu.vue';
 
 const $props = defineProps({
     id: {
@@ -59,6 +60,9 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         @on-fetch="setData"
         data-key="invoiceOutData"
     >
+        <template #menu="{ entity }">
+            <InvoiceOutDescriptorMenu :invoiceOut="entity" />
+        </template>
         <template #body="{ entity }">
             <VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" />
             <VnLv

src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue

@@ -0,0 +1,23 @@
+<template>
+    <QItem v-ripple clickable>
+        <QItemSection>Transferir factura a ...</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>Ver factura ...</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>Enviar factura ...</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>Eliminar factura</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>Asentar factura</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>Regenerar PDF factura</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable>
+        <QItemSection>Abono ...</QItemSection>
+    </QItem>
+</template>

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/InvoiceOut/InvoiceOutList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { exportFile, useQuasar } from 'quasar';
@@ -55,6 +55,12 @@ const addElement = (element) => {
     }
 };
 
+watch(manageCheckboxes, (current, prev) => {
+    if (!current) {
+        arrayElements.value = [];
+    }
+});
+
 const downloadCsv = (rows) => {
     const data = arrayElements.value.length ? arrayElements.value : rows;
     let file;
@@ -244,13 +250,6 @@ const downloadCsv = (rows) => {
 .dark_icon {
     color: #121212;
 }
-
-.disabled,
-.disabled *,
-[disabled],
-[disabled] * {
-    cursor: default !important;
-}
 </style>
 
 <i18n>

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -5,7 +5,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import invoiceOutService from 'src/services/invoiceOut.service';
 import { toCurrency } from 'src/filters';
-import { QBadge, QBtn } from 'quasar';
+import { QCheckbox, QBtn } from 'quasar';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { toDate } from 'src/filters';
 
@@ -39,57 +39,66 @@ const filter = ref({
 const tableColumnComponents = {
     company: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     country: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     clientId: {
         component: QBtn,
-        props: { flat: true, color: 'blue' },
+        props: () => ({ flat: true, color: 'blue' }),
         event: (prop) => selectCustomerId(prop.value),
     },
     client: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     amount: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     base: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     ticketId: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     active: {
-        component: 'span',
+        component: QCheckbox,
-        props: { type: 'boolean' },
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
         event: () => {},
     },
     hasToInvoice: {
-        component: 'span',
+        component: QCheckbox,
-        props: { type: 'boolean' },
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
         event: () => {},
     },
     verifiedData: {
-        component: 'span',
+        component: QCheckbox,
-        props: { type: 'boolean' },
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
         event: () => {},
     },
     comercial: {
         component: QBtn,
-        props: { flat: true, color: 'blue' },
+        props: () => ({ flat: true, color: 'blue' }),
         event: (prop) => selectWorkerId(prop.row.comercialId),
     },
 };
@@ -351,27 +360,17 @@ onMounted(async () => {
                     <component
                         :is="tableColumnComponents[props.col.name].component"
                         class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
                         @click="tableColumnComponents[props.col.name].event(props)"
                     >
-                        <span
+                        <template
                             v-if="
-                                tableColumnComponents[props.col.name].props.type !=
+                                props.col.name !== 'active' &&
-                                'boolean'
+                                props.col.name !== 'hasToInvoice' &&
+                                props.col.name !== 'verifiedData'
                             "
+                            >{{ props.value }}</template
                         >
-                            {{ props.value }}
-                        </span>
-                        <span v-else>
-                            <QBadge v-if="props.value" color="grey">
-                                <QIcon name="check" size="xs" />
-                            </QBadge>
-
-                            <QBadge v-else color="grey" outline>
-                                <QIcon name="" size="xs" />
-                            </QBadge>
-                        </span>
-
                         <CustomerDescriptorProxy
                             v-if="props.col.name === 'clientId'"
                             :id="selectedCustomerId"

src/pages/Shelving/ShelvingList.vue

@@ -74,6 +74,7 @@ function viewSummary(id) {
                     <CardList2
                         v-for="row of rows"
                         :key="row.id"
+                        :id="row.id"
                         :title="row.code"
                         @click="navigate(row.id)"
                     >
@@ -93,16 +94,16 @@ function viewSummary(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="primary"
+                                color="white"
-                                type="submit"
+                                outline
+                                type="reset"
                             />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
                                 @click.stop="viewSummary(row.id)"
                                 color="primary"
-                                flat
                                 style="margin-top: 15px"
-                                type="reset"
+                                type="submit"
                             />
                         </template>
                     </CardList2>

src/pages/Supplier/Card/SupplierSummary.vue

@@ -84,20 +84,31 @@ const isAdministrative = computed(() => {
                         <span> {{ supplier.note || '-' }} </span>
                     </template>
                 </VnLv>
-                <QCheckbox
+                <VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">
-                    v-model="supplier.isSerious"
+                    <template #value>
-                    :label="t('verified')"
+                        <span> {{ supplier.note || '-' }} </span>
-                    disable
+                    </template>
-                    dense
+                </VnLv>
-                    class="full-width q-mb-xs"
+                <VnLv :label="t('verified')" class="q-mb-xs">
-                />
+                    <template #value>
-                <QCheckbox
+                        <QCheckbox
-                    v-model="supplier.isActive"
+                            v-model="supplier.isSerious"
-                    :label="t('isActive')"
+                            dense
-                    disable
+                            disable
-                    dense
+                            class="full-width q-mb-xs"
-                    class="full-width q-mb-xs"
+                        />
-                />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('isActive')" class="q-mb-xs">
+                    <template #value>
+                        <QCheckbox
+                            v-model="supplier.isActive"
+                            dense
+                            disable
+                            class="full-width q-mb-xs"
+                        />
+                    </template>
+                </VnLv>
             </QCard>
             <QCard class="vn-one">
                 <a v-if="isAdministrative" class="header link" :href="supplierUrl">
@@ -169,21 +180,4 @@ const isAdministrative = computed(() => {
         </template>
     </CardSummary>
 </template>
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.notes {
-    width: max-content;
-}
-.cardSummary .summaryBody > .q-card > .taxes {
-    border: 2px solid gray;
-    padding: 0;
-
-    > .vn-label-value {
-        text-align: right;
-        display: flex;
-        flex-direction: row;
-        margin-top: 5px;
-        justify-content: flex-end;
-        padding-right: 20px;
-    }
-}
-</style>

src/pages/Supplier/SupplierList.vue

@@ -50,12 +50,11 @@ const viewSummary = (id) => {
                     <CardList2
                         v-for="row of rows"
                         :key="row.id"
-                        :showCheckbox="true"
                         :title="row.socialName"
+                        :id="row.id"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv label="NIF/CIF" :value="row.nif" />
                             <VnLv label="Alias" :value="row.nickname" />
                             <VnLv
@@ -77,11 +76,11 @@ const viewSummary = (id) => {
                             />
                         </template>
                         <template #actions>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
+                            <QBtn
-                                <QTooltip>
+                                :label="t('components.smartCard.openSummary')"
-                                    {{ t('components.smartCard.openSummary') }}
+                                @click.stop="viewSummary(row.id)"
-                                </QTooltip>
+                                color="primary"
-                            </QBtn>
+                            />
                         </template>
                     </CardList2>
                 </template>

src/pages/Travel/Card/TravelSummary.vue

@@ -226,20 +226,27 @@ const openEntryDescriptor = () => {};
 
                 <VnLv label="m³" :value="travel.m3" />
                 <VnLv :label="t('travel.shared.totalEntries')" :value="travel.m3" />
-                <QCheckbox
+
-                    v-model="travel.isDelivered"
+                <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
-                    :label="t('travel.summary.delivered')"
+                    <template #value>
-                    disable
+                        <QCheckbox
-                    dense
+                            v-model="travel.isDelivered"
-                    class="full-width q-my-xs"
+                            disable
-                />
+                            dense
-                <QCheckbox
+                            class="full-width q-my-xs"
-                    v-model="travel.isReceived"
+                        />
-                    :label="t('travel.summary.received')"
+                    </template>
-                    disable
+                </VnLv>
-                    dense
+                <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
-                    class="full-width q-mb-xs"
+                    <template #value>
-                />
+                        <QCheckbox
+                            v-model="travel.isReceived"
+                            disable
+                            dense
+                            class="full-width q-mb-xs"
+                        />
+                    </template>
+                </VnLv>
             </QCard>
             <QCard class="vn-two" v-if="entriesTableRows.length > 0">
                 <a class="header" :href="travelUrl + 'entry'">
@@ -285,21 +292,4 @@ const openEntryDescriptor = () => {};
         </template>
     </CardSummary>
 </template>
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.notes {
-    width: max-content;
-}
-.cardSummary .summaryBody > .q-card > .taxes {
-    border: 2px solid gray;
-    padding: 0;
-
-    > .vn-label-value {
-        text-align: right;
-        display: flex;
-        flex-direction: row;
-        margin-top: 5px;
-        justify-content: flex-end;
-        padding-right: 20px;
-    }
-}
-</style>

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/pages/Travel/TravelList.vue

@@ -67,7 +67,6 @@ onMounted(async () => {
                         :key="row.id"
                         :title="row.ref"
                         :id="row.id"
-                        :showCheckbox="true"
                         @click="navigateToTravelId(row.id)"
                     >
                         <template #list-items>

src/router/modules/shelving.js

@@ -5,7 +5,7 @@ export default {
     name: 'Shelving',
     meta: {
         title: 'shelving',
-        icon: 'vn:trolley'
+        icon: 'vn:inventory'
     },
     component: RouterView,
     redirect: { name: 'ShelvingMain' },

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),
             };