fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add incremental loading to manager and client lists

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

93
app/composables/useIncrementalList.ts Normal file
View File

@@ -0,0 +1,93 @@
import { computed, onBeforeUnmount, onMounted, ref, unref, watch, type ComputedRef, type Ref } from 'vue';
type ReactiveValue<T> = Ref<T> | ComputedRef<T>;
type UseIncrementalListOptions = {
pageSize?: number;
enabled?: ReactiveValue<boolean>;
resetKeys?: Array<ReactiveValue<unknown> | unknown>;
};
export function useIncrementalList<T>(
items: ReactiveValue<T[]>,
options: UseIncrementalListOptions = {},
) {
const pageSize = options.pageSize ?? 24;
const enabled = computed(() => unref(options.enabled ?? true));
const visibleCount = ref(pageSize);
const loadMoreSentinel = ref<HTMLElement | null>(null);
let observer: IntersectionObserver | null = null;
const visibleItems = computed(() => (
enabled.value
? items.value.slice(0, visibleCount.value)
: items.value
));
const canLoadMore = computed(() => (
enabled.value && visibleCount.value < items.value.length
));
const remainingCount = computed(() => Math.max(items.value.length - visibleCount.value, 0));
function loadMore() {
visibleCount.value = Math.min(visibleCount.value + pageSize, items.value.length);
}
function resetVisibleCount() {
visibleCount.value = pageSize;
}
function disconnectObserver() {
observer?.disconnect();
observer = null;
}
function connectObserver() {
disconnectObserver();
if (!canLoadMore.value || !loadMoreSentinel.value) {
return;
}
observer = new IntersectionObserver((entries) => {
if (!entries.some((entry) => entry.isIntersecting)) {
return;
}
loadMore();
}, {
rootMargin: '240px 0px',
});
observer.observe(loadMoreSentinel.value);
}
const resetSignature = computed(() => JSON.stringify([
enabled.value,
items.value.length,
...((options.resetKeys ?? []).map((entry) => unref(entry as ReactiveValue<unknown>))),
]));
watch(resetSignature, resetVisibleCount, { immediate: true });
watch(canLoadMore, () => {
if (!canLoadMore.value) {
disconnectObserver();
}
});
onMounted(() => {
watch([loadMoreSentinel, canLoadMore], connectObserver, { immediate: true });
});
onBeforeUnmount(disconnectObserver);
return {
canLoadMore,
loadMore,
loadMoreSentinel,
remainingCount,
visibleCount,
visibleItems,
};
}

61
app/pages/bonus-system/index.vue
View File

