From a53f41a0b76778803a908d1ed04494f22bf2c061 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 23 Jan 2025 14:23:31 +0100
Subject: [PATCH] feat: refs #7119 update VehicleSummary layout

---
 src/components/ui/CardSummary.vue             |   9 ++
 .../Route/Vehicle/Card/VehicleSummary.vue     | 116 ++++++++++--------
 2 files changed, 77 insertions(+), 48 deletions(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index f9de8e0c1..2d7da8729 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -203,4 +203,13 @@ async function fetch() {
 .summaryHeader {
     color: $white;
 }
+
+.cardSummary :deep(.q-card__section[content]) {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    > * {
+        flex: 1;
+    }
+}
 </style>
diff --git a/src/pages/Route/Vehicle/Card/VehicleSummary.vue b/src/pages/Route/Vehicle/Card/VehicleSummary.vue
index 4a03acc16..53bac89ca 100644
--- a/src/pages/Route/Vehicle/Card/VehicleSummary.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleSummary.vue
@@ -16,6 +16,7 @@ const links = {
     notes: `#/vehicle/${entityId.value}/notes`,
     dms: `#/vehicle/${entityId.value}/dms`,
     'invoice-in': `#/vehicle/${entityId.value}/invoice-in`,
+    events: `#/vehicle/${entityId.value}/events`,
 };
 </script>
 <template>
@@ -31,54 +32,73 @@ const links = {
                         :text="$t('globals.pageTitles.basicData')"
                     />
                 </QCardSection>
-                <QCardSection dense>
-                    <VnLv
-                        :label="$t('globals.description')"
-                        :value="entity.description"
-                    />
-                    <VnLv :label="$t('vehicle.tradeMark')" :value="entity.tradeMark" />
-                    <VnLv :label="$t('globals.model')" :value="entity.model" />
-                    <VnLv :label="$t('globals.supplier')">
-                        <template #value>
-                            <span class="link">
-                                {{ entity.supplier?.name }}
-                                <SupplierDescriptorProxy :id="entity.supplierFk" />
-                            </span>
-                        </template>
-                    </VnLv>
-                    <VnLv :label="$t('vehicle.supplierCooler')">
-                        <template #value>
-                            <span class="link">
-                                {{ entity.supplierCooler?.name }}
-                                <SupplierDescriptorProxy :id="entity.supplierCoolerFk" />
-                            </span>
-                        </template>
-                    </VnLv>
-                    <VnLv :label="$t('vehicle.vin')" :value="entity.vin" />
-                </QCardSection>
-                <QCardSection dense>
-                    <VnLv :label="$t('vehicle.chassis')" :value="entity.chassis" />
-                    <VnLv :label="$t('globals.fuel')" :value="entity.fuelType?.name" />
-                    <VnLv :label="$t('vehicle.ppe')" :value="entity.ppeFk" />
-                    <VnLv :label="$t('vehicle.nLeasing')" :value="entity.leasing" />
-                    <VnLv
-                        :label="$t('vehicle.leasing')"
-                        :value="entity.bankPolicy?.ref"
-                    />
-                    <VnLv :label="$t('globals.amount')" :value="entity.import" />
-                </QCardSection>
-                <QCardSection dense>
-                    <VnLv
-                        :label="$t('globals.warehouse')"
-                        :value="entity.warehouse?.name"
-                    />
-                    <VnLv :label="$t('globals.company')" :value="entity.company?.code" />
-                    <VnLv :label="$t('globals.country')" :value="entity.countryCodeFk" />
-                    <VnLv
-                        :label="$t('vehicle.isKmTruckRate')"
-                        :value="!!entity.isKmTruckRate"
-                    />
-                    <VnLv :label="$t('vehicle.isActive')" :value="!!entity.isActive" />
+                <QCardSection content>
+                    <QList dense>
+                        <VnLv
+                            :label="$t('globals.description')"
+                            :value="entity.description"
+                        />
+                        <VnLv
+                            :label="$t('vehicle.tradeMark')"
+                            :value="entity.tradeMark"
+                        />
+                        <VnLv :label="$t('globals.model')" :value="entity.model" />
+                        <VnLv :label="$t('globals.supplier')">
+                            <template #value>
+                                <span class="link">
+                                    {{ entity.supplier?.name }}
+                                    <SupplierDescriptorProxy :id="entity.supplierFk" />
+                                </span>
+                            </template>
+                        </VnLv>
+                        <VnLv :label="$t('vehicle.supplierCooler')">
+                            <template #value>
+                                <span class="link">
+                                    {{ entity.supplierCooler?.name }}
+                                    <SupplierDescriptorProxy
+                                        :id="entity.supplierCoolerFk"
+                                    />
+                                </span>
+                            </template>
+                        </VnLv>
+                        <VnLv :label="$t('vehicle.vin')" :value="entity.vin" />
+                    </QList>
+                    <QList dense>
+                        <VnLv :label="$t('vehicle.chassis')" :value="entity.chassis" />
+                        <VnLv
+                            :label="$t('globals.fuel')"
+                            :value="entity.fuelType?.name"
+                        />
+                        <VnLv :label="$t('vehicle.ppe')" :value="entity.ppeFk" />
+                        <VnLv :label="$t('vehicle.nLeasing')" :value="entity.leasing" />
+                        <VnLv
+                            :label="$t('vehicle.leasing')"
+                            :value="entity.bankPolicy?.ref"
+                        />
+                        <VnLv :label="$t('globals.amount')" :value="entity.import" />
+                    </QList>
+                    <QList dense>
+                        <VnLv
+                            :label="$t('globals.warehouse')"
+                            :value="entity.warehouse?.name"
+                        />
+                        <VnLv
+                            :label="$t('globals.company')"
+                            :value="entity.company?.code"
+                        />
+                        <VnLv
+                            :label="$t('globals.country')"
+                            :value="entity.countryCodeFk"
+                        />
+                        <VnLv
+                            :label="$t('vehicle.isKmTruckRate')"
+                            :value="!!entity.isKmTruckRate"
+                        />
+                        <VnLv
+                            :label="$t('vehicle.isActive')"
+                            :value="!!entity.isActive"
+                        />
+                    </QList>
                 </QCardSection>
             </QCard>
         </template>