Skip to content
Snippets Groups Projects
Commit 2b6c5921 authored by Victor Ekholt Gunrell Kaste's avatar Victor Ekholt Gunrell Kaste
Browse files

feat: updaing SavingGoal for proper data sharing

parent 37e643ac
No related branches found
No related tags found
1 merge request!69Feat/redesign roadmap
...@@ -2,12 +2,18 @@ ...@@ -2,12 +2,18 @@
import SavingGoalList from "@/components/SavingGoalComponents/SavingGoalList.vue"; import SavingGoalList from "@/components/SavingGoalComponents/SavingGoalList.vue";
import SavingGoalRoadmap from "@/components/SavingGoalComponents/SavingGoalRoadmap.vue"; import SavingGoalRoadmap from "@/components/SavingGoalComponents/SavingGoalRoadmap.vue";
import SavingGoalCreate from "@/components/SavingGoalComponents/SavingGoalCreate.vue"; import SavingGoalCreate from "@/components/SavingGoalComponents/SavingGoalCreate.vue";
import type {GoalDTO} from "@/api";
import {GoalService} from "@/api";
export default { export default {
components: {SavingGoalCreate, SavingGoalRoadmap, SavingGoalList}, components: {SavingGoalCreate, SavingGoalRoadmap, SavingGoalList},
data() { data() {
return { return {
bluePanelMaxHeight: 'auto' as string, bluePanelMaxHeight: 'auto' as string,
createClicked: false as boolean, createClicked: true as boolean,
selectedGoal: [] as any,
createdGoal: [] as any,
key: 0 as number,
}; };
}, },
mounted() { mounted() {
...@@ -20,7 +26,7 @@ export default { ...@@ -20,7 +26,7 @@ export default {
if (timelineElement instanceof HTMLElement) { if (timelineElement instanceof HTMLElement) {
// Calculate the max-height based on the height of the timeline // Calculate the max-height based on the height of the timeline
const timelineHeight = timelineElement.offsetHeight; const timelineHeight = timelineElement.offsetHeight;
this.bluePanelMaxHeight = `${timelineHeight*1.55}px`; this.bluePanelMaxHeight = '700px';
} else { } else {
this.bluePanelMaxHeight = '700px'; this.bluePanelMaxHeight = '700px';
} }
...@@ -28,9 +34,19 @@ export default { ...@@ -28,9 +34,19 @@ export default {
createGoal() { createGoal() {
this.createClicked = true; this.createClicked = true;
}, },
goToSavingGoal() { async goToSavingGoal(savingGoal: GoalDTO) {
this.$emit('goToSavingGoal', savingGoal);
let response = await GoalService.getGoal({id: savingGoal.id as number});
console.log(response)
this.selectedGoal = response
this.createClicked = false; this.createClicked = false;
this.key++
}, },
createSavingGoal(savingGoal: GoalDTO) {
this.$emit('createSavingGoal', savingGoal)
this.createdGoal = savingGoal;
this.createClicked = false;
}
}, },
}; };
</script> </script>
...@@ -38,7 +54,7 @@ export default { ...@@ -38,7 +54,7 @@ export default {
<template> <template>
<div class="cont"> <div class="cont">
<div class="row"> <div class="row">
<div class="col-lg-4 blue-background overflow-auto" :style="{ 'max-height': bluePanelMaxHeight }"> <div class="col-lg-4 blue-background overflow-scroll" :style="{ 'max-height': bluePanelMaxHeight }">
<h3 style="color: white; margin-bottom: 16px">Your saving goals</h3> <h3 style="color: white; margin-bottom: 16px">Your saving goals</h3>
<div> <div>
<button class="btn btn-success btn-lg" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button> <button class="btn btn-success btn-lg" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
...@@ -46,8 +62,8 @@ export default { ...@@ -46,8 +62,8 @@ export default {
<saving-goal-list @goToSavingGoal="goToSavingGoal"></saving-goal-list> <saving-goal-list @goToSavingGoal="goToSavingGoal"></saving-goal-list>
</div> </div>
<div class="spacer"/> <div class="spacer"/>
<saving-goal-create v-if="createClicked"></saving-goal-create> <saving-goal-create @createGoalClick="createSavingGoal" v-if="createClicked"></saving-goal-create>
<saving-goal-roadmap v-else></saving-goal-roadmap> <saving-goal-roadmap :key="key" :selected-goal="selectedGoal" v-else></saving-goal-roadmap>
</div> </div>
</div> </div>
</template> </template>
...@@ -61,8 +77,12 @@ export default { ...@@ -61,8 +77,12 @@ export default {
} }
.blue-background { .blue-background {
background-color: #0A58CA; margin-top: 20px;
margin-bottom: 20px;
padding: 12px;
background-color: #003A58;
width: 27%; width: 27%;
border-radius: 0 2em 2em 0;
} }
.spacer { .spacer {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment