feat: integrating api call for getting all challenges

src/components/SavingGoalComponents/SavingGoalList.vue

 <script setup lang="ts">
-import {ref} from "vue";
-
-const savingGoalList = ref([
-  { title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr for a spain trip' },
-  { title: 'Italy Escapade', MoneyTarget: '200kr', description: 'Experience the magic of Italy with us! Our goal is to save 200kr for an amazing trip to Italy.' },
-  { title: 'French Getaway', MoneyTarget: '200kr', description: 'Join us as we plan to save 200kr for a delightful trip to France!' },
-  { title: 'Exploring Greece', MoneyTarget: '200kr', description: 'Dreaming of Greece? Lets work together to save 200kr for that unforgettable trip!' },
-  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
-  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
-  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
-  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' }
-])
+import {ref, onMounted} from "vue";
+import {GoalService, type GoalDTO, type CreateGoalDTO} from "@/api"
+
+const savingGoalList = ref([] as any)
+
+defineProps()
+
+const getGoals = async () => {
+  try {
+    let response = await GoalService.getGoals();
+    savingGoalList.value = response
+  } catch (error: any) {
+    console.log(error.message);
+  }
+}
+
+onMounted(getGoals)
 
 const emits = defineEmits(['goToSavingGoal']);
 
-const goToSavingGoal = () => {
-  emits('goToSavingGoal');
+const goToSavingGoal = (savingGoal: GoalDTO) => {
+  emits('goToSavingGoal', savingGoal);
 };
 
 const deleteSavingGoal = () => {
@@ -24,14 +29,14 @@ const deleteSavingGoal = () => {
 </script>
 
 <template>
-  <div v-for="(savingGoal, index) in savingGoalList" :key="index" class="card bg-primary">
+  <div v-for="(savingGoal, index) in savingGoalList" :key="index" class="card bg-body">
     <div class="card-header">
       Saving goal {{ index + 1 }}
     </div>
     <div class="card-body">
-      <h5 class="card-title">{{ savingGoal.title }}</h5>
+      <h5 class="card-title">{{ savingGoal.goalName }}</h5>
       <p class="card-text">{{ savingGoal.description }}</p>
-      <a href="#" class="btn btn-light" @click="goToSavingGoal">Go to saving goal</a>
+      <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>
   </div>
@@ -42,11 +47,20 @@ const deleteSavingGoal = () => {
   color: white;
 }
 
+.card-header {
+  background-color: #40698A;
+}
+
+.card-body {
+  background-color: #447093;
+}
+
 * {
   font-weight: 600;
 }
 
 .card {
   margin-bottom: 20px;
+  border: none;
 }
 </style>
\ No newline at end of file