Add incremental loading to manager and client lists

2026-04-06 11:49:38 +07:00
parent 7c5d0967a0
commit d119a76ae6
7 changed files with 348 additions and 71 deletions
--- a/app/composables/useIncrementalList.ts
+++ b/app/composables/useIncrementalList.ts
@@ -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,
+  };
+}
--- a/app/pages/bonus-system/index.vue
+++ b/app/pages/bonus-system/index.vue
@@ -56,33 +56,40 @@ const referralLinksByReferrer = computed(() => {
 const filteredBalances = computed(() => {
  const query = search.value.trim().toLowerCase();

-  return balances.value.filter((item) => {
-    const links = referralLinksByReferrer.value.get(item.userId);
+  return balances.value
+    .filter((item) => {
+      const links = referralLinksByReferrer.value.get(item.userId);

-    if (!links?.length) {
-      return false;
-    }
+      if (!links?.length) {
+        return false;
+      }

-    if (!query) {
-      return true;
-    }
+      if (!query) {
+        return true;
+      }

-    return [
-      item.fullName,
-      item.email,
-      item.companyName || '',
-      String(item.balance),
-      ...links.flatMap((link) => [
-        link.refereeName,
-        link.refereeEmail,
-        link.refereeCompanyName || '',
-        String(link.bonusPercent),
-      ]),
-    ]
-      .join(' ')
-      .toLowerCase()
-      .includes(query);
-  });
+      return [
+        item.fullName,
+        item.email,
+        item.companyName || '',
+        String(item.balance),
+        ...links.flatMap((link) => [
+          link.refereeName,
+          link.refereeEmail,
+          link.refereeCompanyName || '',
+          String(link.bonusPercent),
+        ]),
+      ]
+        .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);
+    });
 });

 const filteredWithdrawals = computed(() => {
@@ -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,17 +181,29 @@ 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">
-        <UsersGridCard
-          v-for="item in filteredBalances"
-          :key="item.userId"
-          :to="`/bonus-system/${item.userId}`"
-          :full-name="item.fullName"
-          :avatar-src="messengerConnectionAvatarSrc(usersById.get(item.userId)?.telegramConnection)"
-          :initials="userInitials(item.fullName)"
-          meta-label="Доступный бонус"
-          :meta-value="formatAmount(item.balance)"
-        />
+      <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 visibleBalances"
+            :key="item.userId"
+            :to="`/bonus-system/${item.userId}`"
+            :full-name="item.fullName"
+            :avatar-src="messengerConnectionAvatarSrc(usersById.get(item.userId)?.telegramConnection)"
+            :initials="userInitials(item.fullName)"
+            meta-label="Доступный бонус"
+            :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>

@@ -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>
--- a/app/pages/bonus-system/referrals/new.vue
+++ b/app/pages/bonus-system/referrals/new.vue
@@ -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>
--- a/app/pages/client-orders/index.vue
+++ b/app/pages/client-orders/index.vue
@@ -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>
--- a/app/pages/clients/[id].vue
+++ b/app/pages/clients/[id].vue
@@ -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>
--- a/app/pages/clients/index.vue
+++ b/app/pages/clients/index.vue
@@ -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,15 +156,27 @@ 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">
-        <UsersGridCard
-          v-for="user in filteredUsers"
-          :key="user.id"
-          :to="`/clients/${user.id}`"
-          :full-name="user.fullName"
-          :avatar-src="messengerConnectionAvatarSrc(user.telegramConnection)"
-          :initials="userInitials(user.fullName)"
-        />
+      <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 visibleUsers"
+            :key="user.id"
+            :to="`/clients/${user.id}`"
+            :full-name="user.fullName"
+            :avatar-src="messengerConnectionAvatarSrc(user.telegramConnection)"
+            :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>

@@ -151,27 +187,39 @@ 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">
-        <NuxtLink
-          v-for="request in filteredRequests"
-          :key="request.id"
-          :to="`/clients/${request.id}?tab=requests`"
-          class="surface-card surface-card-interactive rounded-3xl p-5"
-        >
-          <div class="flex items-start justify-between gap-3">
-            <div class="space-y-1">
-              <h2 class="text-lg font-bold text-[#123824]">{{ request.companyName }}</h2>
-              <p class="text-sm text-[#466653]">{{ request.contactName }}</p>
+      <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 visibleRequests"
+            :key="request.id"
+            :to="`/clients/${request.id}?tab=requests`"
+            class="surface-card surface-card-interactive rounded-3xl p-5"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <div class="space-y-1">
+                <h2 class="text-lg font-bold text-[#123824]">{{ request.companyName }}</h2>
+                <p class="text-sm text-[#466653]">{{ request.contactName }}</p>
+              </div>
+              <span :class="requestStatusClass(request.status)">{{ requestStatusLabel(request.status) }}</span>
            </div>
-            <span :class="requestStatusClass(request.status)">{{ requestStatusLabel(request.status) }}</span>
-          </div>

-          <div class="mt-4 space-y-2 text-sm text-[#355947]">
-            <p>{{ request.email }}</p>
-            <p v-if="request.inn">ИНН: {{ request.inn }}</p>
-            <p>{{ new Date(request.createdAt).toLocaleDateString() }}</p>
-          </div>
-        </NuxtLink>
+            <div class="mt-4 space-y-2 text-sm text-[#355947]">
+              <p>{{ request.email }}</p>
+              <p v-if="request.inn">ИНН: {{ request.inn }}</p>
+              <p>{{ new Date(request.createdAt).toLocaleDateString() }}</p>
+            </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>
--- a/app/pages/orders/index.vue
+++ b/app/pages/orders/index.vue
@@ -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>