From 737d3020febcf4c91357b4942f7186e992978701 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Wed, 22 Nov 2023 09:33:47 -0500
Subject: [PATCH] Se hacen las mejoras en las tarjetas y menu lateral

---
 src/components/ui/CardList2.vue           |  58 +++++++----
 src/components/ui/VnFilterPanel.vue       |  65 +++++++------
 src/i18n/es/index.js                      |   4 +-
 src/pages/InvoiceOut/InvoiceOutFilter.vue | 113 +++++++++++++---------
 src/pages/InvoiceOut/InvoiceOutList.vue   |   8 +-
 5 files changed, 143 insertions(+), 105 deletions(-)

diff --git a/src/components/ui/CardList2.vue b/src/components/ui/CardList2.vue
index 0a9eb8c0b..fd70a6854 100644
--- a/src/components/ui/CardList2.vue
+++ b/src/components/ui/CardList2.vue
@@ -4,65 +4,88 @@ const $props = defineProps({
     title: { type: String, default: null },
 });
 </script>
+
 <template>
     <QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg">
         <div>
             <slot name="title">
-                <div class="title text-primary text-weight-bold text-h5">
-                    {{ $props.title ?? `#${$props.id}` }}
+                <div class="flex">
+                    <div class="title text-primary text-weight-bold text-h5">
+                        {{ $props.title ?? `#${$props.id}` }}
+                    </div>
+                    <div class="q_chip">
+                        <QChip outline color="grey" size="sm">ID: 12345</QChip>
+                    </div>
                 </div>
             </slot>
-            <div class="card-list-body row">
-                <div class="list-items row flex-wrap-wrap q-mt-md">
+            <div class="card-list-body">
+                <div class="list-items row flex-wrap-wrap">
                     <slot name="list-items" />
                 </div>
 
-                <div class="actions column justify-center">
+                <div class="actions">
                     <slot name="actions" />
                 </div>
             </div>
         </div>
     </QCard>
 </template>
+
 <style lang="scss">
