feat: refs #6958 add RoutesMonitor page and related components for route monitoring

src/components/ui/VnPaginate.vue

@@ -220,19 +220,13 @@ defineExpose({
 </script>
 
 <template>
-    <div class="full-width">
+    <div class="full-width" v-if="!store.data?.length">
-        <div
+        <div v-if="!isLoading" class="info-row q-pa-md text-center">
-            v-if="!store.data && !store.data?.length && !isLoading"
-            class="info-row q-pa-md text-center"
-        >
             <h5>
                 {{ t('No data to display') }}
             </h5>
         </div>
-        <div
+        <div v-if="props.skeleton && props.autoLoad" class="card-list q-gutter-y-md">
-            v-if="props.skeleton && props.autoLoad && !store.data"
-            class="card-list q-gutter-y-md"
-        >
             <QCard class="card" v-for="$index in props.limit" :key="$index">
                 <QItem v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
                     <QItemSection class="q-pa-md">
@@ -253,7 +247,7 @@ defineExpose({
         </div>
     </div>
     <QInfiniteScroll
-        v-if="store.data"
+        v-else
         @load="onLoad"
         :offset="offset"
         :class="['full-width', props.class]"

src/css/app.scss

@@ -280,6 +280,9 @@ input::-webkit-inner-spin-button {
             border-collapse: collapse;
         }
     }
+    .one {
+        max-width: 10px;
+    }
     .shrink {
         max-width: 75px;
     }

src/pages/Route/Monitor/RouteMonitor.vue

@@ -0,0 +1,11 @@
+<script setup>
+import RouteMonitorTable from './RouteMonitorTable.vue';
+import RouteMonitorStops from './RouteMonitorStops.vue';
+</script>
+
+<template>
+    <div class="row no-wrap">
+        <RouteMonitorTable />
+        <RouteMonitorStops />
+    </div>
+</template>

src/pages/Route/Monitor/RouteMonitorStops.vue

@@ -0,0 +1,19 @@
+<script setup>
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import { computed } from 'vue';
+
+const columns = computed(() => []);
+</script>
+
+<template>
+    <VnTable
+        data-key="roadmapStop"
+        url="RoadmapStops"
+        :columns="columns"
+        :right-search="false"
+        default-mode="table"
+        :disable-option="{ card: true }"
+        dense
+        auto-load
+    />
+</template>

src/pages/Route/Monitor/RouteMonitorTable.vue

@@ -0,0 +1,114 @@
+<script setup>
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'dated',
+        label: t('globals.date'),
+    },
+    {
+        align: 'left',
+        name: 'etd',
+        label: t('route.monitor.etd'),
+    },
+    {
+        align: 'left',
+        name: 'stop',
+        label: t('route.monitor.stop'),
+        format: (row) => row.roadmapStop?.description,
+    },
+    {
+        align: 'left',
+        name: 'bufferFk',
+        label: t('route.monitor.buffer'),
+    },
+    {
+        align: 'left',
+        name: 'beachFk',
+        label: t('route.monitor.beach'),
+    },
+    {
+        align: 'left',
+        name: 'isPickingAllowed',
+        label: t('route.monitor.isPickingAllowed'),
+        component: 'VnCheckbox',
+    },
+    {
+        align: 'left',
+        name: 'routeFk',
+        label: t('route.monitor.route'),
+    },
+    {
+        align: 'left',
+        name: 'log',
+        label: t('route.monitor.log'),
+    },
+    {
+        align: 'left',
+        name: 'priority',
+        label: t('route.monitor.priority'),
+        columnClass: 'one',
+    },
+    {
+        align: 'left',
+        name: 'routeName',
+        label: t('route.monitor.routeName'),
+        format: (row) => row.route?.name,
+    },
+    {
+        align: 'left',
+        name: 'm3',
+        label: t('route.monitor.m3'),
+    },
+    {
+        align: 'left',
+        name: 'ticketFree',
+        label: t('route.monitor.ticketFree'),
+    },
+    {
+        align: 'left',
+        name: 'ticketProduction',
+        label: t('route.monitor.ticketProduction'),
+    },
+    {
+        align: 'left',
+        name: 'ticketPacked',
+        label: t('route.monitor.ticketPacked'),
+    },
+    {
+        align: 'left',
+        name: 'packages',
+        label: t('route.monitor.packages'),
+    },
+    {
+        align: 'left',
+        name: 'note',
+        label: t('route.monitor.note'),
+    },
+]);
+</script>
+
+<template>
+    <VnTable
+        data-key="routesMonitor"
+        url="RoutesMonitors"
+        :user-filter="{
+            include: [
+                { relation: 'roadmapStop' },
+                { relation: 'beach' },
+                { relation: 'route' },
+            ],
+        }"
+        :columns="columns"
+        :right-search="false"
+        default-mode="table"
+        :disable-option="{ card: true }"
+        dense
+        auto-load
+    />
+</template>

src/pages/Route/Monitor/locale/en.yml

@@ -0,0 +1,17 @@
+route:
+    monitor:
+        etd: ETD
+        stop: Stop
+        buffer: Buffer
+        beach: Beach
+        isPickingAllowed: Picking allowed
+        route: Route
+        log: Log
+        priority: Priority
+        routeName: Route name
+        m3: Cubic meters
+        ticketFree: Free ticket
+        ticketProduction: Production ticket
+        ticketPacked: Packed ticket
+        packages: Packages
+        note: Note

src/pages/Route/Monitor/locale/es.yml

@@ -0,0 +1,17 @@
+route:
+    monitor:
+        etd: Salida estimada
+        stop: Parada
+        buffer: Buffer
+        beach: Playa
+        isPickingAllowed: Permite preparar
+        route: Ruta
+        log: Registro
+        priority: Prioridad
+        routeName: Nombre de ruta
+        m3: Metros cúbicos
+        ticketFree: Ticket libre
+        ticketProduction: Ticket de producción
+        ticketPacked: Ticket empaquetado
+        packages: Bultos
+        note: Nota

src/router/modules/route.js

@@ -195,7 +195,7 @@ const vehicleCard = {
                 icon: 'vn:notes',
             },
             component: () => import('src/pages/Route/Vehicle/Card/VehicleNotes.vue'),
-        }
+        },
     ],
 };
 
@@ -214,6 +214,7 @@ export default {
             'CmrList',
             'AgencyList',
             'VehicleList',
+            'RoutesMonitor',
         ],
     },
     component: RouterView,
@@ -347,6 +348,15 @@ export default {
                         vehicleCard,
                     ],
                 },
+                {
+                    path: 'monitor',
+                    name: 'RoutesMonitor',
+                    meta: {
+                        title: 'routesMonitor',
+                        icon: 'grid_view',
+                    },
+                    component: () => import('src/pages/Route/Monitor/RouteMonitor.vue'),
+                },
             ],
         },
     ],