events

src/components/transactions/TransactionList.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import {computed, onMounted, ref} from "vue";
+import {computed, onMounted, onUnmounted, 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 {getTransactions, getTransactionTypes} from "@/services/transactionService";
 import {Transaction} from "@/models/Transaction";
 import ProgressSpinner from "primevue/progressspinner";
 import {getUsers} from "@/services/userService";
 import Button from "primevue/button";
+import { EventBus } from '@/utils/eventBus';
 
 const loading = ref(false);
 const searchText = ref("");
@@ -59,6 +60,8 @@ const switchUserFilter = async (user) => {
 
 }
 
+
+
 const tgname = computed(() => {
   if (window.Telegram.WebApp) {
     const tg = window.Telegram.WebApp;
@@ -103,12 +106,21 @@ const selectedUserId = ref(null)
 const fetchUsers = async () => {
   users.value = await getUsers();
 }
+
+const selectedTransactionType = ref(null)
+const types = ref([])
 onMounted(async () => {
+  EventBus.on('transactions-updated', fetchTransactions);
   await fetchTransactions(); // Первоначальная загрузка данных
   await fetchUsers();
+   await getTransactionTypes().then( it => types.value = it.data);
   // window.addEventListener("scroll", handleScroll); // Добавляем обработчик прокрутки
 });
 
+onUnmounted( async () => {
+  EventBus.off('transactions-updated', fetchTransactions);
+})
+
 </script>
 
 <template>
@@ -124,8 +136,14 @@ onMounted(async () => {
         <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>
+
+
+<!--        <button v-for="type in types" class="rounded-xl border p-1 bg-white border-gray-300 mb-2 min-w-fit px-2">-->
+<!--          <p><span class="text-sm font-bold">{{ type.name }}</span></p>-->
+<!--        </button>-->
       </div>
       <div class="flex flex-col gap-2">