diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue index 9eff3d322..adfff37e7 100644 --- a/src/components/ui/VnFilterPanel.vue +++ b/src/components/ui/VnFilterPanel.vue @@ -10,7 +10,7 @@ const { t } = useI18n(); const $props = defineProps({ modelValue: { type: Object, - default: () => {} + default: () => {}, }, dataKey: { type: String, @@ -67,9 +67,9 @@ const arrayData = useArrayData($props.dataKey, { }); const route = useRoute(); const store = arrayData.store; -const userParams = ref({}) +const userParams = ref({}); onMounted(() => { - userParams.value = $props.modelValue ?? {} + userParams.value = $props.modelValue ?? {}; emit('init', { params: userParams.value }); }); @@ -102,6 +102,7 @@ async function search(evt) { store.userParamsChanged = true; store.filter.skip = 0; store.skip = 0; + store.page = 1; const { params: newParams } = await arrayData.addFilter({ params: userParams.value }); userParams.value = newParams; @@ -114,7 +115,8 @@ async function search(evt) { async function reload() { isLoading.value = true; const params = Object.values(userParams.value).filter((param) => param); - + store.skip = 0; + store.page = 1; await arrayData.fetch({ append: false }); if (!$props.showAll && !params.length) store.data = []; isLoading.value = false; @@ -126,6 +128,7 @@ async function clearFilters() { store.userParamsChanged = true; store.filter.skip = 0; store.skip = 0; + store.page = 1; // Filtrar los params no removibles const removableFilters = Object.keys(userParams.value).filter((param) => $props.unremovableParams.includes(param) diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue index 4e048e238..eab04f04c 100644 --- a/src/components/ui/VnSearchbar.vue +++ b/src/components/ui/VnSearchbar.vue @@ -104,6 +104,7 @@ async function search() { ([key, value]) => value && (props.staticParams || []).includes(key) ); store.skip = 0; + store.page = 1; if (props.makeFetch) await arrayData.applyFilter({ diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js index f6f476f87..b40699bbb 100644 --- a/src/composables/useArrayData.js +++ b/src/composables/useArrayData.js @@ -1,4 +1,4 @@ -import { onMounted, ref, computed } from 'vue'; +import { onMounted, computed } from 'vue'; import { useRouter, useRoute } from 'vue-router'; import axios from 'axios'; import { useArrayDataStore } from 'stores/useArrayDataStore'; @@ -16,8 +16,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { const router = useRouter(); let canceller = null; - const page = ref(1); - onMounted(() => { setOptions(); store.skip = 0; @@ -87,13 +85,13 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { } Object.assign(filter, store.userFilter, exprFilter); - Object.assign(store.filter, { ...filter, skip: store.skip }); - const params = { - filter: JSON.stringify(store.filter), - }; + Object.assign(store.filter, filter); + const params = { filter: store.filter }; Object.assign(params, userParams); + params.filter.skip = store.skip; + params.filter = JSON.stringify(params.filter); store.currentFilter = params; store.isLoading = true; const response = await axios.get(store.url, { @@ -154,8 +152,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { store.userParams = userParams; store.skip = 0; store.filter.skip = 0; - page.value = 1; - + store.page = 1; await fetch({ append: false }); return { filter, params }; } @@ -187,10 +184,11 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { async function loadMore() { if (!store.hasMoreData) return; - store.skip = store.limit * page.value; - page.value += 1; + store.skip = store.limit * store.page; + store.page += 1; await fetch({ append: true }); + updateStateParams(); } async function refresh() { diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js index ebe32f8d0..2debdad7f 100644 --- a/src/stores/useArrayDataStore.js +++ b/src/stores/useArrayDataStore.js @@ -23,6 +23,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => { exprBuilder: null, searchUrl: 'params', navigate: null, + page: 1, }; }