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