feat: refs #7129 route extended list and simplify route list
This commit is contained in:
parent
29cc14673a
commit
8124a341a0
|
|
@ -10,7 +10,7 @@ import FormModelPopup from 'components/FormModelPopup.vue';
|
|||
|
||||
import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
|
||||
import VnTableColumn from 'components/VnTable/VnColumn.vue';
|
||||
import VnTableFilter from 'components/VnTable/VnFilter.vue';
|
||||
import VnFilter from 'components/VnTable/VnFilter.vue';
|
||||
import VnTableChip from 'components/VnTable/VnChip.vue';
|
||||
import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
|
||||
import VnLv from 'components/ui/VnLv.vue';
|
||||
|
|
@ -335,7 +335,7 @@ function handleOnDataSaved(_) {
|
|||
)"
|
||||
:key="col.id"
|
||||
>
|
||||
<VnTableFilter
|
||||
<VnFilter
|
||||
:column="col"
|
||||
:data-key="$attrs['data-key']"
|
||||
v-model="params[columnName(col)]"
|
||||
|
|
@ -442,7 +442,7 @@ function handleOnDataSaved(_) {
|
|||
:search-url="searchUrl"
|
||||
/>
|
||||
</div>
|
||||
<VnTableFilter
|
||||
<VnFilter
|
||||
v-if="$props.columnSearch"
|
||||
:column="col"
|
||||
:show-title="true"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import isValidDate from 'filters/isValidDate';
|
||||
|
||||
export default function toHour(date) {
|
||||
console.log('date: ', date);
|
||||
if (!isValidDate(date)) {
|
||||
return '--:--';
|
||||
}
|
||||
return (new Date(date || '')).toLocaleTimeString([], {
|
||||
return new Date(date || '').toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -872,6 +872,7 @@ route:
|
|||
tickets: Tickets
|
||||
log: Log
|
||||
autonomous: Autonomous
|
||||
RouteExtendedList: Extended list
|
||||
cmr:
|
||||
list:
|
||||
results: results
|
||||
|
|
|
|||
|
|
@ -216,6 +216,7 @@ globals:
|
|||
RouteRoadmap: Troncales
|
||||
RouteRoadmapCreate: Crear troncal
|
||||
autonomous: Autónomos
|
||||
RouteExtendedList: Listado extendido
|
||||
suppliers: Proveedores
|
||||
supplier: Proveedor
|
||||
supplierCreate: Nuevo proveedor
|
||||
|
|
|
|||
|
|
@ -27,12 +27,15 @@ const columns = computed(() => [
|
|||
condition: () => true,
|
||||
},
|
||||
isId: true,
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('globals.name'),
|
||||
name: 'name',
|
||||
isTitle: true,
|
||||
columnFilter: false,
|
||||
columnClass: 'expand',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
|
@ -70,18 +73,34 @@ const columns = computed(() => [
|
|||
data-key="AgencyList"
|
||||
:expr-builder="exprBuilder"
|
||||
/>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="AgencyList"
|
||||
url="Agencies"
|
||||
order="name"
|
||||
:columns="columns"
|
||||
:right-search="false"
|
||||
:use-model="true"
|
||||
redirect="agency"
|
||||
default-mode="card"
|
||||
/>
|
||||
<div class="list-container">
|
||||
<div class="list">
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="AgencyList"
|
||||
url="Agencies"
|
||||
order="name"
|
||||
:columns="columns"
|
||||
:right-search="false"
|
||||
:use-model="true"
|
||||
redirect="agency"
|
||||
default-mode="card"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 55%;
|
||||
}
|
||||
.list-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
es:
|
||||
isOwn: Tiene propietario
|
||||
|
|
|
|||
|
|
@ -0,0 +1,411 @@
|
|||
<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>
|
||||
|
|
@ -1,34 +1,19 @@
|
|||
<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 { toHour } from 'src/filters';
|
||||
|
||||
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';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
|
||||
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: [
|
||||
{
|
||||
|
|
@ -42,12 +27,12 @@ const routeFilter = {
|
|||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
isId: true,
|
||||
name: 'id',
|
||||
label: 'Id',
|
||||
chip: {
|
||||
condition: () => true,
|
||||
},
|
||||
isId: true,
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
|
|
@ -55,138 +40,52 @@ const columns = computed(() => [
|
|||
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),
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'agencyModeFk',
|
||||
name: 'agencyModeName',
|
||||
label: t('Agency'),
|
||||
isTitle: true,
|
||||
cardVisible: true,
|
||||
create: true,
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'agencyModes',
|
||||
fields: ['id', 'name'],
|
||||
find: {
|
||||
value: 'agencyModeFk',
|
||||
label: 'agencyName',
|
||||
},
|
||||
},
|
||||
columnClass: 'expand',
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'vehicleFk',
|
||||
name: 'vehiclePlateNumber',
|
||||
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',
|
||||
cardVisible: true,
|
||||
columnFilter: false,
|
||||
format: (row) => toHour(row.started),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'finished',
|
||||
label: t('hourFinished'),
|
||||
component: 'time',
|
||||
cardVisible: true,
|
||||
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,
|
||||
format: (row) => toHour(row.started),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'description',
|
||||
label: t('Description'),
|
||||
cardVisible: true,
|
||||
isTitle: true,
|
||||
create: true,
|
||||
component: 'input',
|
||||
field: 'description',
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
|
@ -200,111 +99,29 @@ const columns = computed(() => [
|
|||
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),
|
||||
color: 'primary',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
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"
|
||||
|
|
@ -314,98 +131,22 @@ const openTicketsDialog = (id) => {
|
|||
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 #column-workerFk="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row?.workerUserName }}
|
||||
<WorkerDescriptorProxy :id="row?.workerFk" v-if="row?.workerFk" />
|
||||
</span>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,14 @@ export default {
|
|||
component: RouterView,
|
||||
redirect: { name: 'RouteMain' },
|
||||
menus: {
|
||||
main: ['RouteList', 'RouteAutonomous', 'RouteRoadmap', 'CmrList', 'AgencyList'],
|
||||
main: [
|
||||
'RouteList',
|
||||
'RouteExtendedList',
|
||||
'RouteAutonomous',
|
||||
'RouteRoadmap',
|
||||
'CmrList',
|
||||
'AgencyList',
|
||||
],
|
||||
card: ['RouteBasicData', 'RouteTickets', 'RouteLog'],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -19,9 +26,6 @@ export default {
|
|||
path: '/route',
|
||||
name: 'RouteMain',
|
||||
component: () => import('src/components/common/VnSectionMain.vue'),
|
||||
props: {
|
||||
leftDrawer: false,
|
||||
},
|
||||
redirect: { name: 'RouteList' },
|
||||
children: [
|
||||
{
|
||||
|
|
@ -33,6 +37,15 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Route/RouteList.vue'),
|
||||
},
|
||||
{
|
||||
path: 'extended-list',
|
||||
name: 'RouteExtendedList',
|
||||
meta: {
|
||||
title: 'RouteExtendedList',
|
||||
icon: 'format_list_bulleted',
|
||||
},
|
||||
component: () => import('src/pages/Route/RouteExtendedList.vue'),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'RouteCreate',
|
||||
|
|
@ -78,7 +91,7 @@ export default {
|
|||
name: 'AgencyList',
|
||||
meta: {
|
||||
title: 'agencyList',
|
||||
icon: 'view_list',
|
||||
icon: 'list',
|
||||
},
|
||||
component: () =>
|
||||
import('src/pages/Route/Agency/AgencyList.vue'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue