From 09ec37d23c7c60351933f5f2066baf3bc758eb26 Mon Sep 17 00:00:00 2001
From: Andrey Aratov <beg431@gmail.com>
Date: Tue, 6 Aug 2024 13:08:24 +0300
Subject: [PATCH] feat: budget only for current month

---
 .../BaseExpensesList/BaseExpensesList.vue     | 26 ++++++++++-----
 .../layouts/BaseLayout/BaseLayout.vue         |  5 +++
 src/stores/calendar/calendar.ts               |  1 -
 src/stores/settings/settings.ts               | 33 ++++++++++++++++++-
 src/types.ts                                  |  1 +
 src/views/SettingsView.vue                    | 18 +++++++---
 6 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/src/components/BaseExpensesList/BaseExpensesList.vue b/src/components/BaseExpensesList/BaseExpensesList.vue
index ea01554..3c723a8 100644
--- a/src/components/BaseExpensesList/BaseExpensesList.vue
+++ b/src/components/BaseExpensesList/BaseExpensesList.vue
@@ -15,14 +15,20 @@
             <div class="flex">
               <div class="mr-2 font-bold">Monthly budget:</div>
               <div data-testid="monthly-budget">
-                {{ getAllDaysByMonthId(month.id).length * dailyBudget }}
+                {{
+                  getAllDaysByMonthId(month.id).length * getMonthlyDailyBudget[month.id].dailyBudget
+                }}
               </div>
             </div>
             <div class="font-bold" data-testid="monthly-percents">
-              {{ countProgressPercentage(month.id) }}%
+              {{ countProgressPercentage(month.id, getMonthlyDailyBudget[month.id].dailyBudget) }}%
             </div>
           </div>
-          <BaseProgressBar :percentage="countProgressPercentage(month.id)" />
+          <BaseProgressBar
+            :percentage="
+              countProgressPercentage(month.id, getMonthlyDailyBudget[month.id].dailyBudget)
+            "
+          />
         </div>
       </div>
     </template>
@@ -54,13 +60,15 @@
               <div
                 class="text-xs lg:text-sm"
                 :class="{
-                  'text-emerald-500': getDailyExpenses(day.id) <= dailyBudget,
-                  'text-rose-500': getDailyExpenses(day.id) > dailyBudget,
+                  'text-emerald-500':
+                    getDailyExpenses(day.id) <= getMonthlyDailyBudget[month.id].dailyBudget,
+                  'text-rose-500':
+                    getDailyExpenses(day.id) > getMonthlyDailyBudget[month.id].dailyBudget,
                   hidden: getDailyExpenses(day.id) === 0,
                 }"
                 data-testid="daily-expenses"
               >
-                {{ getDailyExpenses(day.id) }} / {{ dailyBudget }}
+                {{ getDailyExpenses(day.id) }} / {{ getMonthlyDailyBudget[month.id].dailyBudget }}
               </div>
             </div>
           </template>
@@ -134,7 +142,7 @@ const expensesStore = useExpensesStore();
 
 const { isAddExpenseInputVisible } = storeToRefs(commonStore);
 const { expenses } = storeToRefs(expensesStore);
-const { getActiveCurrency, dailyBudget } = storeToRefs(settingsStore);
+const { getMonthlyDailyBudget, getActiveCurrency } = storeToRefs(settingsStore);
 const { getCurrentMonths } = storeToRefs(calendarStore);
 const { hideAddExpenseInput } = commonStore;
 const { getAllDaysByMonthId, getDaysByMonthIdWidthOutFutureDays } = calendarStore;
@@ -144,7 +152,7 @@ const expense = ref('');
 const isExpenseFieldHasError = ref(false);
 const expenseSchema = number().integer().required().min(1);
 
