feat(goal): added a view goal page

src/router/index.ts

@@ -39,15 +39,20 @@ const router = createRouter({
             component: () => import('@/views/UserGoalsView.vue')
         },
         {
-            path: '/sparemaal/ny',
+            path: '/sparemaal/rediger/ny',
             name: 'new-goal',
             component: () => import('@/views/ManageGoalView.vue')
         },
         {
-            path: '/sparemaal/:id',
+            path: '/sparemaal/rediger/:id',
             name: 'edit-goal',
             component: () => import('@/views/ManageGoalView.vue')
         },
+        {
+            path: '/sparemaal/oversikt/:id',
+            name: 'view-goal',
+            component: () => import('@/views/ViewGoalView.vue')
+        },
         {
             path: '/spareutfordringer',
             name: 'challenges',

src/types/goal.ts

 export interface Goal {
-    id: number | null | undefined
+    id?: number
     title: string
     saved: number
     target: number
-    completion: number
+    completion?: number
     description: string
-    priority: number
-    createdOn: string | null | undefined
+    priority?: number
+    createdOn?: string
     due: string
-    completedOn: string | null | undefined
+    completedOn?: string
 }

src/views/ViewGoalView.vue

+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { computed, onMounted, ref } from 'vue'
+import ProgressBar from '@/components/ProgressBar.vue'
+import authInterceptor from '@/services/authInterceptor'
+import type { Goal } from '@/types/goal'
+import InteractiveSpare from '@/components/InteractiveSpare.vue'
+
+const router = useRouter()
+
+const goalInstance = ref<Goal>({
+    title: 'Test tittel',
+    saved: 0,
+    target: 100,
+    description: 'Dette er en lang textbeskrivelse',
+    due: ''
+})
+
+const completion = computed(() => (goalInstance.value.saved / goalInstance.value.target) * 100)
+const isCompleted = computed(() => goalInstance.value.completedOn != null)
+
+const motivation = ref<string[]>([])
+
+const calculateSpeech = () => {
+    if (completion.value === 0) {
+        return motivation.value.push(
+            `Du har ikke spart noe enda. Du har ${goalInstance.value.target}kr igjen til målet.`
+        )
+    } else if (completion.value < 25) {
+        return motivation.value.push(
+            `Du har spart ${goalInstance.value.saved}kr av ${goalInstance.value.target}kr.`
+        )
+    } else if (completion.value < 75) {
+        return motivation.value.push(
+            `Du er på god vei! Du har spart ${goalInstance.value.saved}kr av ${goalInstance.value.target}kr.`
+        )
+    } else if (completion.value < 100) {
+        return motivation.value.push(
+            `Nesten der! Du har spart ${goalInstance.value.saved}kr av ${goalInstance.value.target}kr.`
+        )
+    } else if (completion.value >= 100) {
+        return motivation.value.push(
+            `Fantastisk! Du har nådd målet ditt! Du har spart ${goalInstance.value.saved}kr av ${goalInstance.value.target}kr.`
+        )
+    }
+}
+
+onMounted(() => {
+    const goalId = router.currentRoute.value.params.id
+    if (!goalId) return router.push({ name: 'goals' })
+
+    authInterceptor(`/users/me/goals/${goalId}`)
+        .then((response) => {
+            goalInstance.value = response.data
+            calculateSpeech()
+        })
+        .catch(() => router.push({ name: 'goals' }))
+})
+
+const completeGoal = () => {
+    authInterceptor
+        .put(`/users/me/goals/${goalInstance.value.id}/complete`)
+        .then(() => {
+            router.push({ name: 'goals' })
+        })
+        .catch((error) => {
+            console.error(error)
+        })
+}
+</script>
+
+<template>
+    <div class="flex flex-row flex-wrap items-center justify-center gap-10">
+        <div class="flex flex-col gap-5 max-w-96">
+            <button
+                class="w-min"
+                @click="router.push({ name: 'goals', params: { id: goalInstance.id } })"
+            >
+                Oversikt
+            </button>
+
+            <div
+                class="flex flex-col justify-center border-4 border-black rounded-3xl align-middle p-5 card-shadow overflow-hidden w-full"
+            >
+                <h2 class="my-0">Sparemål:</h2>
+                <h2 class="font-light">
+                    {{ goalInstance.title }}
+                </h2>
+                <p class="text-wrap break-words">{{ goalInstance.description }}</p>
+                <br />
+                <p class="text-center">
+                    Du har spart {{ goalInstance.saved }}kr av {{ goalInstance.target }}kr
+                </p>
+                <ProgressBar :completion="completion" />
+            </div>
+
+            <div class="flex flex-row justify-between gap-2 w-full">
+                <button
+                    v-if="!isCompleted"
+                    @click="
+                        router.push({
+                            name: 'edit-goal',
+                            params: { id: goalInstance.id }
+                        })
+                    "
+                >
+                    Rediger
+                </button>
+
+                <button
+                    v-if="!isCompleted"
+                    @click="completeGoal"
+                    v-text="'Marker målet som ferdig'"
+                />
+
+                <button
+                    class="bg-button-danger hover:bg-button-danger"
+                    @click="
+                        authInterceptor
+                            .delete(`/users/me/goals/${goalInstance.id}`)
+                            .then(() => router.push({ name: 'goals' }))
+                            .catch((error) => console.error(error))
+                    "
+                >
+                    Slett
+                </button>
+            </div>
+        </div>
+        <InteractiveSpare :png-size="10" :speech="motivation" direction="left" />
+    </div>
+</template>
+
+<style scoped>
+.card-shadow {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+</style>