#6704 - ArrayData.Skip filter bug #156

Merged
jsegarra merged 6 commits from 6704_fixArrayDataSkipFilter into dev 2024-01-18 07:44:20 +00:00
5 changed files with 30 additions and 97 deletions
Showing only changes of commit a94fb6026a - Show all commits

View File

@ -64,6 +64,20 @@ onMounted(() => {
});
const isLoading = ref(false);
async function search() {
isLoading.value = true;
const params = { ...userParams.value };
store.userParamsChanged = true;
store.filter.skip = 0;
store.skip = 0;
const { params: newParams } = await arrayData.addFilter({ params });
userParams.value = newParams;
if (!props.showAll && !Object.values(params).length) store.data = [];
isLoading.value = false;
emit('search');
}
async function reload() {
isLoading.value = true;
@ -75,35 +89,14 @@ async function reload() {
emit('refresh');
}
async function search() {
isLoading.value = true;
const params = { ...userParams.value };
store.pagination = true;
store.userParamsChanged = true;
store.filter.skip = 0;
store.skip = 0;
const { params: newParams } = await arrayData.addFilter({ params });
userParams.value = newParams;
if (!props.showAll && !Object.values(params).length) store.data = [];
isLoading.value = false;
// store.pagination = false;
emit('search');
}
async function remove(key) {
userParams.value[key] = null;
await search();
emit('remove', key);
}
async function clearFilters() {
isLoading.value = true;
store.userParamsChanged = true;
store.filter.skip = 0;
store.skip = 0;
// Filtrar los params no removibles
const removableFilters = Object.keys(userParams.value).filter((param) =>
props.unremovableParams.includes(param)
props.unremovableParams.includes(param)
);
const newParams = {};
// Conservar solo los params que no son removibles
@ -137,7 +130,11 @@ const customTags = computed(() =>
tagsList.value.filter((tag) => (props.customTags || []).includes(tag.label))
);
async function remove(key) {
userParams.value[key] = null;
await search();
emit('remove', key);
}
function formatValue(value) {
if (typeof value === 'boolean') {

View File

@ -1,19 +1,10 @@
<script setup>
import {
onMounted,
ref,
watch,
onUnmounted,
onRenderTriggered,
onRenderTracked,
} from 'vue';
import { onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useArrayData } from 'composables/useArrayData';
import { useRoute } from 'vue-router';
const { t } = useI18n();
const route = useRoute();
const props = defineProps({
dataKey: {
type: String,
@ -64,7 +55,7 @@ const props = defineProps({
default: null,
},
});
const infiniteScrollRef = ref();
const emit = defineEmits(['onFetch', 'onPaginate']);
defineExpose({ fetch });
const isLoading = ref(false);
@ -89,32 +80,13 @@ onMounted(() => {
if (props.autoLoad) fetch();
});
// onRenderTracked((e)=>{
// console.log(e)
// });
// onRenderTracked((e)=>{
// console.log(e)
// });
watch(
() => [props.data, store],
() => props.data,
() => {
// store.skip = 0;
store.data = props.data;
if (store.pagination) paginate();
}
);
// watch(
// () => route.path,
// async (newId, oldId) => {
// if (newId!==oldId) {
// // arrayData.hasMoreData.value = [];
// arrayData.store.clear()
// }
// }
// );
async function fetch() {
await arrayData.fetch({ append: false });
if (!arrayData.hasMoreData.value) {
@ -129,14 +101,11 @@ async function paginate() {
if (!props.url) return;
isLoading.value = true;
// infiniteScrollRef.value.resume()
await arrayData.loadMore();
if (!arrayData.hasMoreData.value) {
// infiniteScrollRef.value.resume()
if (store.userParamsChanged) arrayData.hasMoreData.value = true;
store.userParamsChanged = false;
isLoading.value = false;
return;
}
@ -154,7 +123,6 @@ async function paginate() {
}
async function onLoad(...params) {
console.log('ENTRA');
if (!store.data) return;
const done = params[1];
@ -165,13 +133,6 @@ async function onLoad(...params) {
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)
// }
// done(false);
done(isDone);
}
</script>
@ -210,7 +171,6 @@ async function onLoad(...params) {
</div>
</div>
<QInfiniteScroll
ref="infiniteScrollRef"
v-if="store.data"
@load="onLoad"
:offset="offset"

View File

@ -98,17 +98,8 @@ export function useArrayData(key, userOptions) {
const { limit } = filter;
/*if (Object.keys(store.userParams).length > 0) {
hasMoreData.value = true;
} else if(store.userParamsChanged){
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)
// }
hasMoreData.value = response.data.length === limit;
if (append) {
if (!store.data) store.data = [];
for (const row of response.data) store.data.push(row);
@ -153,18 +144,7 @@ export function useArrayData(key, userOptions) {
store.userParams = userParams;
store.skip = 0;
store.filter.skip = 0;
await fetch({ append: false, loadMore: true });
return { filter, params };
}
async function removeFilter({ filter, params }) {
if (filter) store.userFilter = Object.assign(store.userFilter, filter);
let userParams = Object.assign({}, store.userParams, params);
userParams = sanitizerParams(userParams, store?.exprBuilder);
store.userParams = userParams;
store.skip = 0;
await loadMore({ append: false });
await fetch({ append: false });
return { filter, params };
}
@ -188,7 +168,6 @@ export function useArrayData(key, userOptions) {
async function loadMore() {
if (!hasMoreData.value) return;
console.error('loadMore', hasMoreData.value);
store.skip = store.limit * page.value;
page.value += 1;
@ -207,7 +186,7 @@ export function useArrayData(key, userOptions) {
if (store.skip) query.skip = store.skip;
if (store.userParams && Object.keys(store.userParams).length !== 0)
query.params = JSON.stringify(store.userParams);
// hasMoreData.value = true;
if (router)
router.replace({
path: route.path,
@ -222,7 +201,6 @@ export function useArrayData(key, userOptions) {
fetch,
applyFilter,
addFilter,
removeFilter,
refresh,
destroy,
loadMore,

View File

@ -30,7 +30,7 @@ const body = {
</script>
<template>
<div class="column items-center">
<VnNotes
<VnNotes style="overflow-y: scroll;"
Review

Se añade la propiedad style para que muestre el scrollbar vertical SOLO en este componente

Se añade la propiedad style para que muestre el scrollbar vertical SOLO en este componente
:add-note="$props.addNote"
:id="id"
url="claimObservations"

View File

@ -19,8 +19,6 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
order: '',
data: ref(),
isLoading: false,
loadMore: false,
pagination: false,
userParamsChanged: true,
Review

Aqui hay que poner false

Aqui hay que poner false
exprBuilder: null,
};