quirinecker/dayplanner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dragging task in the calendar works visually

Browse Source
This commit is contained in:
quirinecker
2025-07-06 11:52:00 +02:00
parent 22ca3e9645
commit 0297fab83b
7 changed files with 94 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/ui/calendar/Calendar.vue
View File

@@ -8,6 +8,7 @@ import EventFormModal from '../EventFormModal.vue';
const events = defineModel<Event[]>('events', { required: true })
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)
@@ -161,7 +162,8 @@ 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?">
<UModal v-model:open="deleteModalOpened" title="Delete Event"
description="Are you sure you want to delete this event?">
<template #footer>
<UButton variant="solid" @click="deleteEvent">
Delete
@@ -176,8 +178,8 @@ 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" />
:date="date" v-model:draggedEvent="draggedEvent" @quick-create="openCreateModal" @edit="openEditModal"
@delete="openDeleteModal" @moved="moveEvent" v-model:dragged-task="draggedTask" />
</div>
</div>

31
web/components/ui/calendar/CalendarCollumn.vue
View File

@@ -25,6 +25,7 @@ const startY = ref(0)
const endY = ref(0)
const column = useTemplateRef('column')
const draggedEvent = defineModel<DraggedEvent | undefined>('draggedEvent')
const draggedTask = defineModel<DraggedTask | undefined>('draggedTask')
const height = computed(() => {
return Math.abs(endY.value - startY.value)
@@ -83,6 +84,29 @@ function eventMove(mouseEvent: MouseEvent, event: Event) {
}
function dragover(e: DragEvent) {
drawDraggedEvent(e)
drawDraggedTask(e)
}
function drawDraggedTask(event: DragEvent) {
if (draggedTask.value === undefined) {
return;
}
if (draggedTask.value.dragInfo === undefined) {
draggedTask.value.dragInfo = {
height: (draggedTask.value.target.estimated_time / 60 / 24) * (column.value?.offsetHeight ?? 0),
top: absoluteToRelativeY(event.clientY),
date: props.day
}
drawDraggedTask(event)
}
draggedTask.value.dragInfo.top = absoluteToRelativeY(event.clientY)
draggedTask.value.dragInfo.date = props.day
}
function drawDraggedEvent(event: DragEvent) {
if (draggedEvent.value === undefined) {
return
}
@@ -92,13 +116,13 @@ function dragover(e: DragEvent) {
}
draggedEvent.value.top = absoluteToRelativeY(e.clientY) - draggedEvent.value.offset
draggedEvent.value.top = absoluteToRelativeY(event.clientY) - draggedEvent.value.offset
}
function dragDrop(_: DragEvent) {
draggedEvent.value?.target.updateWithDraggedEvent(draggedEvent.value, column.value?.offsetHeight ?? 0)
if (draggedEvent.value === undefined){
if (draggedEvent.value === undefined) {
draggedEvent.value = undefined
return
}
@@ -134,6 +158,9 @@ function dragDrop(_: DragEvent) {
<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>
</div>
</div>
</template>