Add incremental loading to manager and client lists

This commit is contained in:
Ruslan Bakiev
2026-04-06 11:49:38 +07:00
parent 7c5d0967a0
commit d119a76ae6
7 changed files with 348 additions and 71 deletions

View File

@@ -45,6 +45,17 @@ const filteredOrders = computed(() => {
return matchSearch && matchesFilter(order);
});
});
const {
canLoadMore,
loadMore,
loadMoreSentinel,
remainingCount,
visibleItems: visibleOrders,
} = useIncrementalList(filteredOrders, {
pageSize: 24,
resetKeys: [search, statusFilter],
});
</script>
<template>
@@ -76,7 +87,7 @@ const filteredOrders = computed(() => {
<div v-else class="space-y-3">
<OrdersOrderSummaryCard
v-for="order in filteredOrders"
v-for="order in visibleOrders"
:key="order.id"
:to="`/orders/${order.id}`"
:code="order.code"
@@ -85,6 +96,16 @@ const filteredOrders = computed(() => {
:total-price="order.totalPrice"
:items="order.items"
/>
<div
v-if="canLoadMore"
ref="loadMoreSentinel"
class="flex justify-center pt-2"
>
<button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMore">
Показать ещё {{ Math.min(remainingCount, 24) }}
</button>
</div>
</div>
</section>
</template>