refactor: wagon list & wagon type list searchbar

src/components/FetchData.vue

@@ -43,21 +43,17 @@ onMounted(async () => {
 });
 
 async function fetch(fetchFilter = {}) {
-    try {
-        const filter = { ...fetchFilter, ...$props.filter }; // eslint-disable-line vue/no-dupe-keys
-        if ($props.where && !fetchFilter.where) filter.where = $props.where;
-        if ($props.sortBy) filter.order = $props.sortBy;
-        if ($props.limit) filter.limit = $props.limit;
+    const filter = { ...fetchFilter, ...$props.filter }; // eslint-disable-line vue/no-dupe-keys
+    if ($props.where && !fetchFilter.where) filter.where = $props.where;
+    if ($props.sortBy) filter.order = $props.sortBy;
+    if ($props.limit) filter.limit = $props.limit;
 
-        const { data } = await axios.get($props.url, {
-            params: { filter: JSON.stringify(filter), ...$props.params },
-        });
+    const { data } = await axios.get($props.url, {
+        params: { filter: JSON.stringify(filter), ...$props.params },
+    });
 
-        emit('onFetch', data);
-        return data;
-    } catch (e) {
-        //
-    }
+    emit('onFetch', data);
+    return data;
 }
 </script>
 <template>

src/components/common/VnLog.vue

@@ -238,6 +238,7 @@ async function openPointRecord(id, modelLog) {
     pointRecord.value = parseProps(propNames, locale, data);
 }
 async function setLogTree(data) {
+    if (!data) return;
     logTree.value = getLogTree(data);
 }
 

src/components/ui/VnPaginate.vue

