add button for deleting task

delete task from db

backend/src/main.ts

@@ -16,9 +16,9 @@ app.get('/', (req, res) => {
 });
 
 app.get('/tasks', async(req, res) => {
-    const tasks = await db.select({ title: task.title }).from(task)
-    const titles = tasks.map(t => t.title)
-    res.send(titles);
+    const tasks = await db.select().from(task)
+    console.log(tasks)
+    res.send(tasks);
 });
 
 app.get('/events', async(req, res) => {
@@ -38,17 +38,19 @@ app.get('/user/:id', (req, res) => {
 
 });
 
-app.get('/task/:id', (req, res) => {
+app.get('/task/:id', async(req, res) => {
 
-    const id = req.params['id'];
+    const id = parseInt(req.params['id']);
 
     if (id == null) {
         res.status(400).send({error: 'Needs an id'});
         return;
     }
 
-    const task = {id: id, name: 'Homework'}  //TODO
-    res.json(task);
+    const returnedTask = await db.select().from(task).where(eq(task.id, id))
+    //
+    console.log(returnedTask)
+    res.json(returnedTask);
 });
 
 app.get('/event/:id', (req, res) => {

web/components/ui/Sidebar.vue

@@ -19,6 +19,7 @@ watch(currentTheme, () => {
 
 const emits = defineEmits<{
 	(e: 'createTask', name: string): void
+	(e: 'deleteTask', id: number): void
 }>()
 
 const dropDownItems = computed<DropdownMenuItem[][]>(() => [
@@ -73,17 +74,37 @@ const selectedDate = computed({
 	}
 })
 
+type Task = {
+  id: number
+  userid: string
+  title: string
+  description: string
+  done: number
+  estimated_time: string
+  due_date: string
+  created_at: string
+  updated_at: string
+}
+
 defineProps<{
-	todos: string[]
+  todos: Task[]
 }>()
 
-function addTodo(){
+
+function addTodo() {
 	const name = prompt("Todo name:")
 	console.log(name)
 	if (name !== null) {
 		emits('createTask', name)
 	}
 }
+function deleteTodo(todo: Task) {
+	console.log(todo.id)
+	emits('deleteTask', todo.id)
+}
+function editTodo() {
+
+}
 
 </script>
 
@@ -98,7 +119,21 @@ function addTodo(){
 				<div class="flex flex-col gap-2">
 					<Title1>Todos</Title1>
 					<div class="flex gap-2 flex-col">
-						<ListItem v-for="todo in todos">{{ todo }}</ListItem>
+						<ListItem v-for="todo in todos">
+							<div class="flex justify-between">
+								<span>
+									{{ todo.title }}
+								</span>
+								<div class="flex gap-1">
+									<UButton size="xs" color="neutral" class="flex justify-center" @click="editTodo">
+										<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg>
+									</UButton>
+									<UButton size="xs" class="flex justify-center" color="primary" @click="() => deleteTodo(todo)">
+										<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-2 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg>
+									</UButton>
+								</div>
+							</div>
+					</ListItem>
 					</div>
 				</div>
 				<div class="flex">

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>