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 = {}) {
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>

View File

@ -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);
}

View File

@ -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 }

View File

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

View File

@ -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);
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
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 };

View File

@ -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) {

View File

@ -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

View File

@ -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]">

View File

@ -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>

View File

@ -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

View File

@ -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) {
//
}
}

View File

@ -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) {
//
}
}