ver 2

src/components/transactions/TransactionList.vue

@@ -1,12 +1,15 @@
 <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";
+import {getUsers} from "@/services/userService";
+import Button from "primevue/button";
 
 const loading = ref(false);
 const searchText = ref("");
@@ -16,12 +19,15 @@ const offset = ref(0); // Начальное смещение
 const allLoaded = ref(false); // Флаг для отслеживания окончания данных
 
 // Функция для получения транзакций с параметрами limit и offset
-const fetchTransactions = async () => {
-  if (loading.value || allLoaded.value) return; // Останавливаем загрузку, если уже загружается или данные загружены полностью
+const fetchTransactions = async (reload) => {
+  console.log("here")
+  console.log(allLoaded.value)
+  // if (loading.value || allLoaded.value) return; // Останавливаем загрузку, если уже загружается или данные загружены полностью
   loading.value = true;
 
   try {
-    const response = await getTransactions('INSTANT', null,null, null, limit, offset.value);
+    console.log(reload);
+    const response = await getTransactions('INSTANT', null, null, selectedUserId.value ? selectedUserId.value : null, null, reload ? offset.value : limit, reload ? 0 : offset.value);
     const newTransactions = response.data;
 
     // Проверка на конец данных
@@ -30,7 +36,8 @@ const fetchTransactions = async () => {
     }
 
     // Добавляем новые транзакции к текущему списку
-    transactions.value.push(...newTransactions);
+
+    reload ? transactions.value = newTransactions : transactions.value.push(...newTransactions)
     offset.value += limit; // Обновляем смещение для следующей загрузки
   } catch (error) {
     console.error("Error fetching transactions:", error);
@@ -38,6 +45,19 @@ const fetchTransactions = async () => {
 
   loading.value = false;
 };
+const switchUserFilter = async (user) => {
+  if (selectedUserId.value == user.id) {
+    selectedUserId.value = null
+  } else if (selectedUserId.value == null) {
+    selectedUserId.value = user.id;
+  } else {
+    selectedUserId.value = user.id;
+  }
+
+  await getTransactions('INSTANT', null, null, selectedUserId.value, null, offset.value, 0)
+      .then(it => transactions.value = it.data)
+
+}
 
 const tgname = computed(() => {
   if (window.Telegram.WebApp) {
@@ -48,30 +68,45 @@ const tgname = computed(() => {
 
 // Отфильтрованные транзакции по поисковому запросу
 const filteredTransactions = computed(() => {
-  if (searchText.value.length === 0) {
+  // Проверяем, есть ли текст поиска
+  const search = searchText.value.trim().toLowerCase();
+
+  if (!search) {
+    // Если текст поиска пуст, возвращаем все транзакции
     return transactions.value;
-  } else {
-    return transactions.value.filter(transaction => {
-      const search = searchText.value.toLowerCase();
-      return (
-          transaction.transaction.comment.toLowerCase().includes(search) ||
-          transaction.transaction.category.name.toLowerCase().includes(search)
-      );
-    });
   }
+
+  // Проверяем наличие данных
+  if (!transactions.value || !Array.isArray(transactions.value)) {
+    console.warn("Transactions is not a valid array");
+    return [];
+  }
+
+  // Фильтруем транзакции по тексту поиска
+  return transactions.value.filter(transaction => {
+    return transaction.comment.toLowerCase().includes(search) ||
+        transaction.category.name.toLowerCase().includes(search);
+  });
 });
 
-// Обработчик прокрутки для ленивой загрузки
-const handleScroll = () => {
-  const bottomReached = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2000;
-  if (bottomReached && !loading.value) {
-    fetchTransactions(); // Загружаем следующую страницу
-  }
-};
 
+// Обработчик прокрутки для ленивой загрузки
+// const handleScroll = () => {
+//   const bottomReached = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2000;
+//   if (bottomReached && !loading.value) {
+//     fetchTransactions(); // Загружаем следующую страницу
+//   }
+// };
+
+const users = ref([])
+const selectedUserId = ref(null)
+const fetchUsers = async () => {
+  users.value = await getUsers();
+}
 onMounted(async () => {
   await fetchTransactions(); // Первоначальная загрузка данных
-  window.addEventListener("scroll", handleScroll); // Добавляем обработчик прокрутки
+  await fetchUsers();
+  // window.addEventListener("scroll", handleScroll); // Добавляем обработчик прокрутки
 });
 
 </script>
@@ -84,20 +119,32 @@ onMounted(async () => {
         <InputIcon class="pi pi-search"/>
         <InputText v-model="searchText" placeholder="Search"></InputText>
       </IconField>
-
+      <div class="flex flex-row gap-2">
+        <!--      <span v-for="user in users">{{user.id}}</span>-->
+        <button v-for="user in users" @click="switchUserFilter(user)"
+                class="rounded-xl border p-1 bg-white border-gray-300 mb-2 min-w-fit px-2"
+                :class="selectedUserId == user.id ? '!bg-blue-100' : ''">
+          <p><span class="text-sm font-bold">{{ user.firstName }}</span></p>
+        </button>
+      </div>
       <div class="flex flex-col gap-2">
+
         <BudgetTransactionView
             v-for="transaction in filteredTransactions"
             :key="transaction.id"
             :transaction="transaction"
             :is-list="true"
-            @transaction-updated="fetchTransactions"
+            @transaction-updated="fetchTransactions(true)"
+            @delete-transaction="fetchTransactions(true)"
         />
+        <div class="flex items-center justify-center px-2 py-1 mb-5">
+          <Button @click="fetchTransactions(false)">Загрузить следующие...</Button>
+        </div>
         <!-- Показать спиннер загрузки, если идет загрузка -->
-        <ProgressSpinner v-if="loading"    class="mb-4"       style="width: 50px; height: 50px;"
+        <ProgressSpinner v-if="loading" class="mb-4" style="width: 50px; height: 50px;"
                          strokeWidth="8"
                          fill="transparent"
-                         animationDuration=".5s" />
+                         animationDuration=".5s"/>
       </div>
     </div>
   </div>