From 24fdc1ff979e2d19a4eda38a2d155867a9fb7dd0 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 3 Jan 2024 10:56:13 -0300
Subject: [PATCH 1/2] wip

---
 src/components/common/TableVisibleColumns.vue | 47 +++++++++++++-----
 src/filters/dateRange.js                      |  8 +++
 src/filters/index.js                          |  2 +
 .../CustomerExtendedListFilter.vue            | 49 ++++++++++++++++++-
 src/pages/Travel/ExtraCommunityFilter.vue     |  2 +-
 5 files changed, 94 insertions(+), 14 deletions(-)
 create mode 100644 src/filters/dateRange.js

diff --git a/src/components/common/TableVisibleColumns.vue b/src/components/common/TableVisibleColumns.vue
index 94e3bfbc7..663a7bb93 100644
--- a/src/components/common/TableVisibleColumns.vue
+++ b/src/components/common/TableVisibleColumns.vue
@@ -43,17 +43,17 @@ const areAllChecksMarked = computed(() => {
 });
 
 const setUserConfigViewData = (data) => {
-    initialUserConfigViewData.value = data;
-    if (data.length === 0) return;
-    formattedCols.value = $props.allColumns.map((col) => {
-        // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
-        const obj = {
-            name: col,
-            active: data[0].configuration[col],
-        };
-        return obj;
-    });
-    emitSavedConfig();
+    // initialUserConfigViewData.value = data;
+    // if (data.length === 0) return;
+    // formattedCols.value = $props.allColumns.map((col) => {
+    //     // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
+    //     const obj = {
+    //         name: col,
+    //         active: data[0].configuration[col],
+    //     };
+    //     return obj;
+    // });
+    // emitSavedConfig();
 };
 
 const toggleMarkAll = (val) => {
@@ -80,6 +80,22 @@ const saveConfig = async () => {
         console.error('Error saving user view config');
     }
 };
