From a4baa88cb4e49c384c6a686731d75b77ece45133 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 27 May 2024 14:36:50 +0200
Subject: [PATCH] fix(VnTable): refs #6825 VnInputDate

---
 src/components/VnTable/VnColumn.vue           |  2 ++
 src/components/VnTable/VnFilter.vue           | 19 +++++++++++----
 src/components/VnTable/VnTable.vue            | 23 +++++++++++++++----
 src/components/common/VnInputDate.vue         |  2 +-
 .../ExtendedList/CustomerExtendedList.vue     | 17 +++++++++++++-
 5 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index d8cd25033..c8a9a97b7 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -53,7 +53,9 @@ const defaultComponents = {
     date: {
         component: markRaw(VnInputDate),
         attrs: {
+            readonly: true,
             disable: !$props.isEditable,
+            style: 'min-width: 125px',
         },
     },
     checkbox: {
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index ba573f612..0eb2e2a19 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -40,6 +40,7 @@ const components = {
             class: 'q-px-sm q-pb-xs q-pt-none',
             dense: true,
             filled: !$props.showTitle,
+            clearable: true,
         },
         forceAttrs: {
             label: $props.showTitle ? '' : $props.column.label,
@@ -50,7 +51,12 @@ const components = {
         event: enterEvent,
         attrs: {
             dense: true,
-            class: 'q-px-md q-pb-xs q-pt-none',
+            class: 'q-px-sm q-pb-xs q-pt-none',
+            clearable: true,
+            filled: !$props.showTitle,
+        },
+        forceAttrs: {
+            label: $props.showTitle ? '' : $props.column.label,
         },
     },
     date: {
@@ -58,7 +64,12 @@ const components = {
         event: updateEvent,
         attrs: {
             dense: true,
-            class: 'q-px-md q-pb-xs q-pt-none',
+            class: 'q-px-sm q-pb-xs q-pt-none',
+            filled: !$props.showTitle,
+            style: 'min-width: 150px',
+        },
+        forceAttrs: {
+            label: $props.showTitle ? '' : $props.column.label,
         },
     },
     checkbox: {
@@ -94,8 +105,8 @@ async function addFilter(value) {
 
     let params = { [field]: value };
     if (columnFilter.value?.inWhere) {
-        if (columnFilter.value.prefix) field = columnFilter.value.prefix + '.' + field;
-        params = { filter: { where: params } };
+        if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field;
+        params = { filter: { where: { [field]: value } } };
     }
     await arrayData.addFilter({ params });
 }
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 044444c44..7488f0db9 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -130,6 +130,13 @@ function reload() {
     VnPaginateRef.value.fetch();
 }
 
+function columnName(col) {
+    const column = Object.assign({}, col, col.columnFilter);
+    let name = column.name;
+    if (column.alias) name = column.alias + '.' + name;
+    return name;
+}
+
 defineExpose({
     reload,
     redirect: redirectFn,
@@ -156,7 +163,7 @@ defineExpose({
                         :data-key="$attrs['data-key']"
                         v-for="col of splittedColumns.columns"
                         :key="col.id"
-                        v-model="params[col.columnFilter?.name ?? col.name]"
+                        v-model="params[columnName(col)]"
                     />
                 </template>
                 <slot
@@ -225,7 +232,7 @@ defineExpose({
                             :column="col"
                             :show-title="true"
                             :data-key="$attrs['data-key']"
-                            v-model="params[col.columnFilter?.name ?? col.name]"
+                            v-model="params[columnName(col)]"
                         />
                     </QTh>
                 </template>
@@ -243,7 +250,11 @@ defineExpose({
                 </template>
                 <template #body-cell="{ col, row }">
                     <!-- Columns -->
-                    <QTd class="no-margin" :class="`text-${col.align ?? 'left'}`">
+                    <QTd
+                        auto-width
+                        class="no-margin q-px-xs"
+                        :class="`text-${col.align ?? 'left'}`"
+                    >
                         <VnTableColumn
                             :column="col"
                             :row="row"
@@ -328,7 +339,11 @@ defineExpose({
                                                 <span
                                                     @click="stopEventPropagation($event)"
                                                 >
-                                                    <VnTableColumn :column="col" :row />
+                                                    <VnTableColumn
+                                                        :column="col"
+                                                        :row
+                                                        component-prop="columnField"
+                                                    />
                                                 </span>
                                             </template>
                                         </VnLv>
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index fe0866292..3c1a12f24 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -97,7 +97,7 @@ const styleAttrs = computed(() => {
                 <QIcon
                     name="close"
                     size="xs"
-                    v-if="hover && value"
+                    v-if="hover && value && !readonly"
                     @click="onDateUpdate(null)"
                 ></QIcon>
                 <QIcon name="event" class="cursor-pointer">
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index e865c7224..3edb680fa 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -75,6 +75,7 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.credit'),
         name: 'credit',
+        component: 'number',
         columnFilter: {
             inWhere: true,
         },
@@ -83,6 +84,7 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
         name: 'creditInsurance',
+        component: 'number',
         columnFilter: {
             inWhere: true,
         },
@@ -98,6 +100,10 @@ const columns = computed(() => [
                 'phone-number': prop.phone,
             }),
         },
+        component: 'number',
+        columnField: {
+            component: null,
+        },
     },
     {
         align: 'left',
@@ -105,6 +111,7 @@ const columns = computed(() => [
         name: 'mobile',
         cardVisible: true,
         columnFilter: {
+            component: 'number',
             inWhere: true,
         },
     },
@@ -113,6 +120,9 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.street'),
         name: 'street',
         create: true,
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
@@ -121,7 +131,7 @@ const columns = computed(() => [
         columnFilter: {
             component: 'select',
             inWhere: true,
-            prefix: 'c',
+            alias: 'c',
             attrs: {
                 url: 'Countries',
             },
@@ -162,6 +172,11 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.created'),
         name: 'created',
         format: ({ created }) => toDate(created),
+        component: 'date',
+        columnFilter: {
+            alias: 'c',
+            inWhere: true,
+        },
     },
     {
         align: 'left',