save tasks in db

backend/src/routers/task.ts

@@ -54,7 +54,7 @@ router.post('/', async (req, res) => {
     res.status(201).json(returnedTasks[0]);
 });
 
-router.put('/', (req, res) => {
+router.put('/:id', async (req, res) => {
 
     const id = parseInt(req.params['id']);
     const updatedTask: Partial<typeof task.$inferSelect> = req.body
@@ -63,7 +63,7 @@ router.put('/', (req, res) => {
         res.status(400).send({ error: 'Needs an id' });
         return;
     }
-    db.update(task).set(updatedTask).where(eq(task.id, id))
+    await db.update(task).set(updatedTask).where(eq(task.id, id))
 
     res.status(200).json(updatedTask);
 });

web/components/ui/MainContent.vue

@@ -11,13 +11,14 @@ const tasks = defineModel<Task[]>('tasks', { required: true })
 
 const emits = defineEmits<{
 	(e: 'createEvent', event: Event): void
+	(e: 'edit-task', task: Task): void
 }>()
 
 </script>
 
 <template>
 	<UCard class="flex grow" :ui="{ body: 'w-full h-full' }">
-		<Calendar @create="(event) => emits('createEvent', event)" v-model:events="events" v-model:date="date" ,
+		<Calendar @create="(event) => emits('createEvent', event)" @edit-task="(task) => emits('edit-task', task)" v-model:events="events" v-model:date="date" ,
 			v-model:dragged-task="draggedTask" v-model:tasks="tasks">
 		</Calendar>
 	</UCard>

web/components/ui/calendar/Calendar.vue

@@ -90,6 +90,7 @@ const emits = defineEmits<{
 	(e: 'create', event: Event): void
 	(e: 'edit', event: Event): void
 	(e: 'delete', event: Event): void
+	(e: 'edit-task', task: Task): void
 }>()
 
 const hour = (num: number) => {
@@ -187,7 +188,7 @@ function moveEvent(event: Event) {
 
 			<CalendarCollumn v-for="day in days" :seperators="seperators" :day="day.date" :events="day.events"
 				:date="date" v-model:draggedEvent="draggedEvent" @quick-create="openCreateModal" @edit="openEditModal"
-				@delete="openDeleteModal" @moved="moveEvent" v-model:dragged-task="draggedTask" />
+				@delete="openDeleteModal" @moved="moveEvent" @edit-task="(task) => emits('edit-task', task)" v-model:dragged-task="draggedTask" />
 		</div>
 
 	</div>

web/components/ui/calendar/CalendarCollumn.vue

@@ -18,6 +18,7 @@ const emit = defineEmits<{
 	(e: 'edit', event: Event): void
 	(e: 'moved', event: Event): void
 	(e: 'delete', event: Event): void
+	(e: 'edit-task', task: Task): void
 }>()
 
 const isDragging = ref(false)
@@ -164,6 +165,8 @@ function updateTaskWithDraggedTask() {
 	draggedTask.value.target.scheduled_at = draggedTask.value.dragInfo.date.startOf('day').plus({
 		minutes: draggedTask.value.dragInfo.top / (column.value?.offsetHeight ?? 1) * 24 * 60
 	})
+	
+	emit('edit-task', draggedTask.value.target)
 
 	draggedTask.value = undefined
 }

web/pages/index.vue

@@ -43,6 +43,12 @@ async function deleteTask(id: number) {
 	await refresh()
 }
 
+async function putTask(task: Task) {
+	console.log('editing task')
+	await axios.put(`/tasks/${task.id}`, task)
+	await refresh()
+}
+
 function scheduleTask(task: Task) {
 	draggedTask.value = { target: task, dragInfo: undefined }
 }
@@ -52,9 +58,9 @@ function scheduleTask(task: Task) {
 <template>
 	<div class="h-screen w-screen p-4 flex flex-row gap-5">
 		<Sidebar v-if="tasks !== null" v-model:tasks="tasks" v-model:date="date" @create-task="postTask"
-			@delete-task="deleteTask" @schedule-task="scheduleTask"/>
+			@delete-task="deleteTask" @schedule-task="scheduleTask" @edit-task="putTask"/>
 		<MainContent v-if="events !== null" v-model:events="events" v-model:date="date"
-			v-model:dragged-task="draggedTask" v-model:tasks="tasks" @create-event="postEvent" />
+			v-model:dragged-task="draggedTask" v-model:tasks="tasks" @create-event="postEvent" @edit-task="putTask"/>
 	</div>
 </template>