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

Add route list filter

This commit is contained in:
Kevin Martinez 2024-01-17 07:34:43 -04:00
parent 3d98bf578e
commit e1ac98cf3e
3 changed files with 308 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

234
src/pages/Route/Card/RouteFilter.vue Normal file
View File

@ -0,0 +1,234 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInput from 'components/common/VnInput.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
const emit = defineEmits(['search']);
const workerList = ref([]);
const agencyList = ref([]);
const vehicleList = ref([]);
const warehouseList = ref([]);
</script>
<template>
<FetchData
url="Workers/search"
:filter="{ fields: ['id', 'nickname'] }"
sort-by="nickname ASC"
limit="30"
@on-fetch="(data) => (workerList = data)"
auto-load
/>
<FetchData
url="AgencyModes/isActive"
:filter="{ fields: ['id', 'name'] }"
sort-by="name ASC"
limit="30"
@on-fetch="(data) => (agencyList = data)"
auto-load
/>
<FetchData
url="Vehicles"
:filter="{ fields: ['id', 'numberPlate'] }"
sort-by="numberPlate ASC"
limit="30"
@on-fetch="(data) => (vehicleList = data)"
auto-load
/>
<FetchData url="Warehouses" @on-fetch="(data) => (warehouseList = data)" auto-load />
<VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
@search="emit('search')"
>
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params }">
<QList dense>
<QItem class="q-my-sm">
<QItemSection v-if="workerList">
<VnSelectFilter
:label="t('Worker')"
v-model="params.workerFk"
:options="workerList"
option-value="id"
option-label="nickname"
dense
outlined
rounded
emit-value
map-options
use-input
:input-debounce="0"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption>
{{ opt.nickname }},{{ opt.code }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</QItemSection>
</QItem>
<QItem class="q-my-sm">
<QItemSection v-if="agencyList">
<VnSelectFilter
:label="t('Agency')"
v-model="params.agencyModeFk"
:options="agencyList"
option-value="id"
option-label="name"
dense
outlined
rounded
emit-value
map-options
use-input
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-my-sm">
<QItemSection>
<VnInputDate
v-model="params.from"
:label="t('From')"
is-outlined
:disable="Boolean(params.scopeDays)"
@update:model-value="params.scopeDays = null"
/>
</QItemSection>
</QItem>
<QItem class="q-my-sm">
<QItemSection>
<VnInputDate
v-model="params.to"
:label="t('To')"
is-outlined
:disable="Boolean(params.scopeDays)"
@update:model-value="params.scopeDays = null"
/>
</QItemSection>
</QItem>
<QItem class="q-my-sm">
<QItemSection>
<VnInput
v-model="params.scopeDays"
type="number"
:label="t('Days Onward')"
is-outlined
clearable
:disable="Boolean(params.from || params.to)"
@update:model-value="
params.to = null;
params.from = null;
"
/>
</QItemSection>
</QItem>
<QItem class="q-my-sm">
<QItemSection v-if="vehicleList">
<VnSelectFilter
:label="t('Vehicle')"
v-model="params.vehicleFk"
:options="vehicleList"
option-value="id"
option-label="numberPlate"
dense
outlined
rounded
emit-value
map-options
use-input
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-my-sm">
<QItemSection>
<VnInput v-model="params.m3" label="m³" is-outlined clearable />
</QItemSection>
</QItem>
<QItem class="q-my-sm">
<QItemSection v-if="vehicleList">
<VnSelectFilter
:label="t('Warehouse')"
v-model="params.warehouseFk"
:options="warehouseList"
option-value="id"
option-label="name"
dense
outlined
rounded
emit-value
map-options
use-input
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-my-sm">
<QItemSection>
<VnInput
v-model="params.description"
:label="t('Description')"
is-outlined
clearable
/>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>
<i18n>
en:
params:
warehouseFk: Warehouse
description: Description
m3: m³
vehicleFk: Vehicle
agencyModeFk: Agency
workerFk: Worker
from: From
to: To
es:
params:
warehouseFk: Almacén
description: Descripción
m3: m³
vehicleFk: Vehículo
agencyModeFk: Agencia
workerFk: Trabajador
from: Desde
to: Hasta
Warehouse: Almacén
Description: Descripción
Vehicle: Vehículo
Agency: Agencia
Worker: Trabajador
From: Desde
To: Hasta
</i18n>

20
src/pages/Route/Card/RouteSearchbar.vue Normal file
View File

@ -0,0 +1,20 @@
<script setup>
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import {useI18n} from "vue-i18n";
const { t } = useI18n();
</script>
<template>
<VnSearchbar
data-key="RouteList"
:label="t('Search route')"
:info="t('You can search by route reference')"
/>
</template>
<style scoped lang="scss"></style>
<i18n>
es:
Search route: Buscar rutas
You can search by route reference: Puedes buscar por referencia de la ruta
</i18n>

114
src/pages/Route/RouteList.vue
View File

@ -3,14 +3,16 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { computed, onMounted, onUnmounted, ref } from 'vue'; import { computed, onMounted, onUnmounted, ref } from 'vue';
import {dashIfEmpty, toDate, toHour} from 'src/filters'; import { dashIfEmpty, toDate, toHour } from 'src/filters';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import { useValidator } from 'composables/useValidator'; import { useValidator } from 'composables/useValidator';
import VnInputDate from "components/common/VnInputDate.vue"; import VnInputDate from 'components/common/VnInputDate.vue';
import VnInput from "components/common/VnInput.vue"; import VnInput from 'components/common/VnInput.vue';
import VnInputTime from "components/common/VnInputTime.vue"; import VnInputTime from 'components/common/VnInputTime.vue';
import axios from "axios"; import axios from 'axios';
import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
// const router = useRouter(); // const router = useRouter();
@ -98,7 +100,7 @@ const columns = computed(() => [
}, },
]); ]);
const refreshKey = ref(0) const refreshKey = ref(0);
const workers = ref([]); const workers = ref([]);
const agencyList = ref([]); const agencyList = ref([]);
const vehicleList = ref([]); const vehicleList = ref([]);
@ -108,76 +110,63 @@ const updateRoute = async (route) => {
} catch (err) { } catch (err) {
return err; return err;
} }
} };
const updateVehicle = (row, vehicle) => { const updateVehicle = (row, vehicle) => {
row.vehicleFk = vehicle.id row.vehicleFk = vehicle.id;
row.vehiclePlateNumber = vehicle.numberPlate row.vehiclePlateNumber = vehicle.numberPlate;
updateRoute(row) updateRoute(row);
} };
const updateAgency = (row, agency) => { const updateAgency = (row, agency) => {
row.agencyModeFk = agency.id row.agencyModeFk = agency.id;
row.agencyName = agency.name row.agencyName = agency.name;
updateRoute(row) updateRoute(row);
} };
const updateWorker = (row, worker) => { const updateWorker = (row, worker) => {
row.workerFk = worker.id row.workerFk = worker.id;
row.workerUserName = worker.name row.workerUserName = worker.name;
updateRoute(row) updateRoute(row);
} };
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <template v-if="stateStore.isHeaderMounted()">
<!-- <Teleport to="#searchbar">--> <Teleport to="#searchbar">
<!-- <ShelvingSearchbar />--> <RouteSearchbar />
<!-- </Teleport>--> </Teleport>
<!-- <Teleport to="#actions-append">--> <Teleport to="#actions-append">
<!-- <div class="row q-gutter-x-sm">--> <div class="row q-gutter-x-sm">
<!-- <QBtn--> <QBtn
<!-- flat--> flat
<!-- @click="stateStore.toggleRightDrawer()"--> @click="stateStore.toggleRightDrawer()"
<!-- round--> round
<!-- dense--> dense
<!-- icon="menu"--> icon="menu"
<!-- >--> >
<!-- <QTooltip bottom anchor="bottom right">--> <QTooltip bottom anchor="bottom right">
<!-- {{ t('globals.collapseMenu') }}--> {{ t('globals.collapseMenu') }}
<!-- </QTooltip>--> </QTooltip>
<!-- </QBtn>--> </QBtn>
<!-- </div>--> </div>
<!-- </Teleport>--> </Teleport>
</template> </template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<!-- <QScrollArea class="fit text-grey-8">--> <QScrollArea class="fit text-grey-8">
<!-- <ShelvingFilter data-key="ShelvingList" />--> <RouteFilter data-key="RouteList" />
<!-- </QScrollArea>--> </QScrollArea>
</QDrawer> </QDrawer>
<FetchData <FetchData
url="Workers/activeWithInheritedRole" url="Workers/activeWithInheritedRole"
@on-fetch="(data) => (workers = data)" @on-fetch="(data) => (workers = data)"
auto-load auto-load
/> />
<FetchData <FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
url="AgencyModes" <FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
@on-fetch="(data) => (agencyList = data)"
auto-load
/>
<FetchData
url="Vehicles"
@on-fetch="(data) => (vehicleList = data)"
auto-load
/>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<QToolbar class="q-pa-none q-mb-sm justify-end"> <QToolbar class="q-pa-none q-mb-sm justify-end">
<QBtn <QBtn icon="refresh" color="primary" class="q-mr-sm" @click="refreshKey++" />
icon="refresh"
color="primary"
class="q-mr-sm"
@click="refreshKey++"
/>
</QToolbar> </QToolbar>
<VnPaginate <VnPaginate
:key="refreshKey" :key="refreshKey"
@ -185,7 +174,6 @@ const updateWorker = (row, worker) => {
url="Routes/filter" url="Routes/filter"
:order="['created DESC', 'id DESC']" :order="['created DESC', 'id DESC']"
:limit="20" :limit="20"
:user-params="params"
auto-load auto-load
> >
<template #body="{ rows }"> <template #body="{ rows }">
@ -205,7 +193,9 @@ const updateWorker = (row, worker) => {
:model-value="props.row.workerFk" :model-value="props.row.workerFk"
v-slot="scope" v-slot="scope"
buttons buttons
@update:model-value="(worker) => updateWorker(props.row, worker)" @update:model-value="
(worker) => updateWorker(props.row, worker)
"
> >
<VnSelectFilter <VnSelectFilter
:label="t('Worker')" :label="t('Worker')"
@ -245,7 +235,9 @@ const updateWorker = (row, worker) => {
:model-value="props.row.agencyModeFk" :model-value="props.row.agencyModeFk"
v-slot="scope" v-slot="scope"
buttons buttons
@update:model-value="(agency) => updateAgency(props.row, agency)" @update:model-value="
(agency) => updateAgency(props.row, agency)
"
> >
<VnSelectFilter <VnSelectFilter
:label="t('Agency')" :label="t('Agency')"
@ -271,7 +263,9 @@ const updateWorker = (row, worker) => {
:model-value="props.row.vehicleFk" :model-value="props.row.vehicleFk"
v-slot="scope" v-slot="scope"
buttons buttons
@update:model-value="(vehicle) => updateVehicle(props.row, vehicle)" @update:model-value="
(vehicle) => updateVehicle(props.row, vehicle)
"
> >
<VnSelectFilter <VnSelectFilter
:label="t('Vehicle')" :label="t('Vehicle')"