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

fix: hasMoreData

This commit is contained in:
Alex Moreno 2024-04-19 14:39:20 +02:00
parent dc4de8de7f
commit c638209f0e
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ui/VnPaginate.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { onMounted, ref, watch } from 'vue'; import { onMounted, ref, watch, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
@ -77,7 +77,7 @@ const arrayData = useArrayData(props.dataKey, {
userParams: props.userParams, userParams: props.userParams,
exprBuilder: props.exprBuilder, exprBuilder: props.exprBuilder,
}); });
const hasMoreData = ref(); const hasMoreData = computed(() => arrayData.hasMoreData);
const store = arrayData.store; const store = arrayData.store;
onMounted(() => { onMounted(() => {
@ -97,7 +97,7 @@ const addFilter = async (filter, params) => {
async function fetch() { async function fetch() {
await arrayData.fetch({ append: false }); await arrayData.fetch({ append: false });
if (!arrayData.hasMoreData.value) { if (!hasMoreData.value) {
isLoading.value = false; isLoading.value = false;
} }
emit('onFetch', store.data); emit('onFetch', store.data);
@ -110,8 +110,8 @@ async function paginate() {
isLoading.value = true; isLoading.value = true;
await arrayData.loadMore(); await arrayData.loadMore();
if (!arrayData.hasMoreData.value) { if (!hasMoreData.value) {
if (store.userParamsChanged) arrayData.hasMoreData.value = true; if (store.userParamsChanged) hasMoreData.value = true;
store.userParamsChanged = false; store.userParamsChanged = false;
endPagination(); endPagination();
return; return;
@ -142,7 +142,7 @@ async function onLoad(index, done) {
await paginate(); await paginate();
let isDone = false; let isDone = false;
if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value; if (store.userParamsChanged) isDone = !hasMoreData.value;
done(isDone); done(isDone);
} }
@ -182,12 +182,12 @@ defineExpose({ fetch, addFilter });
</QCard> </QCard>
</div> </div>
</div> </div>
<QInfiniteScroll <QInfiniteScroll
v-if="store.data" v-if="store.data"
@load="onLoad" @load="onLoad"
:offset="offset" :offset="offset"
:disable="disableInfiniteScroll || !arrayData.hasMoreData" :disable="disableInfiniteScroll || !hasMoreData.value"
class="full-width" class="full-width"
v-bind="$attrs" v-bind="$attrs"
> >
@ -196,7 +196,10 @@ defineExpose({ fetch, addFilter });
<QSpinner color="orange" size="md" /> <QSpinner color="orange" size="md" />
</div> </div>
</QInfiniteScroll> </QInfiniteScroll>
<div v-if="!isLoading && hasMoreData" class="w-full flex justify-center q-mt-md"> <div
v-if="!isLoading && hasMoreData.value"
class="w-full flex justify-center q-mt-md"
>
<QBtn color="primary" :label="t('Load more data')" @click="paginate()" /> <QBtn color="primary" :label="t('Load more data')" @click="paginate()" />
</div> </div>
</template> </template>

3
src/composables/useArrayData.js
View File

@ -97,7 +97,6 @@ export function useArrayData(key, userOptions) {
const { limit } = filter; const { limit } = filter;
hasMoreData.value = limit && response.data.length >= limit; hasMoreData.value = limit && response.data.length >= limit;
store.hasMoreData = hasMoreData.value;
if (append) { if (append) {
if (!store.data) store.data = []; if (!store.data) store.data = [];
@ -169,7 +168,7 @@ export function useArrayData(key, userOptions) {
} }
async function loadMore() { async function loadMore() {
if (!hasMoreData.value && !store.hasMoreData) return; if (!hasMoreData.value) return;
store.skip = store.limit * page.value; store.skip = store.limit * page.value;
page.value += 1; page.value += 1;