fixessome

src/components/transactions/TransactionList.vue

@@ -1,47 +1,55 @@
 <script setup lang="ts">
-
-
-import {computed, onMounted, ref} from "vue";
+import { computed, onMounted, ref } from "vue";
 import BudgetTransactionView from "@/components/budgets/BudgetTransactionView.vue";
 import IconField from "primevue/iconfield";
 import InputIcon from "primevue/inputicon";
 import InputText from "primevue/inputtext";
-import {getTransactions} from "@/services/transactionService";
-import {Transaction} from "@/models/Transaction";
-
+import { getTransactions } from "@/services/transactionService";
+import { Transaction } from "@/models/Transaction";
+import ProgressSpinner from "primevue/progressspinner";
 
 const loading = ref(false);
 const searchText = ref("");
+const transactions = ref<Transaction[]>([]);
+const limit = 20; // Количество транзакций на одну загрузку
+const offset = ref(0); // Начальное смещение
+const allLoaded = ref(false); // Флаг для отслеживания окончания данных
 
+// Функция для получения транзакций с параметрами limit и offset
+const fetchTransactions = async () => {
+  if (loading.value || allLoaded.value) return; // Останавливаем загрузку, если уже загружается или данные загружены полностью
+  loading.value = true;
 
-
-
-const fetchCategories = async () => {
-  loading.value = true
   try {
-    const response = await getTransactions('INSTANT');
-    transactions.value = response.data
+    const response = await getTransactions('INSTANT', null,null, null, limit, offset.value);
+    const newTransactions = response.data;
+
+    // Проверка на конец данных
+    if (newTransactions.length < limit) {
+      allLoaded.value = true; // Если данных меньше limit, значит, достигнут конец
+    }
+
+    // Добавляем новые транзакции к текущему списку
+    transactions.value.push(...newTransactions);
+    offset.value += limit; // Обновляем смещение для следующей загрузки
   } catch (error) {
-    console.error('Error fetching categories:', error);
+    console.error("Error fetching transactions:", error);
   }
-  loading.value = false
-}
+
+  loading.value = false;
+};
 
 const tgname = computed(() => {
   if (window.Telegram.WebApp) {
     const tg = window.Telegram.WebApp;
-    // tg.expand(); // Разворачиваем веб-приложение на весь экран
-
-// Получаем информацию о пользователе и выводим её
-    return tg.initDataUnsafe.user
+    return tg.initDataUnsafe.user;
   }
-})
-
-const transactions = ref<Transaction[]>([])
+});
 
+// Отфильтрованные транзакции по поисковому запросу
 const filteredTransactions = computed(() => {
   if (searchText.value.length === 0) {
-    return transactions.value;  // Return the full list when there's no search text
+    return transactions.value;
   } else {
     return transactions.value.filter(transaction => {
       const search = searchText.value.toLowerCase();
@@ -53,32 +61,47 @@ const filteredTransactions = computed(() => {
   }
 });
 
+// Обработчик прокрутки для ленивой загрузки
+const handleScroll = () => {
+  const bottomReached = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2000;
+  if (bottomReached && !loading.value) {
+    fetchTransactions(); // Загружаем следующую страницу
+  }
+};
+
 onMounted(async () => {
-  await fetchCategories();
-})
+  await fetchTransactions(); // Первоначальная загрузка данных
+  window.addEventListener("scroll", handleScroll); // Добавляем обработчик прокрутки
+});
 
 </script>
 
 <template>
-  <div class="px-4 bg-gray-100 h-full ">
-    <!-- Заголовок -->
-<!--    {{tgname}}-->
-
-    <h2 class="text-4xl mb-6  font-bold">Transaction list</h2>
+  <div class="px-4 bg-gray-100 h-full">
+    <h2 class="text-4xl mb-6 font-bold">Transaction list</h2>
     <div class="flex flex-col gap-2">
       <IconField>
         <InputIcon class="pi pi-search"/>
         <InputText v-model="searchText" placeholder="Search"></InputText>
       </IconField>
 
-      <div class=" flex flex-col gap-2">
-        <BudgetTransactionView  v-for="transaction in filteredTransactions" :transaction="transaction" :is-list="true"/>
+      <div class="flex flex-col gap-2">
+        <BudgetTransactionView
+            v-for="transaction in filteredTransactions"
+            :key="transaction.id"
+            :transaction="transaction"
+            :is-list="true"
+            @transaction-updated="fetchTransactions"
+        />
+        <!-- Показать спиннер загрузки, если идет загрузка -->
+        <ProgressSpinner v-if="loading"    class="mb-4"       style="width: 50px; height: 50px;"
+                         strokeWidth="8"
+                         fill="transparent"
+                         animationDuration=".5s" />
       </div>
     </div>
   </div>
-
 </template>
 
 <style scoped>
-
-</style>
+</style>