tags and new analytics new in budget

src/components/budgets/BudgetCreationView.vue

@@ -5,10 +5,11 @@ import Button from "primevue/button";
 import InputText from "primevue/inputtext";
 import FloatLabel from "primevue/floatlabel";
 import DatePicker from "primevue/datepicker";
-import {onMounted, ref} from "vue";
+import {computed, onMounted, ref, watch} from "vue";
 import {getMonthName} from "@/utils/utils";
 import {Budget} from "@/models/Budget";
 import {getCategories} from "@/services/categoryService";
+import {useSpaceStore} from "@/stores/spaceStore";
 
 const props = defineProps({
   opened: {
@@ -63,9 +64,31 @@ const resetForm = () => {
   }
   budget.value.name = getMonthName(budget.value.dateFrom.getMonth()) + ' ' + budget.value.dateFrom.getFullYear();
 }
+const spaceStore = useSpaceStore()
+const selectedSpace = computed(() => spaceStore.space)
+
+watch(
+    () => selectedSpace.value,
+    async (newValue, oldValue) => {
+
+      if (newValue != oldValue || !oldValue) {
+        try {
+          // loading.value = true;
+          // Если выбранный space изменился, получаем новую информацию о бюджете
+         await fetchCategories()
+        } catch (error) {
+          console.error('Error fetching budget infos:', error);
+        }
+      }
+    }
+);
+
 
 onMounted(() => {
   resetForm()
+  if (selectedSpace.value) {
+    fetchCategories()
+  }
 })
 
 </script>
@@ -91,6 +114,7 @@ onMounted(() => {
         <Checkbox v-model="createRecurrentPayments" binary/>
         Создать ежемесячные платежи?
       </div>
+      <div v-if="categories.length ==0" class="text-red-500 font-bold">Сперва лучше создать категории</div>
       <div class="flex flex-row gap-2 justify-end items-center">
         <Button label="Создать" severity="success" icon="pi pi-save" @click="create"/>
         <Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancel"/>