rough outline of dragging tasks is working

web/components/ui/calendar/Calendar.vue

@@ -7,6 +7,7 @@ import { DateTime } from 'luxon';
 import EventFormModal from '../EventFormModal.vue';
 
 const events = defineModel<Event[]>('events', { required: true })
+const tasks = defineModel<Task[]>('tasks', { required: true })
 const date = defineModel<DateTime>('date', { required: true })
 const draggedTask = defineModel<DraggedTask | undefined>('draggedTask', { required: true })
 const draggedEvent = ref<DraggedEvent | undefined>()
@@ -35,10 +36,17 @@ function pushEventWithCollisionUpdate(array: CollissionWrapper[], event: Event,
 	}
 }
 
+const taskEvents = computed<Event[]>(() => {
+	return tasks.value
+		.filter(task => task.isScheduled())
+		.map(task => task.toEvent())
+})
+
 const days = computed<Day[]>(() => {
 	return [1, 2, 3, 4, 5, 6, 7].map((i) => {
+		const eventsToDisplay = [...taskEvents.value, ...events.value]
 		const currentDate = date.value.startOf('week').plus({ day: i - 1 })
-		const filteredEvents = events.value.filter(
+		const filteredEvents = eventsToDisplay.filter(
 			(event) => event.from >= currentDate.startOf('day') && event.to <= currentDate.endOf('day')
 		)
 

web/components/ui/calendar/CalendarCollumn.vue

@@ -84,6 +84,7 @@ function eventMove(mouseEvent: MouseEvent, event: Event) {
 }
 
 function dragover(e: DragEvent) {
+	e.preventDefault()
 	drawDraggedEvent(e)
 	drawDraggedTask(e)
 }
@@ -120,7 +121,27 @@ function drawDraggedEvent(event: DragEvent) {
 }
 
 function dragDrop(_: DragEvent) {
-	draggedEvent.value?.target.updateWithDraggedEvent(draggedEvent.value, column.value?.offsetHeight ?? 0)
+	console.log('dropping')
+	if (draggedEvent.value !== undefined) {
+		updateEventWithDraggedEvent()
+	}
+
+	if (draggedTask.value !== undefined) {
+		console.log('dropping task')
+		updateTaskWithDraggedTask()
+	}
+}
+
+function updateEventWithDraggedEvent() {
+	if (draggedEvent.value == undefined) return
+
+	if (draggedEvent.value.target.task !== undefined) {
+		draggedEvent.value.target.task.scheduled_at = draggedEvent.value.date.startOf('day').plus({
+			minutes: draggedEvent.value.top / (column.value?.offsetHeight ?? 1) * 24 * 60
+		})
+	} else {
+		draggedEvent.value?.target.updateWithDraggedEvent(draggedEvent.value, column.value?.offsetHeight ?? 0)
+	}
 
 	if (draggedEvent.value === undefined) {
 		draggedEvent.value = undefined
@@ -131,6 +152,22 @@ function dragDrop(_: DragEvent) {
 	draggedEvent.value = undefined
 }
 
+function updateTaskWithDraggedTask() {
+	if (draggedTask.value === undefined) {
+		return
+	}
+
+	if (draggedTask.value.dragInfo === undefined) {
+		return
+	}
+
+	draggedTask.value.target.scheduled_at = draggedTask.value.dragInfo.date.startOf('day').plus({
+		minutes: draggedTask.value.dragInfo.top / (column.value?.offsetHeight ?? 1) * 24 * 60
+	})
+
+	draggedTask.value = undefined
+}
+
 </script>
 
 <template>
@@ -143,7 +180,7 @@ function dragDrop(_: DragEvent) {
 		</div>
 
 		<div id="col" ref="column" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mouseover" @dragover="dragover"
-			@dragend="dragDrop" class="relative flex flex-col grow items-center select-none">
+			@dragend="dragDrop" @drop="dragDrop" class="relative flex flex-col grow items-center select-none">
 			<CalendarSeperator v-for="sep in seperators" :seperator="sep">
 				<hr class="w-full border-muted">
 			</CalendarSeperator>
@@ -165,5 +202,5 @@ function dragDrop(_: DragEvent) {
 	</div>
 </template>
 
-
+<style scoped></style>
 <style scoped></style>