Merge branch '55-add-buttons-to-view' into 'master'

Resolve "add edit and delete button to the milestone path view"

Closes #55

See merge request !55

src/views/HomePage/EditMilestoneView.vue

@@ -38,7 +38,7 @@ onMounted(async () => {
   current_sum.value = data.milestoneCurrentSum
   start_date.value = data.startDate
   end_date.value = data.deadlineDate
-  image.value = `data:image/png;base64,${data.milestoneImage}`
+  image.value = data.milestoneImage ? `data:image/png;base64,${data.milestoneImage}` : null;
   console.log(image.value)
   console.log(data.milestoneImage)
 })
@@ -80,7 +80,7 @@ const milestoneData = computed(() => ({
   milestoneDescription: description.value,
   milestoneGoalSum: goal_sum.value,
   milestoneCurrentSum: current_sum.value,
-  milestoneImage: image.value,
+  milestoneImage: image.value ? image.value : null,
   deadlineDate: end_date.value ? end_date.value : null,
   startDate: start_date.value ? start_date.value : null
 }));
@@ -90,6 +90,7 @@ const saveInput = () => {
     console.log(milestoneData.value)
     const response = updateMilestoneDetails(milestoneData.value)
     console.log(response)
+    router.push('/homepage/milestone')
   } else {
     console.log('fail')
   }
@@ -323,6 +324,7 @@ label {
 }
 #literal-image{
   height: 100%;
+  max-height: 300px;
   width: 100%;
 }
 

src/views/HomePage/MilestonePathView.vue

@@ -9,7 +9,9 @@ import { getMilestoneDetails } from '@/utils/MilestonePathUtils'
 import { useMilestoneStore } from '@/stores/currentMilestone'
 import PathHelpPopUp from '@/components/popups/help/PathHelpPopUp.vue'
 import HomeHelpPopUp from '@/components/popups/help/HomeHelpPopUp.vue'
-
+import MilestoneButton from '@/components/MilestonePath/MilestoneButton.vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 const displayType = ref<boolean>(false)
 const displayHelpPopUp = ref<boolean>(false)
 
@@ -97,6 +99,10 @@ const closeHelpPopUp = async () => {
         <div id = Transfer>
           <DirectTransfer @transfer-value="updateTotalSaved"/>
         </div>
+        <div id = buttons>
+          <milestone-button :label="editLabel" :button-color="editColor" @click="router.push('/homepage/edit-milestone')"></milestone-button>
+          <milestone-button :label="deleteLabel" :button-color="deleteColor"></milestone-button>
+        </div>
       </div>
 
     </div>
@@ -224,6 +230,9 @@ const closeHelpPopUp = async () => {
     .mobile-hide{
       display: none;
     }
+    #buttons{
+      flex-direction: column;
+    }
   }
 
 </style>