verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 87 Releases Wiki Activity

WIP: Added searchbar in Wagon module #835

Closed
jon wants to merge 16 commits from Fix-AddSearchbarToWagonModule into dev
pull from: Fix-AddSearchbarToWagonModule
merge into: verdnatura:dev
Conversation 0 Commits 16 Files Changed 10 +219 -151
10 changed files with 219 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/FetchData.vue
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>

5
src/components/ui/VnPaginate.vue
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 }

1
src/composables/useArrayData.js
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);

22
src/pages/Ticket/Card/TicketBoxing.vue
View File

@ -28,20 +28,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) {

16
src/pages/Wagon/Type/WagonTypeEdit.vue
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

22
src/pages/Wagon/Type/WagonTypeList.vue
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>

58
src/pages/Wagon/WagonCreate.vue
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>

28
src/pages/Wagon/WagonList.vue
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>
es: en:
Create new wagon: Crear nuevo vagón searchWagon: Search wagon
</i18n> 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>

98
src/pages/Zone/Delivery/ZoneDeliveryCreate.vue
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) {
//
} }
} }

98
src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue
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) {
//
} }
} }