+.title {
+    margin-right: 25px;
+}
+
+.q_chip {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 .card-list-body {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    margin-top: 10px;
     .vn-label-value {
         display: flex;
         justify-content: flex-start;
         gap: 2%;
         width: 50%;
         .label {
-            width: 30%;
+            width: 35%;
             color: var(--vn-label);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
         .value {
-            width: 60%;
+            width: 65%;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
     }
     .actions {
-        .q-btn {
-            width: 150px;
-        }
-        .q-icon {
-            color: $primary;
-            font-size: 25px;
-        }
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 25%;
     }
 }
 
 @media (max-width: $breakpoint-xs) {
     .card-list-body {
+        flex-wrap: wrap;
+        justify-content: center;
         .vn-label-value {
             width: 100%;
         }
+        .actions {
+            width: 100%;
+            margin-top: 15px;
+            padding: 0 15%;
+            justify-content: center;
+        }
     }
 }
 </style>
@@ -77,9 +100,4 @@ const $props = defineProps({
 .list-items {
     width: 75%;
 }
-@media (max-width: $breakpoint-md) {
-    .actions {
-        margin-top: 30px;
-    }
-}
 </style>
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index d78c3ba13..3fd34fee3 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -106,6 +106,7 @@ function formatValue(value) {
     return `"${value}"`;
 }
 </script>
+
 <template>
     <QForm @submit="search">
         <QList dense>
@@ -119,32 +120,32 @@ function formatValue(value) {
                     <div class="q-gutter-xs">
                         <QBtn
                             @click="clearFilters"
-                            icon="filter_list_off"
                             color="primary"
-                            size="sm"
+                            dense
+                            flat
+                            icon="filter_list_off"
                             padding="none"
                             round
-                            flat
-                            dense
+                            size="sm"
                         >
                             <QTooltip>{{ t('Remove filters') }}</QTooltip>
                         </QBtn>
                         <QBtn
                             @click="reload"
-                            icon="refresh"
                             color="primary"
-                            size="sm"
+                            dense
+                            flat
+                            icon="refresh"
                             padding="none"
                             round
-                            flat
-                            dense
+                            size="sm"
                         >
                             <QTooltip>{{ t('Refresh') }}</QTooltip>
                         </QBtn>
                     </div>
                 </QItemSection>
             </QItem>
-            <QItem>
+            <QItem class="q-mb-sm">
                 <div
                     v-if="tags.length === 0"
                     class="text-grey font-xs text-center full-width"
@@ -153,14 +154,14 @@ function formatValue(value) {
                 </div>
                 <div>
                     <QChip
-                        v-for="chip of tags"
                         :key="chip.label"
                         @remove="remove(chip.label)"
-                        icon="label"
-                        color="primary"
                         class="text-dark"
-                        size="sm"
+                        color="primary"
+                        icon="label"
                         removable
+                        size="sm"
+                        v-for="chip of tags"
                     >
                         <slot name="tags" :tag="chip" :format-fn="formatValue">
                             <div class="q-gutter-x-xs">
@@ -172,35 +173,35 @@ function formatValue(value) {
                 </div>
             </QItem>
             <QSeparator />
-            <template v-if="props.searchButton">
-                <QItem>
-                    <QItemSection class="q-py-sm">
-                        <QBtn
-                            :label="t('Search')"
-                            type="submit"
-                            color="primary"
-                            class="full-width"
-                            icon="search"
-                            unelevated
-                            rounded
-                            dense
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-            </template>
         </QList>
         <slot name="body" :params="userParams" :search-fn="search"></slot>
+        <template v-if="props.searchButton">
+            <QItem>
+                <QItemSection class="q-py-sm">
+                    <QBtn
+                        :label="t('Search')"
+                        class="full-width"
+                        color="primary"
+                        dense
+                        icon="search"
+                        rounded
+                        type="submit"
+                        unelevated
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+        </template>
     </QForm>
     <QInnerLoading
-        :showing="isLoading"
         :label="t('globals.pleaseWait')"
+        :showing="isLoading"
         color="primary"
     />
 </template>
 
 <i18n>
-es: 
+es:
     No filters applied: No se han aplicado filtros
     Applied filters: Filtros aplicados
     Remove filters: Eliminar filtros
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index c15d6e714..ce9babcd3 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -526,8 +526,8 @@ export default {
             logOut: 'Cerrar sesión',
         },
         smartCard: {
-            openCard: 'Ver ficha',
-            openSummary: 'Abrir detalles',
+            openCard: 'Ficha',
+            openSummary: 'Detalles',
             viewDescription: 'Ver descripción',
         },
         cardDescriptor: {
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index 1ecaf828b..6711d17c6 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -43,66 +43,72 @@ function setWorkers(data) {
                     <QItemSection>
                         <QInput
                             :label="t('Customer ID')"
-                            v-model="params.clientFk"
+                            class="q-mt-sm"
+                            dense
                             lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:client" size="sm"></QIcon>
-                            </template>
-                        </QInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
-                            <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                            outlined
+                            rounded
+                            v-model="params.clientFk"
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('FI')"
+                            class="q-mt-sm"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            v-model="params.fi"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('Amount')"
+                            class="q-mt-sm"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            v-model="params.amount"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mt-sm">
                     <QItemSection>
                         <QInput
                             :label="t('Min')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
                             type="number"
                             v-model.number="params.min"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                     <QItemSection>
                         <QInput
                             :label="t('Max')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
                             type="number"
                             v-model.number="params.max"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-md">
                     <QItemSection>
                         <QCheckbox
-                            v-model="params.hasPdf"
-                            @update:model-value="searchFn()"
                             :label="t('Has PDF')"
+                            @update:model-value="searchFn()"
                             toggle-indeterminate
+                            v-model="params.hasPdf"
                         />
                     </QItemSection>
                 </QItem>
@@ -112,15 +118,18 @@ function setWorkers(data) {
                         <QItemSection>
                             <QInput
                                 :label="t('Issued')"
-                                v-model="params.issued"
+                                dense
                                 mask="date"
+                                outlined
+                                rounded
+                                v-model="params.issued"
                             >
                                 <template #append>
                                     <QIcon name="event" class="cursor-pointer">
                                         <QPopupProxy
                                             cover
-                                            transition-show="scale"
                                             transition-hide="scale"
+                                            transition-show="scale"
                                         >
                                             <QDate v-model="params.issued" landscape>
                                                 <div
@@ -134,9 +143,9 @@ function setWorkers(data) {
                                                     />
                                                     <QBtn
                                                         :label="t('globals.confirm')"
+                                                        @click="save"
                                                         color="primary"
                                                         flat
-                                                        @click="save"
                                                         v-close-popup
                                                     />
                                                 </div>
@@ -151,15 +160,18 @@ function setWorkers(data) {
                         <QItemSection>
                             <QInput
                                 :label="t('Created')"
-                                v-model="params.created"
+                                dense
                                 mask="date"
+                                outlined
+                                rounded
+                                v-model="params.created"
                             >
                                 <template #append>
                                     <QIcon name="event" class="cursor-pointer">
                                         <QPopupProxy
                                             cover
-                                            transition-show="scale"
                                             transition-hide="scale"
+                                            transition-show="scale"
                                         >
                                             <QDate v-model="params.created" landscape>
                                                 <div
@@ -173,9 +185,9 @@ function setWorkers(data) {
                                                     />
                                                     <QBtn
                                                         :label="t('globals.confirm')"
+                                                        @click="save"
                                                         color="primary"
                                                         flat
-                                                        @click="save"
                                                         v-close-popup
                                                     />
                                                 </div>
@@ -188,13 +200,20 @@ function setWorkers(data) {
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('Dued')" v-model="params.dued" mask="date">
+                            <QInput
+                                :label="t('Dued')"
+                                dense
+                                mask="date"
+                                outlined
+                                rounded
+                                v-model="params.dued"
+                            >
                                 <template #append>
                                     <QIcon name="event" class="cursor-pointer">
                                         <QPopupProxy
                                             cover
-                                            transition-show="scale"
                                             transition-hide="scale"
+                                            transition-show="scale"
                                         >
                                             <QDate v-model="params.dued" landscape>
                                                 <div
@@ -208,9 +227,9 @@ function setWorkers(data) {
                                                     />
                                                     <QBtn
                                                         :label="t('globals.confirm')"
+                                                        @click="save"
                                                         color="primary"
                                                         flat
-                                                        @click="save"
                                                         v-close-popup
                                                     />
                                                 </div>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 14df6769a..23ccca945 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -113,16 +113,16 @@ function viewSummary(id) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="primary"
-                                type="submit"
+                                color="white"
+                                outline
+                                type="reset"
                             />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
                                 @click.stop="viewSummary(row.id)"
                                 color="primary"
-                                flat
                                 style="margin-top: 15px"
-                                type="reset"
+                                type="submit"
                             />
                         </template>
                     </CardList2>