WIP: Added searchbar in Wagon module #835

Draft
jon wants to merge 16 commits from Fix-AddSearchbarToWagonModule into dev
10 changed files with 219 additions and 151 deletions

View File

@ -43,7 +43,6 @@ onMounted(async () => {
}); });
async function fetch(fetchFilter = {}) { async function fetch(fetchFilter = {}) {
try {
const filter = { ...fetchFilter, ...$props.filter }; // eslint-disable-line vue/no-dupe-keys const filter = { ...fetchFilter, ...$props.filter }; // eslint-disable-line vue/no-dupe-keys
if ($props.where && !fetchFilter.where) filter.where = $props.where; if ($props.where && !fetchFilter.where) filter.where = $props.where;
if ($props.sortBy) filter.order = $props.sortBy; if ($props.sortBy) filter.order = $props.sortBy;
@ -55,9 +54,6 @@ async function fetch(fetchFilter = {}) {
emit('onFetch', data); emit('onFetch', data);
return data; return data;
} catch (e) {
//
}
} }
</script> </script>
<template> <template>

View File

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

View File

@ -243,6 +243,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
function updateStateParams(data) { function updateStateParams(data) {
if (!route?.path) return; if (!route?.path) return;
const usesModuleName = `/${store.data[0].id}` + userOptions.moduleName;
const newUrl = { path: route.path, query: { ...(route.query ?? {}) } }; const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
if (store?.searchUrl) if (store?.searchUrl)
newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter); newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);

View File

@ -28,7 +28,6 @@ const time = reactive({
max: 24, max: 24,
}); });
async function fetch() { async function fetch() {
try {
const filter = { const filter = {
where: { where: {
ticketFk: entityId.value, ticketFk: entityId.value,
@ -39,9 +38,6 @@ async function fetch() {
}); });
if (data) expeditions.value = data; if (data) expeditions.value = data;
} catch (e) {
//
}
} }
async function getVideoList(expeditionId, timed) { async function getVideoList(expeditionId, timed) {

View File

@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n';
import axios from 'axios'; import axios from 'axios';
import VnPaginate from 'components/ui/VnPaginate.vue'; import VnPaginate from 'components/ui/VnPaginate.vue';
import WagonCreateTray from './WagonCreateTray.vue'; import WagonCreateTray from './WagonCreateTray.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const { t } = useI18n(); const { t } = useI18n();
const { notify } = useQuasar(); const { notify } = useQuasar();
@ -72,9 +73,24 @@ watch(
}, },
{ deep: true } { deep: true }
); );
const exprBuilder = (param, value) => {
switch (param) {
case 'search':
return /^\d+$/.test(value) ? { id: value } : { name: { like: `%${value}%` } };
}
};
</script> </script>
<template> <template>
<VnSearchbar
url="WagonTypes"
data-key="WagonTypeList"
:label="t('searchWagonType')"
:info="t('searchInfo')"
:expr-builder="exprBuilder"
search-url="table"
/>
<VnSubToolbar /> <VnSubToolbar />
<QPage class="q-pa-sm q-mx-xl"> <QPage class="q-pa-sm q-mx-xl">
<FormModel <FormModel

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,21 +79,36 @@ 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
url="WagonTypes"
data-key="WagonTypeList"
:label="t('searchWagonType')"
:info="t('searchInfo')"
:expr-builder="exprBuilder"
module-name="/edit"
/>
<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"
:default-mode="'card'" :default-mode="'card'"
:disable-option="{ table: true }" :disable-option="{ table: true }"
:expr-builder="exprBuilder"
> >
</VnTable> </VnTable>
<QPageSticky :offset="[18, 18]"> <QPageSticky :offset="[18, 18]">
@ -129,8 +145,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

@ -7,6 +7,7 @@ import VnInput from 'src/components/common/VnInput.vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import axios from 'axios'; import axios from 'axios';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
onMounted(() => fetch()); onMounted(() => fetch());
onUpdated(() => fetch()); onUpdated(() => fetch());
@ -54,7 +55,6 @@ async function onReset() {
} }
async function fetch() { async function fetch() {
try {
await axios.get('WagonTypes').then(async (res) => { await axios.get('WagonTypes').then(async (res) => {
if (res.data) { if (res.data) {
filteredWagonTypes.value = wagonTypes = res.data; filteredWagonTypes.value = wagonTypes = res.data;
@ -72,9 +72,6 @@ async function fetch() {
} }
}); });
} }
} catch (e) {
//
}
} }
function filterType(val, update) { function filterType(val, update) {
@ -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> </script>
<template> <template>
<VnSearchbar
url="Wagons"
data-key="WagonList"
:label="t('searchWagon')"
:info="t('searchInfo')"
:expr-builder="exprBuilder"
/>
<QPage class="q-pa-sm q-mx-xl"> <QPage class="q-pa-sm q-mx-xl">
<QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm"> <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
<QCard class="q-pa-md"> <QCard class="q-pa-md">
@ -174,3 +187,12 @@ function filterType(val, update) {
width: 70%; width: 70%;
} }
</style> </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>

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,25 @@ 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"
module-name="/edit"
/>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<VnTable <VnTable
ref="tableRef" ref="tableRef"
@ -170,6 +187,11 @@ async function remove(row) {
</template> </template>
<i18n> <i18n>
en:
searchWagon: Search wagon
searchInfo: You can search by name or plate
es: es:
Create new wagon: Crear nuevo vagón Create new wagon: Crear nuevo vagón
searchWagon: Buscar vagón
searchInfo: Puedes buscar por nombre o mátricula
</i18n> </i18n>

View File

@ -34,7 +34,6 @@ let zoneDeliveryColors;
let currentTrayColorPicked; let currentTrayColorPicked;
async function fetch() { async function fetch() {
try {
await axios.get('ZoneConfigs').then(async (res) => { await axios.get('ZoneConfigs').then(async (res) => {
if (res.data) { if (res.data) {
zoneConfig = res.data[0]; zoneConfig = res.data[0];
@ -88,9 +87,6 @@ async function fetch() {
} }
}); });
} }
} catch (e) {
//
}
} }
function addTray() { function addTray() {

View File

@ -34,7 +34,6 @@ let zoneUpcomingColors;
let currentTrayColorPicked; let currentTrayColorPicked;
async function fetch() { async function fetch() {
try {
await axios.get('ZoneConfigs').then(async (res) => { await axios.get('ZoneConfigs').then(async (res) => {
if (res.data) { if (res.data) {
zoneConfig = res.data[0]; zoneConfig = res.data[0];
@ -88,9 +87,6 @@ async function fetch() {
} }
}); });
} }
} catch (e) {
//
}
} }
function addTray() { function addTray() {