@@ -116,7 +116,10 @@ watch(
 watch(
     () => store.data,
     (data) => {
-        if (!mounted.value) return;
+        if (!mounted.value) {
+            emit('onFetch', data);
+            return;
+        }
         emit('onChange', data);
     },
     { immediate: true }

src/components/ui/VnSearchbar.vue

@@ -68,8 +68,8 @@ const props = defineProps({
         default: undefined,
     },
     moduleName: {
-        type: Boolean,
-        default: false,
+        type: String,
+        default: '',
     },
 });
 

src/composables/useArrayData.js

@@ -257,13 +257,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     function updateStateParams() {
         if (!route?.path) return;
-        const usesModuleName = userOptions.moduleName;
+        const usesModuleName = `/${store.data[0].id}` + 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({
@@ -273,18 +272,10 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             const { matched: matches } = router.currentRoute.value;
             const { path } = matches.at(-1);
 
-            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.*/, ''));
+            const to =
+                store?.data?.length === 1
+                    ? path.replace(/\/(list|:id)|-list/, usesModuleName)
+                    : path.replace(/:id.*/, '');
 
             if (route.path != to) {
                 const pushUrl = { path: to };

src/pages/Ticket/Card/TicketBoxing.vue

@@ -26,20 +26,16 @@ const time = reactive({
     max: 24,
 });
 async function fetch() {
-    try {
-        const filter = {
-            where: {
-                ticketFk: entityId.value,
-            },
-        };
-        const { data } = await axios.get(`/Expeditions/filter`, {
-            params: { filter },
-        });
+    const filter = {
+        where: {
+            ticketFk: entityId.value,
+        },
+    };
+    const { data } = await axios.get(`/Expeditions/filter`, {
+        params: { filter },
+    });
 
-        if (data) expeditions.value = data;
-    } catch (e) {
-        //
-    }
+    if (data) expeditions.value = data;
 }
 
 async function getVideoList(expeditionId, timed) {

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();
@@ -72,9 +73,24 @@ 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('searchWagonType')"
+        :info="t('searchInfo')"
+        :expr-builder="exprBuilder"
+        search-url="table"
+    />
     <VnSubToolbar />
     <QPage class="q-pa-sm q-mx-xl">
         <FormModel

src/pages/Wagon/Type/WagonTypeList.vue

@@ -18,7 +18,6 @@ const dialog = ref();
 const { push } = useRouter();
 const { t } = useI18n();
 const tableRef = ref();
-const useModuleName = ref(true);
 
 const initialData = computed(() => {
     return {
@@ -91,11 +90,12 @@ const exprBuilder = (param, value) => {
 
 <template>
     <VnSearchbar
+        url="WagonTypes"
         data-key="WagonTypeList"
         :label="t('searchWagonType')"
         :info="t('searchInfo')"
-        :module-name="useModuleName"
         :expr-builder="exprBuilder"
+        module-name="/edit"
     />
     <QPage class="column items-center q-pa-md">
         <VnTable
@@ -108,6 +108,7 @@ const exprBuilder = (param, value) => {
             :column-search="false"
             :default-mode="'card'"
             :disable-option="{ table: true }"
+            :expr-builder="exprBuilder"
         >
         </VnTable>
         <QPageSticky :offset="[18, 18]">

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());
@@ -54,26 +55,22 @@ async function onReset() {
 }
 
 async function fetch() {
-    try {
-        await axios.get('WagonTypes').then(async (res) => {
-            if (res.data) {
-                filteredWagonTypes.value = wagonTypes = res.data;
+    await axios.get('WagonTypes').then(async (res) => {
+        if (res.data) {
+            filteredWagonTypes.value = wagonTypes = res.data;
+        }
+    });
+    if (entityId.value) {
+        await axios.get(`Wagons/${entityId.value}`).then(async (res) => {
+            const data = res.data;
+            if (data) {
+                wagon.value.label = data.label;
+                wagon.value.plate = data.plate;
+                wagon.value.volume = data.volume;
+                wagon.value.typeFk = data.typeFk;
+                originalData = { ...wagon.value };
             }
         });
-        if (entityId.value) {
-            await axios.get(`Wagons/${entityId.value}`).then(async (res) => {
-                const data = res.data;
-                if (data) {
-                    wagon.value.label = data.label;
-                    wagon.value.plate = data.plate;
-                    wagon.value.volume = data.volume;
-                    wagon.value.typeFk = data.typeFk;
-                    originalData = { ...wagon.value };
-                }
-            });
-        }
-    } catch (e) {
-        //
     }
 }
 
@@ -85,9 +82,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('searchWagon')"
+        :info="t('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">
@@ -174,3 +187,12 @@ function filterType(val, update) {
     width: 70%;
 }
 </style>
+
+<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>

src/pages/Wagon/WagonList.vue

@@ -14,7 +14,6 @@ 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 = {
@@ -106,8 +105,8 @@ const exprBuilder = (param, value) => {
         data-key="WagonList"
         :label="t('searchWagon')"
         :info="t('searchInfo')"
-        :module-name="useModuleName"
         :expr-builder="exprBuilder"
+        module-name="/edit"
     />
     <QPage class="column items-center q-pa-md">
         <VnTable

src/pages/Zone/Delivery/ZoneDeliveryCreate.vue

@@ -34,62 +34,58 @@ let zoneDeliveryColors;
 let currentTrayColorPicked;
 
 async function fetch() {
-    try {
-        await axios.get('ZoneConfigs').then(async (res) => {
-            if (res.data) {
-                zoneConfig = res.data[0];
-            }
-        });
+    await axios.get('ZoneConfigs').then(async (res) => {
+        if (res.data) {
+            zoneConfig = res.data[0];
+        }
+    });
 
-        await axios.get(`ZoneDeliveryColors`).then(async (res) => {
-            if (res.data) {
-                zoneDeliveryColors = res.data;
-                if (!entityId.value)
-                    zone.value.push({
-                        id: 0,
-                        position: 0,
-                        color: { ...zoneDeliveryColors[0] },
-                        action: 'add',
-                    });
-                else {
-                    await axios
-                        .get(`ZoneDeliveryTrays`, {
-                            params: { filter: { where: { typeFk: entityId.value } } },
-                        })
-                        .then(async (res) => {
-                            if (res.data) {
-                                for (let i = 0; i < res.data.length; i++) {
-                                    const tray = res.data[i];
-                                    zone.value.push({
-                                        id: res.data.length - i - 1,
-                                        position: tray.height,
-                                        color: {
-                                            ...zoneDeliveryColors.find((color) => {
-                                                return color.id === tray.colorFk;
-                                            }),
-                                        },
-                                        action: tray.height == 0 ? 'add' : 'delete',
-                                    });
-                                }
-                                zone.value.forEach((value) => {
-                                    originalData.trays.push({ ...value });
+    await axios.get(`ZoneDeliveryColors`).then(async (res) => {
+        if (res.data) {
+            zoneDeliveryColors = res.data;
+            if (!entityId.value)
+                zone.value.push({
+                    id: 0,
+                    position: 0,
+                    color: { ...zoneDeliveryColors[0] },
+                    action: 'add',
+                });
+            else {
+                await axios
+                    .get(`ZoneDeliveryTrays`, {
+                        params: { filter: { where: { typeFk: entityId.value } } },
+                    })
+                    .then(async (res) => {
+                        if (res.data) {
+                            for (let i = 0; i < res.data.length; i++) {
+                                const tray = res.data[i];
+                                zone.value.push({
+                                    id: res.data.length - i - 1,
+                                    position: tray.height,
+                                    color: {
+                                        ...zoneDeliveryColors.find((color) => {
+                                            return color.id === tray.colorFk;
+                                        }),
+                                    },
+                                    action: tray.height == 0 ? 'add' : 'delete',
                                 });
                             }
-                        });
-                }
+                            zone.value.forEach((value) => {
+                                originalData.trays.push({ ...value });
+                            });
+                        }
+                    });
+            }
+        }
+    });
+
+    if (entityId.value) {
+        await axios.get(`ZoneDeliverys/${entityId.value}`).then((res) => {
+            if (res.data) {
+                originalData.name = name.value = res.data.name;
+                originalData.divisible = divisible.value = res.data.divisible;
             }
         });
-
-        if (entityId.value) {
-            await axios.get(`ZoneDeliverys/${entityId.value}`).then((res) => {
-                if (res.data) {
-                    originalData.name = name.value = res.data.name;
-                    originalData.divisible = divisible.value = res.data.divisible;
-                }
-            });
-        }
-    } catch (e) {
-        //
     }
 }
 

src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue

@@ -34,62 +34,58 @@ let zoneUpcomingColors;
 let currentTrayColorPicked;
 
 async function fetch() {
-    try {
-        await axios.get('ZoneConfigs').then(async (res) => {
-            if (res.data) {
-                zoneConfig = res.data[0];
-            }
-        });
+    await axios.get('ZoneConfigs').then(async (res) => {
+        if (res.data) {
+            zoneConfig = res.data[0];
+        }
+    });
 
-        await axios.get(`ZoneUpcomingColors`).then(async (res) => {
-            if (res.data) {
-                zoneUpcomingColors = res.data;
-                if (!entityId.value)
-                    zone.value.push({
-                        id: 0,
-                        position: 0,
-                        color: { ...zoneUpcomingColors[0] },
-                        action: 'add',
-                    });
-                else {
-                    await axios
-                        .get(`ZoneUpcomingTrays`, {
-                            params: { filter: { where: { typeFk: entityId.value } } },
-                        })
-                        .then(async (res) => {
-                            if (res.data) {
-                                for (let i = 0; i < res.data.length; i++) {
-                                    const tray = res.data[i];
-                                    zone.value.push({
-                                        id: res.data.length - i - 1,
-                                        position: tray.height,
-                                        color: {
-                                            ...zoneUpcomingColors.find((color) => {
-                                                return color.id === tray.colorFk;
-                                            }),
-                                        },
-                                        action: tray.height == 0 ? 'add' : 'delete',
-                                    });
-                                }
-                                zone.value.forEach((value) => {
-                                    originalData.trays.push({ ...value });
+    await axios.get(`ZoneUpcomingColors`).then(async (res) => {
+        if (res.data) {
+            zoneUpcomingColors = res.data;
+            if (!entityId.value)
+                zone.value.push({
+                    id: 0,
+                    position: 0,
+                    color: { ...zoneUpcomingColors[0] },
+                    action: 'add',
+                });
+            else {
+                await axios
+                    .get(`ZoneUpcomingTrays`, {
+                        params: { filter: { where: { typeFk: entityId.value } } },
+                    })
+                    .then(async (res) => {
+                        if (res.data) {
+                            for (let i = 0; i < res.data.length; i++) {
+                                const tray = res.data[i];
+                                zone.value.push({
+                                    id: res.data.length - i - 1,
+                                    position: tray.height,
+                                    color: {
+                                        ...zoneUpcomingColors.find((color) => {
+                                            return color.id === tray.colorFk;
+                                        }),
+                                    },
+                                    action: tray.height == 0 ? 'add' : 'delete',
                                 });
                             }
-                        });
-                }
+                            zone.value.forEach((value) => {
+                                originalData.trays.push({ ...value });
+                            });
+                        }
+                    });
+            }
+        }
+    });
+
+    if (entityId.value) {
+        await axios.get(`ZoneUpcomings/${entityId.value}`).then((res) => {
+            if (res.data) {
+                originalData.name = name.value = res.data.name;
+                originalData.divisible = divisible.value = res.data.divisible;
             }
         });
-
-        if (entityId.value) {
-            await axios.get(`ZoneUpcomings/${entityId.value}`).then((res) => {
-                if (res.data) {
-                    originalData.name = name.value = res.data.name;
-                    originalData.divisible = divisible.value = res.data.divisible;
-                }
-            });
-        }
-    } catch (e) {
-        //
     }
 }