Added searchbar in Wagon module #835

Open
jon wants to merge 16 commits from Fix-AddSearchbarToWagonModule into dev
12 changed files with 184 additions and 167 deletions
Showing only changes of commit 4fb70e6ea1 - Show all commits

View File

@ -43,21 +43,17 @@ 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; if ($props.limit) filter.limit = $props.limit;
if ($props.limit) filter.limit = $props.limit;
const { data } = await axios.get($props.url, { const { data } = await axios.get($props.url, {
params: { filter: JSON.stringify(filter), ...$props.params }, params: { filter: JSON.stringify(filter), ...$props.params },
}); });
emit('onFetch', data); emit('onFetch', data);
return data; return data;
} catch (e) {
//
}
} }
</script> </script>
<template> <template>

View File

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

View File

@ -116,7 +116,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

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

View File

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

@ -26,20 +26,16 @@ 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, },
}, };
}; const { data } = await axios.get(`/Expeditions/filter`, {
const { data } = await axios.get(`/Expeditions/filter`, { params: { filter },
params: { filter }, });
});
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

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

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,26 +55,22 @@ 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; }
});
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> </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

@ -14,7 +14,6 @@ const quasar = useQuasar();
const arrayData = useArrayData('WagonList'); const arrayData = useArrayData('WagonList');
const store = arrayData.store; const store = arrayData.store;
const router = useRouter(); const router = useRouter();
const useModuleName = ref(true);
const { t } = useI18n(); const { t } = useI18n();
const tableRef = ref(); const tableRef = ref();
const filter = { const filter = {
@ -106,8 +105,8 @@ const exprBuilder = (param, value) => {
data-key="WagonList" data-key="WagonList"
:label="t('searchWagon')" :label="t('searchWagon')"
:info="t('searchInfo')" :info="t('searchInfo')"
:module-name="useModuleName"
:expr-builder="exprBuilder" :expr-builder="exprBuilder"
module-name="/edit"
/> />
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<VnTable <VnTable

View File

@ -34,62 +34,58 @@ 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]; }
} });
});
await axios.get(`ZoneDeliveryColors`).then(async (res) => { await axios.get(`ZoneDeliveryColors`).then(async (res) => {
if (res.data) { if (res.data) {
zoneDeliveryColors = res.data; zoneDeliveryColors = res.data;
if (!entityId.value) if (!entityId.value)
zone.value.push({ zone.value.push({
id: 0, id: 0,
position: 0, position: 0,
color: { ...zoneDeliveryColors[0] }, color: { ...zoneDeliveryColors[0] },
action: 'add', action: 'add',
}); });
else { else {
await axios await axios
.get(`ZoneDeliveryTrays`, { .get(`ZoneDeliveryTrays`, {
params: { filter: { where: { typeFk: entityId.value } } }, params: { filter: { where: { typeFk: entityId.value } } },
}) })
.then(async (res) => { .then(async (res) => {
if (res.data) { if (res.data) {
for (let i = 0; i < res.data.length; i++) { for (let i = 0; i < res.data.length; i++) {
const tray = res.data[i]; const tray = res.data[i];
zone.value.push({ zone.value.push({
id: res.data.length - i - 1, id: res.data.length - i - 1,
position: tray.height, position: tray.height,
color: { color: {
...zoneDeliveryColors.find((color) => { ...zoneDeliveryColors.find((color) => {
return color.id === tray.colorFk; return color.id === tray.colorFk;
}), }),
}, },
action: tray.height == 0 ? 'add' : 'delete', action: tray.height == 0 ? 'add' : 'delete',
});
}
zone.value.forEach((value) => {
originalData.trays.push({ ...value });
}); });
} }
}); 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) {
//
} }
} }

View File

@ -34,62 +34,58 @@ 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]; }
} });
});
await axios.get(`ZoneUpcomingColors`).then(async (res) => { await axios.get(`ZoneUpcomingColors`).then(async (res) => {
if (res.data) { if (res.data) {
zoneUpcomingColors = res.data; zoneUpcomingColors = res.data;
if (!entityId.value) if (!entityId.value)
zone.value.push({ zone.value.push({
id: 0, id: 0,
position: 0, position: 0,
color: { ...zoneUpcomingColors[0] }, color: { ...zoneUpcomingColors[0] },
action: 'add', action: 'add',
}); });
else { else {
await axios await axios
.get(`ZoneUpcomingTrays`, { .get(`ZoneUpcomingTrays`, {
params: { filter: { where: { typeFk: entityId.value } } }, params: { filter: { where: { typeFk: entityId.value } } },
}) })
.then(async (res) => { .then(async (res) => {
if (res.data) { if (res.data) {
for (let i = 0; i < res.data.length; i++) { for (let i = 0; i < res.data.length; i++) {
const tray = res.data[i]; const tray = res.data[i];
zone.value.push({ zone.value.push({
id: res.data.length - i - 1, id: res.data.length - i - 1,
position: tray.height, position: tray.height,
color: { color: {
...zoneUpcomingColors.find((color) => { ...zoneUpcomingColors.find((color) => {
return color.id === tray.colorFk; return color.id === tray.colorFk;
}), }),
}, },
action: tray.height == 0 ? 'add' : 'delete', action: tray.height == 0 ? 'add' : 'delete',
});
}
zone.value.forEach((value) => {
originalData.trays.push({ ...value });
}); });
} }
}); 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) {
//
} }
} }