412 lines
11 KiB
Vue
412 lines
11 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useSession } from 'composables/useSession';
|
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
|
import { useQuasar } from 'quasar';
|
|
import { toDate } from 'src/filters';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
import axios from 'axios';
|
|
import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
|
|
import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
|
|
import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
|
|
import RightMenu from 'src/components/common/RightMenu.vue';
|
|
import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
|
|
|
|
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
|
import VnInputDate from 'components/common/VnInputDate.vue';
|
|
import VnTable from 'components/VnTable/VnTable.vue';
|
|
import { usePrintService } from 'src/composables/usePrintService';
|
|
|
|
const { openReport } = usePrintService();
|
|
const { t } = useI18n();
|
|
const { viewSummary } = useSummaryDialog();
|
|
const quasar = useQuasar();
|
|
const session = useSession();
|
|
const selectedRows = ref([]);
|
|
const tableRef = ref([]);
|
|
const confirmationDialog = ref(false);
|
|
const startingDate = ref(null);
|
|
const router = useRouter();
|
|
const routeFilter = {
|
|
include: [
|
|
{
|
|
relation: 'workers',
|
|
scope: {
|
|
fields: ['id', 'firstName'],
|
|
},
|
|
},
|
|
],
|
|
};
|
|
const columns = computed(() => [
|
|
{
|
|
align: 'left',
|
|
name: 'id',
|
|
label: 'Id',
|
|
chip: {
|
|
condition: () => true,
|
|
},
|
|
isId: true,
|
|
columnFilter: false,
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'workerFk',
|
|
label: t('Worker'),
|
|
create: true,
|
|
component: 'select',
|
|
attrs: {
|
|
url: 'Workers/activeWithInheritedRole',
|
|
fields: ['id', 'name'],
|
|
useLike: false,
|
|
optionFilter: 'firstName',
|
|
find: {
|
|
value: 'workerFk',
|
|
label: 'workerUserName',
|
|
},
|
|
},
|
|
columnFilter: {
|
|
inWhere: true,
|
|
},
|
|
useLike: false,
|
|
cardVisible: true,
|
|
format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'agencyModeFk',
|
|
label: t('Agency'),
|
|
isTitle: true,
|
|
cardVisible: true,
|
|
create: true,
|
|
component: 'select',
|
|
attrs: {
|
|
url: 'agencyModes',
|
|
fields: ['id', 'name'],
|
|
find: {
|
|
value: 'agencyModeFk',
|
|
label: 'agencyName',
|
|
},
|
|
},
|
|
columnClass: 'expand',
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'vehicleFk',
|
|
label: t('Vehicle'),
|
|
cardVisible: true,
|
|
create: true,
|
|
component: 'select',
|
|
attrs: {
|
|
url: 'vehicles',
|
|
fields: ['id', 'numberPlate'],
|
|
optionLabel: 'numberPlate',
|
|
optionFilterValue: 'numberPlate',
|
|
find: {
|
|
value: 'vehicleFk',
|
|
label: 'vehiclePlateNumber',
|
|
},
|
|
},
|
|
columnFilter: {
|
|
inWhere: true,
|
|
},
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'created',
|
|
label: t('Date'),
|
|
columnFilter: false,
|
|
cardVisible: true,
|
|
create: true,
|
|
component: 'date',
|
|
format: ({ date }) => toDate(date),
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'from',
|
|
label: t('From'),
|
|
visible: false,
|
|
cardVisible: true,
|
|
create: true,
|
|
component: 'date',
|
|
format: ({ date }) => toDate(date),
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'to',
|
|
label: t('To'),
|
|
visible: false,
|
|
cardVisible: true,
|
|
create: true,
|
|
component: 'date',
|
|
format: ({ date }) => toDate(date),
|
|
},
|
|
{
|
|
align: 'center',
|
|
name: 'm3',
|
|
label: t('Volume'),
|
|
cardVisible: true,
|
|
columnClass: 'shrink',
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'started',
|
|
label: t('hourStarted'),
|
|
component: 'time',
|
|
columnFilter: false,
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'finished',
|
|
label: t('hourFinished'),
|
|
component: 'time',
|
|
columnFilter: false,
|
|
},
|
|
{
|
|
align: 'center',
|
|
name: 'kmStart',
|
|
label: t('KmStart'),
|
|
columnClass: 'shrink',
|
|
create: true,
|
|
visible: false,
|
|
},
|
|
{
|
|
align: 'center',
|
|
name: 'kmEnd',
|
|
label: t('KmEnd'),
|
|
columnClass: 'shrink',
|
|
create: true,
|
|
visible: false,
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'description',
|
|
label: t('Description'),
|
|
isTitle: true,
|
|
create: true,
|
|
component: 'input',
|
|
field: 'description',
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'isOk',
|
|
label: t('Served'),
|
|
component: 'checkbox',
|
|
columnFilter: false,
|
|
columnClass: 'shrink',
|
|
},
|
|
{
|
|
align: 'right',
|
|
name: 'tableActions',
|
|
actions: [
|
|
{
|
|
title: t('Add tickets'),
|
|
icon: 'vn:ticketAdd',
|
|
action: (row) => openTicketsDialog(row?.id),
|
|
},
|
|
{
|
|
title: t('components.smartCard.viewSummary'),
|
|
icon: 'preview',
|
|
action: (row) => viewSummary(row?.id, RouteSummary),
|
|
},
|
|
{
|
|
title: t('Route summary'),
|
|
icon: 'arrow_forward',
|
|
isPrimary: true,
|
|
action: (row) => navigate(row?.id),
|
|
},
|
|
],
|
|
},
|
|
]);
|
|
|
|
function navigate(id) {
|
|
router.push({ path: `/route/${id}` });
|
|
}
|
|
|
|
const cloneRoutes = () => {
|
|
if (!selectedRows.value.length || !startingDate.value) return;
|
|
axios.post('Routes/clone', {
|
|
created: startingDate.value,
|
|
ids: selectedRows.value.map((row) => row?.id),
|
|
});
|
|
startingDate.value = null;
|
|
tableRef.value.reload();
|
|
};
|
|
|
|
const showRouteReport = () => {
|
|
const ids = selectedRows.value.map((row) => row?.id);
|
|
const idString = ids.join(',');
|
|
let url = `Routes/${idString}/driver-route-pdf`;
|
|
let params = {};
|
|
if (selectedRows.value.length >= 1) {
|
|
params = {
|
|
id: idString,
|
|
};
|
|
url = `Routes/downloadZip`;
|
|
}
|
|
openReport(url, params, '_blank');
|
|
};
|
|
|
|
function markAsServed() {
|
|
selectedRows.value.forEach(async (row) => {
|
|
await axios.patch(`Routes/${row?.id}`, { isOk: true });
|
|
});
|
|
tableRef.value.reload();
|
|
startingDate.value = null;
|
|
}
|
|
|
|
const openTicketsDialog = (id) => {
|
|
quasar
|
|
.dialog({
|
|
component: RouteListTicketsDialog,
|
|
componentProps: {
|
|
id,
|
|
},
|
|
})
|
|
.onOk(() => tableRef.value.reload());
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<RouteSearchbar />
|
|
<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('globals.clone') }}
|
|
</QBtn>
|
|
</QCardActions>
|
|
</QCard>
|
|
</QDialog>
|
|
<VnSubToolbar />
|
|
<RightMenu>
|
|
<template #right-panel>
|
|
<RouteFilter data-key="RouteList" />
|
|
</template>
|
|
</RightMenu>
|
|
<VnTable
|
|
class="route-list"
|
|
ref="tableRef"
|
|
data-key="RouteList"
|
|
url="Routes/filter"
|
|
:columns="columns"
|
|
:right-search="false"
|
|
:is-editable="true"
|
|
:filter="routeFilter"
|
|
redirect="route"
|
|
:row-click="false"
|
|
:create="{
|
|
urlCreate: 'Routes',
|
|
title: t('Create route'),
|
|
onDataSaved: ({ id }) => tableRef.redirect(id),
|
|
formInitialData: {},
|
|
}"
|
|
save-url="Routes/crud"
|
|
:disable-option="{ card: true }"
|
|
table-height="85vh"
|
|
v-model:selected="selectedRows"
|
|
:table="{
|
|
'row-key': 'id',
|
|
selection: 'multiple',
|
|
}"
|
|
>
|
|
<template #moreBeforeActions>
|
|
<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>
|
|
</VnTable>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.table-input-cell {
|
|
max-width: 143px;
|
|
}
|
|
|
|
.route-list {
|
|
width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.table-actions {
|
|
gap: 12px;
|
|
}
|
|
th:last-child,
|
|
td:last-child {
|
|
background-color: var(--vn-section-color);
|
|
position: sticky;
|
|
right: 0;
|
|
}
|
|
</style>
|
|
<i18n>
|
|
en:
|
|
newRoute: New Route
|
|
hourStarted: Started hour
|
|
hourFinished: Finished hour
|
|
es:
|
|
From: Desde
|
|
To: Hasta
|
|
Worker: Trabajador
|
|
Agency: Agencia
|
|
Vehicle: Vehículo
|
|
Volume: Volumen
|
|
Date: Fecha
|
|
Description: Descripción
|
|
Hour started: Hora inicio
|
|
Hour finished: Hora fin
|
|
KmStart: Km inicio
|
|
KmEnd: Km fin
|
|
Served: Servida
|
|
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
|
|
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
|
|
Route is closed: La ruta está cerrada
|
|
Route is not served: La ruta no está servida
|
|
hourStarted: Hora de inicio
|
|
hourFinished: Hora de fin
|
|
</i18n>
|