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