From 7ae098d7795b88d6c50ef8bbf60e54aebf7ee1d5 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 27 Sep 2023 13:41:50 +0200
Subject: [PATCH 1/8] ref #5417 fix filters and view

---
 src/components/ui/VnFilterPanel.vue           | 32 ++++---
 src/composables/useArrayData.js               | 20 ++--
 src/pages/Customer/CustomerPayments.vue       | 53 ++++++++---
 src/pages/Customer/CustomerPaymentsFilter.vue | 92 ++++++++++++++++++-
 4 files changed, 162 insertions(+), 35 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 68b3a7676..0e42ae2bf 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -20,6 +20,10 @@ const props = defineProps({
         required: false,
         default: null,
     },
+    showAll: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const emit = defineEmits(['refresh', 'clear']);
@@ -38,22 +42,27 @@ onMounted(() => {
 
 const isLoading = ref(false);
 async function search() {
-    const params = userParams.value;
-    for (const param in params) {
-        if (params[param] === '' || params[param] === null) {
-            delete userParams.value[param];
-            delete store.userParams[param];
+    if (props.showAll) {
+        const params = userParams.value;
+        for (const param in params) {
+            if (params[param] === '' || params[param] === null) {
+                delete userParams.value[param];
+                delete store.userParams[param];
+            }
         }
-    }
 
-    isLoading.value = true;
-    await arrayData.addFilter({ params });
-    isLoading.value = false;
+        isLoading.value = true;
+        await arrayData.addFilter({ params });
+        isLoading.value = false;
+    } else {
+        store.data = [];
+    }
 }
 
 async function reload() {
     isLoading.value = true;
-    await arrayData.fetch({ append: false });
+    if (props.showAll) await arrayData.fetch({ append: false });
+    else store.data = [];
     isLoading.value = false;
     emit('refresh');
 }
@@ -61,7 +70,8 @@ async function reload() {
 async function clearFilters() {
     userParams.value = {};
     isLoading.value = true;
-    await arrayData.applyFilter({ params: {} });
+    if (props.showAll) await arrayData.applyFilter({ params: {} });
+    else store.data = [];
     isLoading.value = false;
 
     emit('clear');
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index c7808f9a8..08e4eb001 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -38,11 +38,11 @@ export function useArrayData(key, userOptions) {
             'limit',
             'skip',
             'userParams',
-            'userFilter'
+            'userFilter',
         ];
         if (typeof userOptions === 'object') {
             for (const option in userOptions) {
-                const isEmpty = userOptions[option] == null || userOptions[option] == ''
+                const isEmpty = userOptions[option] == null || userOptions[option] == '';
                 if (isEmpty || !allowedOptions.includes(option)) continue;
 
                 if (Object.prototype.hasOwnProperty.call(store, option)) {
@@ -73,12 +73,11 @@ export function useArrayData(key, userOptions) {
 
         Object.assign(params, store.userParams);
 
-        store.isLoading = true
+        store.isLoading = true;
         const response = await axios.get(store.url, {
             signal: canceller.signal,
             params,
         });
-
         const { limit } = filter;
 
         hasMoreData.value = response.data.length === limit;
@@ -94,7 +93,7 @@ export function useArrayData(key, userOptions) {
             updateStateParams();
         }
 
-        store.isLoading = false
+        store.isLoading = false;
 
         canceller = null;
     }
@@ -135,8 +134,9 @@ export function useArrayData(key, userOptions) {
         await fetch({ append: true });
     }
 
-    async function refresh() {
-        await fetch({ append: false });
+    async function refresh(showAll = true) {
+        if (showAll) await fetch({ append: false });
+        if (!showAll) store.data = [];
     }
 
     function updateStateParams() {
@@ -153,8 +153,8 @@ export function useArrayData(key, userOptions) {
         });
     }
 
-    const totalRows = computed(() => store.data && store.data.length || 0);
-    const isLoading = computed(() => store.isLoading || false)
+    const totalRows = computed(() => (store.data && store.data.length) || 0);
+    const isLoading = computed(() => store.isLoading || false);
 
     return {
         fetch,
@@ -167,6 +167,6 @@ export function useArrayData(key, userOptions) {
         hasMoreData,
         totalRows,
         updateStateParams,
-        isLoading
+        isLoading,
     };
 }
diff --git a/src/pages/Customer/CustomerPayments.vue b/src/pages/Customer/CustomerPayments.vue
index 608aca2af..6b8430d84 100644
--- a/src/pages/Customer/CustomerPayments.vue
+++ b/src/pages/Customer/CustomerPayments.vue
@@ -110,17 +110,23 @@ function stateColor(row) {
             </div>
         </Teleport>
     </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <QDrawer
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+        :breakpoint="1600"
+    >
         <QScrollArea class="fit text-grey-8">
             <CustomerPaymentsFilter data-key="CustomerTransactions" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
+    <QPage class="column items-center q-pa-md customer-payments">
         <div class="card-list">
             <QToolbar class="q-pa-none">
                 <QToolbarTitle>{{ t('Web Payments') }}</QToolbarTitle>
                 <QBtn
-                    @click="arrayData.refresh()"
+                    @click="arrayData.refresh(false)"
                     :loading="isLoading"
                     icon="refresh"
                     color="primary"
@@ -138,7 +144,7 @@ function stateColor(row) {
                 order="created DESC"
                 :limit="20"
                 :offset="50"
-                auto-load
+                :show-all="false"
             >
                 <template #body="{ rows }">
                     <QTable
@@ -148,7 +154,7 @@ function stateColor(row) {
                         row-key="id"
                         :pagination="{ rowsPerPage: 0 }"
                         :grid="grid || $q.screen.lt.sm"
-                        class="q-mt-xs"
+                        class="q-mt-xs custom-table"
                         hide-pagination
                     >
                         <template #body-cell-actions="{ row }">
@@ -167,6 +173,13 @@ function stateColor(row) {
                                 </QBtn>
                             </QTd>
                         </template>
+                        <template #body-cell-id="{ row }">
+                            <QTd auto-width align="right">
+                                <span>
+                                    {{ row.id }}
+                                </span>
+                            </QTd>
+                        </template>
                         <template #body-cell-customerId="{ row }">
                             <QTd align="right">
                                 <span class="link">
@@ -175,6 +188,13 @@ function stateColor(row) {
                                 </span>
                             </QTd>
                         </template>
+                        <template #body-cell-customer="{ row }">
+                            <QTd auto-width align="left" :title="row.customerName">
+                                <span>
+                                    {{ row.customerName }}
+                                </span>
+                            </QTd>
+                        </template>
                         <template #body-cell-state="{ row }">
                             <QTd auto-width class="text-center">
                                 <QBadge :color="stateColor(row)">
@@ -188,9 +208,9 @@ function stateColor(row) {
                         </template>
                         <template #item="{ cols, row }">
                             <div class="q-mb-md col-12">
-                                <QCard>
+                                <QCard class="q-pa-none">
                                     <QItem class="q-pa-none items-start">
-                                        <QItemSection class="q-pa-md">
+                                        <QItemSection class="q-pa-none">
                                             <QList>
                                                 <template
                                                     v-for="col of cols"
@@ -257,10 +277,21 @@ function stateColor(row) {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
+<style lang="scss">
+.customer-payments {
+    .card-list {
+        width: 100%;
+        max-width: 60em;
+
+        .q-table--dense .q-table th:first-child {
+            padding-left: 0;
+        }
+        td {
+            max-width: 130px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
 }
 </style>
 
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index d2a9160ab..6d104765d 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -9,10 +9,14 @@ const props = defineProps({
         required: true,
     },
 });
+
+function isValidNumber(value) {
+    return /^(\d|\d+(\.|,)?\d+)$/.test(value);
+}
 </script>
 
 <template>
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" :show-all="false">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
@@ -49,9 +53,90 @@ const props = defineProps({
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
+                        <QInput
+                            :label="t('Amount')"
+                            v-model="params.amount"
+                            lazy-rules
+                            @update:model-value="
+                                (value) => {
+                                    if (value.includes(','))
+                                        params.amount = params.amount.replace(',', '.');
+                                }
+                            "
+                            :rules="[
+                                (val) =>
+                                    isValidNumber(val) || !val || 'Please type a number',
+                            ]"
+                        >
                             <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
+                                <QIcon name="euro" size="sm" />
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput v-model="params.from" :label="t('From')" mask="date">
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.from" landscape>
+                                            <div
+                                                class="row items-center justify-end q-gutter-sm"
+                                            >
+                                                <QBtn
+                                                    :label="t('globals.cancel')"
+                                                    color="primary"
+                                                    flat
+                                                    v-close-popup
+                                                />
+                                                <QBtn
+                                                    :label="t('globals.confirm')"
+                                                    color="primary"
+                                                    flat
+                                                    v-close-popup
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                    <QItemSection>
+                        <QInput v-model="params.to" :label="t('To')" mask="date">
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.to" landscape>
+                                            <div
+                                                class="row items-center justify-end q-gutter-sm"
+                                            >
+                                                <QBtn
+                                                    :label="t('globals.cancel')"
+                                                    color="primary"
+                                                    flat
+                                                    v-close-popup
+                                                />
+                                                <QBtn
+                                                    :label="t('globals.confirm')"
+                                                    color="primary"
+                                                    flat
+                                                    @click="save"
+                                                    v-close-popup
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
                             </template>
                         </QInput>
                     </QItemSection>
@@ -75,4 +160,5 @@ es:
     Order ID: ID pedido
     Customer ID: ID cliente
     Amount: Importe
+    Please type a number: Por favor, escriba un número
 </i18n>

From 98b76b2f533ac0e7566ee85b4a551cfbc7a2346a Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 29 Sep 2023 13:59:06 +0200
Subject: [PATCH 2/8] ref #5417 autoload and filters reload fixed

---
 src/components/ui/VnFilterPanel.vue           | 31 +++++++++----------
 src/components/ui/VnPaginate.vue              | 11 ++++++-
 src/composables/useArrayData.js               |  5 +--
 src/pages/Customer/CustomerPayments.vue       |  1 +
 src/pages/Customer/CustomerPaymentsFilter.vue | 14 +++++++--
 test/cypress/integration/workerList.spec.js   | 10 +++---
 6 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 0e42ae2bf..045b7c9a3 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -42,27 +42,24 @@ onMounted(() => {
 
 const isLoading = ref(false);
 async function search() {
-    if (props.showAll) {
-        const params = userParams.value;
-        for (const param in params) {
-            if (params[param] === '' || params[param] === null) {
-                delete userParams.value[param];
-                delete store.userParams[param];
-            }
+    const params = userParams.value;
+    for (const param in params) {
+        if (params[param] === '' || params[param] === null) {
+            delete userParams.value[param];
+            delete store.userParams[param];
         }
-
-        isLoading.value = true;
-        await arrayData.addFilter({ params });
-        isLoading.value = false;
-    } else {
-        store.data = [];
     }
+    isLoading.value = true;
+    await arrayData.addFilter({ params });
+    if (!props.showAll && !Object.values(params).length) store.data = [];
+    isLoading.value = false;
 }
 
 async function reload() {
     isLoading.value = true;
-    if (props.showAll) await arrayData.fetch({ append: false });
-    else store.data = [];
+
+    await arrayData.fetch({ append: false });
+    if (!props.showAll && !Object.values(userParams.value).length) store.data = [];
     isLoading.value = false;
     emit('refresh');
 }
@@ -70,8 +67,8 @@ async function reload() {
 async function clearFilters() {
     userParams.value = {};
     isLoading.value = true;
-    if (props.showAll) await arrayData.applyFilter({ params: {} });
-    else store.data = [];
+    await arrayData.applyFilter({ params: {} });
+    if (!props.showAll) store.data = [];
     isLoading.value = false;
 
     emit('clear');
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 2475f56e9..6613f08fd 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -50,6 +50,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    showAll: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
@@ -72,7 +76,12 @@ const arrayData = useArrayData(props.dataKey, {
 const store = arrayData.store;
 
 onMounted(() => {
-    if (props.autoLoad) fetch();
+    if (props.autoLoad) {
+        if (props.showAll) fetch();
+        else if (!props.showAll && Object.values(store.userParams).length) fetch();
+        else if (!props.showAll && !Object.values(store.userParams).length)
+            store.data = [];
+    }
 });
 
 watch(
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 08e4eb001..9165a99e4 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -78,6 +78,7 @@ export function useArrayData(key, userOptions) {
             signal: canceller.signal,
             params,
         });
+
         const { limit } = filter;
 
         hasMoreData.value = response.data.length === limit;
@@ -135,8 +136,8 @@ export function useArrayData(key, userOptions) {
     }
 
     async function refresh(showAll = true) {
-        if (showAll) await fetch({ append: false });
-        if (!showAll) store.data = [];
+        if (showAll || (!showAll && Object.values(store.userParams).length))
+            await fetch({ append: false });
     }
 
     function updateStateParams() {
diff --git a/src/pages/Customer/CustomerPayments.vue b/src/pages/Customer/CustomerPayments.vue
index 6b8430d84..6452a5b55 100644
--- a/src/pages/Customer/CustomerPayments.vue
+++ b/src/pages/Customer/CustomerPayments.vue
@@ -144,6 +144,7 @@ function stateColor(row) {
                 order="created DESC"
                 :limit="20"
                 :offset="50"
+                auto-load
                 :show-all="false"
             >
                 <template #body="{ rows }">
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index 6d104765d..d3ca12240 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -76,7 +76,12 @@ function isValidNumber(value) {
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput v-model="params.from" :label="t('From')" mask="date">
+                        <QInput
+                            v-model="params.from"
+                            :label="t('From')"
+                            mask="date"
+                            placeholder="yyyy/mm/dd"
+                        >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
                                     <QPopupProxy
@@ -108,7 +113,12 @@ function isValidNumber(value) {
                         </QInput>
                     </QItemSection>
                     <QItemSection>
-                        <QInput v-model="params.to" :label="t('To')" mask="date">
+                        <QInput
+                            v-model="params.to"
+                            :label="t('To')"
+                            mask="date"
+                            placeholder="yyyy/mm/dd"
+                        >
                             <template #append>
                                 <QIcon name="event" class="cursor-pointer">
                                     <QPopupProxy
diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/workerList.spec.js
index d76958367..219633263 100644
--- a/test/cypress/integration/workerList.spec.js
+++ b/test/cypress/integration/workerList.spec.js
@@ -8,18 +8,18 @@ describe('WorkerList', () => {
     it('should load workers', () => {
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
             .eq(0)
-            .should('have.text', 'victorvd');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(1)
             .should('have.text', 'JessicaJones');
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(2)
+            .eq(1)
             .should('have.text', 'BruceBanner');
+        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
+            .eq(2)
+            .should('have.text', 'CharlesXavier');
     });
 
     it('should open the worker summary', () => {
         cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(1).click();
-        cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
+        cy.get('.summaryHeader div').should('have.text', '1109 - Bruce Banner');
         cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
         cy.get('.summary .header').eq(1).should('have.text', 'User data');
     });

From 2b10278901da296575a1a1571e625448cdcbc1a8 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 2 Oct 2023 09:02:15 +0200
Subject: [PATCH 3/8] ref #5417 fix refresh method

---
 src/composables/useArrayData.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 9165a99e4..7e0a07bb3 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -136,7 +136,7 @@ export function useArrayData(key, userOptions) {
     }
 
     async function refresh(showAll = true) {
-        if (showAll || (!showAll && Object.values(store.userParams).length))
+        if (showAll || Object.values(store.userParams).length)
             await fetch({ append: false });
     }
 

From 8d28a5f82c47264e9d910f8835076e9e7dc6141a Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 2 Oct 2023 10:10:08 +0200
Subject: [PATCH 4/8] ref #5417 locales

---
 src/pages/Customer/CustomerPaymentsFilter.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index d3ca12240..7acde7f75 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -162,13 +162,19 @@ en:
         orderFk: Order
         clientFk: Customer
         amount: Amount
+        from: From
+        to: To
 es:
     params:
         orderFk: Pedido
         clientFk: Cliente
         amount: Importe
+        from: Desde
+        to: Hasta
     Order ID: ID pedido
     Customer ID: ID cliente
     Amount: Importe
     Please type a number: Por favor, escriba un número
+    From: Desde
+    To: Hasta
 </i18n>

From 0aefe13935990324420bcc5cc857da433dc7fbf2 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 11 Oct 2023 10:40:13 +0200
Subject: [PATCH 5/8] ref #5417 fix autoload and filters

---
 src/components/ui/VnFilterPanel.vue           |  7 +++++--
 src/components/ui/VnPaginate.vue              | 11 +----------
 src/composables/useArrayData.js               |  5 ++---
 src/pages/Customer/CustomerPayments.vue       |  3 +--
 src/pages/Customer/CustomerPaymentsFilter.vue |  1 -
 5 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 045b7c9a3..c7be929fb 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -51,7 +51,9 @@ async function search() {
     }
     isLoading.value = true;
     await arrayData.addFilter({ params });
-    if (!props.showAll && !Object.values(params).length) store.data = [];
+    if (!props.showAll && !Object.values(userParams.value).find((param) => param)) {
+        store.data = [];
+    }
     isLoading.value = false;
 }
 
@@ -59,7 +61,8 @@ async function reload() {
     isLoading.value = true;
 
     await arrayData.fetch({ append: false });
-    if (!props.showAll && !Object.values(userParams.value).length) store.data = [];
+    if (!props.showAll && !Object.values(userParams.value).find((param) => param))
+        store.data = [];
     isLoading.value = false;
     emit('refresh');
 }
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 6613f08fd..2475f56e9 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -50,10 +50,6 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-    showAll: {
-        type: Boolean,
-        default: true,
-    },
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
@@ -76,12 +72,7 @@ const arrayData = useArrayData(props.dataKey, {
 const store = arrayData.store;
 
 onMounted(() => {
-    if (props.autoLoad) {
-        if (props.showAll) fetch();
-        else if (!props.showAll && Object.values(store.userParams).length) fetch();
-        else if (!props.showAll && !Object.values(store.userParams).length)
-            store.data = [];
-    }
+    if (props.autoLoad) fetch();
 });
 
 watch(
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 7e0a07bb3..9aff0eaa8 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -135,9 +135,8 @@ export function useArrayData(key, userOptions) {
         await fetch({ append: true });
     }
 
-    async function refresh(showAll = true) {
-        if (showAll || Object.values(store.userParams).length)
-            await fetch({ append: false });
+    async function refresh() {
+        if (Object.values(store.userParams).length) await fetch({ append: false });
     }
 
     function updateStateParams() {
diff --git a/src/pages/Customer/CustomerPayments.vue b/src/pages/Customer/CustomerPayments.vue
index 6452a5b55..405348f1b 100644
--- a/src/pages/Customer/CustomerPayments.vue
+++ b/src/pages/Customer/CustomerPayments.vue
@@ -144,8 +144,7 @@ function stateColor(row) {
                 order="created DESC"
                 :limit="20"
                 :offset="50"
-                auto-load
-                :show-all="false"
+                :auto-load="!!$route?.query.params"
             >
                 <template #body="{ rows }">
                     <QTable
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index 7acde7f75..56fb52d79 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -140,7 +140,6 @@ function isValidNumber(value) {
                                                     :label="t('globals.confirm')"
                                                     color="primary"
                                                     flat
-                                                    @click="save"
                                                     v-close-popup
                                                 />
                                             </div>

From d9b4ee006d18dc5a5fd243dd62db08cb0a91118f Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 11 Oct 2023 10:46:34 +0200
Subject: [PATCH 6/8] ref #5417 refresh fixed

---
 src/pages/Customer/CustomerPayments.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Customer/CustomerPayments.vue b/src/pages/Customer/CustomerPayments.vue
index 405348f1b..24e5efa39 100644
--- a/src/pages/Customer/CustomerPayments.vue
+++ b/src/pages/Customer/CustomerPayments.vue
@@ -126,7 +126,7 @@ function stateColor(row) {
             <QToolbar class="q-pa-none">
                 <QToolbarTitle>{{ t('Web Payments') }}</QToolbarTitle>
                 <QBtn
-                    @click="arrayData.refresh(false)"
+                    @click="arrayData.refresh()"
                     :loading="isLoading"
                     icon="refresh"
                     color="primary"

From 6d116b9798b97d850f367be388f81cea6db50f88 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 11 Oct 2023 10:54:11 +0200
Subject: [PATCH 7/8] ref #5417 search and refresh fixed

---
 src/components/ui/VnFilterPanel.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index c7be929fb..d7ef92df9 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -51,9 +51,8 @@ async function search() {
     }
     isLoading.value = true;
     await arrayData.addFilter({ params });
-    if (!props.showAll && !Object.values(userParams.value).find((param) => param)) {
-        store.data = [];
-    }
+    if (!props.showAll && !Object.values(store.userParams).length) store.data = [];
+
     isLoading.value = false;
 }
 
@@ -61,8 +60,7 @@ async function reload() {
     isLoading.value = true;
 
     await arrayData.fetch({ append: false });
-    if (!props.showAll && !Object.values(userParams.value).find((param) => param))
-        store.data = [];
+    if (!props.showAll && !Object.values(store.userParams).length) store.data = [];
     isLoading.value = false;
     emit('refresh');
 }

From e5ffd2faadb25393d45750b346b377326abc69cf Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 11 Oct 2023 12:32:33 +0200
Subject: [PATCH 8/8] ref #5417 params fixed

---
 src/components/ui/VnFilterPanel.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index d7ef92df9..31731b8b0 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -33,16 +33,15 @@ const store = arrayData.store;
 const userParams = ref({});
 
 onMounted(() => {
-    if (props.params) userParams.value = props.params;
-    const params = store.userParams;
-    if (Object.keys(params).length > 0) {
-        userParams.value = Object.assign({}, params);
+    if (props.params) userParams.value = JSON.parse(JSON.stringify(props.params));
+    if (Object.keys(store.userParams).length > 0) {
+        userParams.value = JSON.parse(JSON.stringify(store.userParams));
     }
 });
 
 const isLoading = ref(false);
 async function search() {
-    const params = userParams.value;
+    const params = JSON.parse(JSON.stringify(userParams.value));
     for (const param in params) {
         if (params[param] === '' || params[param] === null) {
             delete userParams.value[param];
@@ -51,16 +50,17 @@ async function search() {
     }
     isLoading.value = true;
     await arrayData.addFilter({ params });
-    if (!props.showAll && !Object.values(store.userParams).length) store.data = [];
+    if (!props.showAll && !Object.values(params).length) store.data = [];
 
     isLoading.value = false;
 }
 
 async function reload() {
     isLoading.value = true;
+    const params = Object.values(userParams.value).filter((param) => param);
 
     await arrayData.fetch({ append: false });
-    if (!props.showAll && !Object.values(store.userParams).length) store.data = [];
+    if (!props.showAll && !params.length) store.data = [];
     isLoading.value = false;
     emit('refresh');
 }