diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue index 736b6cb..8abdc39 100644 --- a/components/calendar/CalendarEvent.vue +++ b/components/calendar/CalendarEvent.vue @@ -10,29 +10,54 @@ const props = defineProps<{ }>() const { areDatesIdentical } = useCalendar() +const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents() +const { lastActiveEvent } = storeToRefs(useCalendarEvents()) const spansMultipleDays = Boolean(props.event.startDate && props.event.endDate) const isStartEvent = spansMultipleDays && areDatesIdentical(props.tileDate, props.event.startDate) const isEndEvent = spansMultipleDays && props.event.endDate && areDatesIdentical(props.tileDate, props.event.endDate) const titleCharLimit = 50; - const eventTitle = computed(() => props.event.title.length <= titleCharLimit ? props.event.title : `${props.event.title.slice(0, titleCharLimit)}…`) // Popover code const isPopoverDetailsOpen = ref(false) +function handleDoubleClick() { + isPopoverDetailsOpen.value = false + lastActiveEvent.value = { ...props.event } + revealEditEventModal() +} + +function handleDelete() { + isPopoverDetailsOpen.value = false + lastActiveEvent.value = { ...props.event } + revealDeleteEventModal() +} + function handleClosePopover() { isPopoverDetailsOpen.value = false } + +onMounted(() => { + // Listen for keydown events + window.addEventListener('keydown', (e: KeyboardEvent) => { + // If the popover isn't opened, this is not the event we're trying to delete, so return + if (!isPopoverDetailsOpen.value) return + + // If the key isn't the delete one, return + if (e.key !== 'Delete') return + + handleDelete() + }) +})