forked from verdnatura/salix-front
refs #6704: fix bug
This commit is contained in:
parent
9daffdfa22
commit
b58f9bee2e
|
@ -79,6 +79,7 @@ async function search() {
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
const params = { ...userParams.value };
|
const params = { ...userParams.value };
|
||||||
store.pagination = true;
|
store.pagination = true;
|
||||||
|
store.userParamsChanged = true;
|
||||||
store.filter.skip = 0;
|
store.filter.skip = 0;
|
||||||
store.skip = 0;
|
store.skip = 0;
|
||||||
const { params: newParams } = await arrayData.addFilter({ params });
|
const { params: newParams } = await arrayData.addFilter({ params });
|
||||||
|
@ -87,6 +88,8 @@ async function search() {
|
||||||
if (!props.showAll && !Object.values(params).length) store.data = [];
|
if (!props.showAll && !Object.values(params).length) store.data = [];
|
||||||
|
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
|
// store.pagination = false;
|
||||||
|
|
||||||
emit('search');
|
emit('search');
|
||||||
}
|
}
|
||||||
async function remove(key) {
|
async function remove(key) {
|
||||||
|
@ -96,6 +99,7 @@ async function remove(key) {
|
||||||
}
|
}
|
||||||
async function clearFilters() {
|
async function clearFilters() {
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
|
store.userParamsChanged = true;
|
||||||
|
|
||||||
// Filtrar los params no removibles
|
// Filtrar los params no removibles
|
||||||
const removableFilters = Object.keys(userParams.value).filter((param) =>
|
const removableFilters = Object.keys(userParams.value).filter((param) =>
|
||||||
|
|
|
@ -1,5 +1,12 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref, watch, onUnmounted } from 'vue';
|
import {
|
||||||
|
onMounted,
|
||||||
|
ref,
|
||||||
|
watch,
|
||||||
|
onUnmounted,
|
||||||
|
onRenderTriggered,
|
||||||
|
onRenderTracked,
|
||||||
|
} from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useArrayData } from 'composables/useArrayData';
|
import { useArrayData } from 'composables/useArrayData';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
@ -57,7 +64,7 @@ const props = defineProps({
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const infiniteScrollRef = ref();
|
||||||
const emit = defineEmits(['onFetch', 'onPaginate']);
|
const emit = defineEmits(['onFetch', 'onPaginate']);
|
||||||
defineExpose({ fetch });
|
defineExpose({ fetch });
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
|
@ -82,12 +89,19 @@ onMounted(() => {
|
||||||
if (props.autoLoad) fetch();
|
if (props.autoLoad) fetch();
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(()=>[props.data, store],
|
// onRenderTracked((e)=>{
|
||||||
|
// console.log(e)
|
||||||
|
// });
|
||||||
|
// onRenderTracked((e)=>{
|
||||||
|
// console.log(e)
|
||||||
|
// });
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [props.data, store],
|
||||||
() => {
|
() => {
|
||||||
// store.skip = 0;
|
// store.skip = 0;
|
||||||
store.data = props.data;
|
store.data = props.data;
|
||||||
if(store.pagination)
|
if (store.pagination) paginate();
|
||||||
paginate()
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -115,9 +129,14 @@ async function paginate() {
|
||||||
if (!props.url) return;
|
if (!props.url) return;
|
||||||
|
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
|
// infiniteScrollRef.value.resume()
|
||||||
await arrayData.loadMore();
|
await arrayData.loadMore();
|
||||||
|
|
||||||
if (!arrayData.hasMoreData.value) {
|
if (!arrayData.hasMoreData.value) {
|
||||||
|
// infiniteScrollRef.value.resume()
|
||||||
|
if (store.userParamsChanged) arrayData.hasMoreData.value = true;
|
||||||
|
store.userParamsChanged = false;
|
||||||
|
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -135,6 +154,7 @@ async function paginate() {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onLoad(...params) {
|
async function onLoad(...params) {
|
||||||
|
console.log('ENTRA');
|
||||||
if (!store.data) return;
|
if (!store.data) return;
|
||||||
|
|
||||||
const done = params[1];
|
const done = params[1];
|
||||||
|
@ -143,9 +163,16 @@ async function onLoad(...params) {
|
||||||
pagination.value.page = pagination.value.page + 1;
|
pagination.value.page = pagination.value.page + 1;
|
||||||
|
|
||||||
await paginate();
|
await paginate();
|
||||||
|
let isDone = false;
|
||||||
|
if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
|
||||||
|
// console.error('isDone', isDone);
|
||||||
|
// if(isDone){
|
||||||
|
// // infiniteScrollRef.value.trigger()
|
||||||
|
// console.error('VnPaginate', isDone, arrayData.store.pagination)
|
||||||
|
|
||||||
const endOfPages = !arrayData.hasMoreData.value;
|
// }
|
||||||
done(endOfPages);
|
// done(false);
|
||||||
|
done(isDone);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -183,6 +210,7 @@ async function onLoad(...params) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<QInfiniteScroll
|
<QInfiniteScroll
|
||||||
|
ref="infiniteScrollRef"
|
||||||
v-if="store.data"
|
v-if="store.data"
|
||||||
@load="onLoad"
|
@load="onLoad"
|
||||||
:offset="offset"
|
:offset="offset"
|
||||||
|
|
|
@ -98,11 +98,17 @@ export function useArrayData(key, userOptions) {
|
||||||
|
|
||||||
const { limit } = filter;
|
const { limit } = filter;
|
||||||
|
|
||||||
hasMoreData.value = response.data.length === limit;
|
/*if (Object.keys(store.userParams).length > 0) {
|
||||||
if (store.pagination) {
|
hasMoreData.value = true;
|
||||||
// await loadMore();
|
} else if(store.userParamsChanged){
|
||||||
store.pagination = false;
|
hasMoreData.value = false;
|
||||||
}
|
}
|
||||||
|
else */hasMoreData.value = response.data.length === limit;
|
||||||
|
// if (store.pagination) {
|
||||||
|
// console.error('Before-ArrayData', store.pagination, hasMoreData.value)
|
||||||
|
// hasMoreData.value = true;
|
||||||
|
// console.error('After-ArrayData', store.pagination, hasMoreData.value)
|
||||||
|
// }
|
||||||
if (append) {
|
if (append) {
|
||||||
if (!store.data) store.data = [];
|
if (!store.data) store.data = [];
|
||||||
for (const row of response.data) store.data.push(row);
|
for (const row of response.data) store.data.push(row);
|
||||||
|
@ -182,6 +188,7 @@ export function useArrayData(key, userOptions) {
|
||||||
|
|
||||||
async function loadMore() {
|
async function loadMore() {
|
||||||
if (!hasMoreData.value) return;
|
if (!hasMoreData.value) return;
|
||||||
|
console.error('loadMore', hasMoreData.value);
|
||||||
|
|
||||||
store.skip = store.limit * page.value;
|
store.skip = store.limit * page.value;
|
||||||
page.value += 1;
|
page.value += 1;
|
||||||
|
@ -200,7 +207,7 @@ export function useArrayData(key, userOptions) {
|
||||||
if (store.skip) query.skip = store.skip;
|
if (store.skip) query.skip = store.skip;
|
||||||
if (store.userParams && Object.keys(store.userParams).length !== 0)
|
if (store.userParams && Object.keys(store.userParams).length !== 0)
|
||||||
query.params = JSON.stringify(store.userParams);
|
query.params = JSON.stringify(store.userParams);
|
||||||
|
// hasMoreData.value = true;
|
||||||
if (router)
|
if (router)
|
||||||
router.replace({
|
router.replace({
|
||||||
path: route.path,
|
path: route.path,
|
||||||
|
|
|
@ -21,6 +21,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
loadMore: false,
|
loadMore: false,
|
||||||
pagination: false,
|
pagination: false,
|
||||||
|
userParamsChanged: true,
|
||||||
exprBuilder: null,
|
exprBuilder: null,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue