refactor/Integrated BudgetOverview.vue with backend endpoints

src/views/BudgetOverview.vue → src/views/Budget/BudgetOverview.vue

 <script setup lang="ts">
 import Button1 from '@/components/Buttons/Button1.vue'
 import BudgetBox from '@/components/Budget/BudgetBox.vue'
+import { onMounted, ref } from 'vue'
+import handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
+import { useBudgetStore } from '@/stores/BudgetStore'
+import { type BudgetRequestDTO, type BudgetResponseDTO, UserService } from '@/api'
+import { useRouter } from 'vue-router'
 
-const budget = 1000;
-const expenses = 95600;
+const router = useRouter();
+
+// Reactive list of budget responses
+const budgetList = ref<BudgetResponseDTO[]>([]);
+// Reactive variables for input value, error message, modal, and budgetList key
+let budgetNameInput = ref('')
+let errorMsg = ref('');
+let budgetListKey = ref(0);
+
+/**
+ * Attempts to retrieve budgets for the user asynchronously and updates
+ * the budget list state after rendering.
+ * Handles any errors by updating the error message state.
+ */
+onMounted(async () => {
+  try {
+    budgetList.value = await UserService.getBudgetsByUser()
+    console.log(budgetList.value)
+  } catch (error) {
+    errorMsg.value = handleUnknownError(error);
+  }
+})
+
+/**
+ * Creates a new budget to the database and updates the displayed budget list.
+ */
+const createNewBudget = async() => {
+  try {
+    // Prepare request body for creating budget
+    const request: BudgetRequestDTO = {
+      budgetName: budgetNameInput.value,
+      budgetAmount: 0,
+      expenseAmount: 0
+    }
+    // Creates new budget with the budget request body
+    await UserService.createBudget({requestBody: request})
+    // Updates displayed budget list after creation
+    await updateBudgetList()
+  } catch (error) {
+    errorMsg.value = handleUnknownError(error);
+  }
+}
+
+/**
+ * Updates the displayed budget list.
+ */
+const updateBudgetList = async () => {
+  budgetList.value = await UserService.getBudgetsByUser()
+  budgetListKey.value++
+}
+
+/**
+ * Navigates to the budget page with the specified ID.
+ *
+ * @param {number} id The ID of the budget to navigate to.
+ */
+const goToBudget = (id: number) => {
+  useBudgetStore().setActiveBudgetId(id);
+  router.push("/budget")
+}
 </script>
 
 <template>
@@ -13,24 +76,28 @@ const expenses = 95600;
 
     <div class="collapse" id="collapseExample">
       <div class="container collapse-container">
-        <div class="input-group row">
-          <input id="collapseInput" class="col-5 form-control" type="text" placeholder="Enter name of budget">
-          <button1 id="collapseButton" class="col-1" button-text="Create" data-bs-dismiss="modal"/>
+        <div class="input-group">
+          <input id="collapseInput" class="form-control" type="text" placeholder="Enter name of budget" v-model="budgetNameInput">
+          <button1 id="collapseButton" button-text="Create" data-bs-dismiss="modal" @click="createNewBudget"/>
         </div>
       </div>
     </div>
 
-    <!--TODO make this more generic-->
-    <ul class="budgetContainer">
-      <li><budget-box title="April 2024" :budget=budget :expenses=expenses></budget-box></li>
-      <li><budget-box title="Mai 2024" :budget=budget :expenses=expenses></budget-box></li>
-      <li><budget-box title="Juni 2024" :budget=budget :expenses=expenses></budget-box></li>
-      <li><budget-box title="Juli 2024" :budget=budget :expenses=expenses></budget-box></li>
-      <li><budget-box title="August 2024" :budget=budget :expenses=expenses></budget-box></li>
-      <li><budget-box title="September 2024" :budget=budget :expenses=expenses></budget-box></li>
-      <li><budget-box title="Oktober 2024" :budget=budget :expenses=expenses></budget-box></li>
-      <li><budget-box title="November 2024" :budget=budget :expenses=expenses></budget-box></li>
-      <li><budget-box title="Desember 2024" :budget=budget :expenses=expenses></budget-box></li>
+    <p class="text-danger">{{ errorMsg }}</p>
+
+    <ul class="budgetContainer" :key="budgetListKey">
+      <li v-for="(item, index) in budgetList">
+        <budget-box
+          :key="index"
+          :id="Number(item.id) || 0"
+          :title="item.budgetName"
+          :created-at="item.createdAt"
+          :budget="item.budgetAmount"
+          :expenses="item.expenseAmount"
+          @deletedBudgetEvent="updateBudgetList"
+          @budgetPressedEvent="goToBudget"
+        ></budget-box>
+      </li>
     </ul>
 
     <nav id="navbar" aria-label="Page navigation example">