deleting tasks from the calendar now works

web/components/ui/MainContent.vue

@@ -14,14 +14,24 @@ const emits = defineEmits<{
 	(e: 'edit-task', task: Task): void
 	(e: 'edit-event', event: Event): void
 	(e: 'delete-event', id: number): void
+	(e: 'delete-task', id: number): void
 }>()
 
+function deleteItem(event: Event) {
+	if (event.task !== undefined) {
+		emits('delete-task', event.task.id ?? -1)
+	} else {
+		emits('delete-event', event.id ?? -1)
+	}
+}
+
 </script>
 
 <template>
 	<UCard class="flex grow" :ui="{ body: 'w-full h-full' }">
-		<Calendar @create="(event) => emits('createEvent', event)" @edit-task="(task) => emits('edit-task', task)" @edit="(event) => emits('edit-event', event)" @delete="(event) => emits('delete-event', event.id ?? -1)" v-model:events="events" v-model:date="date" ,
-			v-model:dragged-task="draggedTask" v-model:tasks="tasks">
+		<Calendar @create="(event) => emits('createEvent', event)" @edit-task="(task) => emits('edit-task', task)"
+			@edit="(event) => emits('edit-event', event)" @delete="deleteItem" v-model:events="events"
+			v-model:date="date" , v-model:dragged-task="draggedTask" v-model:tasks="tasks">
 		</Calendar>
 	</UCard>
 </template>

web/components/ui/calendar/Calendar.vue

@@ -12,11 +12,13 @@ const date = defineModel<DateTime>('date', { required: true })
 const draggedTask = defineModel<DraggedTask | undefined>('draggedTask', { required: true })
 const draggedEvent = ref<DraggedEvent | undefined>()
 const createInput = ref<Partial<SimpleEvent>>({})
-const createModalOpened = ref(false)
 const editInput = ref<Partial<SimpleEvent>>({})
 const editContext = ref<{ event: Event }>()
+const createModalOpened = ref(false)
 const editModalOpened = ref(false)
 const deleteModalOpened = ref(false)
+const editTaskModalOpened = ref(false)
+const taskFormModalInput = ref<Partial<Task>>({})
 const deleteContext = ref<{ event: Event }>()
 
 type Day = {
@@ -86,6 +88,22 @@ const days = computed<Day[]>(() => {
 	})
 })
 
+const deleteTitle = computed(() => {
+	if (deleteContext.value === undefined || deleteContext.value.event.task === undefined) {
+		return 'Delete Event'
+	} else {
+		return 'Delete Task'
+	}
+})
+
+const deleteDescription = computed(() => {
+	if (deleteContext.value === undefined || deleteContext.value.event.task === undefined) {
+		return 'Are you sure you want to delete this event?'
+	} else {
+		return 'Are you sure you want to delete this task?'
+	}
+})
+
 const emits = defineEmits<{
 	(e: 'create', event: Event): void
 	(e: 'edit', event: Event): void
@@ -123,9 +141,14 @@ function create(simple: SimpleEvent) {
 }
 
 function openEditModal(event: Event) {
-	editInput.value = event.toSimple()
-	editContext.value = { event: event }
-	editModalOpened.value = true
+	if (event.task !== undefined) {
+		taskFormModalInput.value = event.task
+		editTaskModalOpened.value = true
+	} else {
+		editInput.value = event.toSimple()
+		editContext.value = { event: event }
+		editModalOpened.value = true
+	}
 }
 
 function edit(simple: SimpleEvent) {
@@ -134,11 +157,25 @@ function edit(simple: SimpleEvent) {
 	emits('edit', editContext.value.event)
 }
 
+function editTask(task: Task) {
+	editTaskModalOpened.value = false
+	emits('edit-task', task)
+}
+
 function openDeleteModal(event: Event) {
 	deleteContext.value = { event: event }
 	deleteModalOpened.value = true
 }
 
+function deleteItem() {
+	if (deleteContext.value === undefined) return
+	if (deleteContext.value.event.task !== undefined) {
+		deleteTask()
+	} else {
+		deleteEvent()
+	}
+}
+
 function deleteEvent() {
 	if (deleteContext.value === undefined) return
 	emits('delete', deleteContext.value?.event)
@@ -158,6 +195,14 @@ function deleteEvent() {
 	deleteModalOpened.value = false
 }
 
+function deleteTask() {
+	if (deleteContext.value === undefined || deleteContext.value.event.task === undefined) return
+	emits('delete', deleteContext.value.event)
+	tasks.value = tasks.value.filter(t => t.id !== (deleteContext.value?.event.task?.id ?? -1))
+	deleteContext.value = undefined
+	deleteModalOpened.value = false
+}
+
 function moveEvent(event: Event) {
 	if (event.task !== undefined) {
 		emits('edit-task', event.task)
@@ -173,10 +218,12 @@ function moveEvent(event: Event) {
 		<EventFormModal action="edit" @submnitted="event => edit(event)" :input="editInput"
 			v-model:open="editModalOpened" />
 
-		<UModal v-model:open="deleteModalOpened" title="Delete Event"
-			description="Are you sure you want to delete this event?">
+		<UiTaskFormModal v-model:open="editTaskModalOpened" :input="taskFormModalInput" action="edit"
+			@submnitted="editTask" />
+
+		<UModal v-model:open="deleteModalOpened" :title="deleteTitle" :description="deleteDescription">
 			<template #footer>
-				<UButton variant="solid" @click="deleteEvent">
+				<UButton variant="solid" @click="deleteItem">
 					Delete
 				</UButton>
 				<UButton variant="solid" @click="deleteModalOpened = false">
@@ -190,7 +237,8 @@ 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" @edit-task="(task) => emits('edit-task', task)" v-model:dragged-task="draggedTask" />
+				@delete="openDeleteModal" @moved="moveEvent" @edit-task="(task) => emits('edit-task', task)"
+				v-model:dragged-task="draggedTask" />
 		</div>
 
 	</div>

web/pages/index.vue

@@ -86,7 +86,7 @@ function scheduleTask(task: Task) {
 		<Sidebar v-if="tasks !== null" v-model:tasks="tasks" v-model:date="date" @create-task="postTask"
 			@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" @edit-task="putTask" @edit-event="putEvent" @delete-event="deleteEvent"/>
+			v-model:dragged-task="draggedTask" v-model:tasks="tasks" @create-event="postEvent" @edit-task="putTask" @edit-event="putEvent" @delete-event="deleteEvent" @delete-task="deleteTask"/>
 	</div>
 </template>