feat: updaing SavingGoal for proper data sharing

src/components/SavingGoalComponents/SavingGoal.vue

@@ -2,12 +2,18 @@
 import SavingGoalList from "@/components/SavingGoalComponents/SavingGoalList.vue";
 import SavingGoalRoadmap from "@/components/SavingGoalComponents/SavingGoalRoadmap.vue";
 import SavingGoalCreate from "@/components/SavingGoalComponents/SavingGoalCreate.vue";
+import type {GoalDTO} from "@/api";
+import {GoalService} from "@/api";
+
 export default {
   components: {SavingGoalCreate, SavingGoalRoadmap, SavingGoalList},
   data() {
     return {
       bluePanelMaxHeight: 'auto' as string,
-      createClicked: false as boolean,
+      createClicked: true as boolean,
+      selectedGoal: [] as any,
+      createdGoal: [] as any,
+      key: 0 as number,
     };
   },
   mounted() {
@@ -20,7 +26,7 @@ export default {
       if (timelineElement instanceof HTMLElement) {
         // Calculate the max-height based on the height of the timeline
         const timelineHeight = timelineElement.offsetHeight;
-        this.bluePanelMaxHeight = `${timelineHeight*1.55}px`;
+        this.bluePanelMaxHeight = '700px';
       } else {
         this.bluePanelMaxHeight = '700px';
       }
@@ -28,9 +34,19 @@ export default {
     createGoal() {
       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.key++
     },
+    createSavingGoal(savingGoal: GoalDTO) {
+      this.$emit('createSavingGoal', savingGoal)
+      this.createdGoal = savingGoal;
+      this.createClicked = false;
+    }
   },
 };
 </script>
@@ -38,7 +54,7 @@ export default {
 <template>
   <div class="cont">
     <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>
         <div>
           <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 {
         <saving-goal-list @goToSavingGoal="goToSavingGoal"></saving-goal-list>
       </div>
       <div class="spacer"/>
-      <saving-goal-create v-if="createClicked"></saving-goal-create>
-      <saving-goal-roadmap v-else></saving-goal-roadmap>
+      <saving-goal-create @createGoalClick="createSavingGoal" v-if="createClicked"></saving-goal-create>
+      <saving-goal-roadmap :key="key" :selected-goal="selectedGoal" v-else></saving-goal-roadmap>
     </div>
   </div>
 </template>
@@ -61,8 +77,12 @@ export default {
 }
 
 .blue-background {
-  background-color: #0A58CA;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 12px;
+  background-color: #003A58;
   width: 27%;
+  border-radius: 0 2em 2em 0;
 }
 
 .spacer {