delete task individually

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>