From 89e1b3581a4c668e72fd82691adf86e5a06c1363 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 23 May 2024 13:50:44 +0200
Subject: [PATCH] feat(VnTable): refs #6825 use checkbox if startsWith 'is' or
 'has'

---
 src/components/VnTable/VnColumn.vue           |  5 ++++
 src/components/VnTable/VnFilter.vue           | 30 +++++++++----------
 src/components/VnTable/VnTable.vue            |  4 +--
 .../ExtendedList/CustomerExtendedList.vue     | 11 -------
 4 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 416748ae8..d8cd25033 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -99,6 +99,11 @@ const col = computed(() => {
             ...specific.forceAttrs,
         };
     }
+    if (
+        (newColumn.name.startsWith('is') || newColumn.name.startsWith('has')) &&
+        !newColumn.component
+    )
+        newColumn.component = 'checkbox';
     if ($props.default && !newColumn.component) newColumn.component = $props.default;
 
     return newColumn;
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index 871a82318..000683670 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -66,7 +66,7 @@ const components = {
         event: updateEvent,
         attrs: {
             dense: true,
-            class: 'q-pa-sm q-mt-md',
+            class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs',
             'toggle-indeterminate': true,
         },
         forceAttrs: {
@@ -89,7 +89,7 @@ const components = {
 
 async function addFilter(value) {
     if (value && typeof value === 'object') value = model.value;
-    value = value == '' ? null : value;
+    value = value === '' ? null : value;
     let field = columnFilter.value?.name ?? $props.column.name;
     const toFilter = { [field]: value };
 
@@ -97,9 +97,9 @@ async function addFilter(value) {
 }
 
 function alignRow() {
-    if ($props.column.align == 'left') return 'justify-start';
-    if ($props.column.align == 'right') return 'justify-end';
-    return 'justify-center';
+    if ($props.column.align == 'left') return 'justify-start items-start';
+    if ($props.column.align == 'right') return 'justify-end items-end';
+    return 'flex-center';
 }
 </script>
 <template>
@@ -112,19 +112,17 @@ function alignRow() {
     </div>
     <div
         v-if="columnFilter !== false && column.name != 'tableActions'"
-        class="row no-wrap"
+        class="full-width"
         :class="alignRow()"
     >
-        <span :class="$props.column.component != 'checkbox' ? 'full-width' : alignRow()">
-            <VnTableColumn
-                :column="$props.column"
-                :row="{}"
-                default="input"
-                v-model="model"
-                :components="components"
-                component-prop="columnFilter"
-            />
-        </span>
+        <VnTableColumn
+            :column="$props.column"
+            :row="{}"
+            default="input"
+            v-model="model"
+            :components="components"
+            component-prop="columnFilter"
+        />
     </div>
     <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
 </template>
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index e85a3692e..703b24c48 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -479,7 +479,7 @@ defineExpose({
 .vnTable {
     thead tr th {
         position: sticky;
-        z-index: 1;
+        z-index: 2;
     }
     thead tr:first-child th {
         top: 0;
@@ -505,10 +505,10 @@ defineExpose({
     .sticky {
         position: sticky;
         right: 0;
-        z-index: 1;
     }
     td.sticky {
         background-color: var(--q-dark);
+        z-index: 1;
     }
 }
 
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index f03868789..f857abf4c 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -177,25 +177,21 @@ const columns = computed(() => [
             condition: (value) => !value,
             icon: 'vn:disabled',
         },
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isVies'),
         name: 'isVies',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
         name: 'isTaxDataChecked',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
         name: 'isEqualizated',
-        component: 'checkbox',
         created: true,
     },
     {
@@ -207,43 +203,36 @@ const columns = computed(() => [
             condition: (value) => value,
             icon: 'vn:frozen',
         },
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
         name: 'hasToInvoice',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
         name: 'hasToInvoiceByAddress',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
         name: 'isToBeMailed',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
         name: 'hasLcr',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
         name: 'hasCoreVnl',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
         name: 'hasSepaVnl',
-        component: 'checkbox',
     },
     {
         align: 'right',