-const countProgressPercentage = (monthId: IMonth['id'] | undefined) => {
+const countProgressPercentage = (monthId: IMonth['id'] | undefined, dailyBudget: number) => {
   if (monthId === undefined) {
     return 0;
   }
@@ -152,7 +160,7 @@ const countProgressPercentage = (monthId: IMonth['id'] | undefined) => {
   const monthExpensesCounter = getMonthlyExpenses(monthId);
 
   return Math.round(
-    (monthExpensesCounter / (getAllDaysByMonthId(monthId).length * dailyBudget.value)) * 100,
+    (monthExpensesCounter / (getAllDaysByMonthId(monthId).length * dailyBudget)) * 100,
   );
 };
 
diff --git a/src/components/layouts/BaseLayout/BaseLayout.vue b/src/components/layouts/BaseLayout/BaseLayout.vue
index 8d38d86..b3e71d6 100644
--- a/src/components/layouts/BaseLayout/BaseLayout.vue
+++ b/src/components/layouts/BaseLayout/BaseLayout.vue
@@ -20,6 +20,7 @@
 </template>
 
 <script setup lang="ts">
+import { onBeforeMount } from 'vue';
 import { storeToRefs } from 'pinia';
 import BaseHeader from '@/components/layouts/partials/BaseHeader/BaseHeader.vue';
 import BaseFooter from '@/components/layouts/partials/BaseFooter/BaseFooter.vue';
@@ -35,4 +36,8 @@ const { setToast } = commonStore;
 const clearToast = () => {
   setToast({ type: 'default', message: '', duration: 0 });
 };
+
+onBeforeMount(() => {
+  clearToast();
+});
 </script>
diff --git a/src/stores/calendar/calendar.ts b/src/stores/calendar/calendar.ts
index a093127..f328235 100644
--- a/src/stores/calendar/calendar.ts
+++ b/src/stores/calendar/calendar.ts
@@ -6,7 +6,6 @@ export const useCalendarStore = defineStore('calendar', {
   state: (): ICalendarStore => ({
     months: [],
     days: [],
-    shouldGenerateNextMonth: false,
   }),
 
   getters: {
diff --git a/src/stores/settings/settings.ts b/src/stores/settings/settings.ts
index ee022fc..647337c 100644
--- a/src/stores/settings/settings.ts
+++ b/src/stores/settings/settings.ts
@@ -1,6 +1,8 @@
+import type { IMonth } from '@/types';
 import type { ISettingsStore, ICurrency } from '@/types';
 import { defineStore } from 'pinia';
 import { useLocalStorage } from '@vueuse/core';
+import { generateMonths } from '@/helpers';
 
 export const useSettingsStore = defineStore('settings', {
   state: (): ISettingsStore => ({
@@ -32,15 +34,35 @@ export const useSettingsStore = defineStore('settings', {
       },
     ]),
     dailyBudget: useLocalStorage('budget.it:daily', 500),
+    monthlyDailyBudget: useLocalStorage('budget.it:monthlyDailyBudget', {}),
   }),
 
   getters: {
+    getMonthlyDailyBudget(state): Record<string, { dailyBudget: number; isCurrent: boolean }> {
+      return state.monthlyDailyBudget;
+    },
     getActiveCurrency(state): ICurrency {
       return state.currencies.filter((currency: ICurrency) => currency.isActive)[0];
     },
   },
 
   actions: {
+    initMonthlyDailyBudgetObject() {
+      if (Object.keys(this.monthlyDailyBudget).length !== 0) {
+        return;
+      }
+
+      const monthsList = generateMonths(5);
+      const nextMonth = generateMonths(0, 1);
+      const allMonths = [...nextMonth, ...monthsList];
+
+      allMonths.forEach((month: IMonth) => {
+        this.monthlyDailyBudget[month.id] = {
+          dailyBudget: this.dailyBudget,
+          isCurrent: month.isCurrent,
+        };
+      });
+    },
     setActiveCurrency(name: ICurrency['name']) {
       this.currencies = this.currencies.map((currency: ICurrency) => {
         currency.isActive = currency.name === name;
@@ -49,7 +71,16 @@ export const useSettingsStore = defineStore('settings', {
       });
     },
     setDailyBudget(value: number) {
-      this.dailyBudget = value;
+      const currentMonth = Object.keys(this.monthlyDailyBudget).find(
+        (key: string) => this.monthlyDailyBudget[key].isCurrent,
+      );
+
+      if (!currentMonth) {
+        throw new Error('Current month not found');
+      }
+
+      this.dailyBudget = Number(value);
+      this.monthlyDailyBudget[currentMonth].dailyBudget = Number(value);
     },
     addNewCurrency(name: ICurrency['name']) {
       this.currencies.push({
diff --git a/src/types.ts b/src/types.ts
index 2d73ce1..bec2c79 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -46,6 +46,7 @@ export interface IExpense {
 export interface ISettingsStore {
   currencies: RemovableRef<Array<ICurrency>>;
   dailyBudget: RemovableRef<number>;
+  monthlyDailyBudget: RemovableRef<Record<string, { dailyBudget: number; isCurrent: boolean }>>;
 }
 
 export interface ICurrency {
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 8fca268..ca69f4b 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -4,7 +4,7 @@
       <div class="mb-7 pt-4 text-2xl text-slate-700 font-bold select-none">Settings</div>
 
       <div class="mb-10">
-        <div class="mb-3 text-slate-500 select-none">Daily budget</div>
+        <div class="mb-3 text-slate-500 select-none">Current month daily budget</div>
 
         <BaseFormBar @submit="submitDailyBudget(dailyBudgetInput.value)">
           <template #input>
@@ -80,7 +80,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, watch } from 'vue';
+import { reactive, watch, onBeforeMount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { number, string } from 'yup';
 import { PlusIcon, CheckIcon } from '@heroicons/vue/24/outline';
@@ -96,9 +96,13 @@ const commonStore = useCommonStore();
 const settingsStore = useSettingsStore();
 
 const { setToast } = commonStore;
-const { setDailyBudget, addNewCurrency, dailyBudget } = settingsStore;
+const { initMonthlyDailyBudgetObject, setDailyBudget, addNewCurrency, dailyBudget } = settingsStore;
 const { currencies } = storeToRefs(settingsStore);
 
+onBeforeMount(() => {
+  initMonthlyDailyBudgetObject();
+});
+
 const dailyBudgetInput = reactive({
   value: dailyBudget,
   isError: false,
@@ -125,10 +129,14 @@ const submitDailyBudget = (budget: number) => {
     dailyBudgetInput.isError = false;
 
     setToast({ type: 'success', message: 'Daily budget updated', duration: 5 });
-  } catch (error) {
+  } catch (error: any) {
     dailyBudgetInput.isError = true;
 
-    setToast({ type: 'error', message: 'Enter an integer greater than 9', duration: 5 });
+    setToast({
+      type: 'error',
+      message: error.message || 'Enter an integer greater than 9',
+      duration: 5,
+    });
   }
 };