did thigns

2025-07-07 21:32:09 +02:00
parent 91e0bf315d
commit 957af1c257
7 changed files with 105 additions and 31 deletions
--- 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>
--- 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>
--- 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>