From 957af1c257d5a468e01b0f426aab531bf86a77f3 Mon Sep 17 00:00:00 2001
From: quirinecker <quirin.ecker@bajupa.com>
Date: Mon, 7 Jul 2025 21:32:09 +0200
Subject: [PATCH] did thigns

---
 web/components/ui/ListItem.vue                |  5 ++-
 web/components/ui/Sidebar.vue                 | 19 ++++++----
 web/components/ui/calendar/Calendar.vue       | 23 +++++++++--
 .../ui/calendar/CalendarCollumn.vue           | 38 +++++++++++++------
 web/components/ui/calendar/CalendarEvent.vue  | 29 ++++++++++++--
 web/pages/index.vue                           | 19 ++++++++--
 web/utils/task.ts                             |  3 +-
 7 files changed, 105 insertions(+), 31 deletions(-)

diff --git a/web/components/ui/ListItem.vue b/web/components/ui/ListItem.vue
index a115f61..cc1807d 100644
--- a/web/components/ui/ListItem.vue
+++ b/web/components/ui/ListItem.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+defineProps<{
+	isScheduled: boolean
+}>()
 
 </script>
 
 <template>
-	<UCard class="[&>*]:p-3 w-full">
+	<UCard class="[&>*]:p-3 w-full" :variant="isScheduled ? 'subtle' : 'outline'">
 		<slot />
 	</UCard>
 </template>
diff --git a/web/components/ui/Sidebar.vue b/web/components/ui/Sidebar.vue
index dbfc5dd..8fc0ecb 100644
--- a/web/components/ui/Sidebar.vue
+++ b/web/components/ui/Sidebar.vue
@@ -27,6 +27,7 @@ const emits = defineEmits<{
 	(e: 'deleteTask', id: number): void
 	(e: 'editTask', task: Task): void
 	(e: 'scheduleTask', task: Task): void
+	(e: 'dismissSchedule'): void
 }>()
 
 const isLight = computed(() => currentTheme.value === 'light');
@@ -140,6 +141,10 @@ function scheduleTask(task: Task) {
 	emits('scheduleTask', task)
 }
 
+function dismissSchedule() {
+	emits('dismissSchedule')
+}
+
 </script>
 
 <template>
