Merge branch 'feat/Budget' into 'main'

Feat/budget

See merge request !39

src/components/Budget/BudgetBox.vue

@@ -3,7 +3,6 @@ import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter();
-
 const props = defineProps({
   title: {
     type: String,
@@ -19,16 +18,26 @@ const props = defineProps({
   }
 })
 
+// Calculated balance variable
 let balance = props.budget - props.expenses
-
+// Reactive variable for determining background color
 const iRef = ref(null)
 
+/**
+ * Checks if the balance is positive, and depending on the value
+ * changes background color to green (positive) or red (negative)
+ */
 onMounted(() => {
   if (balance >= 0) {
+    // By default, the background is set to red
     iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
   }
 })
 
+// TODO consider store chosen budget in a pinia store
+/**
+ * Navigates to the pressed budget
+ */
 const onBudgetContainerPressed = () => {
   router.push('/budget')
 }

src/components/Budget/ExpenseBox.vue

 <script setup lang="ts">
-
 import Button1 from '@/components/Buttons/Button1.vue'
 import { type CreateAppFunction, ref } from 'vue'
 
@@ -19,13 +18,23 @@ const props = defineProps({
   }
 })
 
+// Reactive variables for expense description and amount
 let editDescription = ref('')
 let editAmount = ref('')
 
+/**
+ * Emits an event to parent component with the type 'deleteEvent' to signalize
+ * that an expense with index 'index' must be removed.
+ */
 const emitDeleteEvent = () => {
   emit('deleteEvent', props.index)
 }
 
+/**
+ * Emits an event to parent component with the type 'editEvent' to signalize
+ * that an expense with index 'index' is to be edited with the values 'editDescription'
+ * and 'editAmount'
+ */
 const emitEditEvent = () => {
   emit('editEvent', props.index, editDescription.value, editAmount.value)
 }

src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue

@@ -64,13 +64,15 @@ const onClick = async () => {
      */
 
     const signUpPayLoad = {
-      "commitment": useConfigurationStore().getCommitment,
-      "experience": useConfigurationStore().getExperience,
-      "challenges": useConfigurationStore().getChallenges,
       "firstName": useUserInfoStore().getFirstName,
       "lastName": useUserInfoStore().getLastname,
       "email": useUserInfoStore().getEmail,
       "password": useUserInfoStore().getPassword,
+      "configuration": {
+        "commitment": useConfigurationStore().getCommitment,
+        "experience": useConfigurationStore().getExperience,
+        "challenges": useConfigurationStore().getChallenges
+      }
     };
 
     let response = await AuthenticationService.signup({ requestBody: signUpPayLoad });

src/components/Login/LoginForm.vue

@@ -62,6 +62,9 @@ const handleSubmit = async () => {
       email: emailRef.value,
       role: response.role,
     });
+
+    console.log()
+
     await router.push({ name: 'home' });
   } catch (error: any) {
     errorMsg.value = handleUnknownError(error);

src/views/BudgetOverview.vue

@@ -17,6 +17,7 @@ import BudgetBox from '@/components/Budget/BudgetBox.vue'
       </div>
     </div>
 
+    <!--TODO make this more generic-->
     <ul class="budgetContainer">
       <li><budget-box title="April 2024" budget="1000" expenses="908700"></budget-box></li>
       <li><budget-box title="Mai 2024" budget="1000" expenses="87"></budget-box></li>
@@ -52,7 +53,6 @@ import BudgetBox from '@/components/Budget/BudgetBox.vue'
 </template>
 
 <style scoped>
-
 .collapse-container {
   align-content: center;
   justify-content: center;
@@ -71,9 +71,4 @@ import BudgetBox from '@/components/Budget/BudgetBox.vue'
 ul > li {
   margin: 10px 0;
 }
-
-#navbar {
-
-}
-
 </style>
\ No newline at end of file

src/views/BudgetView.vue

@@ -27,6 +27,7 @@ let expenseJSONObject = ref({
   ]
 });
 
+// Initially updates the total expense display
 for (let expense of expenseJSONObject.value.expenses) {
   expenses.value += expense.value
 }
@@ -36,9 +37,13 @@ let budgetTitle = ref('')
 let budgetValue = ref()
 let expenseDescription = ref('')
 let expenseAmount = ref()
-
+// Reactive background variable
 const iRef = ref()
 
+/**
+ * Checks the value of the balance and adjust background color depending
+ * on negative or positive value after rendering.
+ */
 onMounted(() => {
   if (balance.value >= 0) {
     iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
@@ -46,11 +51,16 @@ onMounted(() => {
   balance.value = budget.value - expenses.value
 })
 
+/**
+ * Updates the balance and background color based on the budget and expenses.
+ */
 const updateBalance = () => {
+  // Resets expenses and then re-calculates it
   expenses.value = 0
   for (let expense of expenseJSONObject.value.expenses) {
     expenses.value += expense.value
   }
+  // Updates balance value and background
   balance.value = budget.value - expenses.value
   if (balance.value >= 0) {
     iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
@@ -59,11 +69,23 @@ const updateBalance = () => {
   }
 }
 
+/**
+ * Calculates a new budget and updates the balance.
+ *
+ * @param newBudget The new budget value.
+ */
 const calculateNewBudget = (newBudget: number) => {
   budget.value = newBudget
   updateBalance()
 }
 
+/**
+ * TODO update javadoc when backend integration is done
+ * Adds a new expense to the expense JSON object and updates the balance.
+ *
+ * @param expenseDescription The description of the expense.
+ * @param expenseValue The value of the expense.
+ */
 const addNewExpense = (expenseDescription: string, expenseValue: number) => {
   expenseJSONObject.value.expenses.push({
     "title": expenseDescription,
@@ -72,15 +94,33 @@ const addNewExpense = (expenseDescription: string, expenseValue: number) => {
   updateBalance()
 }
 
+
+/**
+ * Updates the title of the budget.
+ *
+ * @param newTitle The new title for the budget.
+ */
 const editBudgetTitle = (newTitle: string) => {
   title.value = newTitle
 }
 
+/**
+ * Deletes an expense from the list of expenses.
+ *
+ * @param index The index of the expense to delete.
+ */
 const deleteExpense = (index: number) => {
   expenseJSONObject.value.expenses.splice(index, 1);
   updateBalance()
 }
 
+/**
+ * Edits an existing expense in the list of expenses.
+ *
+ * @param index          The index of the expense to edit.
+ * @param newDescription The new description for the expense.
+ * @param newAmount      The new amount for the expense.
+ */
 const editExpense = (index: number, newDescription: string, newAmount: number) => {
   console.log('Reached')
   expenseJSONObject.value.expenses[index].title = newDescription
@@ -186,8 +226,7 @@ const onDeleteBudgetPressed = () => {
                      :description="expense.title"
                      :amount="expense.value"
                      @deleteEvent="deleteExpense"
-                     @editEvent="editExpense"
-        />
+                     @editEvent="editExpense"/>
       </div>
     </div>