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>