creating modal works, edit modal is showing

backend/src/main.ts

@@ -80,10 +80,10 @@ app.post('/task', async(req, res) => {
 	newTask.userid = userId
 
 	console.log(newTask)
-    const returnedTask = await db.insert(task).values(newTask).returning()
-    console.log(returnedTask)
+	const returnedTasks = await db.insert(task).values(newTask).returning()
+	console.log(returnedTasks)
 
-    res.status(201).json(returnedTask);
+	res.status(201).json(returnedTasks[0]);
 });
 
 app.post('/event', async (req, res) => {
@@ -122,7 +122,8 @@ app.put('/event', (req, res) => {
 	}
 	db.update(event).set(updatedEvent).where(eq(event.id, id))
 
-    res.status(200).json(updatedEvent);});
+	res.status(200).json(updatedEvent);
+});
 
 app.delete('/task/:id', async (req, res) => {
 	const id = parseInt(req.params['id']);

web/components/ui/Sidebar.vue

@@ -9,14 +9,15 @@ const colorMode = useColorMode();
 const toast = useToast()
 
 const currentTheme = ref<'dark' | 'system' | 'light'>(colorMode.preference as 'dark' | 'system' | 'light');
-const showTaskFormModal = ref(false);
+const showTaskCreateModal = ref(false);
+const showTaskEditModal = ref(false);
 const taskFormModalInput = ref<Partial<Task>>({});
 
 const date = defineModel<DateTime>('date', { required: true })
 const tasks = defineModel<Task[]>('tasks', { required: true })
 
 const emits = defineEmits<{
-	(e: 'createTask', name: string): void
+	(e: 'createTask', task: Task): void
 	(e: 'deleteTask', id: number): void
 	(e: 'editTask', task: Task): void
 }>()
@@ -78,22 +79,22 @@ const selectedDate = computed({
 	}
 })
 
-function addTask() {
-	const name = prompt("Todo name:")
-	console.log(name)
-	if (name !== null) {
-		emits('createTask', name)
+function addTask(task: Task) {
+	tasks.value.push(task)
+	console.log(tasks.value)
+	emits('createTask', task)
 }
-}
-function deleteTask(todo: Task) {
-	if (todo.id === undefined) {
+function deleteTask(task: Task) {
+	if (task.id === undefined) {
 		toast.add({
 			title: "Task does not exist anymore"
 		})
 		return
 	}
 
-	emits('deleteTask', todo.id)
+	tasks.value = tasks.value.filter(t => t.id !== task.id)
+
+	emits('deleteTask', task.id)
 }
 function editTask(task: Task) {
 	emits('editTask', task)
@@ -101,14 +102,22 @@ function editTask(task: Task) {
 
 function openTaskFormModal(task: Partial<Task>) {
 	taskFormModalInput.value = task
-	showTaskFormModal.value = true
+	showTaskCreateModal.value = true
+}
+
+function openTaskEditModal(task: Task) {
+	taskFormModalInput.value = task
+	showTaskEditModal.value = true
 }
 
 </script>
 
 <template>
 	<UCard class="flex w-64 h-full" :ui="{ body: 'w-full' }">
-		<UiTaskFormModal v-model:open="showTaskFormModal" :input="taskFormModalInput" action="create" />
+		<UiTaskFormModal v-model:open="showTaskCreateModal" :input="taskFormModalInput" action="create"
+			@submnitted="addTask" />
+		<UiTaskFormModal v-model:open="showTaskEditModal" :input="taskFormModalInput" action="edit"
+			@submnitted="editTask" />
 
 		<div class="flex flex-col h-full w-full gap-5">
 			<header class="flex flex-col gap-2">
@@ -117,7 +126,7 @@ function openTaskFormModal(task: Partial<Task>) {
 			</header>
 			<div class="flex flex-col grow justify-between">
 				<div class="flex flex-col gap-2">
-					<Title1>Todos</Title1>
+					<Title1>Tasks</Title1>
 					<div class="flex gap-2 flex-col">
 						<ListItem v-for="task in todoTasks">
 							<div class="flex w-full gap-4 items-center">
@@ -127,7 +136,7 @@ function openTaskFormModal(task: Partial<Task>) {
 								</span>
 								<div class="flex gap-1">
 									<UButton size="xs" color="neutral" class="flex justify-center"
-										icon="mingcute:pencil-line" @click="() => editTask(task)" />
+										icon="mingcute:pencil-line" @click="() => openTaskEditModal(task)" />
 									<UButton size="xs" color="primary" class="flex justify-center"
 										icon="octicon:trashcan-16" @click="() => deleteTask(task)" />
 								</div>
@@ -142,7 +151,7 @@ function openTaskFormModal(task: Partial<Task>) {
 								</span>
 								<div class="flex gap-1">
 									<UButton size="xs" color="neutral" class="flex justify-center"
-										icon="mingcute:pencil-line" @click="() => editTask(task)" />
+										icon="mingcute:pencil-line" @click="() => openTaskEditModal(task)" />
 									<UButton size="xs" color="primary" class="flex justify-center"
 										@click="() => deleteTask(task)" icon="octicon:trashcan-16" />
 								</div>

web/components/ui/TaskFormModal.vue

@@ -35,6 +35,7 @@ watchEffect(() => {
 	descriptionField.value = props.input.description ?? ''
 	estimatedTimeField.value = (((props.input.estimated_time) ?? 0) / 60)
 	dueDateField.value = props.input.due_date?.toFormat('yyyy-MM-dd') ?? ''
+	dueTimeField.value = props.input.due_date?.toFormat('HH:mm') ?? ''
 })
 
 const formSchema = z.object({
@@ -89,10 +90,13 @@ function cancel() {
 		<template #body>
 			<div class="flex flex-col gap-2">
 				<UInput type="text" placeholder="Name" v-model="titleField" required />
+				<UInput type="number" class="grow" placeholder="estimated time in hours" v-model="estimatedTimeField"
+					icon="mdi:stopwatch-outline" required />
 				<div class="flex flex-row gap-2">
-					<UInput class="grow" placeholder="2025-06-16" v-model="dueDateField" icon="i-lucide-calendar"
+					<UInput type="date" class="grow" placeholder="due data e.g 2025-06-16" v-model="dueDateField"
+						icon="i-lucide-calendar" required />
+					<UInput class="grow" placeholder="due time e.g 15:34" v-model="dueTimeField" icon="i-lucide-clock"
 						required />
-					<UInput class="grow" placeholder="15:34" v-model="dueTimeField" icon="i-lucide-clock" required />
 				</div>
 				<UTextarea type="text" placeholder="Description" v-model="descriptionField" required />
 			</div>

web/pages/index.vue

@@ -7,6 +7,7 @@ import { Event, type SerializableEvent } from '~/utils/event';
 
 const date = ref<DateTime>(DateTime.now())
 const events = ref<Event[]>([])
+const tasks = ref<Task[]>([])
 
 const { data: eventsResponse } = await useAsyncData<SerializableEvent[]>(
 	'events',
@@ -20,10 +21,7 @@ const {data: tasksResponse, refresh} = await useAsyncData<SerializableTask[]>(
 
 onMounted(() => {
 	events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
-})
-
-const tasks = computed(() => {
-	return tasksResponse.value?.map(Task.fromSerializable) ?? []
+	tasks.value = tasksResponse.value?.map(Task.fromSerializable) ?? []
 })
 
 async function postEvent(event: Event) {
@@ -31,16 +29,11 @@ async function postEvent(event: Event) {
 	await axios.post('/event', event.toSerializable())
 }
 
-async function postTask(name: string) {
+async function postTask(task: Task) {
 	console.log('posting Task')
-	await axios.post('/task', {
-		title: name,
-		description: "",
-		done: false,
-		estimated_time: 0,
-		due_date: (new Date()).toISOString(),
-	})
-	await refresh()
+	const createdTask = await axios.post<SerializableTask>('/task', task)
+	console.log(createdTask)
+	task.id = createdTask.data.id
 }
 
 async function deleteTask(id: number) {