src/i18n/locale/en.yml

@@ -305,6 +305,7 @@ globals:
         operator: Operator
         parking: Parking
         vehicleList: Vehicles
+        vehicle: Vehicle
     supplier: Supplier
     created: Created
     worker: Worker
@@ -351,6 +352,7 @@ globals:
     changeState: Change state
     raid: 'Raid {daysInForward} days'
     isVies: Vies
+    model: Model
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred

src/i18n/locale/es.yml

@@ -309,6 +309,7 @@ globals:
         operator: Operario
         parking: Parking
         vehicleList: Vehículos
+        vehicle: Vehículo
     supplier: Proveedor
     created: Fecha creación
     worker: Trabajador
@@ -353,6 +354,7 @@ globals:
     changeState: Cambiar estado
     raid: 'Redada {daysInForward} días'
     isVies: Vies
+    model: Modelo
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor

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

@@ -0,0 +1,17 @@
+<script setup>
+import VnCard from 'components/common/VnCard.vue';
+import VehicleSearchbar from '../VehicleSearchbar.vue';
+import VehicleDescriptor from './VehicleDescriptor.vue';
+</script>
+<template>
+    <VnCard
+        data-key="Vehicle"
+        base-url="Vehicles"
+        :descriptor="VehicleDescriptor"
+        search-data-key="VehicleList"
+    >
+        <template #searchbar>
+            <VehicleSearchbar />
+        </template>
+    </VnCard>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup>
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import axios from 'axios';
+
+async function deleteVehicle(id) {
+    await axios.delete(`Vehicles/${id}`);
+}
+</script>
+<template>
+    <CardDescriptor
+        module="Vehicle"
+        data-key="Vehicle"
+        :url="`Vehicles/filter?${entityId}`"
+        title="numberPlate"
+    >
+        <template #menu="{ entity }">
+            <QItem v-ripple clickable @click="deleteVehicle(entity.id)">
+                <QItemSection>
+                    {{ $t('vehicle.delete') }}
+                </QItemSection>
+            </QItem>
+        </template>
+        <template #body="{ entity }">
+            <VnLv :label="$t('vehicle.numberPlate')" :value="entity.numberPlate" />
+            <VnLv :label="$t('vehicle.tradeMark')" :value="entity.tradeMark" />
+            <VnLv :label="$t('globals.model')" :value="entity.model" />
+            <VnLv :label="$t('vehicle.countryCode')" :value="entity.countryCodeFk" />
+        </template>
+    </CardDescriptor>
+</template>

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

@@ -0,0 +1,52 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
+
+const route = useRoute();
+const entityId = computed(() => +route.params.id);
+const links = {
+    'basic-data': `#/vehicle/${entityId.value}/basic-data`,
+    notes: `#/vehicle/${entityId.value}/notes`,
+};
+</script>
+<template>
+    <CardSummary data-key="Vehicle" :url="`Vehicles/filter?id=${entityId}`">
+        <template #header="{ entity }">
+            <div>{{ entity.id }} - {{ entity.numberPlate }}</div>
+        </template>
+        <template #body="{ entity }">
+            <QCard class="vn-two">
+                <QCardSection class="q-pa-none">
+                    <VnTitle
+                        :url="links['basic-data']"
+                        :text="$t('globals.pageTitles.basicData')"
+                    />
+                </QCardSection>
+                <VnLv :label="$t('globals.description')" :value="entity.description" />
+                <VnLv :label="$t('globals.company')" :value="entity.company?.code" />
+                <VnLv :label="$t('vehicle.tradeMark')" :value="entity.tradeMark" />
+                <VnLv :label="$t('vehicle.numberPlate')" :value="entity.numberPlate" />
+                <VnLv :label="$t('globals.warehouse')" :value="entity.warehouse?.name" />
+            </QCard>
+            <QCard class="vn-two">
+                <QCardSection class="q-pa-none">
+                    <VnTitle
+                        :url="links['basic-data']"
+                        :text="$t('globals.pageTitles.basicData')"
+                    />
+                </QCardSection>
+                <VnLv :label="$t('vehicle.chassis')" :value="entity.chassis" />
+                <VnLv :label="$t('vehicle.leasing')" :value="entity.leasing" />
+                <VnLv :label="$t('vehicle.countryCode')" :value="entity.countryCodeFk" />
+                <VnLv
+                    :label="$t('vehicle.isKmTruckRate')"
+                    :value="!!entity.isKmTruckRate"
+                />
+                <VnLv :label="$t('globals.state')" :value="entity.event?.state?.state" />
+            </QCard>
+        </template>
+    </CardSummary>
+</template>

src/pages/Route/Vehicle/VehicleSearchbar.vue

@@ -7,6 +7,5 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
         url="Vehicles/filter"
         :label="$t('vehicle.searchbar.label')"
         :info="$t('vehicle.searchbar.info')"
-        custom-route-redirect-name="ZoneSummary"
     />
 </template>

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

@@ -4,6 +4,8 @@ vehicle:
     chassis: Chassis
     leasing: Leasing
     isKmTruckRate: Trailer
+    countryCode: Country Code
+    delete: Delete Vehicle
     searchbar:
         label: Search Vehicle
         info: Search by id or number plate

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

@@ -4,6 +4,8 @@ vehicle:
     chassis: Número de bastidor
     leasing: Número de leasing
     isKmTruckRate: Trailer
+    countryCode: Código de país
+    delete: Eliminar vehículo
     searchbar:
         label: Buscar Vehículo
         info: Buscar por id o matrícula

src/router/modules/index.js

@@ -20,6 +20,7 @@ import ItemType from './itemType';
 import Zone from './zone';
 import Account from './account';
 import Monitor from './monitor';
+import Vehicle from './vehicle';
 
 export default [
     Item,
@@ -44,4 +45,5 @@ export default [
     Zone,
     Account,
     Monitor,
+    Vehicle,
 ];

src/router/modules/vehicle.js

@@ -0,0 +1,46 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/vehicle',
+    name: 'Vehicle',
+    meta: {
+        title: 'vehicle',
+        icon: 'directions_car',
+        moduleName: 'Vehicle',
+    },
+    component: RouterView,
+    redirect: { name: 'VehicleCard' },
+    menus: {
+        main: [],
+        card: ['VehicleBasicData', 'VehicleLog'],
+    },
+    children: [
+        {
+            path: '/vehicle/:id',
+            name: 'VehicleCard',
+            component: () => import('src/pages/Route/Vehicle/Card/VehicleCard.vue'),
+            redirect: { name: 'VehicleSummary' },
+            children: [
+                {
+                    name: 'VehicleSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'view_list',
+                    },
+                    component: () =>
+                        import('src/pages/Route/Vehicle/Card/VehicleSummary.vue'),
+                },
+                //     {
+                //         name: 'VehicleBasicData',
+                //         path: 'basic-data',
+                //         meta: {
+                //             title: 'basicData',
+                //             icon: 'vn:settings',
+                //         },
+                //         component: () => import('pages/Route/Vehicle/Card/VehicleBasicData.vue'),
+                //     },
+            ],
+        },
+    ],
+};

src/router/routes.js

@@ -20,6 +20,7 @@ import agency from 'src/router/modules/agency';
 import zone from 'src/router/modules/zone';
 import account from './modules/account';
 import monitor from 'src/router/modules/monitor';
+import vehicle from 'src/router/modules/vehicle';
 
 const routes = [
     {
@@ -93,6 +94,7 @@ const routes = [
             ItemType,
             zone,
             account,
+            vehicle,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',