verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 59 Releases Wiki Activity

fix: reset state when clean filter
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Javier Segarra 2024-06-27 10:29:52 +02:00
parent 9057215ce5
commit f26e1ae96d
1 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/common/VnSelect.vue
View File

@ -145,25 +145,29 @@ function filter(val, options) {
return id == search || optionLabel.includes(search); return id == search || optionLabel.includes(search);
}); });
} }
function whereFn(val) {
async function fetchFilter(val) {
if (!useURL.value) return;
const { fields, sortBy, limit } = $props; const { fields, sortBy, limit } = $props;
let key = new RegExp(/\d/g).test(val) let key = new RegExp(/\d/g).test(val)
? optionFilter.value ?? optionValue.value ? optionFilter.value ?? optionValue.value
: optionValue.value; : optionValue.value;
const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where }; const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
const fetchOptions = { where, order: sortBy, limit }; const fetchOptions = { where, fields, order: sortBy, limit };
return fetchOptions;
}
async function fetchFilter(val) {
if (!useURL.value) return;
const fetchOptions = whereFn(val);
arrayData.store.userFilter = fetchOptions; arrayData.store.userFilter = fetchOptions;
return arrayData.fetch({ append: false, updateRouter: false }); return arrayData.fetch({ append: false, updateRouter: false });
} }
let isFiltered = false; let isFiltered = false;
watch(filterValue, (newVal, oldVal) => { watch(filterValue, (newVal, oldVal) => {
isFiltered = oldVal?.length < newVal?.length; const _isFiltered = oldVal?.length < newVal?.length;
if (!_isFiltered && isFiltered) {
arrayData.store.hasMoreData = true;
arrayData.store.userFilter = $props.where;
arrayData.store.filter.where = $props.where;
arrayData.store.data = myOptions.value;
}
isFiltered = _isFiltered;
}); });
async function filterHandler(val, update) { async function filterHandler(val, update) {
if (!$props.defaultFilter) return update(); if (!$props.defaultFilter) return update();
@ -175,7 +179,7 @@ async function filterHandler(val, update) {
} else { } else {
newOptions = filter(val, myOptionsOriginal.value); newOptions = filter(val, myOptionsOriginal.value);
} }
if (useURL.value && isFiltered) { if (useURL.value && isFiltered && arrayData.store.hasMoreData) {
arrayData.store.skip = 0; arrayData.store.skip = 0;
arrayData.store.filter.skip = 0; arrayData.store.filter.skip = 0;
arrayData.store.filter.where = { [optionFilter.value]: val, ...$props.where }; arrayData.store.filter.where = { [optionFilter.value]: val, ...$props.where };
@ -203,16 +207,7 @@ async function onScroll(scrollEv) {
if (from === 0 && index === 0) return; if (from === 0 && index === 0) return;
if (!useURL.value && !$props.fetchRef) return; if (!useURL.value && !$props.fetchRef) return;
if (direction === 'decrease') return; if (direction === 'decrease') return;
console.log(arrayData.store.data.length, myOptions.value.length);
// const restoreFilter = +arrayData.store.limit === myOptions.value.length;
if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) { if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
if (isFiltered) {
arrayData.store.userFilter = $props.where;
arrayData.store.filter.where = $props.where;
arrayData.store.hasMoreData = true;
await initSelect();
return;
}
isLoading.value = true; isLoading.value = true;
await arrayData.loadMore(); await arrayData.loadMore();
setOptions(arrayData.store.data); setOptions(arrayData.store.data);
@ -244,7 +239,6 @@ async function onScroll(scrollEv) {
virtual-scroll-slice-size="options.length" virtual-scroll-slice-size="options.length"
> >
<template v-if="isClearable" #append> <template v-if="isClearable" #append>
{{ `(${myOptions.length})` }}
<QIcon <QIcon
v-show="value" v-show="value"
name="close" name="close"
@ -253,6 +247,7 @@ async function onScroll(scrollEv) {
size="xs" size="xs"
/> />
</template> </template>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName"> <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" /> <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
</template> </template>