add edit task view

public/icons/edit.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#4d70cb" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
+  <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
+  <line x1="16" y1="5" x2="19" y2="8" />
+</svg>

src/modules/task/components/TaskForm.vue

@@ -3,19 +3,20 @@ import EstimationTimeArrival from '@/components/EstimationTimeArrival.vue'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import type { Stepable } from '../interfaces/stepable'
+import type { Taskable } from '../interfaces/taskable'
 import { Task } from '../models/task'
 import { useTaskStore } from '../stores/useTask.store'
 import StepInput from './StepInput.vue'
 
 const store = useTaskStore()
 const router = useRouter()
-const props = defineProps<{ id: string }>()
+const props = defineProps<{ id: string; initialTask?: Taskable }>()
 const id = computed(() => props.id)
 
-const steps = ref<Stepable[]>([])
+const steps = ref<Stepable[]>(props.initialTask?.steps ?? [])
 
-const title = ref('')
-const link = ref('')
+const title = ref(props.initialTask?.title ?? '')
+const link = ref(props.initialTask?.link ?? '')
 
 const totalEstimation = computed(() =>
   steps.value.map((step) => step.estimation).reduce((a, b) => a + b, 0)

src/router/index.ts

@@ -25,6 +25,12 @@ export const router = createRouter({
       props: true,
       component: () => import('../views/task/TaskView.vue')
     },
+    {
+      path: '/task/:id/edit',
+      name: 'edit-task',
+      props: true,
+      component: () => import('../views/task/EditTask.vue')
+    },
     {
       path: '/task/:taskId/record',
       name: 'record-view',

src/views/task/EditTask.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import TaskForm from '@/modules/task/components/TaskForm.vue'
+import { useTaskStore } from '@/modules/task/stores/useTask.store'
+
+const props = defineProps<{ id: string }>()
+const store = useTaskStore()
+
+const task = store.getTask(props.id)
+</script>
+
+<template>
+  <div class="edit-task">
+    <TaskForm v-if="task" :id="task.id" :initial-task="task" />
+    <div v-else class="no-task-found">
+      <p>Task not found.</p>
+      <router-link :to="{ name: 'home' }" class="button">
+        <img src="/icons/left.svg" alt="left arrow" />
+        go to homepage</router-link
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.edit-task {
+  .no-task-found {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+  }
+}
+</style>

src/views/task/TaskView.vue

@@ -26,9 +26,22 @@ const deleteTask = () => {
 
 <template>
   <div class="task-view" v-if="task">
+    <div class="buttons actions">
+      <router-link
+        :to="{
+          name: 'edit-task',
+          params: {
+            id
+          }
+        }"
+        class="button"
+      >
+        <img src="/icons/edit.svg" alt="edit task" />
+      </router-link>
       <button class="delete-task button is-light is-danger" @click="deleteTask">
         <img src="/icons/trash.svg" alt="delete task" />
       </button>
+    </div>
     <h1 class="title">{{ task.title }}</h1>
     <h2 class="subtitle">
       <estimation-time-arrival :estimation="task.totalEstimation" />
@@ -65,7 +78,7 @@ const deleteTask = () => {
   max-width: 600px;
 }
 
-.delete-task {
+.actions {
   float: right;
 }
 </style>