feat: added searchbar in wagon module

src/components/ui/VnSearchbar.vue

@@ -69,6 +69,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    moduleName: {
+        type: String,
+        default: '',
+    },
 });
 
 const searchText = ref();

src/composables/useArrayData.js

@@ -243,6 +243,9 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     function updateStateParams(data) {
         if (!route?.path) return;
+        const usesModuleName = userOptions.moduleName
+            ? `/${data[0].id}` + userOptions.moduleName
+            : `/${data[0].id}`;
         const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
         if (store?.searchUrl)
             newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);
@@ -259,12 +262,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
             const to =
                 data?.length === 1
-                    ? path.replace(/\/(list|:id)|-list/, `/${data[0].id}`)
+                    ? path.replace(/\/(list|:id)|-list/, usesModuleName)
                     : path.replace(/:id.*/, '');
 
             if (route.path != to) {
                 const pushUrl = { path: to };
-                if (to.endsWith('/list') || to.endsWith('/'))
+                if (to.endsWith('/list') || to.endsWith('/') || to.endsWith('/edit'))
                     pushUrl.query = newUrl.query;
                 return router.push(pushUrl) && { redirect: true };
             }

src/i18n/locale/en.yml

@@ -692,37 +692,6 @@ worker:
         sizeLimit: Size limit
         isOnReservationMode: Reservation mode
         machine: Machine
-wagon:
-    type:
-        submit: Submit
-        reset: Reset
-        trayColor: Tray color
-        removeItem: Wagon type removed successfully
-    list:
-        plate: Plate
-        volume: Volume
-        remove: Remove
-        removeItem: Wagon removed successfully
-    create:
-        plate: Plate
-        label: Label
-    warnings:
-        noData: No data available
-        nameNotEmpty: Name can not be empty
-        labelNotEmpty: Label can not be empty
-        plateNotEmpty: Plate can not be empty
-        volumeNotEmpty: Volume can not be empty
-        typeNotEmpty: Type can not be empty
-        maxTrays: You have reached the max number of trays
-        minHeightBetweenTrays: 'The minimum height between trays is '
-        maxWagonHeight: 'The maximum height of the wagon is '
-        uncompleteTrays: There are incomplete trays
-    params:
-        label: Label
-        plate: Plate
-        volume: Volume
-        name: Name
-
 supplier:
     list:
         payMethod: Pay method

src/i18n/locale/es.yml

@@ -693,36 +693,6 @@ worker:
         sizeLimit: Tamaño límite
         isOnReservationMode: Modo de reserva
         machine: Máquina
-
-wagon:
-    type:
-        submit: Guardar
-        reset: Deshacer cambios
-        trayColor: Color de la bandeja
-        removeItem: Tipo de vagón borrado correctamente
-    list:
-        plate: Matrícula
-        volume: Volumen
-        remove: Borrar
-        removeItem: Vagón borrado correctamente
-    create:
-        label: Etiqueta
-    warnings:
-        noData: Sin datos disponibles
-        nameNotEmpty: El nombre no puede estar vacío
-        labelNotEmpty: La etiqueta no puede estar vacía
-        plateNotEmpty: La matrícula no puede estar vacía
-        volumeNotEmpty: El volumen no puede estar vacío
-        typeNotEmpty: El tipo no puede estar vacío
-        maxTrays: Has alcanzado el número máximo de bandejas
-        minHeightBetweenTrays: 'La distancia mínima entre bandejas es '
-        maxWagonHeight: 'La altura máxima del vagón es '
-        uncompleteTrays: Hay bandejas sin completar
-    params:
-        label: Etiqueta
-        plate: Matrícula
-        volume: Volumen
-        name: Nombre
 supplier:
     list:
         payMethod: Método de pago

src/pages/Wagon/Type/WagonTypeEdit.vue

@@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import WagonCreateTray from './WagonCreateTray.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const { t } = useI18n();
 const { notify } = useQuasar();
@@ -29,7 +30,7 @@ async function addTray(newTray) {
     const res = await axios.post(`WagonTypeTrays`, newTray);
     wagonTrays.value.push(res.data);
     notify({
-        message: t(`Tray added successfully`),
+        message: t(`wagon.trayAdded`),
         type: 'positive',
     });
 }
@@ -41,7 +42,7 @@ async function deleteTray(trayToDelete) {
         wagonTrays.value.splice(index, 1);
     }
     notify({
-        message: t('Tray deleted successfully'),
+        message: t('wagon.trayDeleted'),
         type: 'positive',
     });
 }
@@ -72,14 +73,29 @@ watch(
     },
     { deep: true }
 );
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value) ? { id: value } : { name: { like: `%${value}%` } };
+    }
+};
 </script>
 
 <template>
