From fa55e33b548d531b03fabd2f00f4ad835b92a27a Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 13 Jun 2024 07:43:49 +0200
Subject: [PATCH] fix: refs #7566 fixed summary cards and table

---
 src/components/ui/CardSummary.vue             |   4 +-
 src/pages/Customer/Card/CustomerSummary.vue   |   6 +-
 .../components/CustomerSummaryTable.vue       | 131 ++++++++++--------
 3 files changed, 76 insertions(+), 65 deletions(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index ae9a43578..cab5b98be 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -159,9 +159,9 @@ function existSummary(routes) {
                 margin-top: 2px;
                 .label {
                     color: var(--vn-label-color);
-                    width: 8em;
+                    width: 9em;
                     overflow: hidden;
-                    white-space: nowrap;
+                    white-space: wrap;
                     text-overflow: ellipsis;
                     margin-right: 10px;
                     flex-grow: 0;
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index f386b0359..5a003dc85 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -306,10 +306,8 @@ const creditWarning = computed(() => {
                     :value="entity.recommendedCredit"
                 />
             </QCard>
-            <QCard>
-                <div class="header">
-                    {{ t('Latest tickets') }}
-                </div>
+            <QCard class="vn-one">
+                <VnTitle :text="t('Latest tickets')" />
                 <CustomerSummaryTable />
             </QCard>
         </template>
diff --git a/src/pages/Customer/components/CustomerSummaryTable.vue b/src/pages/Customer/components/CustomerSummaryTable.vue
index 6a33ebc88..c5449f539 100644
--- a/src/pages/Customer/components/CustomerSummaryTable.vue
+++ b/src/pages/Customer/components/CustomerSummaryTable.vue
@@ -171,67 +171,80 @@ const navigateToticketSummary = (id) => {
         auto-load
         url="Tickets"
     />
-    <QTable
-        :columns="columns"
-        :pagination="{ rowsPerPage: 12 }"
-        :rows="rows"
-        class="full-width q-mt-md"
-        row-key="id"
-        v-if="rows?.length"
-    >
-        <template #body-cell="props">
-            <QTd :props="props" @click="navigateToticketSummary(props.row.id)">
-                <QTr :props="props" class="cursor-pointer">
-                    <component
-                        :is="tableColumnComponents[props.col.name].component"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                        class="rounded-borders q-pa-sm"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                    >
-                        <template
-                            v-if="
-                                props.col.name === 'id' ||
-                                props.col.name === 'nickname' ||
-                                props.col.name === 'agency' ||
-                                props.col.name === 'route' ||
-                                props.col.name === 'packages'
-                            "
+    <QCard class="vn-one q-py-sm flex justify-between">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width"
+            row-key="id"
+            v-if="rows?.length"
+        >
+            <template #body-cell="props">
+                <QTd :props="props" @click="navigateToticketSummary(props.row.id)">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                            class="rounded-borders"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
                         >
-                            {{ props.value }}
-                        </template>
-                        <template v-if="props.col.name === 'date'">
-                            <QBadge class="q-pa-sm" color="warning">
-                                {{ props.value }}
-                            </QBadge>
-                        </template>
-                        <template v-if="props.col.name === 'state'">
-                            <QBadge :color="setStateColor(props.row)" class="q-pa-sm">
-                                {{ props.value }}
-                            </QBadge>
-                        </template>
-                        <template v-if="props.col.name === 'total'">
-                            <QBadge
-                                :color="setTotalPriceColor(props.row)"
-                                class="q-pa-sm"
-                                v-if="setTotalPriceColor(props.row)"
+                            <template
+                                v-if="
+                                    props.col.name === 'id' ||
+                                    props.col.name === 'nickname' ||
+                                    props.col.name === 'agency' ||
+                                    props.col.name === 'route' ||
+                                    props.col.name === 'packages'
+                                "
                             >
-                                {{ toCurrency(props.value) }}
-                            </QBadge>
-                            <div v-else>{{ toCurrency(props.value) }}</div>
-                        </template>
-                        <CustomerDescriptorProxy
-                            :id="props.row.clientFk"
-                            v-if="props.col.name === 'nickname'"
-                        />
-                        <RouteDescriptorProxy
-                            :id="props.row.routeFk"
-                            v-if="props.col.name === 'route'"
-                        />
-                    </component>
-                </QTr>
-            </QTd>
-        </template>
-    </QTable>
+                                <span
+                                    v-if="
+                                        props.col.name === 'nickname' ||
+                                        props.col.name === 'route'
+                                    "
+                                    class="link"
+                                >
+                                    {{ props.value }}
+                                </span>
+                                <span v-else>
+                                    {{ props.value }}
+                                </span>
+                            </template>
+                            <template v-if="props.col.name === 'date'">
+                                <QBadge class="q-pa-sm" color="warning">
+                                    {{ props.value }}
+                                </QBadge>
+                            </template>
+                            <template v-if="props.col.name === 'state'">
+                                <QBadge :color="setStateColor(props.row)" class="q-pa-sm">
+                                    {{ props.value }}
+                                </QBadge>
+                            </template>
+                            <template v-if="props.col.name === 'total'">
+                                <QBadge
+                                    :color="setTotalPriceColor(props.row)"
+                                    class="q-pa-sm"
+                                    v-if="setTotalPriceColor(props.row)"
+                                >
+                                    {{ toCurrency(props.value) }}
+                                </QBadge>
+                                <div v-else>{{ toCurrency(props.value) }}</div>
+                            </template>
+                            <CustomerDescriptorProxy
+                                :id="props.row.clientFk"
+                                v-if="props.col.name === 'nickname'"
+                            />
+                            <RouteDescriptorProxy
+                                :id="props.row.routeFk"
+                                v-if="props.col.name === 'route'"
+                            />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+    </QCard>
 </template>
 
 <i18n>