new version of budget view and fixes

src/components/budgets/BudgetView2.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" xmlns="http://www.w3.org/1999/html">
-import {computed, onMounted, ref, watch, reactive} from 'vue';
+import {computed, onMounted, ref, watch, reactive, onUnmounted} from 'vue';
 import Chart from 'primevue/chart';
 import BudgetTransactionView from "@/components/budgets/BudgetTransactionView.vue";
 import {
@@ -26,6 +26,8 @@ import SelectButton from "primevue/selectbutton";
 import Divider from "primevue/divider";
 import TransactionForm from "@/components/transactions/TransactionForm.vue";
 import Checkbox from "primevue/checkbox";
+import {useDrawerStore} from "@/stores/drawerStore";
+import { EventBus } from '@/utils/EventBus.ts';
 
 // Зарегистрируем плагин
 ChartJS.register(ChartDataLabels);
@@ -121,19 +123,24 @@ const totalSaving = computed(() => {
 const drawerOpened = ref(false)
 const transactionType = ref('')
 const categoryType = ref('')
-const openDrawer = (selectedTransactionType = null, selectedCategoryType = null) => {
-  if (selectedTransactionType && selectedCategoryType) {
-    transactionType.value = selectedTransactionType;
-    categoryType.value = selectedCategoryType;
-  } else if (selectedTransactionType) {
-    transactionType.value = selectedTransactionType;
-    categoryType.value = 'EXPENSE'
-  }
+
+const drawerStore = useDrawerStore()
+const openDrawer = (selectedTransactionType = null, selectedCategoryType = null, categoryId = null) => {
+
+  if (selectedTransactionType) {
+    drawerStore.setTransactionType(selectedCategoryType)
+  } else drawerStore.setCategoryType("INSTANT")
+  if (selectedCategoryType) {
+    drawerStore.setCategoryType(selectedCategoryType)
+  } else drawerStore.setCategoryType("EXPENSE")
+  if (categoryId) {
+    drawerStore.setCategoryId(categoryId)
+  } else drawerStore.setCategoryId(null)
 
   drawerOpened.value = true;
+  drawerStore.visible = true
 }
 
-
 const closeDrawer = async () => {
   drawerOpened.value = false;
   // await updateTransactions()
@@ -378,7 +385,8 @@ const updateLimitOnBackend = async (categoryId, newLimit) => {
 
 
 const budgetInfo = ref<Budget>();
-const fetchBudgetInfo = async () => {
+const fetchBudgetInfo = async (test) => {
+  loading.value = test ? test : false;
   await getBudgetInfo(route.params.id).then((data) => {
         budget.value = data
         plannedExpenses.value = budget.value?.plannedExpenses
@@ -389,6 +397,8 @@ const fetchBudgetInfo = async () => {
         updateLoading.value = false
       }
   )
+  updateLoading.value = false
+  loading.value = false
 
 }
 
@@ -616,7 +626,7 @@ const expandCats = (value: boolean) => {
 };
 
 onMounted(async () => {
-
+  updateLoading.value = true;
   try {
     await Promise.all([
       fetchBudgetInfo(),
@@ -627,12 +637,17 @@ onMounted(async () => {
       // fetchBudgetCategories(),
       // fetchBudgetTransactions(),
     ]);
+    EventBus.on('transactions-updated', fetchBudgetInfo,true);
   } catch (error) {
     console.error('Error during fetching data:', error);
   } finally {
     loading.value = false
   }
 });
+
+onUnmounted( async () => {
+  EventBus.off('transactions-updated', fetchBudgetInfo);
+})
 </script>
 
 <template>
@@ -640,18 +655,8 @@ onMounted(async () => {
   <LoadingView v-if="loading"/>
 
   <div v-else class="px-4 bg-gray-100 h-full ">
-    <div v-if="updateLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
-      <ProgressSpinner
-          v-if="updateLoading"
-          class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50"
-          style="width: 50px; height: 50px;"
-          strokeWidth="8"
-          fill="transparent"
-          animationDuration=".5s"
-          aria-label="Custom ProgressSpinner"
-      />
-    </div>
-    <div :class="!updateLoading ? '' : 'h-fit bg-white opacity-50 z-0 '" class=" flex flex-col gap-3">
+
+    <div  class=" flex flex-col gap-3">
       <div class="flex flex-row justify-between ">
         <div class="flex flex-col gap-2">
           <h2 class="text-4xl  font-bold">Бюджет {{ budget.name }} </h2>
@@ -890,6 +895,7 @@ onMounted(async () => {
                       <span class="text-lg font-bold items-center">{{
                           category.name.category.name
                         }} {{ category.name.icon }}</span>
+
                       <div class="flex flex-row gap-4">
 
                         <span>{{
@@ -930,7 +936,7 @@ onMounted(async () => {
               <div class="pb-4">
                 <div class="flex flex-row gap-4 items-center mb-4">
                   <h3 class="text-2xl font-bold text-rose-500 ">Расходы</h3>
-                  <button @click="openDrawer('PLANNED', 'INCOME')">
+                  <button @click="openDrawer('PLANNED', 'EXPENSE')">
                     <span class="font-light text-sm">+ Добавить</span>
                   </button>
                 </div>
@@ -939,10 +945,15 @@ onMounted(async () => {
                       class="flex flex-col justify-between p-4 shadow-lg rounded-lg bg-white  ">
                     <div class="">
                       <div class="flex flex-row justify-between w-full items-center">
-                      <span class="text-2xl font-bold line-clamp-1">{{
+                        <div class="flex flex-row col-span-2 gap-2 items-center">
+                      <span class=" font-bold line-clamp-1" style="font-size: 1.25rem">{{
                           category.name.category.icon
                         }} {{ category.name.category.name }}</span>
-                        <div class="flex flex-row line-clamp-1 gap-1">
+                        <button @click="openDrawer('INSTANT', 'EXPENSE', category.name.category.id)">
+                          <i class="pi pi-plus-circle"/>
+                        </button>
+                        </div>
+                        <div class="flex flex-row w-fit gap-1 justify-between">
 
                           <span>{{ formatAmount(category.name.currentSpent) }} </span>
                           <span> / </span>
@@ -1030,6 +1041,7 @@ onMounted(async () => {
 
               </button>
             </div>
+
             <div class="grid  grid-cols-1 gap-1 max-h-tlist overflow-y-auto ">
               <BudgetTransactionView v-for="transaction in filteredTransactions" :key="transaction.id"
                                      :transaction="transaction"
@@ -1046,10 +1058,10 @@ onMounted(async () => {
       </div>
     </div>
 
-    <TransactionForm v-if="drawerOpened" :visible="drawerOpened" :transaction-type="transactionType"
-                     :category-type="categoryType" @close-drawer="closeDrawer" @transaction-updated="updateTransactions"
-                     @delete-transaction="updateTransactions"
-                     @create-transaction="updateTransactions"/>
+<!--    <TransactionForm v-if="drawerOpened" :visible="drawerOpened" :transaction-type="transactionType"-->
+<!--                     :category-type="categoryType" @close-drawer="closeDrawer" @transaction-updated="updateTransactions"-->
+<!--                     @delete-transaction="updateTransactions"-->
+<!--                     @create-transaction="updateTransactions"/>-->
   </div>
 
   <div id="footer" class="h-24 bg-gray-100"/>