+    <VnSearchbar
+        url="WagonTypes"
+        data-key="WagonTypeList"
+        :label="t('wagon.searchWagonType')"
+        :info="t('wagon.searchTypeInfo')"
+        :expr-builder="exprBuilder"
+        search-url="table"
+    />
     <VnSubToolbar />
     <QPage class="q-pa-sm q-mx-xl">
         <FormModel
-            :url="`WagonTypes/ ${entityId}`"
+            :url="`WagonTypes/${entityId}`"
-            :url-update="`WagonTypes/ ${entityId}`"
+            :url-update="`WagonTypes/${entityId}`"
             :filter="formFilter"
             model="WagonType"
             auto-load
@@ -119,7 +135,7 @@ watch(
                                                 type="number"
                                                 disable
                                                 class="input-tray q-mb-sm"
-                                                :label="t('Height') + ': '"
+                                                :label="t('wagon.height') + ': '"
                                                 v-model="row.height"
                                             />
                                         </div>
@@ -269,19 +285,3 @@ watch(
     margin-left: 40%;
 }
 </style>
-
-<i18n>
-    en:
-        tray: Tray
-        wagonColor: Wagon color
-        Select a tray: Select a tray
-    es:
-        tray: Bandeja
-        wagonColor: Color de la bandeja
-        Select a tray: Seleccione una bandeja
-        Create new Wagon type: Crear nuevo tipo de vagón
-        Add new tray: Añadir nueva bandeja
-        Height: Altura
-        Tray added successfully: Bandeja añadida correctamente
-        Tray deleted successfully: Bandeja eliminada correctamente
-</i18n>

src/pages/Wagon/Type/WagonTypeList.vue

@@ -9,6 +9,7 @@ import FormModelPopup from 'src/components/FormModelPopup.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonTypeList');
@@ -78,16 +79,29 @@ async function remove(row) {
     store.data.splice(store.data.indexOf(row), 1);
     window.location.reload();
 }
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value) ? { id: value } : { name: { like: `%${value}%` } };
+    }
+};
 </script>
 
 <template>
+    <VnSearchbar
+        :label="t('wagon.searchWagonType')"
+        :info="t('wagon.searchTypeInfo')"
+        data-key="WagonTypeList"
+        :expr-builder="exprBuilder"
+        module-name="/edit"
+    />
     <QPage class="column items-center q-pa-md">
         <VnTable
             ref="tableRef"
             data-key="WagonTypeList"
             url="WagonTypes"
             :columns="columns"
-            auto-load
             order="id DESC"
             :right-search="false"
             :column-search="false"
@@ -99,7 +113,7 @@ async function remove(row) {
             <QBtn @click.stop="dialog.show()" color="primary" fab icon="add" shortcut="+">
                 <QDialog ref="dialog">
                     <FormModelPopup
-                        :title="t('Create new Wagon type')"
+                        :title="t('wagon.createWagonType')"
                         url-create="WagonTypes"
                         model="WagonType"
                         :form-initial-data="initialData"
@@ -112,7 +126,7 @@ async function remove(row) {
                                     filled
                                     v-model="data.name"
                                     :label="t('Name')"
-                                    :rules="[(val) => !!val || t('nameNotEmpty')]"
+                                    :rules="[(val) => !!val || t('wagon.nameNotEmpty')]"
                                 />
                             </VnRow>
                         </template>
@@ -125,12 +139,3 @@ async function remove(row) {
         </QPageSticky>
     </QPage>
 </template>
-
-<i18n>
-en:
-    nameNotEmpty: The name cannot be empty
-es:
-    Create new Wagon type: Crear nuevo tipo de vagón
-    Name: Nombre
-    nameNotEmpty: El nombre no puede estar vacío
-</i18n>

src/pages/Wagon/WagonCreate.vue

@@ -7,6 +7,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 onMounted(() => fetch());
 onUpdated(() => fetch());
@@ -85,9 +86,25 @@ function filterType(val, update) {
         );
     });
 }
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { label: value }
+                : { plate: { like: `%${value}%` } };
+    }
+};
 </script>
 
 <template>
+    <VnSearchbar
+        url="Wagons"
+        data-key="WagonList"
+        :label="t('wagon.searchWagon')"
+        :info="t('wagon.searchInfo')"
+        :expr-builder="exprBuilder"
+    />
     <QPage class="q-pa-sm q-mx-xl">
         <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
             <QCard class="q-pa-md">

src/pages/Wagon/WagonList.vue

