feat: Added info for saved so far and end date to elements in list. And...

feat: Added info for saved so far and end date to elements in list. And display both old and current goals.

src/components/SavingGoal/SavingGoalList.vue

 <script setup lang="ts">
 import {ref, onMounted} from "vue";
-import {GoalService, type GoalDTO, type CreateGoalDTO} from "@/api"
+import {GoalService, type GoalDTO, type ChallengeDTO} from "@/api"
 
-const savingGoalList = ref([] as any)
-
-defineProps()
+const savingGoalList = ref(null as any)
+const oldSavingGoalList = ref(null as any)
 
 const getGoals = async () => {
   try {
     let response = await GoalService.getGoals();
-    savingGoalList.value = response
+    savingGoalList.value = []
+    oldSavingGoalList.value = []
+    const date = new Date()
+    response.forEach((goal: GoalDTO) => {
+      if(goal.targetDate) {
+        const targetDate = new Date(goal.targetDate)
+        if(targetDate < date) {
+          console.log("old")
+          oldSavingGoalList.value.push(goal)
+        } else {
+          console.log("current")
+          savingGoalList.value.push(goal)
+        }
+      }
+    })
   } catch (error: any) {
     console.log(error.message);
   }
@@ -26,19 +39,70 @@ const goToSavingGoal = (savingGoal: GoalDTO) => {
 const deleteSavingGoal = () => {
 
 };
+
+function calculateSavedSoFar (goal: GoalDTO) {
+  console.log("hehe")
+  let savedSoFar = 0; // Reset savedSoFar before calculating again
+  if(goal.challenges){
+    console.log("hehehe")
+    goal.challenges.forEach((challenge: ChallengeDTO) => {
+      // Check if progressList exists before accessing its elements
+      if (challenge.progressList) {
+        challenge.progressList.forEach((progress: any) => {
+          // Assuming 'amount' is the property you want to add from progressList
+          savedSoFar += progress.amount;
+          console.log("he")
+        });
+      }
+    });
+  }
+  return savedSoFar
+}
+
+function formatDate(date: string) {
+  const date1 = new Date(date);
+  return date1.toISOString().split('T')[0]
+}
 </script>
 
 <template>
-  <div v-for="(savingGoal, index) in savingGoalList" :key="index" class="card bg-body">
-    <div class="card-header">
-      Saving goal {{ index + 1 }}
+  <div v-if="savingGoalList">
+    <div v-if="oldSavingGoalList.lenght > 0">
+      <h3>Current:</h3>
     </div>
-    <div class="card-body">
-      <h5 class="card-title">{{ savingGoal.goalName }}</h5>
-      <p class="card-text">{{ savingGoal.description }}</p>
-      <a href="#" class="btn btn-primary" @click="goToSavingGoal(savingGoal)">Go to saving goal</a>
-      <a href="#" class="btn btn-danger" @click="deleteSavingGoal" style="margin-left: 8px">Delete</a>
+    <div v-for="(savingGoal, index) in savingGoalList" :key="index" class="card bg-body">
+      <div class="card-header">
+        Sparemål {{ index + 1 }}
+      </div>
+      <div class="card-body">
+        <h5 class="card-title">{{ savingGoal.name }}</h5>
+        <p class="card-text">{{ savingGoal.description }}</p>
+        <p class="card-text">Spart: {{calculateSavedSoFar(savingGoal)}}/{{savingGoal.targetAmount}} Kr</p>
+        <p class="card-text">Avsluttes: {{formatDate(savingGoal.targetDate)}} </p>
+        <a class="btn btn-primary" @click="goToSavingGoal(savingGoal)">Gå til sparemål</a>
+        <a class="btn btn-danger" @click="deleteSavingGoal" style="margin-left: 8px">
+          <img src="../../assets/icons/trash-can.svg"> Slett</a>
+      </div>
     </div>
+    <div v-if="oldSavingGoalList.lenght > 0">
+      <h3>Old:</h3>
+      <div v-for="(savingGoal, index) in oldSavingGoalList" :key="index" class="card bg-body">
+        <div class="card-header">
+          Sparemål {{ index + 1 }}
+        </div>
+        <div class="card-body">
+          <h5 class="card-title">{{ savingGoal.name }}</h5>
+          <p class="card-text">{{ savingGoal.description }}</p>
+          <p class="card-text">{{calculateSavedSoFar(savingGoal)}}/{{savingGoal.targetAmount}}</p>
+          <a class="btn btn-primary" @click="goToSavingGoal(savingGoal)">Gå til sparemål</a>
+          <a class="btn btn-danger" @click="deleteSavingGoal" style="margin-left: 8px">Slett</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="loading" v-else>
+    Laster...
+    <img src="../../assets/loadingPig.png" alt="loadingPig">
   </div>
 </template>
 
@@ -63,4 +127,19 @@ const deleteSavingGoal = () => {
   margin-bottom: 20px;
   border: none;
 }
+
+.loading {
+  color: white;
+  font-size: 40px;
+  font-weight: 500;
+}
+
+.loading img {
+  width: 50%;
+  height: 50%;
+}
+
+h3 {
+  color: white;
+}
 </style>
\ No newline at end of file