From 53f6f5278f154e6e7ccb55492be84230efcbf6ad Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 24 Mar 2025 12:08:24 +0100
Subject: [PATCH] refactor: refs #8326 requested changes

---
 src/components/ui/CardSummary.vue     |  23 +++++
 src/css/app.scss                      |  23 -----
 src/pages/Route/Card/RouteSummary.vue | 141 +++++++++++++-------------
 src/pages/Zone/Card/ZoneSummary.vue   |  18 +++-
 4 files changed, 111 insertions(+), 94 deletions(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 05bfed998..2ec6bea78 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -201,6 +201,29 @@ async function fetch() {
         }
     }
 }
+
+.vn-card-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.vn-card-content {
+    display: flex;
+    flex-direction: column;
+    text-overflow: ellipsis;
+    > div {
+        max-height: 70px;
+    }
+}
+
+@media (min-width: 1010px) {
+    .vn-card-group {
+        flex-direction: row;
+    }
+    .vn-card-content {
+        flex: 1;
+    }
+}
 </style>
 <style lang="scss" scoped>
 .summaryHeader .vn-label-value {
diff --git a/src/css/app.scss b/src/css/app.scss
index 6a0ce8fb0..5befd150b 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -341,26 +341,3 @@ input::-webkit-inner-spin-button {
 .containerShrinked {
     width: 70%;
 }
-
-.vn-card-group {
-    display: flex;
-    flex-direction: column;
-}
-
-.vn-card-content {
-    display: flex;
-    flex-direction: column;
-    text-overflow: ellipsis;
-    > div {
-        max-height: 80px;
-    }
-}
-
-@media (min-width: 1010px) {
-    .vn-card-group {
-        flex-direction: row;
-    }
-    .vn-card-content {
-        flex: 1;
-    }
-}
diff --git a/src/pages/Route/Card/RouteSummary.vue b/src/pages/Route/Card/RouteSummary.vue
index f68628095..86bdbb5c5 100644
--- a/src/pages/Route/Card/RouteSummary.vue
+++ b/src/pages/Route/Card/RouteSummary.vue
@@ -138,74 +138,79 @@ const ticketColumns = ref([
                         :url="`#/${route.meta.moduleName.toLowerCase()}/${entityId}/basic-data`"
                         :text="t('globals.pageTitles.basicData')"
                     />
-                </QCard>
-
-                <QCard class="vn-one">
-                    <VnLv
-                        :label="t('route.summary.date')"
-                        :value="toDate(entity?.route.dated)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.agency')"
-                        :value="entity?.route?.agencyMode?.name"
-                    />
-                    <VnLv
-                        :label="t('route.summary.vehicle')"
-                        :value="entity.route?.vehicle?.numberPlate"
-                    />
-                    <VnLv :label="t('route.summary.driver')">
-                        <template #value>
-                            <span class="link">
-                                {{ dashIfEmpty(entity?.route?.worker?.user?.name) }}
-                                <WorkerDescriptorProxy :id="entity.route?.workerFk" />
-                            </span>
-                        </template>
-                    </VnLv>
-                    <VnLv
-                        :label="t('route.summary.cost')"
-                        :value="toCurrency(entity.route?.cost)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.volume')"
-                        :value="`${dashIfEmpty(entity?.route?.m3)} / ${dashIfEmpty(
-                            entity?.route?.vehicle?.m3,
-                        )} m³`"
-                    />
-                    <VnLv
-                        :label="t('route.summary.packages')"
-                        :value="getTotalPackages(entity.tickets)"
-                    />
-                    <QCheckbox
-                        :label="
-                            entity.route.isOk
-                                ? t('route.summary.closed')
-                                : t('route.summary.open')
-                        "
-                        v-model="entity.route.isOk"
-                        :disable="true"
-                    />
-                </QCard>
-                <QCard class="vn-one">
-                    <VnLv
-                        :label="t('route.summary.started')"
-                        :value="toHour(entity?.route.started)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.finished')"
-                        :value="toHour(entity?.route.finished)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.kmStart')"
-                        :value="dashIfEmpty(entity?.route?.kmStart)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.kmEnd')"
-                        :value="dashIfEmpty(entity?.route?.kmEnd)"
-                    />
-                    <VnLv
-                        :label="t('globals.description')"
-                        :value="dashIfEmpty(entity?.route?.description)"
-                    />
+                    <div class="vn-card-group">
+                        <div class="vn-card-content">
+                            <VnLv
+                                :label="t('route.summary.date')"
+                                :value="toDate(entity?.route.dated)"
+                            />
+                            <VnLv
+                                :label="t('route.summary.agency')"
+                                :value="entity?.route?.agencyMode?.name"
+                            />
+                            <VnLv
+                                :label="t('route.summary.vehicle')"
+                                :value="entity.route?.vehicle?.numberPlate"
+                            />
+                            <VnLv :label="t('route.summary.driver')">
+                                <template #value>
+                                    <span class="link">
+                                        {{
+                                            dashIfEmpty(entity?.route?.worker?.user?.name)
+                                        }}
+                                        <WorkerDescriptorProxy
+                                            :id="entity.route?.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('route.summary.cost')"
+                                :value="toCurrency(entity.route?.cost)"
+                            />
+                            <VnLv
+                                :label="t('route.summary.volume')"
+                                :value="`${dashIfEmpty(entity?.route?.m3)} / ${dashIfEmpty(
+                                    entity?.route?.vehicle?.m3,
+                                )} m³`"
+                            />
+                            <VnLv
+                                :label="t('route.summary.packages')"
+                                :value="getTotalPackages(entity.tickets)"
+                            />
+                            <QCheckbox
+                                :label="
+                                    entity.route.isOk
+                                        ? t('route.summary.closed')
+                                        : t('route.summary.open')
+                                "
+                                v-model="entity.route.isOk"
+                                :disable="true"
+                            />
+                        </div>
+                        <div class="vn-card-content">
+                            <VnLv
+                                :label="t('route.summary.started')"
+                                :value="toHour(entity?.route.started)"
+                            />
+                            <VnLv
+                                :label="t('route.summary.finished')"
+                                :value="toHour(entity?.route.finished)"
+                            />
+                            <VnLv
+                                :label="t('route.summary.kmStart')"
+                                :value="dashIfEmpty(entity?.route?.kmStart)"
+                            />
+                            <VnLv
+                                :label="t('route.summary.kmEnd')"
+                                :value="dashIfEmpty(entity?.route?.kmEnd)"
+                            />
+                            <VnLv
+                                :label="t('globals.description')"
+                                :value="dashIfEmpty(entity?.route?.description)"
+                            />
+                        </div>
+                    </div>
                 </QCard>
                 <QCard class="vn-max">
                     <VnTitle
diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
index cd5a80ba2..61475b1f6 100644
--- a/src/pages/Zone/Card/ZoneSummary.vue
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -75,13 +75,13 @@ onMounted(async () => {
         <template #body="{ entity: zone }">
             <QCard class="vn-one">
                 <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
-                <div class="vn-card-group">
-                    <div class="vn-card-content">
+                <div class="card-group">
+                    <div class="card-content">
                         <VnLv :label="t('list.agency')" :value="zone.agencyMode?.name" />
                         <VnLv :label="t('list.price')" :value="toCurrency(zone.price)" />
                         <VnLv :label="t('zone.bonus')" :value="toCurrency(zone.bonus)" />
                     </div>
-                    <div class="vn-card-content">
+                    <div class="card-content">
                         <VnLv
                             :label="t('summary.closeHour')"
                             :value="toTimeFormat(zone.hour)"
@@ -109,3 +109,15 @@ onMounted(async () => {
         </template>
     </CardSummary>
 </template>
+
+<style lang="scss" scoped>
+.card-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.card-content {
+    display: flex;
+    flex-direction: column;
+}
+</style>