Refactored some stuff

2025-03-30 16:48:30 +02:00
parent 637a5cd7e3
commit d4d74db5d9
16 changed files with 67 additions and 39 deletions
--- a/components/calendar/event/Event.vue
+++ b/components/calendar/event/Event.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils"
+import type { RPGDate } from "@/models/Date"
+import type { CalendarEvent } from "~/models/CalendarEvent"
+
+const props = defineProps<{
+  event: CalendarEvent
+  tileDate: RPGDate
+}>()
+
+const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal } = useCalendar()
+const { lastActiveEvent } = storeToRefs(useCalendar())
+
+const spansMultipleDays = computed(() => Boolean(props.event.startDate && props.event.endDate))
+const isStartEvent = computed(() => spansMultipleDays.value && areDatesIdentical(props.tileDate, props.event.startDate))
+const isEndEvent = computed(() => spansMultipleDays.value && props.event.endDate && areDatesIdentical(props.tileDate, props.event.endDate))
+
+const titleCharLimit = 50;
+const eventTitle = computed<string>(() => props.event.title.length <= titleCharLimit ? props.event.title : `${props.event.title.slice(0, titleCharLimit)}…`)
+
+// Popover code
+const isPopoverDetailsOpen = ref<boolean>(false)
+
+function handleDoubleClick() {
+  isPopoverDetailsOpen.value = false
+  lastActiveEvent.value = structuredClone(toRaw(props.event))
+  revealEditEventModal()
+}
+
+function handleDelete() {
+  isPopoverDetailsOpen.value = false
+  lastActiveEvent.value = structuredClone(toRaw(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()
+  })
+})
+</script>
+
+<template>
+  <UiPopover v-model:open="isPopoverDetailsOpen">
+    <UiPopoverTrigger as-child>
+      <button
+        class="event text-xs px-2 py-1 block w-full text-left rounded-sm transition-colors outline-offset-1"
+        :class="
+          cn(
+            event.category ? `event-${event.category.color}` : '',
+            {
+              'is-hidden': event.hidden,
+              'rounded-r-none': isStartEvent,
+              'rounded-l-none': isEndEvent,
+            }
+          )
+        "
+        @dblclick="handleDoubleClick"
+        @keydown.delete="handleDelete"
+      >
+        <div class="line-clamp-2 [overflow-wrap:anywhere] hyphens-auto">
+          {{ eventTitle }}
+        </div>
+      </button>
+    </UiPopoverTrigger>
+
+    <LazyCalendarEventDetails
+      :event
+      :spans-multiple-days
+      :is-start-event
+      :is-end-event
+      @query:close-popover="handleClosePopover"
+    />
+  </UiPopover>
+</template>