delete task individually

public/icons/trash.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="22" height="22" viewBox="0 0 24 24" stroke-width="2" stroke="#4d70cb" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="4" y1="7" x2="20" y2="7" />
+  <line x1="10" y1="11" x2="10" y2="17" />
+  <line x1="14" y1="11" x2="14" y2="17" />
+  <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
+  <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
+</svg>

src/modules/task/stores/useTask.store.ts

@@ -18,6 +18,9 @@ export const useTaskStore = defineStore('task-store', {
     },
     reset() {
       this.tasks = []
+    },
+    remove(taskId: string) {
+      this.tasks = this.tasks.filter((task) => task.id !== taskId)
     }
   },
   getters: {

src/views/task/TaskView.vue

@@ -3,18 +3,32 @@ import EstimationTimeArrival from '@/components/EstimationTimeArrival.vue'
 import TaskRecordPreview from '@/modules/record/components/TaskRecordPreview.vue'
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
 const props = defineProps<{
   id: string
 }>()
 
+const router = useRouter()
 const taskStore = useTaskStore()
 
 const task = computed(() => taskStore.getTask(props.id))
+
+const deleteTask = () => {
+  if (window.confirm('Are you sure to delete this task?')) {
+    taskStore.remove(props.id)
+    router.push({
+      name: 'home'
+    })
+  }
+}
 </script>
 
 <template>
   <div class="task-view" v-if="task">
+    <button class="delete-task button is-light is-danger" @click="deleteTask">
+      <img src="/icons/trash.svg" alt="delete task" />
+    </button>
     <h1 class="title">{{ task.title }}</h1>
     <h2 class="subtitle">
       <estimation-time-arrival :estimation="task.totalEstimation" />
@@ -50,4 +64,8 @@ const task = computed(() => taskStore.getTask(props.id))
   justify-content: space-between;
   max-width: 600px;
 }
+
+.delete-task {
+  float: right;
+}
 </style>