@@ -56,7 +56,8 @@ const referralLinksByReferrer = computed(() => {
const filteredBalances = computed(() => {
const query = search.value.trim().toLowerCase();
return balances.value.filter((item) => {
return balances.value
.filter((item) => {
const links = referralLinksByReferrer.value.get(item.userId);
if (!links?.length) {
@@ -82,6 +83,12 @@ const filteredBalances = computed(() => {
.join(' ')
.toLowerCase()
.includes(query);
})
.slice()
.sort((left, right) => {
const leftLatest = referralLinksByReferrer.value.get(left.userId)?.[0]?.createdAt ?? '';
const rightLatest = referralLinksByReferrer.value.get(right.userId)?.[0]?.createdAt ?? '';
return rightLatest.localeCompare(leftLatest);
});
});
@@ -107,6 +114,30 @@ const filteredWithdrawals = computed(() => {
});
});
const {
canLoadMore: canLoadMoreBalances,
loadMore: loadMoreBalances,
loadMoreSentinel: loadMoreBalancesSentinel,
remainingCount: remainingBalancesCount,
visibleItems: visibleBalances,
} = useIncrementalList(filteredBalances, {
pageSize: 24,
enabled: computed(() => activeTab.value === 'balances'),
resetKeys: [search, activeTab],
});
const {
canLoadMore: canLoadMoreWithdrawals,
loadMore: loadMoreWithdrawals,
loadMoreSentinel: loadMoreWithdrawalsSentinel,
remainingCount: remainingWithdrawalsCount,
visibleItems: visibleWithdrawals,
} = useIncrementalList(filteredWithdrawals, {
pageSize: 24,
enabled: computed(() => activeTab.value === 'withdrawals'),
resetKeys: [search, activeTab],
});
function userInitials(fullName: string) {
const parts = fullName
.trim()
@@ -150,9 +181,10 @@ function formatAmount(value: number) {
<div v-else-if="filteredBalances.length === 0" class="manager-empty-state">
Бонусных связок пока нет.
</div>
<div v-else class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
<div v-else class="space-y-4">
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
<UsersGridCard
v-for="item in filteredBalances"
v-for="item in visibleBalances"
:key="item.userId"
:to="`/bonus-system/${item.userId}`"
:full-name="item.fullName"
@@ -162,6 +194,17 @@ function formatAmount(value: number) {
:meta-value="formatAmount(item.balance)"
/>
</div>
<div
v-if="canLoadMoreBalances"
ref="loadMoreBalancesSentinel"
class="flex justify-center"
>
<button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreBalances">
Показать ещё {{ Math.min(remainingBalancesCount, 24) }}
</button>
</div>
</div>
</template>
<template v-else>
@@ -173,7 +216,7 @@ function formatAmount(value: number) {
</div>
<div v-else class="space-y-4">
<article
v-for="withdrawal in filteredWithdrawals"
v-for="withdrawal in visibleWithdrawals"
:key="withdrawal.id"
class="surface-card rounded-3xl px-5 py-5"
>
@@ -190,6 +233,16 @@ function formatAmount(value: number) {
</NuxtLink>
</div>
</article>
<div
v-if="canLoadMoreWithdrawals"
ref="loadMoreWithdrawalsSentinel"
class="flex justify-center"
>
<button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreWithdrawals">
Показать ещё {{ Math.min(remainingWithdrawalsCount, 24) }}
</button>
</div>
</div>
</template>
</section>

26
app/pages/bonus-system/referrals/new.vue
View File

@@ -27,14 +27,32 @@ const createReferralMutation = useMutation(CreateReferralDocument);
const clientOptions = computed<ManagerUserItem[]>(() => (
(usersQuery.result.value?.managerUsers ?? [])
.filter((user) => user.role === 'CLIENT')
.slice()
.sort((left, right) => left.fullName.localeCompare(right.fullName, 'ru'))
));
const referrerOptions = computed<ManagerUserItem[]>(() => (
clientOptions.value.filter((user) => user.id !== refereeUserId.value)
));
const refereeOptions = computed<ManagerUserItem[]>(() => (
clientOptions.value.filter((user) => user.id !== referrerUserId.value)
));
const referralLinks = computed<ManagerReferralLinkItem[]>(() => (
linksQuery.result.value?.managerReferralLinks ?? []
));
watch(referrerUserId, (value) => {
if (value && value === refereeUserId.value) {
refereeUserId.value = '';
}
});
watch(refereeUserId, (value) => {
if (value && value === referrerUserId.value) {
referrerUserId.value = '';
}
});
function userOptionLabel(user: ManagerUserItem) {
return [user.fullName, user.companyName || user.email]
.filter(Boolean)
@@ -96,7 +114,7 @@ async function createReferral() {
<span class="label-text">Клиент, который получает бонус</span>
<select v-model="referrerUserId" class="select manager-field w-full">
<option value="">Выберите клиента</option>
<option v-for="user in clientOptions" :key="user.id" :value="user.id">
<option v-for="user in referrerOptions" :key="user.id" :value="user.id">
{{ userOptionLabel(user) }}
</option>
</select>
@@ -106,7 +124,7 @@ async function createReferral() {
<span class="label-text">Клиент, с чьих заказов начисляется бонус</span>
<select v-model="refereeUserId" class="select manager-field w-full">
<option value="">Выберите клиента</option>
<option v-for="user in clientOptions" :key="user.id" :value="user.id">
<option v-for="user in refereeOptions" :key="user.id" :value="user.id">
{{ userOptionLabel(user) }}
</option>
</select>

24
app/pages/client-orders/index.vue
View File

@@ -143,6 +143,18 @@ const searchedOrders = computed<ManagerOrderItem[]>(() => {
const filteredOrders = computed<ManagerOrderItem[]>(() => searchedOrders.value.filter((order) => matchesFilter(order)));
const {
canLoadMore,
loadMore,
loadMoreSentinel,
remainingCount,
visibleItems: visibleOrders,
} = useIncrementalList(filteredOrders, {
pageSize: 24,
enabled: computed(() => viewMode.value === 'list'),
resetKeys: [search, statusFilter, viewMode],
});
function escapeHtml(value: string) {
return String(value)
.replaceAll('&', '&amp;')
@@ -315,7 +327,7 @@ const calendarOptions = computed(() => ({
<div v-else class="space-y-4">
<OrdersOrderSummaryCard
v-for="order in filteredOrders"
v-for="order in visibleOrders"
:key="order.id"
:to="`/client-orders/${order.id}`"
:code="order.code"
@@ -324,6 +336,16 @@ const calendarOptions = 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>

24
app/pages/clients/[id].vue
View File

@@ -46,6 +46,18 @@ const currentRequest = computed(() =>
const currentUserOrders = computed<ManagerOrderItem[]>(() => userOrdersQuery.result.value?.managerOrders ?? []);
const {
canLoadMore: canLoadMoreUserOrders,
loadMore: loadMoreUserOrders,
loadMoreSentinel: loadMoreUserOrdersSentinel,
remainingCount: remainingUserOrdersCount,
visibleItems: visibleUserOrders,
} = useIncrementalList(currentUserOrders, {
pageSize: 24,
enabled: computed(() => !isRequestMode.value),
resetKeys: [entityId, isRequestMode],
});
function userInitials(fullName: string) {
const parts = fullName
.trim()
@@ -213,7 +225,7 @@ async function rejectRequest() {
</div>
<div v-else class="mt-4 space-y-3">
<OrdersOrderSummaryCard
v-for="order in currentUserOrders"
v-for="order in visibleUserOrders"
:key="order.id"
:to="`/client-orders/${order.id}`"
:code="order.code"
@@ -222,6 +234,16 @@ async function rejectRequest() {
:total-price="order.totalPrice"
:items="order.items"
/>
<div
v-if="canLoadMoreUserOrders"
ref="loadMoreUserOrdersSentinel"
class="flex justify-center pt-2"
>
<button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreUserOrders">
Показать ещё {{ Math.min(remainingUserOrdersCount, 24) }}
</button>
</div>
</div>
</div>
</template>

56
app/pages/clients/index.vue
View File

@@ -79,6 +79,30 @@ const filteredRequests = computed(() => {
});
});
const {
canLoadMore: canLoadMoreUsers,
loadMore: loadMoreUsers,
loadMoreSentinel: loadMoreUsersSentinel,
remainingCount: remainingUsersCount,
visibleItems: visibleUsers,
} = useIncrementalList(filteredUsers, {
pageSize: 24,
enabled: computed(() => activeTab.value === 'users'),
resetKeys: [search, activeTab],
});
const {
canLoadMore: canLoadMoreRequests,
loadMore: loadMoreRequests,
loadMoreSentinel: loadMoreRequestsSentinel,
remainingCount: remainingRequestsCount,
visibleItems: visibleRequests,
} = useIncrementalList(filteredRequests, {
pageSize: 24,
enabled: computed(() => activeTab.value === 'requests'),
resetKeys: [search, activeTab],
});
function userInitials(fullName: string) {
const parts = fullName
.trim()
@@ -132,9 +156,10 @@ function userInitials(fullName: string) {
<div v-else-if="filteredUsers.length === 0" class="manager-empty-state">
Пользователи по текущему запросу не найдены.
</div>
<div v-else class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
<div v-else class="space-y-4">
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
<UsersGridCard
v-for="user in filteredUsers"
v-for="user in visibleUsers"
:key="user.id"
:to="`/clients/${user.id}`"
:full-name="user.fullName"
@@ -142,6 +167,17 @@ function userInitials(fullName: string) {
:initials="userInitials(user.fullName)"
/>
</div>
<div
v-if="canLoadMoreUsers"
ref="loadMoreUsersSentinel"
class="flex justify-center"
>
<button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreUsers">
Показать ещё {{ Math.min(remainingUsersCount, 24) }}
</button>
</div>
</div>
</template>
<template v-else>
@@ -151,9 +187,10 @@ function userInitials(fullName: string) {
<div v-else-if="filteredRequests.length === 0" class="manager-empty-state">
Заявки по текущему запросу не найдены.
</div>
<div v-else class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
<div v-else class="space-y-4">
<div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
<NuxtLink
v-for="request in filteredRequests"
v-for="request in visibleRequests"
:key="request.id"
:to="`/clients/${request.id}?tab=requests`"
class="surface-card surface-card-interactive rounded-3xl p-5"
@@ -173,6 +210,17 @@ function userInitials(fullName: string) {
</div>
</NuxtLink>
</div>
<div
v-if="canLoadMoreRequests"
ref="loadMoreRequestsSentinel"
class="flex justify-center"
>
<button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreRequests">
Показать ещё {{ Math.min(remainingRequestsCount, 24) }}
</button>
</div>
</div>
</template>
</section>
</template>

23
app/pages/orders/index.vue
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>