634 lines
23 KiB
Vue
634 lines
23 KiB
Vue
<script setup>
|
|
import VnPaginate from 'components/ui/VnPaginate.vue';
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { computed, onMounted, reactive, onUnmounted, ref } from 'vue';
|
|
import { dashIfEmpty, 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 RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
|
|
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
|
|
import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
|
|
import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
|
|
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
|
import { useSession } from 'composables/useSession';
|
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
|
import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
|
|
import { useQuasar } from 'quasar';
|
|
import { useRouter } from 'vue-router';
|
|
import { useArrayData } from 'composables/useArrayData';
|
|
|
|
const stateStore = useStateStore();
|
|
const { t } = useI18n();
|
|
const { validate } = useValidator();
|
|
const quasar = useQuasar();
|
|
const session = useSession();
|
|
const { viewSummary } = useSummaryDialog();
|
|
const visibleColumns = ref([]);
|
|
const selectedRows = ref([]);
|
|
const columns = computed(() => [
|
|
{
|
|
name: 'ID',
|
|
label: t('ID'),
|
|
field: (row) => row.id,
|
|
sortable: true,
|
|
align: 'center',
|
|
columnFilter: {
|
|
component: 'VnInput',
|
|
type: 'text',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'worker',
|
|
label: t('Worker'),
|
|
field: (row) => row.workerUserName,
|
|
sortable: true,
|
|
align: 'left',
|
|
columnFilter: {
|
|
component: 'VnSelectFilter',
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
options: workers,
|
|
'option-value': 'id',
|
|
'option-label': 'nickname',
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'agency',
|
|
label: t('Agency'),
|
|
field: (row) => row.agencyName,
|
|
sortable: true,
|
|
align: 'left',
|
|
columnFilter: {
|
|
component: 'VnSelectFilter',
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
options: agencyList,
|
|
'option-value': 'id',
|
|
'option-label': 'name',
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'vehicle',
|
|
label: t('Vehicle'),
|
|
field: (row) => row.vehiclePlateNumber,
|
|
sortable: true,
|
|
align: 'left',
|
|
columnFilter: {
|
|
component: 'VnSelectFilter',
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
options: vehicleList,
|
|
'option-value': 'id',
|
|
'option-label': 'numberPlate',
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'date',
|
|
label: t('Date'),
|
|
field: (row) => row.created,
|
|
sortable: true,
|
|
align: 'left',
|
|
columnFilter: {
|
|
component: 'VnInputDate',
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
},
|
|
},
|
|
{
|
|
name: 'volume',
|
|
label: 'm³',
|
|
field: (row) => dashIfEmpty(row.m3),
|
|
sortable: true,
|
|
align: 'center',
|
|
},
|
|
{
|
|
name: 'description',
|
|
label: t('Description'),
|
|
field: (row) => row.description,
|
|
sortable: true,
|
|
align: 'left',
|
|
columnFilter: {
|
|
component: 'VnInput',
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
},
|
|
},
|
|
{
|
|
name: 'hourStarted',
|
|
label: t('hourStarted'),
|
|
field: (row) => toHour(row.started),
|
|
sortable: true,
|
|
align: 'left',
|
|
columnFilter: {
|
|
component: 'VnInputTime',
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
},
|
|
},
|
|
{
|
|
name: 'hourFinished',
|
|
label: t('hourFinished'),
|
|
field: (row) => toHour(row.finished),
|
|
sortable: true,
|
|
align: 'left',
|
|
columnFilter: {
|
|
component: 'VnInputDate',
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
},
|
|
},
|
|
{
|
|
name: 'actions',
|
|
label: '',
|
|
sortable: false,
|
|
align: 'right',
|
|
},
|
|
]);
|
|
const params = reactive({});
|
|
const arrayData = useArrayData('EntryLatestBuys', {
|
|
url: 'Buys/latestBuysFilter',
|
|
order: ['itemFk DESC'],
|
|
});
|
|
const refreshKey = ref(0);
|
|
const workers = ref([]);
|
|
const agencyList = ref([]);
|
|
const vehicleList = ref([]);
|
|
const updateRoute = async (route) => {
|
|
try {
|
|
return await axios.patch(`Routes/${route.id}`, route);
|
|
} catch (err) {
|
|
return err;
|
|
}
|
|
};
|
|
const allColumnNames = ref([]);
|
|
const confirmationDialog = ref(false);
|
|
const startingDate = ref(null);
|
|
|
|
const getInputEvents = (col) => {
|
|
return col.columnFilter.type === 'select'
|
|
? { 'update:modelValue': () => applyColumnFilter(col) }
|
|
: {
|
|
'keyup.enter': () => applyColumnFilter(col),
|
|
};
|
|
};
|
|
|
|
const applyColumnFilter = async (col) => {
|
|
try {
|
|
params[col.field] = col.columnFilter.filterValue;
|
|
await arrayData.addFilter({ params });
|
|
} catch (err) {
|
|
console.error('Error applying column filter', err);
|
|
}
|
|
};
|
|
|
|
const cloneRoutes = () => {
|
|
axios.post('Routes/clone', {
|
|
created: startingDate.value,
|
|
ids: selectedRows.value.map((row) => row?.id),
|
|
});
|
|
refreshKey.value++;
|
|
startingDate.value = null;
|
|
};
|
|
|
|
const showRouteReport = () => {
|
|
const ids = selectedRows.value.map((row) => row?.id);
|
|
const idString = ids.join(',');
|
|
let url;
|
|
|
|
if (selectedRows.value.length <= 1) {
|
|
url = `api/Routes/${idString}/driver-route-pdf?access_token=${session.getTokenMultimedia()}`;
|
|
} else {
|
|
const params = new URLSearchParams({
|
|
access_token: session.getTokenMultimedia(),
|
|
id: idString,
|
|
});
|
|
url = `api/Routes/downloadZip?${params.toString()}`;
|
|
}
|
|
window.open(url, '_blank');
|
|
};
|
|
|
|
const markAsServed = () => {
|
|
selectedRows.value.forEach((row) => {
|
|
if (row?.id) {
|
|
axios.patch(`Routes/${row?.id}`, { isOk: true });
|
|
}
|
|
});
|
|
refreshKey.value++;
|
|
startingDate.value = null;
|
|
};
|
|
|
|
const openTicketsDialog = (id) => {
|
|
if (!id) {
|
|
return;
|
|
}
|
|
quasar
|
|
.dialog({
|
|
component: RouteListTicketsDialog,
|
|
componentProps: {
|
|
id,
|
|
},
|
|
})
|
|
.onOk(() => refreshKey.value++);
|
|
};
|
|
|
|
onMounted(async () => {
|
|
stateStore.rightDrawer = true;
|
|
allColumnNames.value = columns.value.map((col) => col.name);
|
|
console.log('les columnes', allColumnNames.value);
|
|
await arrayData.fetch({ append: false });
|
|
});
|
|
onUnmounted(() => (stateStore.rightDrawer = false));
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="stateStore.isHeaderMounted()">
|
|
<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>
|
|
<QDialog v-model="confirmationDialog">
|
|
<QCard style="min-width: 350px">
|
|
<QCardSection>
|
|
<p class="text-h6 q-ma-none">{{ t('Select the starting date') }}</p>
|
|
</QCardSection>
|
|
|
|
<QCardSection class="q-pt-none">
|
|
<VnInputDate
|
|
:label="t('Stating date')"
|
|
v-model="startingDate"
|
|
autofocus
|
|
/>
|
|
</QCardSection>
|
|
<QCardActions align="right">
|
|
<QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
|
|
<QBtn color="primary" v-close-popup @click="cloneRoutes">
|
|
{{ t('Clone') }}
|
|
</QBtn>
|
|
</QCardActions>
|
|
</QCard>
|
|
</QDialog>
|
|
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
|
<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 />
|
|
<QPage class="column items-center">
|
|
<VnSubToolbar>
|
|
<template #st-data>
|
|
<TableVisibleColumns
|
|
class="LeftIcon"
|
|
:all-columns="allColumnNames"
|
|
table-code="routesList"
|
|
labels-traductions-path="globals"
|
|
@on-config-saved="visibleColumns = [...$event]"
|
|
/>
|
|
</template>
|
|
<template #st-actions>
|
|
<QBtn
|
|
icon="vn:clone"
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
:disable="!selectedRows?.length"
|
|
@click="confirmationDialog = true"
|
|
>
|
|
<QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
|
|
</QBtn>
|
|
<QBtn
|
|
icon="cloud_download"
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
:disable="!selectedRows?.length"
|
|
@click="showRouteReport"
|
|
>
|
|
<QTooltip>{{ t('Download selected routes as PDF') }}</QTooltip>
|
|
</QBtn>
|
|
<QBtn
|
|
icon="check"
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
:disable="!selectedRows?.length"
|
|
@click="markAsServed"
|
|
>
|
|
<QTooltip>{{ t('Mark as served') }}</QTooltip>
|
|
</QBtn>
|
|
</template>
|
|
</VnSubToolbar>
|
|
<div class="route-list">
|
|
<VnPaginate
|
|
:key="refreshKey"
|
|
data-key="RouteList"
|
|
url="Routes/filter"
|
|
:order="['created ASC', 'started ASC', 'id ASC']"
|
|
:limit="20"
|
|
auto-load
|
|
>
|
|
<template #body="{ rows }">
|
|
<div class="q-pa-md">
|
|
<QTable
|
|
v-model:selected="selectedRows"
|
|
:columns="columns"
|
|
:rows="rows"
|
|
flat
|
|
row-key="id"
|
|
selection="multiple"
|
|
:rows-per-page-options="[0]"
|
|
:visible-columns="visibleColumns"
|
|
hide-pagination
|
|
:no-data-label="t('globals.noResults')"
|
|
>
|
|
<!-- <template #top-row="{ cols }">
|
|
<QTr>
|
|
<QTd />
|
|
<QTd
|
|
v-for="(col, index) in cols"
|
|
:key="index"
|
|
style="max-width: 100px"
|
|
>
|
|
<component
|
|
:is="col?.columnFilter?.component"
|
|
v-if="
|
|
col.columnFilter && col.name !== 'actions'
|
|
"
|
|
v-model="col.columnFilter.filterValue"
|
|
v-bind="col.columnFilter.attrs"
|
|
v-on="col.columnFilter.event(col)"
|
|
dense
|
|
/>
|
|
</QTd>
|
|
</QTr>
|
|
</template> -->
|
|
<template #body-cell-worker="{ row }">
|
|
<QTd>
|
|
<VnSelectFilter
|
|
:label="t('Worker')"
|
|
v-model="row.workerFk"
|
|
:options="workers"
|
|
option-value="id"
|
|
option-label="nickname"
|
|
hide-selected
|
|
dense
|
|
:emit-value="false"
|
|
:rules="validate('Route.workerFk')"
|
|
:is-clearable="false"
|
|
@update:model-value="updateRoute(row)"
|
|
>
|
|
<template #option="{ opt, itemProps }">
|
|
<QItem
|
|
v-bind="itemProps"
|
|
class="q-pa-xs row items-center"
|
|
>
|
|
<QItemSection
|
|
class="col-9 justify-center"
|
|
>
|
|
<span>{{ opt.name }}</span>
|
|
<span class="text-grey">{{
|
|
opt.nickname
|
|
}}</span>
|
|
</QItemSection>
|
|
</QItem>
|
|
</template>
|
|
</VnSelectFilter>
|
|
</QTd>
|
|
</template>
|
|
<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="{ row }">
|
|
<QTd class="vehicle">
|
|
<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="{ 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="{ 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="{ 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="{ 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">
|
|
<QTd :props="props">
|
|
<div class="flex items-center no-wrap table-actions">
|
|
<QIcon
|
|
name="vn:ticketAdd"
|
|
size="xs"
|
|
color="primary"
|
|
class="cursor-pointer"
|
|
@click="openTicketsDialog(props?.row?.id)"
|
|
>
|
|
<QTooltip>{{ t('Add ticket') }}</QTooltip>
|
|
</QIcon>
|
|
<QIcon
|
|
name="preview"
|
|
size="xs"
|
|
color="primary"
|
|
@click="
|
|
viewSummary(props?.row?.id, RouteSummary)
|
|
"
|
|
class="cursor-pointer"
|
|
>
|
|
<QTooltip>{{ t('Preview') }}</QTooltip>
|
|
</QIcon>
|
|
<RouterLink
|
|
:to="{
|
|
name: 'RouteSummary',
|
|
params: { id: props?.row?.id },
|
|
}"
|
|
>
|
|
<QIcon
|
|
name="vn:eye"
|
|
size="xs"
|
|
color="primary"
|
|
>
|
|
<QTooltip>{{ t('Summary') }}</QTooltip>
|
|
</QIcon>
|
|
</RouterLink>
|
|
</div>
|
|
</QTd>
|
|
</template>
|
|
</QTable>
|
|
</div>
|
|
</template>
|
|
</VnPaginate>
|
|
</div>
|
|
<QPageSticky :offset="[20, 20]">
|
|
<RouterLink :to="{ name: 'RouteCreate' }">
|
|
<QBtn fab icon="add" color="primary" />
|
|
<QTooltip>
|
|
{{ t('newRoute') }}
|
|
</QTooltip>
|
|
</RouterLink>
|
|
</QPageSticky>
|
|
</QPage>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.table-input-cell {
|
|
min-width: 150px;
|
|
}
|
|
|
|
.route-list {
|
|
width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.table-actions {
|
|
gap: 12px;
|
|
}
|
|
|
|
.vehicle {
|
|
max-width: 150px;
|
|
}
|
|
|
|
th:last-child,
|
|
td:last-child {
|
|
background-color: var(--vn-section-color);
|
|
position: sticky;
|
|
right: 0;
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
<i18n>
|
|
en:
|
|
newRoute: New Route
|
|
es:
|
|
ID: ID
|
|
Worker: Trabajador
|
|
Agency: Agencia
|
|
Vehicle: Vehículo
|
|
Date: Fecha
|
|
Description: Descripción
|
|
Hour started: Hora inicio
|
|
Hour finished: Hora fin
|
|
newRoute: Nueva Ruta
|
|
Clone Selected Routes: Clonar rutas seleccionadas
|
|
Select the starting date: Seleccione la fecha de inicio
|
|
Stating date: Fecha de inicio
|
|
Cancel: Cancelar
|
|
Clone: Clonar
|
|
Mark as served: Marcar como servidas
|
|
Download selected routes as PDF: Descargar rutas seleccionadas como PDF
|
|
Add ticket: Añadir tickets
|
|
Preview: Vista previa
|
|
Summary: Resumen
|
|
</i18n>
|