calendar fixs

src/components/budgets/BudgetView2.vue

@@ -28,6 +28,7 @@ import TransactionForm from "@/components/transactions/TransactionForm.vue";
 import Checkbox from "primevue/checkbox";
 import {useDrawerStore} from "@/stores/drawerStore";
 import {EventBus} from '@/utils/EventBus.ts';
+import {useUserStore} from "@/stores/userStore";
 
 // Зарегистрируем плагин
 ChartJS.register(ChartDataLabels);
@@ -624,7 +625,21 @@ const expandCats = (value: boolean) => {
     }
   }
 };
-const calendarExpanded = ref(false);
+
+const calendarOpened = ref(localStorage.getItem('budgetCalendarOpened') === "1");
+
+// Используем computed для получения значения
+const calendarExpanded = computed(() => calendarOpened.value);
+
+// Функция для переключения состояния
+const toggleCalendar = () => {
+  // Переключаем состояние
+  calendarOpened.value = !calendarOpened.value;
+
+  // Сохраняем в localStorage
+  localStorage.setItem('budgetCalendarOpened', calendarOpened.value ? "1" : "0");
+};
+
 const calendar = ref<{ date: Date, dateStr: string, expenses: any[], expensesSum: number }[]>([]);
 
 watch([budget, plannedExpenses], () => {
@@ -1016,17 +1031,19 @@ onUnmounted(async () => {
                 </div>
                 <div class="flex flex-col gap-4 pb-4">
                   <div class="flex flex-row gap-2"><span class="text-lg font-bold items-center">Календарь</span>
-                    <button class="font-light text-sm" @click="calendarExpanded = !calendarExpanded">
+                    <button class="font-light text-sm" @click="toggleCalendar">
                       {{ calendarExpanded ? 'Скрыть' : 'Раскрыть' }}
+
                     </button>
                   </div>
 
-                  <div v-for="day, dayOne in calendar" class="flex flex-col justify-between p-4 shadow-lg rounded-lg " v-if="calendarExpanded"
+                  <div v-for="day, dayOne in calendar" class="flex flex-col justify-between p-4 shadow-lg rounded-lg "
+                       v-if="calendarExpanded == '1'"
                        :class="day.date.toISOString().split('T')[0] == new Date().toISOString().split('T')[0]? 'bg-emerald-200' : 'bg-white '">
                     <div class="flex flex-row gap-2 items-center ">
-                    <span class="font-bold text-xl">{{ day.dateStr }} </span>
-                    <span
-                        v-if="day.expensesSum>0">Трат по плану: {{ formatAmount(day.expensesSum) }} ₽</span>
+                      <span class="font-bold text-xl">{{ day.dateStr }} </span>
+                      <span
+                          v-if="day.expensesSum>0">Трат по плану: {{ formatAmount(day.expensesSum) }} ₽</span>
                     </div>
 
                     <BudgetTransactionView v-for="expense in day.expenses" :key="expense.id"

src/stores/userStore.ts

@@ -8,7 +8,7 @@ export const useUserStore = defineStore('user', () => {
     const loadingUser = ref(true);
     const router = useRouter();
     const route = useRoute();
-    const settings = ref({"budgetViewVersion": "2"})
+    const settings = ref({"budgetViewVersion": "2", "budgetCalendarOpened": false})
 
     async function fetchUserProfile() {
         // Убираем проверку на `loadingUser`, чтобы не блокировать запрос