From e93da3db4eef976eebdf5019e06f93c3e49b0926 Mon Sep 17 00:00:00 2001
From: vekaste <vekaste@stud.ntnu.no>
Date: Wed, 1 May 2024 14:41:57 +0200
Subject: [PATCH] feat: integrating api call for getting all challenges
---
.../SavingGoalComponents/SavingGoalList.vue | 48 ++++++++++++-------
1 file changed, 31 insertions(+), 17 deletions(-)
diff --git a/src/components/SavingGoalComponents/SavingGoalList.vue b/src/components/SavingGoalComponents/SavingGoalList.vue
index e792585..23604b4 100644
--- a/src/components/SavingGoalComponents/SavingGoalList.vue
+++ b/src/components/SavingGoalComponents/SavingGoalList.vue
@@ -1,21 +1,26 @@
<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
--
GitLab