add button for deleting task

delete task from db

web/pages/index.vue

@@ -19,7 +19,20 @@ onMounted(() => {
   events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
 })
 
-const { data: tasks } = await useAsyncData<string[]>(
+type Task = {
+  id: number
+  userid: string
+  title: string
+  description: string
+  done: number
+  estimated_time: string
+  due_date: string
+  created_at: string
+  updated_at: string
+}
+
+
+const { data: tasks, refresh } = await useAsyncData<Task[]>(
     'tasks',
     () => {
 		return axios.get("/tasks").then(result => {
@@ -43,13 +56,20 @@ async function postTask(name: string) {
     estimated_time: (new Date()).toISOString(), //TODO
     due_date: (new Date()).toISOString(),
   })
+  await refresh()
+}
+
+async function deleteTask(id: number) {
+  console.log('deleting Task')
+  await axios.delete(`/task/${id}`)
+  await refresh()
 }
 
 </script>
 
 <template>
     <div class="h-screen w-screen p-4 flex flex-row gap-5">
-        <Sidebar v-if="tasks !== null" :todos="tasks" v-model:date="date" @create-task="postTask"/>
+        <Sidebar v-if="tasks !== null" :todos="tasks" v-model:date="date" @create-task="postTask" @delete-task="deleteTask"/>
         <MainContent v-if="events !== null" v-model:events="events" v-model:date="date" @create-event="postEvent"/>
     </div>
 </template>