add spaces

src/components/transactions/TransactionList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, ref} from "vue";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
 import BudgetTransactionView from "@/components/budgets/BudgetTransactionView.vue";
 import IconField from "primevue/iconfield";
 import InputIcon from "primevue/inputicon";
@@ -11,6 +11,8 @@ import ProgressSpinner from "primevue/progressspinner";
 import {getUsers} from "@/services/userService";
 import Button from "primevue/button";
 import { EventBus } from '@/utils/EventBus.ts';
+import {useSpaceStore} from "@/stores/spaceStore";
+import router from "@/router";
 
 const loading = ref(false);
 const searchText = ref("");
@@ -21,13 +23,13 @@ const allLoaded = ref(false); // Флаг для отслеживания око
 
 // Функция для получения транзакций с параметрами limit и offset
 const fetchTransactions = async (reload) => {
-  console.log(reload);
+
   // if (loading.value || allLoaded.value) return; // Останавливаем загрузку, если уже загружается или данные загружены полностью
   loading.value = true;
 
   try {
 
-    const response = await getTransactions('INSTANT', null, null, selectedUserId.value ? selectedUserId.value : null, null, reload ? offset.value : limit, reload ? 0 : offset.value);
+    const response = await getTransactions(selectedSpace.value?.id, 'INSTANT', null, null, selectedUserId.value ? selectedUserId.value : null, null, reload ? offset.value : limit, reload ? 0 : offset.value);
     const newTransactions = response.data;
 
     // Проверка на конец данных
@@ -45,6 +47,7 @@ const fetchTransactions = async (reload) => {
 
   loading.value = false;
 };
+
 const switchUserFilter = async (user) => {
   if (selectedUserId.value == user.id) {
     selectedUserId.value = null
@@ -107,11 +110,22 @@ const fetchUsers = async () => {
 }
 
 const selectedTransactionType = ref(null)
+const spaceStore  = useSpaceStore()
+const selectedSpace = computed(() => spaceStore.space)
+
+watch( selectedSpace, async (newValue, oldValue) => {
+  if (newValue != oldValue) {
+    await fetchTransactions(true)
+  }
+})
 const types = ref([])
 onMounted(async () => {
   EventBus.on('transactions-updated', fetchTransactions,true);
-  await fetchTransactions(); // Первоначальная загрузка данных
-  await fetchUsers();
+  if (selectedSpace.value){
+    await fetchTransactions(); // Первоначальная загрузка данных
+
+  }
+  // await fetchUsers();
    await getTransactionTypes().then( it => types.value = it.data);
   // window.addEventListener("scroll", handleScroll); // Добавляем обработчик прокрутки
 });
@@ -125,14 +139,19 @@ onUnmounted( async () => {
 <template>
   <div class="px-4 bg-gray-100 h-full">
     <h2 class="text-4xl mb-6 font-bold">Список транзакций </h2>
-    <div class="flex flex-col gap-2">
+    <div v-if="!selectedSpace" class="flex w-full h-full items-center justify-center">
+      <p>Сперва нужно выбрать Пространство.
+        <button class="text-blue-500 hover:underline" @click="router.push('/spaces').then((res) => router.go(0))">Перейти</button>
+      </p>
+    </div>
+    <div v-else class="flex flex-col gap-2">
       <IconField>
         <InputIcon class="pi pi-search"/>
         <InputText v-model="searchText" placeholder="поиск"></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)"
+        <button v-for="user in selectedSpace.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' : ''">