Merge branch 'dev' of https://gitea.verdnatura.es/hyervoni/salix-front-mindshore into feature/ms-23-ExtraCommunity

.vscode/settings.json

@@ -14,13 +14,5 @@
     "[vue]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
-    "cSpell.words": ["axios"],
-
-    "editor.tabSize": 2,
-    "files.autoSave": "onFocusChange",
-    "files.trimTrailingWhitespace": true,
-    "editor.hover.enabled": true,
-    "editor.formatOnPaste": true,
-    "editor.wordWrapColumn": 80,
-    "prettier.singleQuote": true
+    "cSpell.words": ["axios"]
 }

src/components/FormModel.vue

@@ -6,6 +6,7 @@ import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
 import { useValidator } from 'src/composables/useValidator';
+import useNotify from 'src/composables/useNotify.js';
 import SkeletonForm from 'components/ui/SkeletonForm.vue';
 
 const quasar = useQuasar();
@@ -13,6 +14,7 @@ const state = useState();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { validate } = useValidator();
+const { notify } = useNotify();
 
 const $props = defineProps({
     url: {
@@ -31,10 +33,28 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    urlCreate: {
+        type: String,
+        default: null,
+    },
     defaultActions: {
         type: Boolean,
         default: true,
     },
+    autoLoad: {
+        type: Boolean,
+        default: false,
+    },
+    formInitialData: {
+        type: Object,
+        default: () => {},
+    },
+    observeFormChanges: {
+        type: Boolean,
+        default: true,
+        description:
+            'Esto se usa principalmente para permitir guardar sin hacer cambios (Útil para la feature de clonar ya que en este caso queremos poder guardar de primeras)',
+    },
 });
 
 const emit = defineEmits(['onFetch']);
@@ -43,18 +63,41 @@ defineExpose({
     save,
 });
 
-onMounted(async () => await fetch());
+onMounted(async () => {
+    // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
+    if ($props.formInitialData && !$props.autoLoad) {
+        state.set($props.model, $props.formInitialData);
+    } else {
+        await fetch();
+    }
+
+    // Disparamos el watcher del form después de que se haya cargado la data inicial, si así se desea
+    if ($props.observeFormChanges) {
+        startFormWatcher();
+    }
+});
 
 onUnmounted(() => {
     state.unset($props.model);
 });
 
 const isLoading = ref(false);
-const hasChanges = ref(false);
+// Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
+const hasChanges = ref(!$props.observeFormChanges);
 const originalData = ref();
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
 
+const startFormWatcher = () => {
+    watch(
+        () => formData.value,
+        (val) => {
+            if (val) hasChanges.value = true;
+        },
+        { deep: true }
+    );
+};
+
 function tMobile(...args) {
     if (!quasar.platform.is.mobile) return t(...args);
 }
@@ -67,20 +110,26 @@ async function fetch() {
     state.set($props.model, data);
     originalData.value = data && JSON.parse(JSON.stringify(data));
 
-    watch(formData.value, () => (hasChanges.value = true));
-
     emit('onFetch', state.get($props.model));
 }
 
 async function save() {
     if (!hasChanges.value) {
-        return quasar.notify({
-            type: 'negative',
-            message: t('globals.noChanges'),
-        });
+        notify('globals.noChanges', 'negative');
+        return;
     }
     isLoading.value = true;
-    await axios.patch($props.urlUpdate || $props.url, formData.value);
+
+    try {
+        if ($props.urlCreate) {
+            await axios.post($props.urlCreate, formData.value);
+            notify('globals.dataCreated', 'positive');
+        } else {
+            await axios.patch($props.urlUpdate || $props.url, formData.value);
+        }
+    } catch (err) {
+        notify('errors.create', 'negative');
+    }
 
     originalData.value = JSON.parse(JSON.stringify(formData.value));
     hasChanges.value = false;
@@ -91,11 +140,10 @@ function reset() {
     state.set($props.model, originalData.value);
     originalData.value = JSON.parse(JSON.stringify(originalData.value));
 
-    watch(formData.value, () => (hasChanges.value = true));
-
     emit('onFetch', state.get($props.model));
     hasChanges.value = false;
 }
+
 // eslint-disable-next-line vue/no-dupe-keys
 function filter(value, update, filterOptions) {
     update(
@@ -176,6 +224,7 @@ watch(formUrl, async () => {
     max-width: 800px;
     width: 100%;
 }
+
 .q-card {
     padding: 32px;
 }

src/components/common/VnLog.vue

@@ -19,6 +19,18 @@ const props = defineProps({
         type: String,
         default: null,
     },
+    url: {
+        type: String,
+        default: null,
+    },
+    mapper: {
+        type: Function,
+        default: null,
+    },
+    filter: {
+      type: Object,
+      default: null,
+    }
 });
 
 const columns = [
@@ -65,17 +77,18 @@ function actionColor(action) {
 <template>
     <div class="column items-center">
         <QTimeline class="q-pa-md">
-            <QTimelineEntry heading tag="h4"> {{ t('Audit logs') }} </QTimelineEntry>
+            <QTimelineEntry heading tag="h4"> {{ t('Audit logs') }}</QTimelineEntry>
             <VnPaginate
                 :data-key="`${props.model}Logs`"
-                :url="`${props.model}s/${route.params.id}/logs`"
+                :url="props.url ?? `${props.model}s/${route.params.id}/logs`"
                 order="id DESC"
                 :offset="100"
                 :limit="5"
+                :filter="props.filter"
                 auto-load
             >
                 <template #body="{ rows }">
-                    <template v-for="log of rows" :key="log.id">
+                    <template v-for="log of (props.mapper ? (rows || []).map(props.mapper) :rows)" :key="log.id">
                         <QTimelineEntry
                             :avatar="`/api/Images/user/160x160/${log.userFk}/download?access_token=${token}`"
                         >
@@ -144,65 +157,67 @@ function actionColor(action) {
 </style>
 <i18n>
 en:
-    actions:
-        insert: Creates
-        update: Updates
-        delete: Deletes
-    models:
-        Claim: Claim
-        ClaimDms: Document
-        ClaimBeginning: Claimed Sales
-        ClaimObservation: Observation
-    properties:
-        id: ID
-        claimFk: Claim ID
-        saleFk: Sale ID
-        quantity: Quantity
-        observation: Observation
-        ticketCreated: Created
-        created: Created
-        isChargedToMana: Charged to mana
-        hasToPickUp: Has to pick Up
-        dmsFk: Document ID
-        text: Description
-        claimStateFk: Claim State
-        workerFk: Worker
-        clientFk: Customer
-        rma: RMA
-        responsibility: Responsibility
-        packages: Packages
+  actions:
+    insert: Creates
+    update: Updates
+    delete: Deletes
+  models:
+    Claim: Claim
+    ClaimDms: Document
+    ClaimBeginning: Claimed Sales
+    ClaimObservation: Observation
+    Shelving: Shelving
+  properties:
+    id: ID
+    claimFk: Claim ID
+    saleFk: Sale ID
+    quantity: Quantity
+    observation: Observation
+    ticketCreated: Created
+    created: Created
+    isChargedToMana: Charged to mana
+    hasToPickUp: Has to pick Up
+    dmsFk: Document ID
+    text: Description
+    claimStateFk: Claim State
+    workerFk: Worker
+    clientFk: Customer
+    rma: RMA
+    responsibility: Responsibility
+    packages: Packages
 es:
-    Audit logs: Registros de auditoría
-    Property: Propiedad
-    Before: Antes
-    After: Después
-    Yes: Si
-    Nothing: Nada
-    actions:
-        insert: Crea
-        update: Actualiza
-        delete: Elimina
-    models:
-        Claim: Reclamación
-        ClaimDms: Documento
-        ClaimBeginning: Línea reclamada
-        ClaimObservation: Observación
-    properties:
-        id: ID
-        claimFk: ID reclamación
-        saleFk: ID linea de venta
-        quantity: Cantidad
-        observation: Observación
-        ticketCreated: Creado
-        created: Creado
-        isChargedToMana: Cargado a maná
-        hasToPickUp: Se debe recoger
-        dmsFk: ID documento
-        text: Descripción
-        claimStateFk: Estado de la reclamación
-        workerFk: Trabajador
-        clientFk: Cliente
-        rma: RMA
-        responsibility: Responsabilidad
-        packages: Bultos
+  Audit logs: Registros de auditoría
+  Property: Propiedad
+  Before: Antes
+  After: Después
+  Yes: Si
+  Nothing: Nada
+  actions:
+    insert: Crea
+    update: Actualiza
+    delete: Elimina
+  models:
+    Claim: Reclamación
+    ClaimDms: Documento
+    ClaimBeginning: Línea reclamada
+    ClaimObservation: Observación
+    Shelving: Carro
+  properties:
+    id: ID
+    claimFk: ID reclamación
+    saleFk: ID linea de venta
+    quantity: Cantidad
+    observation: Observación
+    ticketCreated: Creado
+    created: Creado
+    isChargedToMana: Cargado a maná
+    hasToPickUp: Se debe recoger
+    dmsFk: ID documento
+    text: Descripción
+    claimStateFk: Estado de la reclamación
+    workerFk: Trabajador
+    clientFk: Cliente
+    rma: RMA
+    responsibility: Responsabilidad
+    packages: Bultos
 </i18n>

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">
-                            <QItem v-ripple clickable>
-                                {{ option }}
-                            </QItem>
+                        <QList>
+                            <slot name="menu" :entity="entity" />
                         </QList>
                     </QMenu>
                 </QBtn>

src/components/ui/CardList.vue

@@ -1,66 +1,110 @@
 <script setup>
+import { ref, watch } from 'vue';
+
 const $props = defineProps({
+    addElement: { type: Function, required: false },
+    element: { type: Object, default: null },
     id: { type: Number, default: null },
+    isSelected: { type: Boolean, default: false },
     title: { type: String, default: null },
+    showCheckbox: { type: Boolean, default: false },
 });
+const checkSelect = ref(false);
+
+watch(
+    () => $props.isSelected,
+    (value, prevValue) => {
+        checkSelect.value = value;
+    }
+);
+
+const selectedItem = (item) => {
+    $props.addElement(item);
+};
 </script>
+
 <template>
     <QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg">
         <div>
             <slot name="title">
-                <div class="title text-primary text-weight-bold text-h5">
-                    {{ $props.title ?? `#${$props.id}` }}
+                <div class="flex justify-between">
+                    <div class="flex">
+                        <div class="title text-primary text-weight-bold text-h5">
+                            {{ $props.title }}
+                        </div>
+                        <QChip outline color="grey" size="sm">
+                            ID: {{ $props.id }}
+                        </QChip>
+                    </div>
+                    <QCheckbox
+                        v-if="showCheckbox"
+                        v-model="checkSelect"
+                        @click="selectedItem($props.element)"
+                    />
                 </div>
             </slot>
-            <div class="card-list-body row">
-                <div class="list-items row flex-wrap-wrap q-mt-md">
+            <div class="card-list-body">
+                <div class="list-items row flex-wrap-wrap">
                     <slot name="list-items" />
                 </div>
 
-                <div class="actions column justify-center">
+                <div class="actions">
                     <slot name="actions" />
                 </div>
             </div>
         </div>
     </QCard>
 </template>
+
 <style lang="scss">
+.title {
+    margin-right: 25px;
+}
+
 .card-list-body {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
     .vn-label-value {
         display: flex;
         justify-content: flex-start;
         gap: 2%;
         width: 50%;
         .label {
-            width: 30%;
+            width: 35%;
             color: var(--vn-label);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
         .value {
-            width: 60%;
+            width: 65%;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
     }
     .actions {
-        .q-btn {
-            width: 30px;
-        }
-        .q-icon {
-            color: $primary;
-            font-size: 25px;
-        }
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 25%;
     }
 }
 
 @media (max-width: $breakpoint-xs) {
     .card-list-body {
+        flex-wrap: wrap;
+        justify-content: center;
         .vn-label-value {
             width: 100%;
         }
+        .actions {
+            width: 100%;
+            margin-top: 15px;
+            padding: 0 15%;
+            justify-content: center;
+        }
     }
 }
 </style>
@@ -73,11 +117,6 @@ const $props = defineProps({
     background-color: var(--vn-gray);
 }
 .list-items {
-    width: 90%;
-}
-@media (max-width: $breakpoint-xs) {
-    .list-items {
-        width: 85%;
-    }
+    width: 75%;
 }
 </style>

src/components/ui/CardList2.vue

@@ -1,122 +0,0 @@
-<script setup>
-import { ref, watch } from 'vue';
-
-const $props = defineProps({
-    addElement: { type: Function, required: false },
-    element: { type: Object, default: null },
-    id: { type: Number, default: null },
-    isSelected: { type: Boolean, default: false },
-    title: { type: String, default: null },
-    showCheckbox: { type: Boolean, default: false },
-});
-const checkSelect = ref(false);
-
-watch(
-    () => $props.isSelected,
-    (value, prevValue) => {
-        checkSelect.value = value;
-    }
-);
-
-const selectedItem = (item) => {
-    $props.addElement(item);
-};
-</script>
-
-<template>
-    <QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg">
-        <div>
-            <slot name="title">
-                <div class="flex justify-between">
-                    <div class="flex">
-                        <div class="title text-primary text-weight-bold text-h5">
-                            {{ $props.title }}
-                        </div>
-                        <QChip outline color="grey" size="sm">
-                            ID: {{ $props.id }}
-                        </QChip>
-                    </div>
-                    <QCheckbox
-                        v-if="showCheckbox"
-                        v-model="checkSelect"
-                        @click="selectedItem($props.element)"
-                    />
-                </div>
-            </slot>
-            <div class="card-list-body">
-                <div class="list-items row flex-wrap-wrap">
-                    <slot name="list-items" />
-                </div>
-
-                <div class="actions">
-                    <slot name="actions" />
-                </div>
-            </div>
-        </div>
-    </QCard>
-</template>
-
-<style lang="scss">
-.title {
-    margin-right: 25px;
-}
-
-.card-list-body {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
-    .vn-label-value {
-        display: flex;
-        justify-content: flex-start;
-        gap: 2%;
-        width: 50%;
-        .label {
-            width: 35%;
-            color: var(--vn-label);
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-        .value {
-            width: 65%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-    .actions {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        width: 25%;
-    }
-}
-
-@media (max-width: $breakpoint-xs) {
-    .card-list-body {
-        flex-wrap: wrap;
-        justify-content: center;
-        .vn-label-value {
-            width: 100%;
-        }
-        .actions {
-            width: 100%;
-            margin-top: 15px;
-            padding: 0 15%;
-            justify-content: center;
-        }
-    }
-}
-</style>
-
-<style lang="scss" scoped>
-.card {
-    transition: background-color 0.2s;
-}
-.card:hover {
-    background-color: var(--vn-gray);
-}
-.list-items {
-    width: 75%;
-}
-</style>

src/components/ui/VnFilterPanel.vue

@@ -26,7 +26,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['refresh', 'clear']);
+const emit = defineEmits(['refresh', 'clear', 'search']);
 
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
@@ -49,6 +49,7 @@ async function search() {
     if (!props.showAll && !Object.values(params).length) store.data = [];
 
     isLoading.value = false;
+    emit('search');
 }
 
 async function reload() {

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/useArrayData.js

@@ -149,13 +149,13 @@ export function useArrayData(key, userOptions) {
         return { filter, params };
     }
 
-    function sanitizerParams(params) {
+    function sanitizerParams(params, exprBuilder) {
         for (const param in params) {
             if (params[param] === '' || params[param] === null) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[Object.keys(store?.exprBuilder(param))[0]];
+                    delete store.filter.where[Object.keys(exprBuilder ? exprBuilder(param) : param)[0]];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }

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

@@ -15,6 +15,7 @@ export default {
         logOut: 'Log out',
         dataSaved: 'Data saved',
         dataDeleted: 'Data deleted',
+        dataCreated: 'Data created',
         add: 'Add',
         create: 'Create',
         save: 'Save',
@@ -44,6 +45,8 @@ 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',
+        create: 'Error during creation',
     },
     login: {
         title: 'Login',
@@ -399,9 +402,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: {
@@ -436,6 +439,7 @@ export default {
             create: 'Create',
             summary: 'Summary',
             basicData: 'Basic Data',
+            log: 'Logs'
         },
         list: {
             parking: 'Parking',
@@ -629,11 +633,6 @@ export default {
             summary: 'Summary',
             extraCommunity: 'ExtraCommunity',
         },
-        list: {
-            clone: 'Clone',
-            addEntry: 'Add entry',
-            preview: 'Preview',
-        },
         summary: {
             confirmed: 'Confirmed',
             entryId: 'Entry Id',
@@ -655,9 +654,10 @@ export default {
             logOut: 'Log Out',
         },
         smartCard: {
-            openCard: 'View card',
-            openSummary: 'Open summary',
-            viewDescription: 'View description',
+            clone: 'Clone',
+            openCard: 'View',
+            openSummary: 'Summary',
+            viewDescription: 'Description',
         },
         cardDescriptor: {
             mainList: 'Main list',

src/i18n/es/index.js

@@ -15,6 +15,7 @@ export default {
         logOut: 'Cerrar sesión',
         dataSaved: 'Datos guardados',
         dataDeleted: 'Datos eliminados',
+        dataCreated: 'Datos creados',
         add: 'Añadir',
         create: 'Crear',
         save: 'Guardar',
@@ -44,6 +45,8 @@ 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',
+        create: 'Error al crear',
     },
     login: {
         title: 'Inicio de sesión',
@@ -438,6 +441,7 @@ export default {
             create: 'Crear',
             summary: 'Resumen',
             basicData: 'Datos básicos',
+            log: 'Registros de auditoría'
         },
         list: {
             parking: 'Parking',
@@ -631,11 +635,6 @@ export default {
             summary: 'Resumen',
             extraCommunity: 'ExtraCommunity',
         },
-        list: {
-            clone: 'Clonar',
-            addEntry: 'Añadir entrada',
-            preview: 'Vista previa',
-        },
         summary: {
             confirmed: 'Confirmado',
             entryId: 'Id entrada',
@@ -657,9 +656,10 @@ export default {
             logOut: 'Cerrar sesión',
         },
         smartCard: {
+            clone: 'Clonar',
             openCard: 'Ficha',
             openSummary: 'Detalles',
-            viewDescription: 'Ver descripción',
+            viewDescription: 'Descripción',
         },
         cardDescriptor: {
             mainList: 'Listado principal',

src/pages/Claim/Card/ClaimBasicData.vue

@@ -96,6 +96,7 @@ const statesFilter = {
         :url-update="`Claims/updateClaim/${route.params.id}`"
         :filter="claimFilter"
         model="claim"
+        auto-load
     >
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">

src/pages/Claim/ClaimList.vue

@@ -79,13 +79,13 @@ function viewSummary(id) {
             >
                 <template #body="{ rows }">
                     <CardList
-                        v-for="row of rows"
+                        :id="row.id"
                         :key="row.id"
                         :title="row.clientName"
                         @click="navigate(row.id)"
+                        v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv
                                 :label="t('claim.list.customer')"
                                 :value="row.clientName"
@@ -100,11 +100,7 @@ function viewSummary(id) {
                             />
                             <VnLv :label="t('claim.list.state')">
                                 <template #value>
-                                    <QBadge
-                                        :color="stateColor(row.stateCode)"
-                                        class="q-ma-none"
-                                        dense
-                                    >
+                                    <QBadge :color="stateColor(row.stateCode)" dense>
                                         {{ row.stateDescription }}
                                     </QBadge>
                                 </template>
@@ -112,26 +108,26 @@ function viewSummary(id) {
                         </template>
                         <template #actions>
                             <QBtn
-                                flat
-                                icon="arrow_circle_right"
+                                :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
+                                color="white"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('components.smartCard.viewDescription')"
+                                @click.stop
+                                color="white"
+                                outline
+                                style="margin-top: 15px"
                             >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </QTooltip>
-                            </QBtn>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
-                            <QBtn flat icon="vn:client" @click.stop>
-                                <QTooltip>
-                                    {{ t('components.smartCard.viewDescription') }}
-                                </QTooltip>
-
                                 <CustomerDescriptorProxy :id="row.clientFk" />
                             </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
                         </template>
                     </CardList>
                 </template>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -60,7 +60,7 @@ const filterOptions = {
         auto-load
     />
 
-    <FormModel :url="`Clients/${route.params.id}`" model="customer">
+    <FormModel :url="`Clients/${route.params.id}`" model="customer" auto-load>
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">

src/pages/Customer/CustomerList.vue

@@ -81,25 +81,17 @@ function viewSummary(id) {
                         </template>
                         <template #actions>
                             <QBtn
-                                flat
-                                color="primary"
-                                icon="arrow_circle_right"
+                                :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                            >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </QTooltip>
-                            </QBtn>
+                                color="white"
+                                outline
+                            />
                             <QBtn
-                                flat
-                                color="grey-7"
-                                icon="preview"
+                                :label="t('components.smartCard.openSummary')"
                                 @click.stop="viewSummary(row.id)"
-                            >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
                         </template>
                     </CardList>
                 </template>

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="text">{{ percentageStatusText }}</span>
-                <span class="text">{{ pdfStatusText }}</span>
+                <span class="status-text">{{ t(`status.${status}`) }}</span>
+                <span class="text">{{
+                    `${getPercentage}% (${getAddressNumber} ${t('of')} ${getNAddresses})`
+                }}</span>
+                <span class="text">{{ `${nPdfs} ${t('of')} ${totalPdfs} PDFs` }}</span>
             </QCardSection>
         </QCard>
 
@@ -172,7 +160,7 @@ onUnmounted(() => {
 
     .status-text {
         font-size: 14px;
-        color: #eeeeee;
+        color: white;
     }
 
     .text {

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();
@@ -24,20 +24,11 @@ const { makeInvoice, setStatusValue } = invoiceOutGlobalStore;
 
 const clientsToInvoice = ref('all');
 
-const companiesOptions = reactive({
-    original: [],
-    filtered: [],
-});
+const companiesOptions = ref([]);
 
-const printersOptions = reactive({
-    original: [],
-    filtered: [],
-});
+const printersOptions = ref([]);
 
-const clientsOptions = reactive({
-    original: [],
-    filtered: [],
-});
+const clientsOptions = ref([]);
 
 const formData = ref({
     companyFk: null,
@@ -49,9 +40,9 @@ const formData = ref({
 
 const optionsInitialData = computed(() => {
     return (
-        companiesOptions.original.length > 0 &&
-        printersOptions.original.length > 0 &&
-        clientsOptions.original.length > 0
+        companiesOptions.value.length > 0 &&
+        printersOptions.value.length > 0 &&
+        clientsOptions.value.length > 0
     );
 });
 
@@ -65,23 +56,15 @@ const getStatus = computed({
 });
 
 const onFetchCompanies = (companies) => {
-    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];
+    companiesOptions.value = [...companies];
 };
 
 const onFetchPrinters = (printers) => {
-    printersOptions.original = printers.map((printer) => {
-        return { value: printer.id, label: printer.name };
-    });
+    printersOptions.value = [...printers];
 };
 
 const onFetchClients = (clients) => {
-    clientsOptions.original = clients.map((client) => {
-        return { value: client.id, label: client.name };
-    });
+    clientsOptions.value = [...clients];
 };
 
 onMounted(async () => {
@@ -98,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
@@ -115,25 +99,17 @@ onMounted(async () => {
                 :label="t('oneClient')"
                 :dark="true"
             />
-            <QSelect
+            <VnSelectFilter
                 v-if="clientsToInvoice === 'one'"
                 :label="t('client')"
-                :options="clientsOptions.filtered"
-                use-input
-                option-value="value"
-                option-label="label"
-                emit-value
-                map-options
-                transition-show="jump-up"
-                transition-hide="jump-up"
+                v-model="formData.clientId"
+                :options="clientsOptions"
+                option-value="id"
+                option-label="name"
+                hide-selected
                 dense
                 outlined
                 rounded
-                @filter="
-                    (val, update, abort) =>
-                        inputSelectFilter(val, update, abort, clientsOptions)
-                "
-                v-model="formData.clientId"
             />
             <QInput
                 dense
@@ -193,54 +169,36 @@ onMounted(async () => {
                     </QIcon>
                 </template>
             </QInput>
-            <QSelect
-                v-if="optionsInitialData"
+            <VnSelectFilter
                 :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
-                :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"
+                :options="companiesOptions"
+                option-value="id"
+                option-label="code"
+                hide-selected
                 dense
                 outlined
                 rounded
-                lazy-rules
-                @filter="
-                    (val, update, abort) =>
-                        inputSelectFilter(val, update, abort, printersOptions)
-                "
+            />
+            <VnSelectFilter
+                :label="t('printer')"
                 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
@@ -249,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
@@ -258,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';
@@ -10,7 +10,7 @@ import { toDate, toCurrency } from 'src/filters/index';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import CardList2 from 'src/components/ui/CardList2.vue';
+import CardList from 'src/components/ui/CardList.vue';
 
 const { t } = useI18n();
 const arrayElements = ref([]);
@@ -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;
@@ -142,7 +148,7 @@ const downloadCsv = (rows) => {
                                 flat
                                 icon="cloud_download"
                                 round
-                                v-bind:class="{ dark_icon: !manageCheckboxes }"
+                                :class="{ dark_icon: !manageCheckboxes }"
                             >
                                 <QMenu>
                                     <QList padding dense>
@@ -171,19 +177,18 @@ const downloadCsv = (rows) => {
                             @click="downloadCsv(rows)"
                         />
                     </div>
-                    <CardList2
-                        :addElement="addElement"
+                    <CardList
+                        :add-element="addElement"
                         :element="row"
                         :id="row.id"
-                        :isSelected="manageCheckboxes"
-                        :showCheckbox="true"
+                        :is-selected="manageCheckboxes"
+                        :show-checkbox="true"
                         :key="row.id"
                         :title="row.ref"
                         @click="navigate(row.id)"
                         v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv
                                 :label="t('invoiceOut.list.shortIssued')"
                                 :title-label="t('invoiceOut.list.issued')"
@@ -228,7 +233,7 @@ const downloadCsv = (rows) => {
                                 type="submit"
                             />
                         </template>
-                    </CardList2>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>
@@ -244,28 +249,18 @@ const downloadCsv = (rows) => {
 .dark_icon {
     color: #121212;
 }
-
-.disabled,
-.disabled *,
-[disabled],
-[disabled] * {
-    cursor: default !important;
-}
 </style>
 
 <i18n>
-    {
-        "en": {
-            "searchInvoice": "Search issued invoice",
-            "fileDenied": "Browser denied file download...",
-            "fileAllowed": "Successful download of CSV file",
-            "youCanSearchByInvoiceReference": "You can search by invoice reference"
-        },
-        "es": {
-            "searchInvoice": "Buscar factura emitida",
-            "fileDenied": "El navegador denegó la descarga de archivos...",
-            "fileAllowed": "Descarga exitosa de archivo CSV",
-            "youCanSearchByInvoiceReference": "Puedes buscar por referencia de la factura"
-        }
-    }
+en:
+    searchInvoice: Search issued invoice
+    fileDenied: Browser denied file download...
+    fileAllowed: Successful download of CSV file
+    youCanSearchByInvoiceReference: You can search by invoice reference
+
+es:
+    searchInvoice: Buscar factura emitida
+    fileDenied: El navegador denegó la descarga de archivos...
+    fileAllowed: Descarga exitosa de archivo CSV
+    youCanSearchByInvoiceReference: Puedes buscar por referencia de la factura
 </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',
-        props: { type: 'boolean' },
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
         event: () => {},
     },
     hasToInvoice: {
-        component: 'span',
-        props: { type: 'boolean' },
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
         event: () => {},
     },
     verifiedData: {
-        component: 'span',
-        props: { type: 'boolean' },
+        component: QCheckbox,
+        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),
     },
 };
@@ -304,7 +313,7 @@ onMounted(async () => {
             </template>
             <template #top-right>
                 <div class="row justify-start items-center">
-                    <span class="q-mr-md text-grey-7">
+                    <span class="q-mr-md text-results">
                         {{ rows.length }} {{ t('results') }}
                     </span>
                     <QBtn
@@ -323,24 +332,18 @@ onMounted(async () => {
                         <div class="column justify-start items-start full-height">
                             {{ t(`invoiceOut.negativeBases.${col.label}`) }}
                             <QInput
-                                :disable="
-                                    [
-                                        'isActive',
-                                        'hasToInvoice',
-                                        'isTaxDataChecked',
-                                    ].includes(col.field)
-                                "
-                                :borderless="
-                                    [
-                                        'isActive',
-                                        'hasToInvoice',
-                                        'isTaxDataChecked',
-                                    ].includes(col.field)
-                                "
+                                :class="{
+                                    invisible:
+                                        col.field === 'isActive' ||
+                                        col.field === 'hasToInvoice' ||
+                                        col.field === 'isTaxDataChecked',
+                                }"
                                 dense
-                                standout
+                                outlined
+                                rounded
                                 v-model="filter[col.field]"
                                 type="text"
+                                @keyup.enter="search()"
                             />
                         </div>
                     </QTh>
@@ -351,27 +354,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 !=
-                                'boolean'
+                                props.col.name !== 'active' &&
+                                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"
@@ -388,55 +381,14 @@ onMounted(async () => {
 </template>
 
 <style lang="scss" scoped>
-.card {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    background-color: #292929;
-    padding: 16px;
-
-    .card-section {
-        display: flex;
-        flex-direction: column;
-        padding: 0px;
-    }
-
-    .status-text {
-        font-size: 14px;
-        color: #eeeeee;
-    }
-
-    .text {
-        font-size: 14px;
-        color: #aaaaaa;
-    }
-}
-
 .col-content {
     border-radius: 4px;
     padding: 6px 6px 6px 6px;
 }
+
+.text-results {
+    color: var(--vn-label);
+}
 </style>
 
-<i18n>
-   {
-        "en": {
-            "status": {
-                "packageInvoicing": "Build packaging tickets",
-                "invoicing": "Invoicing client",
-                "stopping": "Stopping process",
-                "done": "Ended process"
-            },
-            "of": "of"
-        },
-        "es": {
-            "status":{
-                "packageInvoicing": "Generación de tickets de empaque",
-                "invoicing": "Facturando a cliente",
-                "stopping": "Deteniendo proceso",
-                "done": "Proceso detenido",
-            },
-            "of": "de"
-        }
-    }
-</i18n>
+<i18n></i18n>

src/pages/Shelving/Card/ShelvingCard.vue

@@ -1,15 +1,11 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
-import ShelvingSearchbar from "pages/Shelving/components/ShelvingSearchbar.vue";
-import ShelvingDescriptor from "pages/Shelving/components/ShelvingDescriptor.vue";
+import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
 
 const stateStore = useStateStore();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <ShelvingSearchbar />
-    </Teleport>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit">
             <ShelvingDescriptor />

src/pages/Shelving/Card/ShelvingDescriptor.vue

@@ -3,10 +3,10 @@ import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import useCardDescription from 'src/composables/useCardDescription';
+import VnLv from 'components/ui/VnLv.vue';
+import useCardDescription from 'composables/useCardDescription';
 import WorkerDescriptorProxy from "pages/Worker/Card/WorkerDescriptorProxy.vue";
-import ShelvingDescriptorMenu from "pages/Shelving/components/ShelvingDescriptorMenu.vue";
+import ShelvingDescriptorMenu from "pages/Shelving/Card/ShelvingDescriptorMenu.vue";
 
 const $props = defineProps({
     id: {

src/pages/Shelving/Card/ShelvingDescriptorProxy.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ShelvingDescriptor from "pages/Shelving/components/ShelvingDescriptor.vue";
+import ShelvingDescriptor from "pages/Shelving/Card/ShelvingDescriptor.vue";
 
 const $props = defineProps({
     id: {

src/pages/Shelving/Card/ShelvingFilter.vue

@@ -12,6 +12,8 @@ const props = defineProps({
     },
 });
 
+const emit = defineEmits(['search']);
+
 const workers = ref();
 const parkings = ref();
 
@@ -39,7 +41,7 @@ function setParkings(data) {
         @on-fetch="setWorkers"
         auto-load
     />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" @search="emit('search')">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>

src/pages/Shelving/Card/ShelvingLog.vue

@@ -0,0 +1,53 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const getChanges = (oldInstance, newInstance) => {
+    const changes = [];
+    Object.entries(newInstance).forEach(([key, newValue]) => {
+        const oldValue = oldInstance?.[key];
+        if (oldValue !== newValue) {
+            changes.push({
+                property: key,
+                before: oldValue,
+                after: newValue,
+            });
+        }
+    });
+    return changes;
+};
+
+const shelvingMapper = (shelving) => ({
+    ...shelving,
+    action: shelving.action,
+    created: shelving.creationDate,
+    model: shelving.changedModel,
+    userFk: shelving.userFk,
+    userName: shelving.user?.name,
+    changes: getChanges(shelving.oldInstance, shelving.newInstance),
+});
+
+const shelvingFilter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['nickname', 'name'],
+            },
+        },
+    ],
+    where: {
+        originFk: route.params.id,
+    },
+};
+</script>
+<template>
+    <VnLog
+        model="Shelving"
+        url="/ShelvingLogs"
+        :mapper="shelvingMapper"
+        :filter="shelvingFilter"
+    ></VnLog>
+</template>

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
+import {computed, onMounted, onUnmounted} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
+import { useStateStore } from 'stores/useStateStore';
 
 const $props = defineProps({
     id: {
@@ -12,7 +14,11 @@ const $props = defineProps({
     },
 });
 const route = useRoute();
+const stateStore = useStateStore();
+const router = useRouter();
 const { t } = useI18n();
+onMounted(() => (stateStore.rightDrawer = false));
+onUnmounted(() => (stateStore.rightDrawer = false));
 
 const entityId = computed(() => $props.id || route.params.id);
 const filter = {
@@ -33,6 +39,23 @@ const filter = {
 </script>
 
 <template>
+  <template v-if="stateStore.isHeaderMounted()">
+    <Teleport to="#actions-append">
+      <div class="row q-gutter-x-sm">
+        <QBtn
+            flat
+            @click="stateStore.toggleRightDrawer()"
+            round
+            dense
+            icon="menu"
+        >
+          <QTooltip bottom anchor="bottom right">
+            {{ t('globals.collapseMenu') }}
+          </QTooltip>
+        </QBtn>
+      </div>
+    </Teleport>
+  </template>
     <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
         <template #header="{ entity }">
             <div>{{ entity.code }}</div>
@@ -42,18 +65,12 @@ const filter = {
                 <div class="header">
                     {{ t('shelving.pageTitles.basicData') }}
                 </div>
-                <VnLv
-                    :label="t('shelving.summary.code')"
-                    :value="entity.code"
-                />
+                <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
                 <VnLv
                     :label="t('shelving.summary.parking')"
                     :value="entity.parking?.code"
                 />
-                <VnLv
-                    :label="t('shelving.summary.priority')"
-                    :value="entity.priority"
-                />
+                <VnLv :label="t('shelving.summary.priority')" :value="entity.priority" />
                 <VnLv
                     :label="t('shelving.summary.worker')"
                     :value="entity.worker?.user?.nickname"
@@ -65,4 +82,12 @@ const filter = {
             </QCard>
         </template>
     </CardSummary>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ShelvingFilter
+                data-key="ShelvingList"
+                @search="router.push({ name: 'ShelvingList' })"
+            />
+        </QScrollArea>
+    </QDrawer>
 </template>

src/pages/Shelving/Card/ShelvingSummaryDialog.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useDialogPluginComponent } from 'quasar';
-import ShelvingSummary from "pages/Shelving/Summary/ShelvingSummary.vue";
+import ShelvingSummary from "pages/Shelving/Card/ShelvingSummary.vue";
 
 const $props = defineProps({
     id: {

src/pages/Shelving/ShelvingBasicData.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useRoute } from 'vue-router';
 import FormModel from 'components/FormModel.vue';
-import ShelvingForm from "pages/Shelving/components/ShelvingForm.vue";
+import ShelvingForm from "pages/Shelving/Card/ShelvingForm.vue";
 
 const route = useRoute();
 
@@ -29,6 +29,7 @@ const shelvingFilter = {
         :url-update="`Shelvings/${shelvingId}`"
         :filter="shelvingFilter"
         model="shelving"
+        auto-load
     >
         <template #form="{ data, validate, filter }">
             <ShelvingForm :data="data" :validate="validate" :filter="filter" />

src/pages/Shelving/ShelvingCreate.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ShelvingForm from 'pages/Shelving/components/ShelvingForm.vue';
+import ShelvingForm from 'pages/Shelving/Card/ShelvingForm.vue';
 import { useI18n } from 'vue-i18n';
 import { useValidator } from 'composables/useValidator';
 import { ref } from 'vue';

src/pages/Shelving/ShelvingList.vue

@@ -3,13 +3,13 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import { onMounted, onUnmounted } from 'vue';
-import CardList2 from 'components/ui/CardList2.vue';
+import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
-import ShelvingFilter from 'pages/Shelving/components/ShelvingFilter.vue';
-import ShelvingSummaryDialog from 'pages/Shelving/Summary/ShelvingSummaryDialog.vue';
-import ShelvingSearchbar from 'pages/Shelving/components/ShelvingSearchbar.vue';
+import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
+import ShelvingSummaryDialog from 'pages/Shelving/Card/ShelvingSummaryDialog.vue';
+import ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -34,6 +34,17 @@ function viewSummary(id) {
         },
     });
 }
+
+function exprBuilder(param, value) {
+  switch (param) {
+    case 'search':
+      return {code: {like: `%${value}%`}};
+    case 'parkingFk':
+    case 'userFk':
+    case 'isRecyclable':
+      return {[param]: value};
+  }
+}
 </script>
 
 <template>
@@ -68,17 +79,18 @@ function viewSummary(id) {
                 data-key="ShelvingList"
                 url="Shelvings"
                 :filter="filter"
+                :expr-builder="exprBuilder"
                 auto-load
             >
                 <template #body="{ rows }">
-                    <CardList2
+                    <CardList
                         v-for="row of rows"
                         :key="row.id"
+                        :id="row.id"
                         :title="row.code"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv
                                 :label="t('shelving.list.parking')"
                                 :title-label="t('shelving.list.parking')"
@@ -93,24 +105,22 @@ function viewSummary(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="primary"
-                                type="submit"
+                                color="white"
+                                outline
                             />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
                                 @click.stop="viewSummary(row.id)"
                                 color="primary"
-                                flat
                                 style="margin-top: 15px"
-                                type="reset"
                             />
                         </template>
-                    </CardList2>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>
         <QPageSticky :offset="[20, 20]">
-            <RouterLink :to="{name: 'ShelvingCreate'}">
+            <RouterLink :to="{ name: 'ShelvingCreate' }">
                 <QBtn fab icon="add" color="primary" />
                 <QTooltip>
                     {{ t('supplier.list.newSupplier') }}

src/pages/Supplier/Card/SupplierSummary.vue

@@ -84,20 +84,31 @@ const isAdministrative = computed(() => {
                         <span> {{ supplier.note || '-' }} </span>
                     </template>
                 </VnLv>
-                <QCheckbox
-                    v-model="supplier.isSerious"
-                    :label="t('verified')"
-                    disable
-                    dense
-                    class="full-width q-mb-xs"
-                />
-                <QCheckbox
-                    v-model="supplier.isActive"
-                    :label="t('isActive')"
-                    disable
-                    dense
-                    class="full-width q-mb-xs"
-                />
+                <VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">
+                    <template #value>
+                        <span> {{ supplier.note || '-' }} </span>
+                    </template>
+                </VnLv>
+                <VnLv :label="t('verified')" class="q-mb-xs">
+                    <template #value>
+                        <QCheckbox
+                            v-model="supplier.isSerious"
+                            dense
+                            disable
+                            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>
-.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>
+<style lang="scss" scoped></style>

src/pages/Supplier/SupplierCreate.vue

@@ -1,22 +1,17 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
-import suppliersService from 'src/services/suppliers.service';
-import { useRouter } from 'vue-router';
+import { reactive } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
 
 const { t } = useI18n();
-const router = useRouter();
 const stateStore = useStateStore();
 
-const newSupplierName = ref();
-
-const createSupplier = async () => {
-    const params = { name: newSupplierName.value };
-    const response = await suppliersService.createSupplier(params);
-    if (response.status === 200) router.push({ path: `/supplier/${response.data.id}` });
-};
+const newSupplierForm = reactive({
+    name: null,
+});
 </script>
 
 <template>
@@ -30,27 +25,28 @@ const createSupplier = async () => {
         </Teleport>
     </template>
 
-    <QPage class="q-pa-md">
-        <QForm
-            @submit="createSupplier()"
-            class="text-white q-mx-auto"
-            style="max-width: 800px"
+    <QPage>
+        <QToolbar class="bg-vn-dark justify-end">
+            <div id="st-data"></div>
+            <QSpace />
+            <div id="st-actions"></div>
+        </QToolbar>
+        <FormModel
+            url-create="Suppliers/newSupplier"
+            model="supplier"
+            :form-initial-data="newSupplierForm"
         >
-            <QCard class="card">
-                <QInput
-                    v-model="newSupplierName"
-                    :label="t('supplier.create.supplierName')"
-                    class="full-width"
-                />
-            </QCard>
-            <QBtn
-                :label="t('globals.create')"
-                type="submit"
-                color="primary"
-                class="q-mt-md"
-            />
-            <QBtn :label="t('globals.cancel')" class="q-mt-md" flat />
-        </QForm>
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.name"
+                            :label="t('supplier.create.supplierName')"
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
     </QPage>
 </template>
 

src/pages/Supplier/SupplierList.vue

@@ -4,7 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useRouter } from 'vue-router';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import CardList2 from 'src/components/ui/CardList2.vue';
+import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { useQuasar } from 'quasar';
 import SupplierSummaryDialog from './Card/SupplierSummaryDialog.vue';
@@ -47,15 +47,14 @@ const viewSummary = (id) => {
         <div class="card-list">
             <VnPaginate data-key="SuppliersList" url="Suppliers/filter" auto-load>
                 <template #body="{ rows }">
-                    <CardList2
+                    <CardList
                         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,13 +76,13 @@ const viewSummary = (id) => {
                             />
                         </template>
                         <template #actions>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                            />
                         </template>
-                    </CardList2>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>

src/pages/Ticket/TicketList.vue

@@ -120,11 +120,11 @@ function viewSummary(id) {
                             />
                         </template>
                         <template #actions>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                            />
                         </template>
                     </CardList>
                 </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"
-                    :label="t('travel.summary.delivered')"
-                    disable
-                    dense
-                    class="full-width q-my-xs"
-                />
-                <QCheckbox
-                    v-model="travel.isReceived"
-                    :label="t('travel.summary.received')"
-                    disable
-                    dense
-                    class="full-width q-mb-xs"
-                />
+
+                <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
+                    <template #value>
+                        <QCheckbox
+                            v-model="travel.isDelivered"
+                            disable
+                            dense
+                            class="full-width q-my-xs"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('travel.summary.received')" class="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>
-.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>
+<style lang="scss" scoped></style>

src/pages/Travel/TravelCreate.vue

@@ -1,19 +1,19 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { reactive, computed } from 'vue';
+import { reactive, 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 { useRoute } from 'vue-router';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
 import { toDate } from 'src/filters';
+
 import { onBeforeMount } from 'vue';
 
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
-const travelStore = useTravelStore();
 
-const newTravelDataForm = reactive({
+const newTravelForm = reactive({
     ref: null,
     agencyModeFk: null,
     shipped: null,
@@ -22,146 +22,154 @@ const newTravelDataForm = reactive({
     warehouseInFk: null,
 });
 
-const agenciesOptions = reactive({
-    original: [],
-    filtered: [],
-});
-
-const warehousesOptions = reactive({
-    original: [],
-    filtered: [],
-});
+const agenciesOptions = ref([]);
+const viewAction = ref();
+const warehousesOptions = ref([]);
 
 onBeforeMount(() => {
+    // Esto nos permite decirle a FormModel si queremos observar los cambios o no
+    // Ya que si queremos clonar queremos que nos permita guardar inmediatamente sin realizar cambios en el form
+    viewAction.value = route.query.travelData ? 'clone' : 'create';
+
     if (route.query.travelData) {
         const travelData = JSON.parse(route.query.travelData);
-        for (let key in newTravelDataForm) {
+        for (let key in newTravelForm) {
             if (key === 'landed' || key === 'shipped') {
-                newTravelDataForm[key] = travelData[key].substring(0, 10);
+                newTravelForm[key] = travelData[key].substring(0, 10);
             } else {
-                newTravelDataForm[key] = travelData[key];
+                newTravelForm[key] = travelData[key];
             }
         }
     }
 });
 
-const createTravel = async () => {
-    const response = await travelStore.createTravel(newTravelDataForm);
-    if (response.status === 200) router.push({ path: `/travel/${response.data.id}` });
-};
-
 const onFetchAgencies = (agencies) => {
-    agenciesOptions.original = agencies.map((agency) => {
-        return { value: agency.agencyFk, label: agency.name };
-    });
+    agenciesOptions.value = [...agencies];
 };
 
 const onFetchWarehouses = (warehouses) => {
-    warehousesOptions.original = warehouses.map((warehouse) => {
-        return { value: warehouse.id, label: warehouse.name };
-    });
-};
-
-const canSubmit = computed(() => {
-    for (const key in newTravelDataForm) {
-        if (!newTravelDataForm[key]) return false;
-    }
-    return true;
-});
-
-const redirectToTravelList = () => {
-    router.push({ name: 'TravelList' });
+    warehousesOptions.value = [...warehouses];
 };
 </script>
 
 <template>
     <FetchData url="AgencyModes" @on-fetch="(data) => onFetchAgencies(data)" auto-load />
     <FetchData url="Warehouses" @on-fetch="(data) => onFetchWarehouses(data)" auto-load />
-    <QPage class="q-pa-md">
-        <QForm
-            @submit="createTravel()"
-            class="text-white column q-mx-auto"
-            style="max-width: 800px"
+    <QPage>
+        <QToolbar class="bg-vn-dark">
+            <div id="st-data"></div>
+            <QSpace />
+            <div id="st-actions"></div>
+        </QToolbar>
+        <FormModel
+            url-update="Travels"
+            model="travel"
+            :form-initial-data="newTravelForm"
+            :observe-form-changes="viewAction === 'create'"
         >
-            <QCard class="row q-pa-xl full-width card">
-                <QInput
-                    v-model="newTravelDataForm.ref"
-                    :label="t('travel.shared.reference')"
-                    filled
-                    style="max-width: 100%"
-                />
-                <QSelect
-                    :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"
-                    transition-hide="jump-up"
-                    style="max-width: 100%"
-                />
-                <QInput
-                    v-model="newTravelDataForm.shipped"
-                    type="date"
-                    filled
-                    mask="date"
-                    :label="t('travel.shared.shipped')"
-                />
-                <QInput
-                    v-model="newTravelDataForm.landed"
-                    type="date"
-                    filled
-                    mask="date"
-                    :label="t('travel.shared.landed')"
-                />
-                <QSelect
-                    :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"
-                    transition-hide="jump-up"
-                />
-                <QSelect
-                    :options="warehousesOptions.filtered"
-                    v-model="newTravelDataForm.warehouseInFk"
-                    filled
-                    use-input
-                    @filter="
-                        (val, update, abort) =>
-                            inputSelectFilter(val, update, abort, warehousesOptions)
-                    "
-                    :label="t('travel.shared.wareHouseIn')"
-                    transition-show="jump-up"
-                    transition-hide="jump-up"
-                />
-            </QCard>
-            <div class="row">
-                <QBtn
-                    :label="t('globals.create')"
-                    type="submit"
-                    color="primary"
-                    class="q-mt-md"
-                    :disable="!canSubmit"
-                />
-                <QBtn
-                    :label="t('globals.cancel')"
-                    class="q-mt-md"
-                    flat
-                    :disable="!canSubmit"
-                    @click="redirectToTravelList()"
-                />
-            </div>
-        </QForm>
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.ref"
+                            :label="t('travel.shared.reference')"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('travel.shared.agency')"
+                            v-model="data.agencyModeFk"
+                            :options="agenciesOptions"
+                            option-value="agencyFk"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :label="t('travel.shared.landed')"
+                            :model-value="toDate(data.shipped)"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="data.shipped">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </div>
+                    <div class="col">
+                        <QInput
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :label="t('travel.shared.landed')"
+                            :model-value="toDate(data.landed)"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="data.landed">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('travel.shared.wareHouseOut')"
+                            v-model="data.warehouseOutFk"
+                            :options="warehousesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('travel.shared.wareHouseIn')"
+                            v-model="data.warehouseInFk"
+                            :options="warehousesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
     </QPage>
 </template>
 

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({
-    original: [],
-    filtered: [],
-});
+const warehousesOptions = ref([]);
 
-const continentsOptions = reactive({
-    original: [],
-    filtered: [],
-});
+const continentsOptions = ref([]);
 
-const agenciesOptions = reactive({
-    original: [],
-    filtered: [],
-});
+const agenciesOptions = ref([]);
 
 const onFetchWarehouses = (warehouses) => {
-    warehousesOptions.original = warehouses.map((warehouse) => {
-        return { value: warehouse.id, label: warehouse.name };
-    });
+    warehousesOptions.value = [...warehouses];
 };
 
 const onFetchContinents = (continents) => {
-    continentsOptions.original = continents.map((continent) => {
-        return { value: continent.code, label: continent.name };
-    });
+    continentsOptions.value = [...continents];
 };
 
 const onFetchAgencies = (agencies) => {
-    agenciesOptions.original = agencies.map((agency) => {
-        return { value: agency.agencyFk, label: agency.name };
-    });
+    agenciesOptions.value = [...agencies];
 };
 
 const add = (paramsObj, key) => {
@@ -75,13 +60,12 @@ 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
                             :label="t('params.search')"
                             dense
-                            lazy-rules
                             outlined
                             rounded
                             v-model="params.search"
@@ -90,83 +74,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
-                            :label="t('travel.shared.wareHouseOut')"
-                            :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
-                                    )
-                            "
+                        <VnSelectFilter
+                            :label="t('params.warehouseOutFk')"
                             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
-                            :label="t('params.wareHouseIn')"
-                            :options="warehousesOptions.filtered"
-                            use-input
-                            option-value="value"
-                            option-label="label"
-                            emit-value
-                            map-options
-                            transition-show="jump-up"
-                            transition-hide="jump-up"
+                        <VnSelectFilter
+                            :label="t('params.warehouseInFk')"
+                            v-model="params.warehouseInFk"
+                            :options="warehousesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
                             dense
-                            lazy-rules
                             outlined
                             rounded
-                            @filter="
-                                (val, update, abort) =>
-                                    inputSelectFilter(
-                                        val,
-                                        update,
-                                        abort,
-                                        warehousesOptions
-                                    )
-                            "
-                            v-model="params.warehouseInFk"
                         />
                     </QItemSection>
                 </QItem>
@@ -177,7 +124,6 @@ const decrement = (paramsObj, key) => {
                             type="number"
                             :label="t('params.scopeDays')"
                             dense
-                            lazy-rules
                             outlined
                             rounded
                             class="input-number"
@@ -205,7 +151,6 @@ const decrement = (paramsObj, key) => {
                     <QItemSection>
                         <QInput
                             dense
-                            lazy-rules
                             outlined
                             rounded
                             placeholder="dd-mm-aaa"
@@ -239,7 +184,6 @@ const decrement = (paramsObj, key) => {
                     <QItemSection>
                         <QInput
                             dense
-                            lazy-rules
                             outlined
                             rounded
                             placeholder="dd-mm-aaa"
@@ -271,30 +215,16 @@ const decrement = (paramsObj, key) => {
                 </QItem>
                 <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QSelect
+                        <VnSelectFilter
                             :label="t('params.continent')"
-                            :options="continentsOptions.filtered"
-                            use-input
-                            option-value="value"
-                            option-label="label"
-                            emit-value
-                            map-options
-                            transition-show="jump-up"
-                            transition-hide="jump-up"
+                            v-model="params.continent"
+                            :options="continentsOptions"
+                            option-value="code"
+                            option-label="name"
+                            hide-selected
                             dense
-                            lazy-rules
                             outlined
                             rounded
-                            @filter="
-                                (val, update, abort) =>
-                                    inputSelectFilter(
-                                        val,
-                                        update,
-                                        abort,
-                                        continentsOptions
-                                    )
-                            "
-                            v-model="params.continent"
                         />
                     </QItemSection>
                 </QItem>
@@ -305,7 +235,6 @@ const decrement = (paramsObj, key) => {
                             type="number"
                             :label="t('params.totalEntries')"
                             dense
-                            lazy-rules
                             outlined
                             rounded
                             min="0"
@@ -336,6 +265,10 @@ const decrement = (paramsObj, key) => {
 </template>
 
 <style scoped>
+.list * {
+    max-width: 100%;
+}
+
 .input-number >>> input[type='number'] {
     -moz-appearance: textfield;
 }
@@ -348,32 +281,27 @@ const decrement = (paramsObj, key) => {
 </style>
 
 <i18n>
-   {
-        "en": {
-            "params": {
-                "search": "Id/Reference",
-                "agencyModeFk": "Agency",
-                "wareHouseIn": "Warehouse In",
-                "wareHouseOut": "Warehouse Out",
-                "scopeDays": "Days onward",
-                "landedFrom": "Landed from",
-                "landedTo": "Landed to",
-                "continent": "Continent out",
-                "totalEntries": "Total entries"
-            },
-        },
-        "es": {
-            "params":{
-                "search": "Id/Referencia",
-                "agencyModeFk": "Agencia",
-                "wareHouseIn": "Alm. entrada",
-                "wareHouseOut": "Alm. salida",
-                "scopeDays": "Días adelante",
-                "landedFrom": "Llegada desde",
-                "landedTo": "Llegada hasta",
-                "continent": "Cont. Salida",
-                "totalEntries": "Ent. totales"
-            },
-        }
-    }
+en:
+    params:
+        search: Id/Reference
+        agencyModeFk: Agency
+        warehouseInFk: Warehouse In
+        warehouseOutFk: Warehouse Out
+        scopeDays: Days onward
+        landedFrom: Landed from
+        landedTo: Landed to
+        continent: Continent out
+        totalEntries: Total entries
+es:
+    params:
+        search: Id/Referencia
+        agencyModeFk: Agencia
+        warehouseInFk: Alm. entrada
+        warehouseOutFk: Alm. salida
+        scopeDays: Días adelante
+        landedFrom: Llegada desde
+        landedTo: Llegada hasta
+        continent: Cont. Salida
+        totalEntries: Ent. totales
+
 </i18n>

src/pages/Travel/TravelList.vue

@@ -5,7 +5,7 @@ import { toDate } from 'src/filters/index';
 
 import { useRouter } from 'vue-router';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import CardList2 from 'src/components/ui/CardList2.vue';
+import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
 import { useTravelStore } from 'src/stores/travel.js';
@@ -62,12 +62,11 @@ onMounted(async () => {
                 order="shipped DESC, landed DESC"
             >
                 <template #body="{ rows }">
-                    <CardList2
+                    <CardList
                         v-for="row of rows"
                         :key="row.id"
                         :title="row.ref"
                         :id="row.id"
-                        :showCheckbox="true"
                         @click="navigateToTravelId(row.id)"
                     >
                         <template #list-items>
@@ -99,28 +98,26 @@ onMounted(async () => {
                         </template>
                         <template #actions>
                             <QBtn
-                                :label="t('travel.list.clone')"
+                                :label="t('components.smartCard.clone')"
                                 @click.stop="cloneTravel(row)"
                                 color="white"
                                 outline
-                                type="reset"
                             />
                             <QBtn
-                                :label="t('travel.list.addEntry')"
+                                :label="t('addEntry')"
+                                @click.stop="viewSummary(row.id)"
+                                color="white"
+                                outline
+                                style="margin-top: 15px"
+                            />
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
                                 @click.stop="viewSummary(row.id)"
                                 color="primary"
                                 style="margin-top: 15px"
-                                type="submit"
-                            />
-                            <QBtn
-                                :label="t('travel.list.preview')"
-                                @click.stop="viewSummary(row.id)"
-                                color="primary"
-                                style="margin-top: 15px"
-                                type="submit"
                             />
                         </template>
-                    </CardList2>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>
@@ -141,5 +138,12 @@ onMounted(async () => {
 </style>
 
 <i18n>
+en:
+    addEntry: Add entry
+
+
+es:
+    addEntry: Añadir entrada
+
 
 </i18n>

src/pages/Wagon/Type/WagonTypeCreate.vue

@@ -239,8 +239,8 @@ function exceedMaxHeight(pos) {
 
 <template>
     <QPage class="q-pa-sm q-mx-xl">
-        <QCard class="q-pa-sm">
-            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
                 <QInput
                     filled
                     v-model="name"
@@ -248,7 +248,7 @@ function exceedMaxHeight(pos) {
                     :rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]"
                 />
                 <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
-                <div class="wagon-tray q-mx-xl" v-for="tray in wagon" :key="tray.id">
+                <div class="wagon-tray q-mx-lg" v-for="tray in wagon" :key="tray.id">
                     <div class="position">
                         <QInput
                             autofocus
@@ -309,16 +309,6 @@ function exceedMaxHeight(pos) {
                     <QIcon color="grey-6" name="trip_origin" size="3rem" />
                     <QIcon color="grey-6" name="trip_origin" size="3rem" />
                 </div>
-                <div>
-                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
-                    <QBtn
-                        :label="t('wagon.type.reset')"
-                        type="reset"
-                        color="primary"
-                        flat
-                        class="q-ml-sm"
-                    />
-                </div>
                 <QDialog
                     v-model="colorPickerActive"
                     position="right"
@@ -346,8 +336,18 @@ function exceedMaxHeight(pos) {
                         </QCardSection>
                     </QCard>
                 </QDialog>
-            </QForm>
-        </QCard>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('wagon.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
     </QPage>
 </template>
 
@@ -357,45 +357,55 @@ function exceedMaxHeight(pos) {
     justify-content: center;
     align-items: flex-start;
 }
-.q-card {
+
+.q-form {
     width: 70%;
 }
+
 .q-dialog {
     .q-card {
         width: 100%;
     }
 }
+
 .wheels {
     margin-left: 5%;
     display: flex;
     justify-content: space-around;
 }
+
 .wagon-tray {
     display: flex;
     height: 6rem;
+
     .position {
-        width: 15%;
+        width: 20%;
         border-right: 1rem solid gray;
         display: flex;
         align-items: flex-end;
         justify-content: flex-end;
         padding-right: 1rem;
     }
+
     .shelving {
         display: flex;
         width: 75%;
+
         .shelving-half {
             width: 50%;
             height: 100%;
+
             .shelving-up {
                 height: 80%;
                 width: 100%;
             }
+
             .shelving-down {
                 height: 20%;
                 width: 100%;
             }
         }
+
         .shelving-divisible {
             width: 1%;
             height: 100%;
@@ -403,6 +413,7 @@ function exceedMaxHeight(pos) {
             border-right: 0.5rem dashed grey;
         }
     }
+
     .action-button {
         width: 10%;
         border-left: 1rem solid gray;

src/pages/Wagon/Type/WagonTypeList.vue

@@ -5,6 +5,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonTypeList');
@@ -48,43 +50,31 @@ async function remove(row) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6">{{ row.name }}</div>
-                                <QItem-label caption>#{{ row.id }}</QItem-label>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="delete"
-                                    @click="remove(row)"
-                                >
-                                    <QTooltip>
-                                        {{ t('wagon.list.remove') }}
-                                    </QTooltip>
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.name || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv label="ID" :value="row.id" />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                color="white"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('wagon.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>

src/pages/Wagon/WagonCreate.vue

@@ -86,9 +86,9 @@ function filterType(val, update) {
 
 <template>
     <QPage class="q-pa-sm q-mx-xl">
-        <QCard class="q-pa-sm">
-            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
-                <div class="row q-col-gutter-md q-mb-md">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
+                <div class="row q-col-gutter-md">
                     <div class="col">
                         <QInput
                             filled
@@ -108,7 +108,7 @@ function filterType(val, update) {
                         />
                     </div>
                 </div>
-                <div class="row q-col-gutter-md q-mb-md">
+                <div class="row q-col-gutter-md">
                     <div class="col">
                         <QInput
                             filled
@@ -155,18 +155,18 @@ function filterType(val, update) {
                         </QSelect>
                     </div>
                 </div>
-                <div>
-                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
-                    <QBtn
-                        :label="t('wagon.type.reset')"
-                        type="reset"
-                        color="primary"
-                        flat
-                        class="q-ml-sm"
-                    />
-                </div>
-            </QForm>
-        </QCard>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('wagon.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
     </QPage>
 </template>
 
@@ -176,7 +176,8 @@ function filterType(val, update) {
     justify-content: center;
     align-items: flex-start;
 }
-.q-card {
+
+.q-form {
     width: 70%;
 }
 </style>

src/pages/Wagon/WagonList.vue

@@ -5,6 +5,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import CardList from 'components/ui/CardList.vue';
+import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonList');
@@ -55,69 +57,41 @@ async function remove(row) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6">{{ row.label }}</div>
-                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
-                                <QList>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.plate') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.plate }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.volume') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.volume }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.type') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.type.name }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </QList>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="delete"
-                                    @click="remove(row)"
-                                >
-                                    <QTooltip>
-                                        {{ t('wagon.list.remove') }}
-                                    </QTooltip>
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.label || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv label="ID" :value="row.id" />
+                            <VnLv
+                                :label="t('wagon.list.plate')"
+                                :title-label="t('wagon.list.plate')"
+                                :value="row.plate"
+                            />
+                            <VnLv :label="t('wagon.list.volume')" :value="row?.volume" />
+                            <VnLv
+                                :label="t('wagon.list.type')"
+                                :value="row?.type?.name"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                color="white"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('wagon.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>

src/pages/Worker/WorkerList.vue

@@ -85,19 +85,17 @@ function viewSummary(id) {
                         </template>
                         <template #actions>
                             <QBtn
-                                flat
-                                icon="arrow_circle_right"
+                                :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                            >
-                                <QTooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </QTooltip>
-                            </QBtn>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
+                                color="white"
+                                outline
+                            />
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
                         </template>
                     </CardList>
                 </template>

src/router/modules/shelving.js

@@ -5,13 +5,13 @@ export default {
     name: 'Shelving',
     meta: {
         title: 'shelving',
-        icon: 'vn:trolley'
+        icon: 'vn:inventory'
     },
     component: RouterView,
     redirect: { name: 'ShelvingMain' },
     menus: {
         main: ['ShelvingList'],
-        card: ['ShelvingBasicData']
+        card: ['ShelvingBasicData', 'ShelvingLog']
     },
     children: [
         {
@@ -42,7 +42,7 @@ export default {
         {
             name: 'ShelvingLayout',
             path: ':id',
-            component: () => import('pages/Shelving/Summary/ShelvingSummaryPage.vue'),
+            component: () => import('pages/Shelving/Card/ShelvingCard.vue'),
             redirect: { name: 'ShelvingSummary' },
             children: [
                 {
@@ -52,7 +52,7 @@ export default {
                         title: 'summary',
                     },
                     component: () =>
-                        import('pages/Shelving/Summary/ShelvingSummary.vue'),
+                        import('pages/Shelving/Card/ShelvingSummary.vue'),
                 },
                 {
                     name: 'ShelvingBasicData',
@@ -64,6 +64,15 @@ export default {
                     },
                     component: () => import('pages/Shelving/ShelvingBasicData.vue'),
                 },
+                {
+                    name: 'ShelvingLog',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Shelving/Card/ShelvingLog.vue'),
+                },
             ],
         },
     ]

src/services/suppliers.service.js

@@ -1,14 +0,0 @@
-import axios from 'axios';
-
-const suppliersService = {
-    createSupplier: async (formData) => {
-        try {
-            return await axios.post('Suppliers/newSupplier', formData);
-        } catch (err) {
-            console.error(`Error creating new supplier`, err);
-            return err.response;
-        }
-    },
-};
-
-export default suppliersService;

src/services/travel.service.js

@@ -10,15 +10,6 @@ const travelService = {
         }
     },
 
-    createTravel: async (params) => {
-        try {
-            return await axios.patch('Travels', params);
-        } catch (err) {
-            console.error(`Error creating travel`, err);
-            return err.response;
-        }
-    },
-
     getTravelEntries: async (param) => {
         try {
             return await axios.get(`Travels/${param}/getEntries`);

src/stores/travel.js

@@ -17,19 +17,6 @@ export const useTravelStore = defineStore({
             const { data } = await travelService.getTravels();
             this.travels = data || [];
         },
-
-        async createTravel(travelData) {
-            const params = {
-                ref: travelData.ref,
-                agencyModeFk: travelData.agencyModeFk.value,
-                warehouseOutFk: travelData.warehouseOutFk.value,
-                warehouseInFk: travelData.warehouseInFk.value,
-                landed: new Date(travelData.landed),
-                shipped: new Date(travelData.shipped),
-            };
-
-            return await travelService.createTravel(params);
-        },
     },
 
     getters: {},