WIP: Added searchbar in Wagon module #835
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -125,7 +125,10 @@ watch(
|
|||
watch(
|
||||
() => store.data,
|
||||
(data) => {
|
||||
if (!mounted.value) return;
|
||||
if (!mounted.value) {
|
||||
emit('onFetch', data);
|
||||
return;
|
||||
}
|
||||
emit('onChange', data);
|
||||
},
|
||||
{ immediate: true }
|
||||
|
|
|
|||
|
|
@ -243,6 +243,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
|
|||
|
||||
function updateStateParams(data) {
|
||||
if (!route?.path) return;
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -28,20 +28,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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import FormModelPopup from 'src/components/FormModelPopup.vue';
|
|||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnRow from 'src/components/ui/VnRow.vue';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const arrayData = useArrayData('WagonTypeList');
|
||||
|
|
@ -78,21 +79,36 @@ async function remove(row) {
|
|||
store.data.splice(store.data.indexOf(row), 1);
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
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"
|
||||
module-name="/edit"
|
||||
/>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="WagonTypeList"
|
||||
url="WagonTypes"
|
||||
:columns="columns"
|
||||
auto-load
|
||||
order="id DESC"
|
||||
:right-search="false"
|
||||
:column-search="false"
|
||||
:default-mode="'card'"
|
||||
:disable-option="{ table: true }"
|
||||
:expr-builder="exprBuilder"
|
||||
>
|
||||
</VnTable>
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
|
|
@ -129,8 +145,12 @@ async function remove(row) {
|
|||
<i18n>
|
||||
en:
|
||||
nameNotEmpty: The name cannot be empty
|
||||
searchWagonType: Search wagon type
|
||||
searchInfo: You can search by name or id
|
||||
es:
|
||||
Create new Wagon type: Crear nuevo tipo de vagón
|
||||
Name: Nombre
|
||||
nameNotEmpty: El nombre no puede estar vacío
|
||||
searchWagonType: Buscar tipo de vagón
|
||||
searchInfo: Puedes buscar por nombre o id
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
|
|||
import { computed, ref } from 'vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
|
||||
const quasar = useQuasar();
|
||||
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>
|
||||
|
||||
<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">
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
|
|
@ -170,6 +187,11 @@ async function remove(row) {
|
|||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Create new wagon: Crear nuevo vagón
|
||||
</i18n>
|
||||
en:
|
||||
searchWagon: Search wagon
|
||||
searchInfo: You can search by name or plate
|
||||
es:
|
||||
Create new wagon: Crear nuevo vagón
|
||||
searchWagon: Buscar vagón
|
||||
searchInfo: Puedes buscar por nombre o mátricula
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue