75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import type { Event } from '~/utils/event';
|
|
|
|
const props = defineProps<{
|
|
event: CollissionWrapper
|
|
columnIndex: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'move', mouseEvent: MouseEvent, event: Event): void,
|
|
(e: 'edit', event: Event): void
|
|
(e: 'delete', event: Event): void
|
|
}>()
|
|
|
|
const visible = ref(true)
|
|
|
|
const dimensions = computed<EventDimensions>(() => {
|
|
return props.event.event.getPercentDimensions()
|
|
})
|
|
|
|
const left = computed(() => {
|
|
return (100 / (props.event.collisions + 1)) * props.columnIndex
|
|
})
|
|
|
|
const widht = computed(() => {
|
|
return (100 / (props.event.collisions + 1))
|
|
})
|
|
|
|
const height = computed(() => {
|
|
return Math.abs(dimensions.value.from - dimensions.value.to)
|
|
})
|
|
|
|
const top = computed(() => {
|
|
return Math.min(dimensions.value.from, dimensions.value.to)
|
|
})
|
|
|
|
function dragStart(e: DragEvent) {
|
|
console.log("start drag")
|
|
emit('move', e, props.event.event)
|
|
visible.value = false
|
|
}
|
|
|
|
</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
|
|
@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>
|