+
+const setDefaultViewConfig = (data) => {
+    initialUserConfigViewData.value = data;
+    if (data.length === 0) return;
+    formattedCols.value = $props.allColumns.map((col) => {
+        // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
+        const obj = {
+            name: col,
+            active: data[0].columns[col],
+        };
+        return obj;
+    });
+    console.log('formattedCols:: ', formattedCols);
+    emitSavedConfig();
+};
+
 const emitSavedConfig = () => {
     const filteredCols = formattedCols.value.filter((col) => col.active);
     const mappedCols = filteredCols.map((col) => col.name);
@@ -87,12 +103,19 @@ const emitSavedConfig = () => {
 };
 </script>
 <template>
-    <fetch-data
+    <!-- <fetch-data
         v-if="user"
         url="UserConfigViews"
         :filter="userConfigFilter"
         @on-fetch="(data) => setUserConfigViewData(data)"
         auto-load
+    /> -->
+    <fetch-data
+        v-if="user"
+        url="DefaultViewConfigs"
+        :filter="{ where: { tableCode: tableCode } }"
+        @on-fetch="(data) => setDefaultViewConfig(data)"
+        auto-load
     />
     <QBtn color="primary" icon="view_column">
         <QPopupProxy ref="popupProxyRef">
diff --git a/src/filters/dateRange.js b/src/filters/dateRange.js
new file mode 100644
index 000000000..4c0cfe654
--- /dev/null
+++ b/src/filters/dateRange.js
@@ -0,0 +1,8 @@
+export default function dateRange(value) {
+    const minHour = new Date(value);
+    minHour.setHours(0, 0, 0, 0);
+    const maxHour = new Date(value);
+    maxHour.setHours(23, 59, 59, 59);
+
+    return [minHour, maxHour];
+}
diff --git a/src/filters/index.js b/src/filters/index.js
index b0c441641..f0120e663 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -7,6 +7,7 @@ import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
 import toLowerCamel from './toLowerCamel';
 import dashIfEmpty from './dashIfEmpty';
+import dateRange from './dateRange';
 
 export {
     toLowerCase,
@@ -18,4 +19,5 @@ export {
     toCurrency,
     toPercentage,
     dashIfEmpty,
+    dateRange,
 };
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue b/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
index 3a9cebc96..7d54aaf0a 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
@@ -7,6 +7,7 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import { dateRange } from 'src/filters';
 
 const props = defineProps({
     dataKey: {
@@ -32,6 +33,48 @@ const sageTransactionTypesOptions = ref([]);
 
 const visibleColumnsSet = computed(() => new Set(props.visibleColumns));
 
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'created':
+            return {
+                'c.created': {
+                    between: dateRange(value),
+                },
+            };
+        case 'id':
+        case 'name':
+        case 'socialName':
+        case 'fi':
+        case 'credit':
+        case 'creditInsurance':
+        case 'phone':
+        case 'mobile':
+        case 'street':
+        case 'city':
+        case 'postcode':
+        case 'email':
+        case 'isActive':
+        case 'isVies':
+        case 'isTaxDataChecked':
+        case 'isEqualizated':
+        case 'isFreezed':
+        case 'hasToInvoice':
+        case 'hasToInvoiceByAddress':
+        case 'isToBeMailed':
+        case 'hasSepaVnl':
+        case 'hasLcr':
+        case 'hasCoreVnl':
+        case 'countryFk':
+        case 'provinceFk':
+        case 'salesPersonFk':
+        case 'businessTypeFk':
+        case 'payMethodFk':
+        case 'sageTaxTypeFk':
+        case 'sageTransactionTypeFk':
+            return { [`c.${param}`]: value };
+    }
+};
+
 const shouldRenderColumn = (colName) => {
     return visibleColumnsSet.value.has(colName);
 };
@@ -88,7 +131,11 @@ const shouldRenderColumn = (colName) => {
         auto-load
         @on-fetch="(data) => (sageTransactionTypesOptions = data)"
     />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        :expr-builder="exprBuilder"
+    >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index 73aa13ccf..260b0fb42 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';

From 142bac7a432de87dc8f809e17ae3f9efa56b7aa2 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 3 Jan 2024 13:49:08 -0300
Subject: [PATCH 2/2] agregar data por default en tabla extended list

---
 src/components/common/TableVisibleColumns.vue | 142 +++++++++++-------
 1 file changed, 84 insertions(+), 58 deletions(-)

diff --git a/src/components/common/TableVisibleColumns.vue b/src/components/common/TableVisibleColumns.vue
index 663a7bb93..5e077433a 100644
--- a/src/components/common/TableVisibleColumns.vue
+++ b/src/components/common/TableVisibleColumns.vue
@@ -1,8 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref, computed } from 'vue';
-
-import FetchData from 'components/FetchData.vue';
+import { ref, computed, onMounted } from 'vue';
 
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
@@ -29,12 +27,6 @@ const { t } = useI18n();
 const popupProxyRef = ref(null);
 const user = state.getUser();
 const initialUserConfigViewData = ref(null);
-const userConfigFilter = {
-    where: {
-        tableCode: $props.tableCode,
-        userFk: user.id,
-    },
-};
 
 const formattedCols = ref([]);
 
@@ -43,37 +35,96 @@ const areAllChecksMarked = computed(() => {
 });
 
 const setUserConfigViewData = (data) => {
-    // initialUserConfigViewData.value = data;
-    // if (data.length === 0) return;
-    // formattedCols.value = $props.allColumns.map((col) => {
-    //     // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
-    //     const obj = {
-    //         name: col,
-    //         active: data[0].configuration[col],
-    //     };
-    //     return obj;
-    // });
-    // emitSavedConfig();
+    if (!data) return;
+    formattedCols.value = $props.allColumns.map((col) => {
+        // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
+        const obj = {
+            name: col,
+            active: data[col],
+        };
+        return obj;
+    });
+    emitSavedConfig();
 };
 
 const toggleMarkAll = (val) => {
     formattedCols.value.forEach((col) => (col.active = val));
 };
 
-const saveConfig = async () => {
+const fetchViewConfigData = async () => {
     try {
-        const data = {
-            id: initialUserConfigViewData.value[0].id,
-            userFk: 9,
-            tableCode: $props.tableCode,
-            configuration: {},
+        const userConfigFilter = {
+            where: {
+                tableCode: $props.tableCode,
+                userFk: user.id,
+            },
         };
 
-        formattedCols.value.forEach((col) => {
-            data.configuration[col.name] = col.active;
+        const userViewConfigResponse = await axios.get('UserConfigViews', {
+            params: { filter: userConfigFilter },
         });
 
-        await axios.patch('UserConfigViews', data);
+        if (userViewConfigResponse.data && userViewConfigResponse.data.length > 0) {
+            initialUserConfigViewData.value = userViewConfigResponse.data[0];
+            setUserConfigViewData(userViewConfigResponse.data[0].configuration);
+            return;
+        }
+
+        const defaultConfigFilter = {
+            where: {
+                tableCode: $props.tableCode,
+            },
+        };
+
+        const defaultViewConfigResponse = await axios.get('DefaultViewConfigs', {
+            params: { filter: defaultConfigFilter },
+        });
+
+        if (defaultViewConfigResponse.data && defaultViewConfigResponse.data.length > 0) {
+            setUserConfigViewData(defaultViewConfigResponse.data[0].columns);
+            return;
+        }
+    } catch (err) {
+        console.err('Error fetching config view data');
+    }
+};
+
+const saveConfig = async () => {
+    try {
+        const params = {};
+        const configuration = {};
+
+        formattedCols.value.forEach((col) => {
+            configuration[col.name] = col.active;
+        });
+
+        // Si existe una view config del usuario hacemos un update si no la creamos
+        if (initialUserConfigViewData.value) {
+            params.updates = [
+                {
+                    data: {
+                        configuration: configuration,
+                    },
+                    where: {
+                        id: initialUserConfigViewData.value.id,
+                    },
+                },
+            ];
+        } else {
+            params.creates = [
+                {
+                    userFk: user.value.id,
+                    tableCode: $props.tableCode,
+                    tableConfig: $props.tableCode,
+                    configuration: configuration,
+                },
+            ];
+        }
+
+        const response = await axios.post('UserConfigViews/crud', params);
+        if (response.data && response.data[0]) {
+            initialUserConfigViewData.value = response.data[0];
+        }
         emitSavedConfig();
         popupProxyRef.value.hide();
     } catch (err) {
@@ -81,42 +132,17 @@ const saveConfig = async () => {
     }
 };
 
-const setDefaultViewConfig = (data) => {
-    initialUserConfigViewData.value = data;
-    if (data.length === 0) return;
-    formattedCols.value = $props.allColumns.map((col) => {
-        // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
-        const obj = {
-            name: col,
-            active: data[0].columns[col],
-        };
-        return obj;
-    });
-    console.log('formattedCols:: ', formattedCols);
-    emitSavedConfig();
-};
-
 const emitSavedConfig = () => {
     const filteredCols = formattedCols.value.filter((col) => col.active);
     const mappedCols = filteredCols.map((col) => col.name);
     emit('onConfigSaved', mappedCols);
 };
+
+onMounted(async () => {
+    await fetchViewConfigData();
+});
 </script>
 <template>
-    <!-- <fetch-data
-        v-if="user"
-        url="UserConfigViews"
-        :filter="userConfigFilter"
-        @on-fetch="(data) => setUserConfigViewData(data)"
-        auto-load
-    /> -->
-    <fetch-data
-        v-if="user"
-        url="DefaultViewConfigs"
-        :filter="{ where: { tableCode: tableCode } }"
-        @on-fetch="(data) => setDefaultViewConfig(data)"
-        auto-load
-    />
     <QBtn color="primary" icon="view_column">
         <QPopupProxy ref="popupProxyRef">
             <QCard class="column q-pa-md">