Merge pull request '#7566 fixed summary cards and table' (!444) from 7566-FixCustomerSummary into dev

Reviewed-on: #444
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

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;

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>

src/pages/Customer/components/CustomerSummaryTable.vue

@@ -162,6 +162,7 @@ const navigateToticketSummary = (id) => {
         params: { id },
     });
 };
+const commonColumns = (col) => ['date', 'state', 'total'].includes(col);
 </script>
 
 <template>
@@ -171,13 +172,13 @@ const navigateToticketSummary = (id) => {
         auto-load
         url="Tickets"
     />
+    <QCard class="vn-one q-py-sm flex justify-between">
         <QTable
             :columns="columns"
             :pagination="{ rowsPerPage: 12 }"
             :rows="rows"
-        class="full-width q-mt-md"
+            class="full-width"
             row-key="id"
-        v-if="rows?.length"
         >
             <template #body-cell="props">
                 <QTd :props="props" @click="navigateToticketSummary(props.row.id)">
@@ -185,19 +186,19 @@ const navigateToticketSummary = (id) => {
                         <component
                             :is="tableColumnComponents[props.col.name].component"
                             @click="tableColumnComponents[props.col.name].event(props)"
-                        class="rounded-borders q-pa-sm"
+                            class="rounded-borders"
                             v-bind="tableColumnComponents[props.col.name].props(props)"
                         >
-                        <template
-                            v-if="
-                                props.col.name === 'id' ||
-                                props.col.name === 'nickname' ||
-                                props.col.name === 'agency' ||
+                            <template v-if="!commonColumns(props.col.name)">
+                                <span
+                                    :class="{
+                                        link:
                                             props.col.name === 'route' ||
-                                props.col.name === 'packages'
-                            "
+                                            props.col.name === 'nickname',
+                                    }"
                                 >
                                     {{ props.value }}
+                                </span>
                             </template>
                             <template v-if="props.col.name === 'date'">
                                 <QBadge class="q-pa-sm" color="warning">
@@ -232,6 +233,7 @@ const navigateToticketSummary = (id) => {
                 </QTd>
             </template>
         </QTable>
+    </QCard>
 </template>
 
 <i18n>