From 50d5e38130a5e2ce6b25bb9bfaa242963da23df9 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 29 Nov 2023 16:10:44 -0300
Subject: [PATCH] visual refactors

---
 src/components/common/VnSelectFilter.vue      |  7 ++-
 src/pages/InvoiceOut/InvoiceOutGlobalForm.vue |  2 +-
 .../InvoiceOut/InvoiceOutNegativeBases.vue    | 61 +++++++++----------
 src/pages/Supplier/Card/SupplierSummary.vue   | 58 ++++++++----------
 src/pages/Supplier/SupplierList.vue           | 13 ++--
 src/pages/Travel/Card/TravelSummary.vue       | 54 +++++++---------
 src/pages/Travel/TravelList.vue               |  1 -
 7 files changed, 91 insertions(+), 105 deletions(-)

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 2a3ee6161..04f10ace9 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -89,7 +89,12 @@ const value = computed({
         ref="vnSelectRef"
     >
         <template v-if="isClearable" #append>
-            <QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
+            <QIcon
+                name="close"
+                @click.stop="value = null"
+                class="cursor-pointer"
+                size="18px"
+            />
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
             <slot :name="slotName" v-bind="slotData" />
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
index 1cb171bc0..05b642f1f 100644
--- a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
+++ b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
@@ -217,7 +217,7 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.form-container > * {
+.form-container * {
     max-width: 100%;
 }
 </style>
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index 8c0692286..96b9ac7f4 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -5,7 +5,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import invoiceOutService from 'src/services/invoiceOut.service';
 import { toCurrency } from 'src/filters';
-import { QBadge, QBtn } from 'quasar';
+import { QCheckbox, QBtn } from 'quasar';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { toDate } from 'src/filters';
 
@@ -39,57 +39,66 @@ const filter = ref({
 const tableColumnComponents = {
     company: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     country: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     clientId: {
         component: QBtn,
-        props: { flat: true, color: 'blue' },
+        props: () => ({ flat: true, color: 'blue' }),
         event: (prop) => selectCustomerId(prop.value),
     },
     client: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     amount: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     base: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     ticketId: {
         component: 'span',
-        props: {},
+        props: () => {},
         event: () => {},
     },
     active: {
-        component: 'span',
-        props: { type: 'boolean' },
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
         event: () => {},
     },
     hasToInvoice: {
-        component: 'span',
-        props: { type: 'boolean' },
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
         event: () => {},
     },
     verifiedData: {
-        component: 'span',
-        props: { type: 'boolean' },
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
         event: () => {},
     },
     comercial: {
         component: QBtn,
-        props: { flat: true, color: 'blue' },
+        props: () => ({ flat: true, color: 'blue' }),
         event: (prop) => selectWorkerId(prop.row.comercialId),
     },
 };
@@ -351,27 +360,17 @@ onMounted(async () => {
                     <component
                         :is="tableColumnComponents[props.col.name].component"
                         class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
                         @click="tableColumnComponents[props.col.name].event(props)"
                     >
-                        <span
+                        <template
                             v-if="
-                                tableColumnComponents[props.col.name].props.type !=
-                                'boolean'
+                                props.col.name !== 'active' &&
+                                props.col.name !== 'hasToInvoice' &&
+                                props.col.name !== 'verifiedData'
                             "
+                            >{{ props.value }}</template
                         >
-                            {{ props.value }}
-                        </span>
-                        <span v-else>
-                            <QBadge v-if="props.value" color="grey">
-                                <QIcon name="check" size="xs" />
-                            </QBadge>
-
-                            <QBadge v-else color="grey" outline>
-                                <QIcon name="" size="xs" />
-                            </QBadge>
-                        </span>
-
                         <CustomerDescriptorProxy
                             v-if="props.col.name === 'clientId'"
                             :id="selectedCustomerId"
diff --git a/src/pages/Supplier/Card/SupplierSummary.vue b/src/pages/Supplier/Card/SupplierSummary.vue
index 8d1322bb5..16f82c2e2 100644
--- a/src/pages/Supplier/Card/SupplierSummary.vue
+++ b/src/pages/Supplier/Card/SupplierSummary.vue
@@ -84,20 +84,31 @@ const isAdministrative = computed(() => {
                         <span> {{ supplier.note || '-' }} </span>
                     </template>
                 </VnLv>
-                <QCheckbox
-                    v-model="supplier.isSerious"
-                    :label="t('verified')"
-                    disable
-                    dense
-                    class="full-width q-mb-xs"
-                />
-                <QCheckbox
-                    v-model="supplier.isActive"
-                    :label="t('isActive')"
-                    disable
-                    dense
-                    class="full-width q-mb-xs"
-                />
+                <VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">
+                    <template #value>
+                        <span> {{ supplier.note || '-' }} </span>
+                    </template>
+                </VnLv>
+                <VnLv :label="t('verified')" class="q-mb-xs">
+                    <template #value>
+                        <QCheckbox
+                            v-model="supplier.isSerious"
+                            dense
+                            disable
+                            class="full-width q-mb-xs"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('isActive')" class="q-mb-xs">
+                    <template #value>
+                        <QCheckbox
+                            v-model="supplier.isActive"
+                            dense
+                            disable
+                            class="full-width q-mb-xs"
+                        />
+                    </template>
+                </VnLv>
             </QCard>
             <QCard class="vn-one">
                 <a v-if="isAdministrative" class="header link" :href="supplierUrl">
@@ -169,21 +180,4 @@ const isAdministrative = computed(() => {
         </template>
     </CardSummary>
 </template>
-<style lang="scss" scoped>
-.notes {
-    width: max-content;
-}
-.cardSummary .summaryBody > .q-card > .taxes {
-    border: 2px solid gray;
-    padding: 0;
-
-    > .vn-label-value {
-        text-align: right;
-        display: flex;
-        flex-direction: row;
-        margin-top: 5px;
-        justify-content: flex-end;
-        padding-right: 20px;
-    }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/pages/Supplier/SupplierList.vue b/src/pages/Supplier/SupplierList.vue
index 1d2e9126d..3a674a2bc 100644
--- a/src/pages/Supplier/SupplierList.vue
+++ b/src/pages/Supplier/SupplierList.vue
@@ -50,12 +50,11 @@ const viewSummary = (id) => {
                     <CardList2
                         v-for="row of rows"
                         :key="row.id"
-                        :showCheckbox="true"
                         :title="row.socialName"
+                        :id="row.id"
                         @click="navigate(row.id)"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                             <VnLv label="NIF/CIF" :value="row.nif" />
                             <VnLv label="Alias" :value="row.nickname" />
                             <VnLv
@@ -77,11 +76,11 @@ const viewSummary = (id) => {
                             />
                         </template>
                         <template #actions>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
-                                <QTooltip>
-                                    {{ t('components.smartCard.openSummary') }}
-                                </QTooltip>
-                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                            />
                         </template>
                     </CardList2>
                 </template>
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 9fe4b8902..08a389423 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -226,20 +226,27 @@ const openEntryDescriptor = () => {};
 
                 <VnLv label="m³" :value="travel.m3" />
                 <VnLv :label="t('travel.shared.totalEntries')" :value="travel.m3" />
-                <QCheckbox
-                    v-model="travel.isDelivered"
-                    :label="t('travel.summary.delivered')"
-                    disable
-                    dense
-                    class="full-width q-my-xs"
-                />
-                <QCheckbox
-                    v-model="travel.isReceived"
-                    :label="t('travel.summary.received')"
-                    disable
-                    dense
-                    class="full-width q-mb-xs"
-                />
+
+                <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
+                    <template #value>
+                        <QCheckbox
+                            v-model="travel.isDelivered"
+                            disable
+                            dense
+                            class="full-width q-my-xs"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
+                    <template #value>
+                        <QCheckbox
+                            v-model="travel.isReceived"
+                            disable
+                            dense
+                            class="full-width q-mb-xs"
+                        />
+                    </template>
+                </VnLv>
             </QCard>
             <QCard class="vn-two" v-if="entriesTableRows.length > 0">
                 <a class="header" :href="travelUrl + 'entry'">
@@ -285,21 +292,4 @@ const openEntryDescriptor = () => {};
         </template>
     </CardSummary>
 </template>
-<style lang="scss" scoped>
-.notes {
-    width: max-content;
-}
-.cardSummary .summaryBody > .q-card > .taxes {
-    border: 2px solid gray;
-    padding: 0;
-
-    > .vn-label-value {
-        text-align: right;
-        display: flex;
-        flex-direction: row;
-        margin-top: 5px;
-        justify-content: flex-end;
-        padding-right: 20px;
-    }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index f35db3394..2a4f312a1 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -67,7 +67,6 @@ onMounted(async () => {
                         :key="row.id"
                         :title="row.ref"
                         :id="row.id"
-                        :showCheckbox="true"
                         @click="navigateToTravelId(row.id)"
                     >
                         <template #list-items>