feat: refs #8630 add Agency and Vehicle descriptor components with summary props

src/pages/Route/Agency/Card/AgencyDescriptorProxy.vue

@@ -0,0 +1,20 @@
+<script setup>
+import AgencyDescriptor from 'pages/Route/Agency/Card/AgencyDescriptor.vue';
+import AgencySummary from './AgencySummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    summary: {
+        type: Object,
+        default: null,
+    },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <AgencyDescriptor v-if="$props.id" :id="$props.id" :summary="AgencySummary" />
+    </QPopupProxy>
+</template>

src/pages/Route/Card/RouteDescriptorProxy.vue

@@ -7,6 +7,10 @@ const $props = defineProps({
         type: Number,
         required: true,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 </script>
 <template>

src/pages/Route/RouteAutonomous.vue

@@ -13,6 +13,7 @@ import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
 import RouteDescriptorProxy from 'pages/Route/Card/RouteDescriptorProxy.vue';
 import InvoiceInDescriptorProxy from 'pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue';
 import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import AgencyDescriptorProxy from 'pages/Route/Agency/Card/AgencyDescriptorProxy.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnDms from 'components/common/VnDms.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
@@ -235,10 +236,16 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             selection: 'multiple',
         }"
     >
-        <template #column-id="{ row }">
+        <template #column-agencyModeName="{ row }">
             <span class="link" @click.stop>
-                {{ row.routeFk }}
+                {{ row?.agencyModeName }}
-                <RouteDescriptorProxy :id="row.route.id" />
+                <AgencyDescriptorProxy :id="row?.agencyModeFk" v-if="row?.agencyModeFk" />
+            </span>
+        </template>
+        <template #column-agencyAgreement="{ row }">
+            <span class="link" @click.stop>
+                {{ row?.agencyAgreement }}
+                <AgencyDescriptorProxy :id="row?.agencyFk" v-if="row?.agencyFk" />
             </span>
         </template>
         <template #column-invoiceInFk="{ row }">

src/pages/Route/RouteList.vue

@@ -7,6 +7,8 @@ import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
 import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import AgencyDescriptorProxy from 'src/pages/Route/Agency/Card/AgencyDescriptorProxy.vue';
+import VehicleDescriptorProxy from 'src/pages/Route/Vehicle/Card/VehicleDescriptorProxy.vue';
 import VnSection from 'src/components/common/VnSection.vue';
 import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
@@ -184,6 +186,24 @@ const columns = computed(() => [
                         <WorkerDescriptorProxy :id="row?.workerFk" v-if="row?.workerFk" />
                     </span>
                 </template>
+                <template #column-agencyName="{ row }">
+                    <span class="link" @click.stop>
+                        {{ row?.agencyName }}
+                        <AgencyDescriptorProxy
+                            :id="row?.agencyModeFk"
+                            v-if="row?.agencyModeFk"
+                        />
+                    </span>
+                </template>
+                <template #column-vehiclePlateNumber="{ row }">
+                    <span class="link" @click.stop>
+                        {{ row?.vehiclePlateNumber }}
+                        <VehicleDescriptorProxy
+                            :id="row?.vehicleFk"
+                            v-if="row?.vehicleFk"
+                        />
+                    </span>
+                </template>
             </VnTable>
         </template>
     </VnSection>

src/pages/Route/RouteRoadmap.vue

@@ -2,13 +2,11 @@
 import { useI18n } from 'vue-i18n';
 import { computed, ref } from 'vue';
 import { dashIfEmpty } from 'src/filters';
-import { toDate, toDateHourMin } from 'filters/index';
+import { toDate, toDateHourMin, toCurrency } from 'filters/index';
 import { useQuasar } from 'quasar';
 import { useSummaryDialog } from 'composables/useSummaryDialog';
-import toCurrency from 'filters/toCurrency';
 import axios from 'axios';
 
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import RoadmapSummary from 'pages/Route/Roadmap/RoadmapSummary.vue';
@@ -17,6 +15,8 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputTime from 'src/components/common/VnInputTime.vue';
 import VnSection from 'src/components/common/VnSection.vue';
 import RoadmapFilter from './Roadmap/RoadmapFilter.vue';
+import VehicleDescriptorProxy from 'src/pages/Route/Vehicle/Card/VehicleDescriptorProxy.vue';
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 
 const { viewSummary } = useSummaryDialog();
 const { t } = useI18n();
@@ -33,7 +33,7 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'name',
-        label: t('Roadmap'),
+        label: t('route.roadmap.roadmap'),
         create: true,
         cardVisible: true,
         columnFilter: {
@@ -41,9 +41,9 @@ const columns = computed(() => [
         },
     },
     {
-        align: 'left',
+        align: 'center',
         name: 'etd',
-        label: t('ETD'),
+        label: t('route.roadmap.etd'),
         component: 'date',
         columnFilter: {
             inWhere: true,
@@ -54,7 +54,7 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'supplierFk',
-        label: t('Carrier'),
+        label: t('route.roadmap.carrier'),
         component: 'select',
         attrs: {
             url: 'suppliers',
@@ -65,21 +65,21 @@ const columns = computed(() => [
     },
     {
         name: 'tractorPlate',
-        label: t('Plate'),
+        label: t('route.roadmap.vehicle'),
         field: (row) => row.tractorPlate,
         sortable: true,
         align: 'left',
     },
     {
         name: 'price',
-        label: t('Price'),
+        label: t('route.roadmap.price'),
-        field: (row) => toCurrency(row.price),
+        format: ({ price }) => toCurrency(price),
         sortable: true,
-        align: 'left',
+        align: 'right',
     },
     {
         name: 'observations',
-        label: t('Observations'),
+        label: t('route.roadmap.observations'),
         field: (row) => dashIfEmpty(row.observations),
         sortable: true,
         align: 'left',
@@ -89,7 +89,7 @@ const columns = computed(() => [
         name: 'tableActions',
         actions: [
             {
-                title: t('Ver cmr'),
+                title: t('route.roadmap.seeCmr'),
                 icon: 'preview',
                 isPrimary: true,
                 action: (row) => viewSummary(row?.id, RoadmapSummary),
@@ -124,8 +124,8 @@ function confirmRemove() {
         .dialog({
             component: VnConfirm,
             componentProps: {
-                title: t('Selected roadmaps will be removed'),
+                title: t('route.roadmap.selectedRoadmapsRemoved'),
-                message: t('Are you sure you want to continue?'),
+                message: t('route.roadmap.areYouSure'),
                 promise: removeSelection,
             },
         })
@@ -157,15 +157,24 @@ function exprBuilder(param, value) {
         <QCard style="min-width: 350px">
             <QCardSection>
                 <p class="text-h6 q-ma-none">
-                    {{ t('Select the estimated date of departure (ETD)') }}
+                    {{ t('route.roadmap.selectEtd') }}
                 </p>
             </QCardSection>
 
             <QCardSection class="q-pt-none">
-                <VnInputDate :label="t('ETD')" v-model="etdDate" autofocus />
+                <VnInputDate
+                    :label="t('route.roadmap.etd')"
+                    v-model="etdDate"
+                    autofocus
+                />
             </QCardSection>
             <QCardActions align="right">
-                <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
+                <QBtn
+                    flat
+                    :label="t('globals.cancel')"
+                    v-close-popup
+                    class="text-primary"
+                />
                 <QBtn color="primary" v-close-popup @click="cloneSelection">
                     {{ t('globals.clone') }}
                 </QBtn>
@@ -181,7 +190,7 @@ function exprBuilder(param, value) {
                 :disable="!selectedRows?.length"
                 @click="isCloneDialogOpen = true"
             >
-                <QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
+                <QTooltip>{{ t('route.roadmap.cloneSelected') }}</QTooltip>
             </QBtn>
             <QBtn
                 icon="delete"
@@ -190,7 +199,7 @@ function exprBuilder(param, value) {
                 :disable="!selectedRows?.length"
                 @click="confirmRemove"
             >
-                <QTooltip>{{ t('Delete roadmap(s)') }}</QTooltip>
+                <QTooltip>{{ t('route.roadmap.deleteRoadmap') }}</QTooltip>
             </QBtn>
         </template>
     </VnSubToolbar>
@@ -222,7 +231,7 @@ function exprBuilder(param, value) {
                 redirect="route/roadmap"
                 :create="{
                     urlCreate: 'Roadmaps',
-                    title: t('Create routemap'),
+                    title: t('route.roadmap.createRoadmap'),
                     onDataSaved: ({ id }) => tableRef.redirect(id),
                     formInitialData: {},
                 }"
@@ -232,7 +241,10 @@ function exprBuilder(param, value) {
                     {{ toDateHourMin(row.etd) }}
                 </template>
                 <template #column-supplierFk="{ row }">
-                    {{ row.supplierFk }}
+                    <span class="link" @click.stop>
+                        {{ row.driverName }}
+                        <SupplierDescriptorProxy :id="row.supplierFk" />
+                    </span>
                 </template>
                 <template #more-create-dialog="{ data }">
                     <VnInputDate v-model="data.etd" />
@@ -251,21 +263,3 @@ function exprBuilder(param, value) {
     gap: 12px;
 }
 </style>
-<i18n>
-es:
-    Create routemap: Crear troncal
-    Search roadmaps: Buscar troncales
-    You can search by roadmap reference: Puedes buscar por referencia del troncal
-    Delete roadmap(s): Eliminar troncal(es)
-    Selected roadmaps will be removed: Los troncales seleccionadas serán eliminados
-    Are you sure you want to continue?: ¿Seguro que quieres continuar?
-    The date can't be empty: La fecha no puede estar vacía
-    Clone Selected Routes: Clonar rutas seleccionadas
-    Create roadmap: Crear troncal
-    Roadmap: Troncal
-    Carrier: Transportista
-    Plate: Matrícula
-    Price: Precio
-    Observations: Observaciones
-    Select the estimated date of departure (ETD): Selecciona la fecha estimada de salida
-</i18n>

src/pages/Route/Vehicle/Card/VehicleDescriptor.vue

@@ -1,14 +1,27 @@
 <script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 
 const { notify } = useNotify();
+
+const props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const entityId = computed(() => props.id || route.params.id);
 </script>
 <template>
     <CardDescriptor
-        :url="`Vehicles/${$route.params.id}`"
+        :url="`Vehicles/${entityId}`"
         data-key="Vehicle"
         title="numberPlate"
         :to-module="{ name: 'VehicleList' }"

src/pages/Route/Vehicle/Card/VehicleDescriptorProxy.vue

@@ -0,0 +1,20 @@
+<script setup>
+import VehicleDescriptor from 'pages/Route/Vehicle/Card/VehicleDescriptor.vue';
+import VehicleSummary from './VehicleSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    summary: {
+        type: Object,
+        default: null,
+    },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <VehicleDescriptor v-if="$props.id" :id="$props.id" :summary="VehicleSummary" />
+    </QPopupProxy>
+</template>

src/pages/Route/locale/en.yml

@@ -8,6 +8,19 @@ route:
         downloadSelectedRoutes: Download selected routes as PDF
         markServed: Mark as served
     roadmap:
+        roadmap: Roadmap
+        carrier: Carrier
+        vehicle: Vehicle
+        price: Price
+        observations: Observations
+        etd: ETD
+        dateCantEmpty: The date can't be empty
+        createRoadmap: Create roadmap
+        deleteRoadmap: Delete roadmap(s)
+        cloneSelected: Clone selected routes
+        selectedRoadmapsRemoved: Selected roadmaps will be removed
+        areYouSure: Are you sure you want to continue?
+        selectEtd: Select the estimated date of departure (ETD)
         search: Search roadmap
         searchInfo: You can search by roadmap reference
     params:

src/pages/Route/locale/es.yml

@@ -8,6 +8,19 @@ route:
         downloadSelectedRoutes: Descargar rutas seleccionadas como PDF
         markServed: Marcar como servidas
     roadmap:
+        roadmap: Troncal
+        carrier: Transportista
+        vehicle: Vehículo
+        price: Precio
+        observations: Observaciones
+        etd: ETD
+        dateCantEmpty: La fecha no puede estar vacía
+        createRoadmap: Crear troncal
+        deleteRoadmap: Eliminar troncal(es)
+        cloneSelected: Clonar rutas seleccionadas
+        selectedRoadmapsRemoved: Los troncales seleccionadas serán eliminados
+        areYouSure: ¿Seguro que quieres continuar?
+        selectEtd: Selecciona la fecha estimada de salida
         search: Buscar troncales
         searchInfo: Puedes buscar por referencia del troncal
     params: