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