src/components/ui/VnFilterPanel.vue

@@ -42,27 +42,24 @@ onMounted(() => {
 
 const isLoading = ref(false);
 async function search() {
-    if (props.showAll) {
+    const params = userParams.value;
-        const params = userParams.value;
+    for (const param in params) {
-        for (const param in params) {
+        if (params[param] === '' || params[param] === null) {
-            if (params[param] === '' || params[param] === null) {
+            delete userParams.value[param];
-                delete userParams.value[param];
+            delete store.userParams[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: {} });
+    await arrayData.applyFilter({ params: {} });
-    else store.data = [];
+    if (!props.showAll) store.data = [];
     isLoading.value = false;
 
     emit('clear');

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(

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 || (!showAll && Object.values(store.userParams).length))
-        if (!showAll) store.data = [];
+            await fetch({ append: false });
     }
 
     function updateStateParams() {

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 }">

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

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');
     });