From 8fbaf43b8280f2cb4b8df9be371d1b547aea4a98 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 5 Jul 2024 12:04:43 +0200
Subject: [PATCH] fix: refs #6943 drop padding-left checkbox & create wrap mode
 vnRow

---
 src/components/ui/VnRow.vue                 | 22 +++--
 src/pages/Customer/Card/CustomerSummary.vue | 91 +++++++++------------
 src/pages/Worker/Card/WorkerSummary.vue     | 43 +++++-----
 3 files changed, 74 insertions(+), 82 deletions(-)

diff --git a/src/components/ui/VnRow.vue b/src/components/ui/VnRow.vue
index a2f89ff3f..642adedf1 100644
--- a/src/components/ui/VnRow.vue
+++ b/src/components/ui/VnRow.vue
@@ -1,18 +1,28 @@
+<script setup>
+defineProps({ wrap: { type: Boolean, default: false } });
+</script>
 <template>
-    <div class="vn-row q-gutter-md q-mb-md">
-        <slot></slot>
+    <div class="vn-row q-gutter-md q-mb-md" :class="{ wrap }">
+        <slot />
     </div>
 </template>
-<style lang="scss" scopped>
+<style lang="scss" scoped>
 .vn-row {
     display: flex;
-    > * {
-        flex: 1;
+    &.wrap {
+        flex-wrap: wrap;
+    }
+    &:not(.wrap) {
+        > :slotted(*) {
+            flex: 1;
+        }
     }
 }
 @media screen and (max-width: 800px) {
     .vn-row {
-        flex-direction: column;
+        &:not(.wrap) {
+            flex-direction: column;
+        }
     }
 }
 </style>
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 86de5217e..15bf19b48 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -9,7 +9,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import CustomerSummaryTable from 'src/pages/Customer/components/CustomerSummaryTable.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
-
+import VnRow from 'src/components/ui/VnRow.vue';
 const route = useRoute();
 const { t } = useI18n();
 
@@ -131,41 +131,33 @@ const creditWarning = computed(() => {
                     :url="`#/customer/${entityId}/fiscal-data`"
                     :text="t('customer.summary.fiscalData')"
                 />
-                <QCheckbox
-                    :label="t('customer.summary.isEqualizated')"
-                    v-model="entity.isEqualizated"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.isActive')"
-                    v-model="entity.isActive"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.invoiceByAddress')"
-                    v-model="entity.hasToInvoiceByAddress"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.verifiedData')"
-                    v-model="entity.isTaxDataChecked"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.hasToInvoice')"
-                    v-model="entity.hasToInvoice"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.notifyByEmail')"
-                    v-model="entity.isToBeMailed"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.vies')"
-                    v-model="entity.isVies"
-                    :disable="true"
-                />
+                <VnRow>
+                    <VnLv
+                        :label="t('customer.summary.isEqualizated')"
+                        :value="entity.isEqualizated"
+                    />
+                    <VnLv
+                        :label="t('customer.summary.isActive')"
+                        :value="entity.isActive"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnLv
+                        :label="t('customer.summary.verifiedData')"
+                        :value="entity.isTaxDataChecked"
+                    />
+                    <VnLv
+                        :label="t('customer.summary.hasToInvoice')"
+                        :value="entity.hasToInvoice"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnLv
+                        :label="t('customer.summary.notifyByEmail')"
+                        :value="entity.isToBeMailed"
+                    />
+                    <VnLv :label="t('customer.summary.vies')" :value="entity.isVies" />
+                </VnRow>
             </QCard>
             <QCard class="vn-one">
                 <VnTitle
@@ -178,23 +170,18 @@ const creditWarning = computed(() => {
                 />
                 <VnLv :label="t('customer.summary.bankAccount')" :value="entity.iban" />
                 <VnLv :label="t('customer.summary.dueDay')" :value="entity.dueDay" />
-                <QCheckbox
-                    style="padding: 0"
-                    :label="t('customer.summary.hasLcr')"
-                    v-model="entity.hasLcr"
-                    :disable="true"
-                />
-                <QCheckbox
-                    :label="t('customer.summary.hasCoreVnl')"
-                    v-model="entity.hasCoreVnl"
-                    :disable="true"
-                />
+                <VnRow class="q-mt-sm" wrap>
+                    <VnLv :label="t('customer.summary.hasLcr')" :value="entity.hasLcr" />
+                    <VnLv
+                        :label="t('customer.summary.hasCoreVnl')"
+                        :value="entity.hasCoreVnl"
+                    />
 
-                <QCheckbox
-                    :label="t('customer.summary.hasB2BVnl')"
-                    v-model="entity.hasSepaVnl"
-                    :disable="true"
-                />
+                    <VnLv
+                        :label="t('customer.summary.hasB2BVnl')"
+                        :value="entity.hasSepaVnl"
+                    />
+                </VnRow>
             </QCard>
             <QCard class="vn-one" v-if="entity.defaultAddress">
                 <VnTitle
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index d8bee4714..11c36c22d 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -10,6 +10,7 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import RoleDescriptorProxy from 'src/pages/Account/Role/Card/RoleDescriptorProxy.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -133,30 +134,24 @@ const filter = {
                 />
                 <VnLv :label="t('worker.summary.fi')" :value="worker.fi" />
                 <VnLv :label="t('worker.summary.birth')" :value="toDate(worker.birth)" />
-                <QCheckbox
-                    class="padding-none"
-                    :label="t('worker.summary.isFreelance')"
-                    v-model="worker.isFreelance"
-                    :disable="true"
-                />
-                <QCheckbox
-                    class="padding-none"
-                    :label="t('worker.summary.isSsDiscounted')"
-                    v-model="worker.isSsDiscounted"
-                    :disable="true"
-                />
-                <QCheckbox
-                    class="padding-none"
-                    :label="t('worker.summary.hasMachineryAuthorized')"
-                    v-model="worker.hasMachineryAuthorized"
-                    :disable="true"
-                />
-                <QCheckbox
-                    class="padding-none"
-                    :label="t('worker.summary.isDisable')"
-                    v-model="worker.isDisable"
-                    :disable="true"
-                />
+                <VnRow class="q-mt-sm" wrap>
+                    <VnLv
+                        :label="t('worker.summary.isFreelance')"
+                        :value="worker.isFreelance"
+                    />
+                    <VnLv
+                        :label="t('worker.summary.isSsDiscounted')"
+                        :value="worker.isSsDiscounted"
+                    />
+                    <VnLv
+                        :label="t('worker.summary.hasMachineryAuthorized')"
+                        :value="worker.hasMachineryAuthorized"
+                    />
+                    <VnLv
+                        :label="t('worker.summary.isDisable')"
+                        :value="worker.isDisable"
+                    />
+                </VnRow>
             </QCard>
             <QCard class="vn-one">
                 <VnTitle :text="t('worker.summary.userData')" />