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

added edit modal. info popover. create modal. delete functionality. delete modal

Browse Source
This commit is contained in:
quirinecker
2025-06-16 18:20:04 +02:00
parent 01c57f24a1
commit c4daa88ea2
7 changed files with 239 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/components/ui/calendar/CalendarEvent.vue
View File

@@ -9,6 +9,8 @@ const props = defineProps<{
const emit = defineEmits<{
(e: 'move', mouseEvent: MouseEvent, event: Event): void,
(e: 'edit', event: Event): void
(e: 'delete', event: Event): void
}>()
const visible = ref(true)
@@ -42,10 +44,31 @@ function dragStart(e: DragEvent) {
</script>
<template>
<div class="absolute rounded-lg h-0 top-20 bg-black opacity-45 p-2 flex flex-col z-10" @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>{{ event.event.title }}</div>
</div>
<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
@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>{{ event.event.title }}</div>
</div>
<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">
<UButton icon="i-lucide-pencil" @click="emit('edit', event.event)"></UButton>
<UButton icon="i-lucide-trash" @click="emit('delete', event.event)"></UButton>
</nav>
</div>
</template>
<template #default>
<div>{{ event.event.from.toFormat('HH:mm') }} - {{ event.event.to.toFormat('HH:mm') }}</div>
<div class="overflow-scroll pb-5">
{{ event.event.description }}
</div>
</template>
</UCard>
</template>
</UPopover>
</template>