forked from verdnatura/salix-front
Update routes list input
This commit is contained in:
Kevin Martinez
parent
4be9c02711
commit
e93864e967
|
|
@ -3,7 +3,7 @@ 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, toHour } from 'src/filters';
|
||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import { useValidator } from 'composables/useValidator';
|
||||
|
|
@ -37,7 +37,7 @@ const columns = computed(() => [
|
|||
label: t('ID'),
|
||||
field: (row) => row.id,
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'worker',
|
||||
|
|
@ -72,7 +72,7 @@ const columns = computed(() => [
|
|||
label: 'm³',
|
||||
field: (row) => dashIfEmpty(row.m3),
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
|
|
@ -115,24 +115,6 @@ const updateRoute = async (route) => {
|
|||
}
|
||||
};
|
||||
|
||||
const updateVehicle = (row, vehicle) => {
|
||||
row.vehicleFk = vehicle.id;
|
||||
row.vehiclePlateNumber = vehicle.numberPlate;
|
||||
updateRoute(row);
|
||||
};
|
||||
|
||||
const updateAgency = (row, agency) => {
|
||||
row.agencyModeFk = agency.id;
|
||||
row.agencyName = agency.name;
|
||||
updateRoute(row);
|
||||
};
|
||||
|
||||
const updateWorker = (row, worker) => {
|
||||
row.workerFk = worker.id;
|
||||
row.workerUserName = worker.name;
|
||||
updateRoute(row);
|
||||
};
|
||||
|
||||
const confirmationDialog = ref(false);
|
||||
const startingDate = ref(null);
|
||||
|
||||
|
|
@ -241,7 +223,7 @@ const openTicketsDialog = (id) => {
|
|||
/>
|
||||
<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-mb-xl">
|
||||
<QPage class="column items-center">
|
||||
<VnSubToolbar class="bg-vn-dark justify-end">
|
||||
<template #st-actions>
|
||||
<QBtn
|
||||
|
|
@ -294,189 +276,125 @@ const openTicketsDialog = (id) => {
|
|||
:rows-per-page-options="[0]"
|
||||
hide-pagination
|
||||
:pagination="{ sortBy: 'ID', descending: true }"
|
||||
:no-data-label="t('No results')"
|
||||
>
|
||||
<template #body-cell-worker="props">
|
||||
<QTd :props="props">
|
||||
{{ props.row?.workerUserName }}
|
||||
<QPopupEdit
|
||||
:model-value="props.row.workerFk"
|
||||
v-slot="scope"
|
||||
buttons
|
||||
@update:model-value="
|
||||
(worker) => updateWorker(props.row, worker)
|
||||
"
|
||||
<template #body-cell-worker="{ row }">
|
||||
<QTd>
|
||||
<VnSelectFilter
|
||||
:label="t('Worker')"
|
||||
v-model="row.workerFk"
|
||||
:options="workers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
dense
|
||||
:emit-value="false"
|
||||
:rules="validate('Route.workerFk')"
|
||||
:is-clearable="false"
|
||||
@update:model-value="updateRoute(row)"
|
||||
>
|
||||
<VnSelectFilter
|
||||
:label="t('Worker')"
|
||||
v-model="scope.value"
|
||||
:options="workers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
autofocus
|
||||
:emit-value="false"
|
||||
:rules="validate('Route.workerFk')"
|
||||
:is-clearable="false"
|
||||
@keyup.enter="scope.set"
|
||||
@focus="($event) => $event.target.select()"
|
||||
>
|
||||
<template #option="{ opt, itemProps }">
|
||||
<QItem
|
||||
v-bind="itemProps"
|
||||
class="q-pa-xs row items-center"
|
||||
<template #option="{ opt, itemProps }">
|
||||
<QItem
|
||||
v-bind="itemProps"
|
||||
class="q-pa-xs row items-center"
|
||||
>
|
||||
<QItemSection
|
||||
class="col-9 justify-center"
|
||||
>
|
||||
<QItemSection
|
||||
class="col-9 justify-center"
|
||||
>
|
||||
<span>{{ opt.name }}</span>
|
||||
<span class="text-grey">{{
|
||||
opt.nickname
|
||||
}}</span>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</QPopupEdit>
|
||||
<span>{{ opt.name }}</span>
|
||||
<span class="text-grey">{{
|
||||
opt.nickname
|
||||
}}</span>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-agency="props">
|
||||
<QTd :props="props">
|
||||
{{ props.row?.agencyName }}
|
||||
<QPopupEdit
|
||||
:model-value="props.row.agencyModeFk"
|
||||
v-slot="scope"
|
||||
buttons
|
||||
@update:model-value="
|
||||
(agency) => updateAgency(props.row, agency)
|
||||
"
|
||||
>
|
||||
<VnSelectFilter
|
||||
:label="t('Agency')"
|
||||
v-model="scope.value"
|
||||
:options="agencyList"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
autofocus
|
||||
:emit-value="false"
|
||||
:rules="validate('route.agencyFk')"
|
||||
:is-clearable="false"
|
||||
@keyup.enter="scope.set"
|
||||
@focus="($event) => $event.target.select()"
|
||||
/>
|
||||
</QPopupEdit>
|
||||
<template #body-cell-agency="{ row }">
|
||||
<QTd>
|
||||
<VnSelectFilter
|
||||
:label="t('Agency')"
|
||||
v-model="row.agencyModeFk"
|
||||
:options="agencyList"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
hide-selected
|
||||
dense
|
||||
:emit-value="false"
|
||||
:rules="validate('route.agencyFk')"
|
||||
:is-clearable="false"
|
||||
@update:model-value="updateRoute(row)"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-vehicle="props">
|
||||
<QTd :props="props">
|
||||
{{ props.row?.vehiclePlateNumber }}
|
||||
<QPopupEdit
|
||||
:model-value="props.row.vehicleFk"
|
||||
v-slot="scope"
|
||||
buttons
|
||||
@update:model-value="
|
||||
(vehicle) => updateVehicle(props.row, vehicle)
|
||||
"
|
||||
>
|
||||
<VnSelectFilter
|
||||
:label="t('Vehicle')"
|
||||
v-model="scope.value"
|
||||
:options="vehicleList"
|
||||
option-value="id"
|
||||
option-label="numberPlate"
|
||||
hide-selected
|
||||
autofocus
|
||||
:emit-value="false"
|
||||
:rules="validate('route.vehicleFk')"
|
||||
:is-clearable="false"
|
||||
@keyup.enter="scope.set"
|
||||
@focus="($event) => $event.target.select()"
|
||||
/>
|
||||
</QPopupEdit>
|
||||
<template #body-cell-vehicle="{ row }">
|
||||
<QTd>
|
||||
<VnSelectFilter
|
||||
:label="t('Vehicle')"
|
||||
v-model="row.vehicleFk"
|
||||
:options="vehicleList"
|
||||
option-value="id"
|
||||
option-label="numberPlate"
|
||||
hide-selected
|
||||
dense
|
||||
:emit-value="false"
|
||||
:rules="validate('route.vehicleFk')"
|
||||
:is-clearable="false"
|
||||
@update:model-value="updateRoute(row)"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-date="props">
|
||||
<QTd :props="props">
|
||||
{{ toDate(props.row?.created) }}
|
||||
<QPopupEdit
|
||||
v-model="props.row.created"
|
||||
v-slot="scope"
|
||||
@update:model-value="updateRoute(props.row)"
|
||||
buttons
|
||||
>
|
||||
<VnInputDate
|
||||
v-model="scope.value"
|
||||
autofocus
|
||||
:label="t('Date')"
|
||||
:rules="validate('route.created')"
|
||||
:is-clearable="false"
|
||||
@keyup.enter="scope.set"
|
||||
@focus="($event) => $event.target.select()"
|
||||
/>
|
||||
</QPopupEdit>
|
||||
<template #body-cell-date="{ row }">
|
||||
<QTd class="table-input-cell">
|
||||
<VnInputDate
|
||||
v-model="row.created"
|
||||
hide-bottom-space
|
||||
dense
|
||||
:label="t('Date')"
|
||||
:rules="validate('route.created')"
|
||||
:is-clearable="false"
|
||||
@update:model-value="updateRoute(row)"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-description="props">
|
||||
<QTd :props="props">
|
||||
{{ props.row?.description }}
|
||||
<QPopupEdit
|
||||
v-model="props.row.description"
|
||||
v-slot="scope"
|
||||
@update:model-value="updateRoute(props.row)"
|
||||
buttons
|
||||
>
|
||||
<VnInput
|
||||
v-model="scope.value"
|
||||
autofocus
|
||||
:label="t('Description')"
|
||||
:rules="validate('route.description')"
|
||||
:is-clearable="false"
|
||||
@keyup.enter="scope.set"
|
||||
@focus="($event) => $event.target.select()"
|
||||
/>
|
||||
</QPopupEdit>
|
||||
<template #body-cell-description="{ row }">
|
||||
<QTd class="table-input-cell">
|
||||
<VnInput
|
||||
v-model="row.description"
|
||||
:label="t('Description')"
|
||||
:rules="validate('route.description')"
|
||||
:is-clearable="false"
|
||||
dense
|
||||
@update:model-value="updateRoute(row)"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-started="props">
|
||||
<QTd :props="props">
|
||||
{{ toHour(props.row.started) }}
|
||||
<QPopupEdit
|
||||
v-model="props.row.started"
|
||||
v-slot="scope"
|
||||
buttons
|
||||
@update:model-value="updateRoute(props.row)"
|
||||
>
|
||||
<VnInputTime
|
||||
v-model="scope.value"
|
||||
autofocus
|
||||
:label="t('Hour started')"
|
||||
:rules="validate('route.started')"
|
||||
:is-clearable="false"
|
||||
@keyup.enter="scope.set"
|
||||
@focus="($event) => $event.target.select()"
|
||||
/>
|
||||
</QPopupEdit>
|
||||
<template #body-cell-started="{ row }">
|
||||
<QTd class="table-input-cell">
|
||||
<VnInputTime
|
||||
v-model="row.started"
|
||||
:label="t('Hour started')"
|
||||
:rules="validate('route.started')"
|
||||
:is-clearable="false"
|
||||
hide-bottom-space
|
||||
dense
|
||||
@update:model-value="updateRoute(row)"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-finished="props">
|
||||
<QTd :props="props">
|
||||
{{ toHour(props.row.finished) }}
|
||||
<QPopupEdit
|
||||
v-model="props.row.finished"
|
||||
v-slot="scope"
|
||||
buttons
|
||||
@update:model-value="updateRoute(props.row)"
|
||||
>
|
||||
<VnInputTime
|
||||
v-model="scope.value"
|
||||
autofocus
|
||||
:label="t('Hour finished')"
|
||||
:rules="validate('route.finished')"
|
||||
:is-clearable="false"
|
||||
@keyup.enter="scope.set"
|
||||
@focus="($event) => $event.target.select()"
|
||||
/>
|
||||
</QPopupEdit>
|
||||
<template #body-cell-finished="{ row }">
|
||||
<QTd class="table-input-cell">
|
||||
<VnInputTime
|
||||
v-model="row.finished"
|
||||
autofocus
|
||||
:label="t('Hour finished')"
|
||||
:rules="validate('route.finished')"
|
||||
:is-clearable="false"
|
||||
hide-bottom-space
|
||||
dense
|
||||
@update:model-value="updateRoute(row)"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-actions="props">
|
||||
|
|
@ -508,7 +426,11 @@ const openTicketsDialog = (id) => {
|
|||
params: { id: props?.row?.id },
|
||||
}"
|
||||
>
|
||||
<QIcon name="vn:eye" size="xs" color="primary">
|
||||
<QIcon
|
||||
name="vn:eye"
|
||||
size="xs"
|
||||
color="primary"
|
||||
>
|
||||
<QTooltip>{{ t('Summary') }}</QTooltip>
|
||||
</QIcon>
|
||||
</RouterLink>
|
||||
|
|
@ -532,8 +454,13 @@ const openTicketsDialog = (id) => {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-input-cell {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.route-list {
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
|
|
|
|||
Loading…
Reference in New Issue