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

@@ -5,8 +5,10 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
+const props = defineProps({ id: { type: [Number, String], default: 0 } });
+
 const route = useRoute();
-const entityId = computed(() => +route.params.id);
+const entityId = computed(() => props.id || +route.params.id);
 const links = {
     'basic-data': `#/vehicle/${entityId.value}/basic-data`,
     notes: `#/vehicle/${entityId.value}/notes`,

src/pages/Route/Vehicle/VehicleList.vue

@@ -4,8 +4,11 @@ import { useI18n } from 'vue-i18n';
 import VnTable from 'components/VnTable/VnTable.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VehicleSearchbar from 'src/pages/Route/Vehicle/VehicleSearchbar.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import VehicleSummary from 'src/pages/Route/Vehicle/Card/VehicleSummary.vue';
 
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 const warehouses = ref([]);
 const companies = ref([]);
 const countries = ref([]);
@@ -15,6 +18,10 @@ const columns = computed(() => [
     {
         name: 'id',
         label: t('globals.id'),
+        isId: true,
+        chip: {
+            condition: () => true,
+        },
     },
     {
         name: 'description',
@@ -34,10 +41,12 @@ const columns = computed(() => [
     {
         name: 'tradeMark',
         label: t('vehicle.tradeMark'),
+        cardVisible: true,
     },
     {
         name: 'numberPlate',
         label: t('vehicle.numberPlate'),
+        isTitle: true,
     },
     {
         name: 'warehouseFk',
@@ -48,6 +57,7 @@ const columns = computed(() => [
             name: 'warehouseFk',
             options: warehouses.value,
         },
+        cardVisible: true,
     },
     {
         name: 'chassis',
@@ -67,6 +77,7 @@ const columns = computed(() => [
             optionLabel: 'code',
             options: countries.value,
         },
+        cardVisible: true,
     },
     {
         name: 'isKmTruckRate',
@@ -79,6 +90,17 @@ const columns = computed(() => [
         sortable: false,
         format: (row, dashIfEmpty) => dashIfEmpty(row.event?.state?.state),
     },
+    {
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('components.smartCard.openSummary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, VehicleSummary),
+            },
+        ],
+    },
 ]);
 </script>
 <template>