src/components/ui/VnSearchbar.vue

@@ -67,6 +67,10 @@ const props = defineProps({
         type: Function,
         default: undefined,
     },
+    moduleName: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const searchText = ref();

src/composables/useArrayData.js

@@ -257,11 +257,13 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     function updateStateParams() {
         if (!route?.path) return;
+        const usesModuleName = userOptions.moduleName;
         const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
         if (store?.searchUrl)
             newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);
 
         if (store.navigate) {
+            let to;
             const { customRouteRedirectName, searchText } = store.navigate;
             if (customRouteRedirectName)
                 return router.push({
@@ -271,10 +273,18 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             const { matched: matches } = router.currentRoute.value;
             const { path } = matches.at(-1);
 
-            const to =
+            usesModuleName
+                ? (to =
+                      store?.data?.length === 1
+                          ? path.replace(
+                                /\/(list|:id)|-list/,
+                                `/${store.data[0].id}/edit`
+                            )
+                          : path.replace(/:id.*/, ''))
+                : (to =
                       store?.data?.length === 1
                           ? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
-                    : path.replace(/:id.*/, '');
+                          : path.replace(/:id.*/, ''));
 
             if (route.path != to) {
                 const pushUrl = { path: to };

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');
@@ -17,6 +18,7 @@ const dialog = ref();
 const { push } = useRouter();
 const { t } = useI18n();
 const tableRef = ref();
+const useModuleName = ref(true);
 
 const initialData = computed(() => {
     return {
@@ -78,16 +80,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
+        data-key="WagonTypeList"
+        :label="t('searchWagonType')"
+        :info="t('searchInfo')"
+        :module-name="useModuleName"
+        :expr-builder="exprBuilder"
+    />
     <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"
@@ -129,8 +144,12 @@ async function remove(row) {
 <i18n>
 en:
     nameNotEmpty: The name cannot be empty
+    searchWagonType: Search wagon type
+    searchInfo: You can search by name or id
 es:
     Create new Wagon type: Crear nuevo tipo de vagón
     Name: Nombre
     nameNotEmpty: El nombre no puede estar vacío
+    searchWagonType: Buscar tipo de vagón
+    searchInfo: Puedes buscar por nombre o id
 </i18n>

src/pages/Wagon/WagonList.vue

@@ -8,11 +8,13 @@ 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');
 const store = arrayData.store;
 const router = useRouter();
+const useModuleName = ref(true);
 const { t } = useI18n();
 const tableRef = ref();
 const filter = {
@@ -88,9 +90,25 @@ async function remove(row) {
         //
     }
 }
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { label: value }
+                : { plate: { like: `%${value}%` } };
+    }
+};
 </script>
 
 <template>
+    <VnSearchbar
+        data-key="WagonList"
+        :label="t('searchWagon')"
+        :info="t('searchInfo')"
+        :module-name="useModuleName"
+        :expr-builder="exprBuilder"
+    />
     <QPage class="column items-center q-pa-md">
         <VnTable
             ref="tableRef"
@@ -98,7 +116,6 @@ async function remove(row) {
             url="Wagons"
             :filter="filter"
             :columns="columns"
-            auto-load
             order="id DESC"
             :right-search="false"
             :column-search="false"
@@ -170,3 +187,12 @@ async function remove(row) {
         </VnTable>
     </QPage>
 </template>
+
+<i18n>
+    en:
+        searchWagon: Search wagon
+        searchInfo: You can search by name or plate
+    es:
+        searchWagon: Buscar vagón
+        searchInfo: Puedes buscar por nombre o mátricula
+</i18n>