Added searchbar in Wagon module #835

Open
jon wants to merge 10 commits from Fix-AddSearchbarToWagonModule into dev
3 changed files with 56 additions and 6 deletions
Showing only changes of commit a6508ac2dc - Show all commits

View File

@ -251,6 +251,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter); newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);
if (store.navigate) { if (store.navigate) {
let to;
const { customRouteRedirectName, searchText } = store.navigate; const { customRouteRedirectName, searchText } = store.navigate;
if (customRouteRedirectName) if (customRouteRedirectName)
return router.push({ return router.push({
@ -260,10 +261,18 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
const { matched: matches } = router.currentRoute.value; const { matched: matches } = router.currentRoute.value;
const { path } = matches.at(-1); const { path } = matches.at(-1);
const to = path === '/wagon/list' || path === '/wagon/type/list'
Outdated
Review

No hay que poner rutas concretas en un composable global.
Mañana lo miramos

No hay que poner rutas concretas en un composable global. Mañana lo miramos
store?.data?.length === 1 ? (to =
? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`) store?.data?.length === 1
: path.replace(/:id.*/, ''); ? 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.*/, ''));
if (route.path != to) { if (route.path != to) {
const pushUrl = { path: to }; const pushUrl = { path: to };

View File

@ -9,6 +9,7 @@ import FormModelPopup from 'src/components/FormModelPopup.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnRow from 'src/components/ui/VnRow.vue'; import VnRow from 'src/components/ui/VnRow.vue';
import VnTable from 'src/components/VnTable/VnTable.vue'; import VnTable from 'src/components/VnTable/VnTable.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const quasar = useQuasar(); const quasar = useQuasar();
const arrayData = useArrayData('WagonTypeList'); const arrayData = useArrayData('WagonTypeList');
@ -78,16 +79,28 @@ async function remove(row) {
store.data.splice(store.data.indexOf(row), 1); store.data.splice(store.data.indexOf(row), 1);
window.location.reload(); window.location.reload();
} }
const exprBuilder = (param, value) => {
switch (param) {
case 'search':
return /^\d+$/.test(value) ? { id: value } : { name: { like: `%${value}%` } };
}
};
</script> </script>
<template> <template>
<VnSearchbar
data-key="WagonTypeList"
:label="t('searchWagonType')"
:info="t('searchInfo')"
:expr-builder="exprBuilder"
/>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<VnTable <VnTable
ref="tableRef" ref="tableRef"
data-key="WagonTypeList" data-key="WagonTypeList"
url="WagonTypes" url="WagonTypes"
:columns="columns" :columns="columns"
auto-load
order="id DESC" order="id DESC"
:right-search="false" :right-search="false"
:column-search="false" :column-search="false"
@ -129,8 +142,12 @@ async function remove(row) {
<i18n> <i18n>
en: en:
nameNotEmpty: The name cannot be empty nameNotEmpty: The name cannot be empty
searchWagonType: Search wagon type
searchInfo: You can search by name or id
es: es:
Create new Wagon type: Crear nuevo tipo de vagón Create new Wagon type: Crear nuevo tipo de vagón
Name: Nombre Name: Nombre
nameNotEmpty: El nombre no puede estar vacío nameNotEmpty: El nombre no puede estar vacío
searchWagonType: Buscar tipo de vagón
searchInfo: Puedes buscar por nombre o id
</i18n> </i18n>

View File

@ -8,6 +8,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const quasar = useQuasar(); const quasar = useQuasar();
const arrayData = useArrayData('WagonList'); const arrayData = useArrayData('WagonList');
@ -88,9 +89,24 @@ async function remove(row) {
// //
} }
} }
const exprBuilder = (param, value) => {
switch (param) {
case 'search':
return /^\d+$/.test(value)
? { label: value }
: { plate: { like: `%${value}%` } };
}
};
</script> </script>
<template> <template>
<VnSearchbar
data-key="WagonList"
:label="t('searchWagon')"
:info="t('searchInfo')"
:expr-builder="exprBuilder"
/>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<VnTable <VnTable
ref="tableRef" ref="tableRef"
@ -98,7 +114,6 @@ async function remove(row) {
url="Wagons" url="Wagons"
:filter="filter" :filter="filter"
:columns="columns" :columns="columns"
auto-load
order="id DESC" order="id DESC"
:right-search="false" :right-search="false"
:column-search="false" :column-search="false"
@ -170,3 +185,12 @@ async function remove(row) {
</VnTable> </VnTable>
</QPage> </QPage>
</template> </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>