duplicate tasks

public/icons/copy.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" 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="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
+  <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
+</svg>

src/router/index.ts

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

src/views/task/DuplicateTask.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import TaskForm from '@/modules/task/components/TaskForm.vue'
+import TaskNotFound from '@/modules/task/components/TaskNotFound.vue'
+import { useTaskStore } from '@/modules/task/stores/useTask.store'
+import { createUuid } from '@/shared/create-uuid'
+
+const props = defineProps<{ id: string }>()
+const taskStore = useTaskStore()
+
+const newId = createUuid()
+
+const task = taskStore.getTask(props.id)
+</script>
+
+<template>
+  <div class="edit-task">
+    <TaskForm v-if="task" :id="newId" :initial-task="task" />
+    <task-not-found v-else />
+  </div>
+</template>

src/views/task/EditTask.vue

@@ -14,18 +14,24 @@ const task = taskStore.getTask(props.id)
 
 <template>
   <div class="edit-task">
+    <div class="columns is-centered" v-if="isMessageDisplayed">
+      <div class="column is-one-third">
+        <section class="message is-info">
+          <div class="message-header">
+            <p>Info</p>
+            <button
+              class="delete"
+              aria-label="delete"
+              @click="isMessageDisplayed = false"
+            ></button>
+          </div>
+          <div class="message-body">
+            When editing a task, record will be reset.
+          </div>
+        </section>
+      </div>
+    </div>
     <TaskForm v-if="task" :id="task.id" :initial-task="task" />
     <task-not-found v-else />
-    <article v-if="isMessageDisplayed" class="message is-info">
-      <div class="message-header">
-        <p>Info</p>
-        <button
-          class="delete"
-          aria-label="delete"
-          @click="isMessageDisplayed = false"
-        ></button>
-      </div>
-      <div class="message-body">When editing a task, record will be reset.</div>
-    </article>
   </div>
 </template>

src/views/task/TaskView.vue

@@ -39,6 +39,17 @@ const deleteTask = () => {
       >
         <img src="/icons/edit.svg" alt="edit task" />
       </router-link>
+      <router-link
+        :to="{
+          name: 'duplicate-task',
+          params: {
+            id
+          }
+        }"
+        class="button"
+      >
+        <img src="/icons/copy.svg" alt="duplicate task" />
+      </router-link>
       <button class="delete-task button is-light is-danger" @click="deleteTask">
         <img src="/icons/trash.svg" alt="delete task" />
       </button>