@@ -157,16 +162,16 @@ function scheduleTask(task: Task) {
 			</template>
 		</UModal>
 
-		<div class="flex flex-col h-full w-full gap-5">
+		<div class="flex flex-col h-full w-full gap-5" @dragenter="dismissSchedule">
 			<header class="flex flex-col gap-2">
 				<Title1>Calendar</Title1>
 				<UCalendar v-model="selectedDate" />
 			</header>
-			<div class="flex flex-col grow justify-between">
-				<div class="flex flex-col gap-2">
+			<div class="flex flex-col grow justify-between overflow-x-hidden">
+				<div class="flex flex-col gap-2 h-full overflow-x-hidden">
 					<Title1>Tasks</Title1>
-					<div class="flex gap-2 flex-col">
-						<ListItem v-for="task in todoTasks">
+					<div class="flex gap-2 grow flex-col overflow-auto px-1 py-2">
+						<ListItem v-for="task in todoTasks" :is-scheduled="task.scheduled_at !== undefined">
 							<div class="flex w-full gap-4 items-center" @dragstart="scheduleTask(task)"
 								draggable="true">
 								<span
@@ -182,7 +187,7 @@ function scheduleTask(task: Task) {
 							</div>
 						</ListItem>
 						<USeparator label="Done" v-if="todoTasks.length !== 0" />
-						<ListItem v-for="task in doneTasks">
+						<ListItem v-for="task in doneTasks" :is-scheduled="task.scheduled_at !== undefined">
 							<div class="flex w-full gap-4 items-center" @dragstart="scheduleTask(task)"
 								draggable="true">
 								<span
@@ -192,7 +197,7 @@ function scheduleTask(task: Task) {
 								<div class="flex gap-1">
 									<UButton size="xs" color="neutral" class="flex justify-center"
 										icon="mingcute:pencil-line" @click="() => openTaskEditModal(task)" />
-									<UButton size="xs" color="primary" class="flex justify-center"
+									<UButton size="xs" color="primary" class="flex justify-center shadow-xl"
 										@click="() => openDeleteModal(task)" icon="octicon:trashcan-16" />
 								</div>
 							</div>
diff --git a/web/components/ui/calendar/Calendar.vue b/web/components/ui/calendar/Calendar.vue
index 30f52be..7adfc4d 100644
--- a/web/components/ui/calendar/Calendar.vue
+++ b/web/components/ui/calendar/Calendar.vue
@@ -21,6 +21,7 @@ const editTaskModalOpened = ref(false)
 const editTaskContext = ref<Task>()
 const taskFormModalInput = ref<Partial<Task>>({})
 const deleteContext = ref<{ event: Event }>()
+const taskDraggingActive = ref(true)
 
 type Day = {
 	date: DateTime
@@ -212,10 +213,24 @@ function moveEvent(event: Event) {
 	} else emits('edit', event)
 }
 
+function dragEnter(_: DragEvent) {
+	if (draggedTask.value !== undefined) {
+		draggedTask.value.active = true
+	}
+}
+
+function rawEdit(event: Event) {
+	if (event.task === undefined) {
+		return
+	}
+
+	emits('edit-task', event.task)
+}
+
 </script>
 
 <template>
-	<div class="w-full h-full flex flex-col">
+	<div class="w-full h-full flex flex-col" @dragenter="dragEnter">
 		<EventFormModal action="create" @submnitted="event => create(event)" :input="createInput"
 			v-model:open="createModalOpened" />
 		<EventFormModal action="edit" @submnitted="event => edit(event)" :input="editInput"
@@ -239,9 +254,9 @@ function moveEvent(event: Event) {
 			<CalendarHeader :seperators="seperators" />
 
 			<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" />
+				:task-dragging-active="taskDraggingActive" :date="date" v-model:draggedEvent="draggedEvent"
+				@quick-create="openCreateModal" @edit="openEditModal" @delete="openDeleteModal" @moved="moveEvent"
+				@edit-task="(task) => emits('edit-task', task)" @raw-edit="(event) => rawEdit(event)" v-model:dragged-task="draggedTask" />
 		</div>
 
 	</div>
diff --git a/web/components/ui/calendar/CalendarCollumn.vue b/web/components/ui/calendar/CalendarCollumn.vue
index 393cace..7216aa1 100644
--- a/web/components/ui/calendar/CalendarCollumn.vue
+++ b/web/components/ui/calendar/CalendarCollumn.vue
@@ -10,12 +10,14 @@ const props = defineProps<{
 	seperators: Seperator[],
 	day: DateTime
 	events: CollissionWrapper[][]
-	date: DateTime
+	date: DateTime,
+	taskDraggingActive: boolean
 }>()
 
 const emit = defineEmits<{
 	(e: 'quick-create', day: DateTime, event: EventDimensions): void,
 	(e: 'edit', event: Event): void
+	(e: 'raw-edit', event: Event): void
 	(e: 'moved', event: Event): void
 	(e: 'delete', event: Event): void
 	(e: 'edit-task', task: Task): void
@@ -165,12 +167,24 @@ 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
 }
 
+const moveColor = computed(() => {
+	if (draggedTask.value !== undefined) {
+		return 'secondary'
+	}
+
+	if (draggedEvent.value !== undefined && draggedEvent.value.target.task !== undefined) {
+		return 'secondary'
+	}
+
+	return 'primary'
+})
+
 </script>
 
 <template>
@@ -187,23 +201,23 @@ function updateTaskWithDraggedTask() {
 			<CalendarSeperator v-for="sep in seperators" :seperator="sep">
 				<hr class="w-full border-muted">
 			</CalendarSeperator>
-			<div class="absolute w-11/12 top-20 bg-black opacity-45 rounded-lg"
-				:style="{ height: `${height}px`, top: `${top}px` }"></div>
+			<UBadge class="absolute w-11/12 p-0" variant="subtle" :style="{ height: `${height}px`, top: `${top}px` }">
+			</UBadge>
 
 			<div v-for="[index, column] in events.entries()" class="flex flex-row w-11/12 h-full absolute top-0">
 				<CalendarEvent v-for="event in column" :event="event" :columnIndex="index" @move="eventMove"
-					@edit="event => emit(`edit`, event)" @delete="event => emit(`delete`, event)" />
+					@edit="event => emit(`edit`, event)" @delete="event => emit(`delete`, event)" @raw-edit="event => emit(`raw-edit`, event)" />
 			</div>
 
-			<div v-if="draggedEvent !== undefined && draggedEvent.date.equals(props.day)"
-				class="absolute w-11/12 top-20 bg-black opacity-45 rounded-lg"
-				:style="{ height: `${draggedEvent.height}px`, top: `${draggedEvent.top}px` }"></div>
-			<div v-if="draggedTask !== undefined && draggedTask.dragInfo !== undefined && draggedTask.dragInfo.date.equals(props.day)"
-				class="absolute w-11/12 top-20 bg-black opacity-45 rounded-lg"
-				:style="{ height: `${draggedTask.dragInfo.height}px`, top: `${draggedTask.dragInfo.top}px` }"></div>
+			<UBadge v-if="draggedEvent !== undefined && draggedEvent.date.equals(props.day)" class="absolute w-11/12"
+				variant="subtle" :color="moveColor"
+				:style="{ height: `${draggedEvent.height}px`, top: `${draggedEvent.top}px` }"></UBadge>
+			<UBadge
+				v-if="draggedTask !== undefined && draggedTask.dragInfo !== undefined && taskDraggingActive && draggedTask.dragInfo.date.equals(props.day) && draggedTask.active"
+				class="absolute w-11/12" variant="subtle" :color="moveColor"
+				:style="{ height: `${draggedTask.dragInfo.height}px`, top: `${draggedTask.dragInfo.top}px` }"></UBadge>
 		</div>
 	</div>
 </template>
 
 <style scoped></style>
-<style scoped></style>
diff --git a/web/components/ui/calendar/CalendarEvent.vue b/web/components/ui/calendar/CalendarEvent.vue
index 0b97445..4b93aac 100644
--- a/web/components/ui/calendar/CalendarEvent.vue
+++ b/web/components/ui/calendar/CalendarEvent.vue
@@ -10,6 +10,7 @@ const props = defineProps<{
 const emit = defineEmits<{
 	(e: 'move', mouseEvent: MouseEvent, event: Event): void,
 	(e: 'edit', event: Event): void
+	(e: 'raw-edit', event: Event): void
 	(e: 'delete', event: Event): void
 }>()
 
@@ -35,28 +36,50 @@ const top = computed(() => {
 	return Math.min(dimensions.value.from, dimensions.value.to)
 })
 
+const color = computed(() => {
+	if (props.event.event.task !== undefined) {
+		return 'secondary'
+	} else {
+		return 'primary'
+	}
+})
+
 function dragStart(e: DragEvent) {
 	console.log("start drag")
 	emit('move', e, props.event.event)
 	visible.value = false
 }
 
+function removeSchedule(event: Event) {
+	if (event.task === undefined) return
+	event.task.scheduled_at = undefined
+	emit('raw-edit', event)
+}
+
 </script>
 
 <template>
 	<UPopover :content="{ side: 'right' }" arrow>
-		<div class="absolute rounded-lg h-0 top-20 bg-black opacity-45 p-2 flex flex-col z-10" @mousedown.stop
+		<UBadge class="absolute z-10 items-start flex flex-col" variant="subtle" :color="color" @mousedown.stop
 			@mouseover.stop @mouseup.stop draggable="true" @dragstart="dragStart"
 			:style="{ top: `${top}%`, height: `${height}%`, left: `${left}%`, width: `${widht}%` }">
-			<div>{{ event.event.from.toFormat('HH:mm') }} - {{ event.event.to.toFormat('HH:mm') }}</div>
+			<div class="flex items-center gap-1 overflow-hidden">
+				{{ event.event.from.toFormat('HH:mm') }} - {{ event.event.to.toFormat('HH:mm') }}
+				<UIcon name="material-symbols:task-alt" v-if="event.event.task?.done" />
+
+			</div>
 			<div>{{ event.event.title }}</div>
-		</div>
+		</UBadge>
 		<template #content>
 			<UCard class="w-xl">
 				<template #header>
 					<div class="flex flex-row justify-between items-center">
 						<h1>{{ event.event.title }}</h1>
 						<nav class="flex flex-row gap-2">
+							<UTooltip text="remove schedule" v-if="event.event.task !== undefined">
+								<UButton icon="material-symbols:cancel-outline"
+									@click="() => removeSchedule(event.event)" />
+							</UTooltip>
 							<UButton icon="i-lucide-pencil" @click="emit('edit', event.event)"></UButton>
 							<UButton icon="i-lucide-trash" @click="emit('delete', event.event)"></UButton>
 						</nav>
diff --git a/web/pages/index.vue b/web/pages/index.vue
index b218d53..a9d9800 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -90,13 +90,25 @@ async function putEvent(event: Event) {
 
 async function putTask(task: Task) {
 	console.log('editing task')
-	await axios.put(`/tasks/${task.id}`, task, await getAuthHeader())
+	console.log(task.scheduled_at)
+	await axios.put(
+		`/tasks/${task.id}`,
+		{...task, scheduled_at: task.scheduled_at ?? null},
+		await getAuthHeader()
+	)
 	await refreshTask()
 	$socket.emit('change')
 }
 
 function scheduleTask(task: Task) {
-	draggedTask.value = { target: task, dragInfo: undefined }
+	draggedTask.value = { target: task, dragInfo: undefined, active: false }
+}
+
+function dismissSchedule() {
+	console.log(draggedTask.value?.active)
+	if (draggedTask.value !== undefined && draggedTask.value.active) {
+		draggedTask.value.active = false
+	}
 }
 
 </script>
@@ -104,7 +116,8 @@ 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" @edit-task="putTask" />
+			@delete-task="deleteTask" @schedule-task="scheduleTask" @edit-task="putTask"
+			@dismiss-schedule="dismissSchedule" />
 		<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" @delete-task="deleteTask" />
diff --git a/web/utils/task.ts b/web/utils/task.ts
index 7bed423..acabc2b 100644
--- a/web/utils/task.ts
+++ b/web/utils/task.ts
@@ -92,6 +92,7 @@ export type SerializableTask = {
 
 export type DraggedTask = {
 	target: Task,
+	active: boolean,
 	dragInfo: {
 		top: number,
 		date: DateTime
@@ -100,7 +101,7 @@ export type DraggedTask = {
 }
 
 function stringToDate(date: string | undefined) {
-	if (date === undefined) {
+	if (date === undefined || date === null) {
 		return undefined
 	}
 	return DateTime.fromISO(date)