#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); 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() { async function reload() {
isLoading.value = true; isLoading.value = true;
@ -75,35 +89,14 @@ async function reload() {
emit('refresh'); 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() { async function clearFilters() {
isLoading.value = true; isLoading.value = true;
store.userParamsChanged = true; store.userParamsChanged = true;
store.filter.skip = 0;
store.skip = 0;
// 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) =>
props.unremovableParams.includes(param) props.unremovableParams.includes(param)
); );
const newParams = {}; const newParams = {};
// Conservar solo los params que no son removibles // Conservar solo los params que no son removibles
@ -137,7 +130,11 @@ const customTags = computed(() =>
tagsList.value.filter((tag) => (props.customTags || []).includes(tag.label)) 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) { function formatValue(value) {
if (typeof value === 'boolean') { if (typeof value === 'boolean') {

View File

@ -1,19 +1,10 @@
<script setup> <script setup>
import { import { onMounted, ref, watch } from 'vue';
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';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute();
const props = defineProps({ const props = defineProps({
dataKey: { dataKey: {
type: String, type: String,
@ -64,7 +55,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);
@ -89,32 +80,13 @@ onMounted(() => {
if (props.autoLoad) fetch(); if (props.autoLoad) fetch();
}); });
// onRenderTracked((e)=>{
// console.log(e)
// });
// onRenderTracked((e)=>{
// console.log(e)
// });
watch( watch(
() => [props.data, store], () => props.data,
() => { () => {
// store.skip = 0;
store.data = props.data; 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() { async function fetch() {
await arrayData.fetch({ append: false }); await arrayData.fetch({ append: false });
if (!arrayData.hasMoreData.value) { if (!arrayData.hasMoreData.value) {
@ -129,14 +101,11 @@ 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; if (store.userParamsChanged) arrayData.hasMoreData.value = true;
store.userParamsChanged = false; store.userParamsChanged = false;
isLoading.value = false; isLoading.value = false;
return; return;
} }
@ -154,7 +123,6 @@ 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];
@ -165,13 +133,6 @@ async function onLoad(...params) {
await paginate(); await paginate();
let isDone = false; let isDone = false;
if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value; 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); done(isDone);
} }
</script> </script>
@ -210,7 +171,6 @@ 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"

View File

@ -98,17 +98,8 @@ export function useArrayData(key, userOptions) {
const { limit } = filter; const { limit } = filter;
/*if (Object.keys(store.userParams).length > 0) { hasMoreData.value = response.data.length === limit;
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)
// }
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);
@ -153,18 +144,7 @@ export function useArrayData(key, userOptions) {
store.userParams = userParams; store.userParams = userParams;
store.skip = 0; store.skip = 0;
store.filter.skip = 0; store.filter.skip = 0;
await fetch({ append: false, loadMore: true }); await fetch({ append: false });
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 });
return { filter, params }; return { filter, params };
} }
@ -188,7 +168,6 @@ 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;
@ -207,7 +186,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,
@ -222,7 +201,6 @@ export function useArrayData(key, userOptions) {
fetch, fetch,
applyFilter, applyFilter,
addFilter, addFilter,
removeFilter,
refresh, refresh,
destroy, destroy,
loadMore, loadMore,

View File

@ -30,7 +30,7 @@ const body = {
</script> </script>
<template> <template>
<div class="column items-center"> <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" :add-note="$props.addNote"
:id="id" :id="id"
url="claimObservations" url="claimObservations"

View File

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

Aqui hay que poner false

Aqui hay que poner false
exprBuilder: null, exprBuilder: null,
}; };