@@ -8,6 +8,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 import { computed, ref } from 'vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonList');
@@ -75,22 +76,34 @@ function navigate(id) {
 }
 
 async function remove(row) {
-    try {
+    await axios.delete(`Wagons/${row.id}`).then(async () => {
-        await axios.delete(`Wagons/${row.id}`).then(async () => {
+        quasar.notify({
-            quasar.notify({
+            message: t('wagon.list.removeItem'),
-                message: t('wagon.list.removeItem'),
+            type: 'positive',
-                type: 'positive',
-            });
-            store.data.splice(store.data.indexOf(row), 1);
-            window.location.reload();
         });
-    } catch (error) {
+        store.data.splice(store.data.indexOf(row), 1);
-        //
+        window.location.reload();
-    }
+    });
 }
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { label: value }
+                : { plate: { like: `%${value}%` } };
+    }
+};
 </script>
 
 <template>
+    <VnSearchbar
+        :label="t('wagon.searchWagon')"
+        :info="t('wagon.searchInfo')"
+        data-key="WagonList"
+        :expr-builder="exprBuilder"
+        module-name="/edit"
+    />
     <QPage class="column items-center q-pa-md">
         <VnTable
             ref="tableRef"
@@ -104,7 +117,7 @@ async function remove(row) {
             :disable-option="{ table: true }"
             :create="{
                 urlCreate: 'Wagons',
-                title: t('Create new wagon'),
+                title: t('wagon.createWagon'),
                 onDataSaved: () => tableRef.reload(),
                 formInitialData: {},
             }"
@@ -168,8 +181,3 @@ async function remove(row) {
         </VnTable>
     </QPage>
 </template>
-
-<i18n>
-es:
-    Create new wagon: Crear nuevo vagón
-</i18n>

src/pages/Wagon/locale/en.yml

@@ -0,0 +1,40 @@
+wagon:
+    searchWagon: Search wagon
+    searchInfo: You can search by name or plate
+    nameNotEmpty: The name cannot be empty
+    searchWagonType: Search wagon type
+    searchTypeInfo: You can search by name or id
+    createWagon: Create new wagon
+    createWagonType: Create new Wagon type
+    height: Height
+    trayAdded: Tray added successfully
+    trayDeleted: Tray deleted successfully
+    type:
+        submit: Submit
+        reset: Reset
+        trayColor: Tray color
+        removeItem: Wagon type removed successfully
+    list:
+        plate: Plate
+        volume: Volume
+        remove: Remove
+        removeItem: Wagon removed successfully
+    create:
+        plate: Plate
+        label: Label
+    warnings:
+        noData: No data available
+        nameNotEmpty: Name can not be empty
+        labelNotEmpty: Label can not be empty
+        plateNotEmpty: Plate can not be empty
+        volumeNotEmpty: Volume can not be empty
+        typeNotEmpty: Type can not be empty
+        maxTrays: You have reached the max number of trays
+        minHeightBetweenTrays: 'The minimum height between trays is '
+        maxWagonHeight: 'The maximum height of the wagon is '
+        uncompleteTrays: There are incomplete trays
+    params:
+        label: Label
+        plate: Plate
+        volume: Volume
+        name: Name

src/pages/Wagon/locale/es.yml

@@ -0,0 +1,40 @@
+wagon:
+    searchWagon: Buscar vagón
+    searchInfo: Puedes buscar por nombre o mátricula
+    createWagon: Crear nuevo vagón
+    createWagonType: Crear nuevo tipo de vagón
+    Name: Nombre
+    nameNotEmpty: El nombre no puede estar vacío
+    searchWagonType: Buscar tipo de vagón
+    searchTypeInfo: Puedes buscar por nombre o id
+    height: Altura
+    trayAdded: Bandeja añadida correctamente
+    trayDeleted: Bandeja eliminada correctamente
+    type:
+        submit: Guardar
+        reset: Deshacer cambios
+        trayColor: Color de la bandeja
+        removeItem: Tipo de vagón borrado correctamente
+    list:
+        plate: Matrícula
+        volume: Volumen
+        remove: Borrar
+        removeItem: Vagón borrado correctamente
+    create:
+        label: Etiqueta
+    warnings:
+        noData: Sin datos disponibles
+        nameNotEmpty: El nombre no puede estar vacío
+        labelNotEmpty: La etiqueta no puede estar vacía
+        plateNotEmpty: La matrícula no puede estar vacía
+        volumeNotEmpty: El volumen no puede estar vacío
+        typeNotEmpty: El tipo no puede estar vacío
+        maxTrays: Has alcanzado el número máximo de bandejas
+        minHeightBetweenTrays: 'La distancia mínima entre bandejas es '
+        maxWagonHeight: 'La altura máxima del vagón es '
+        uncompleteTrays: Hay bandejas sin completar
+    params:
+        label: Etiqueta
+        plate: Matrícula
+        volume: Volumen
+        name: Nombre