leim-tools/components/calendar/event/Details.vue

<script lang="ts" setup>
import { cn } from "~/lib/utils"
import type { RPGDate } from "~/models/Date"
import type { CalendarEvent } from "~/models/CalendarEvent"
import { useCalendar } from "~/stores/CalendarStore"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"

import {
  PhHourglassMedium,
  PhAlarm,
  PhHourglassHigh,
  PhHourglassLow,
  PhMapPinArea,
  PhDotsThreeOutlineVertical,
  PhEye
} from "@phosphor-icons/vue"
import type { CollisionPadding } from "~/models/Popover"

const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
const { lastActiveEvent, isReadOnly } = storeToRefs(useCalendar())

const props = defineProps<{
  event: CalendarEvent
  spansMultipleDays: boolean
  isStartEvent?: boolean
  isEndEvent?: boolean
}>()

const breakpoints = useBreakpoints(
  breakpointsTailwind
)
const collisionPadLg: CollisionPadding = {
  top: 50,
  bottom: 50,
  left: 50,
  right: 50,
}
const collisionPad: CollisionPadding = {
  top: 80,
  bottom: 80,
  left: 12.5,
  right: 12.5,
}

// Ref for the popover
const eventDetails = ref<HTMLElement>()

const emit = defineEmits(["query:close-popover"])

const dateDifference = computed<string>(() => getRelativeString(defaultDate, props.event.startDate))
const dateDuration = computed<string | null>(() => props.event.endDate ? getRelativeString(props.event.startDate, props.event.endDate, "compact") : null)

function handleJumpToDate(date: RPGDate) {
  jumpToDate(date)
  emit("query:close-popover")
}

/**
 * Edit event
 */
const commandMenuOpened = ref(false)

function deployEditModal() {
  lastActiveEvent.value = structuredClone(toRaw(props.event))
  revealEditEventModal()
  commandMenuOpened.value = false
  emit("query:close-popover")
}

/**
 * Confirm event deletion
 */
function deployDeleteModal() {
  lastActiveEvent.value = structuredClone(toRaw(props.event))
  revealDeleteEventModal()
  commandMenuOpened.value = false
  emit("query:close-popover")
}
</script>

<template>
  <UiPopoverContent
    class="max-w-full w-96 event-popover"
    :align="'center'"
    :align-offset="breakpoints.lg.value ? 50 : 25"
    :side-offset="8"
    :side="breakpoints.lg.value ? 'left' : 'top'"
    :collision-padding="breakpoints.lg.value ? collisionPadLg : collisionPad"
    :class="cn(
      event.category ? `element-${event.category.color}` : '',
    )"
    @focus-outside.prevent
  >
    <div ref="eventDetails" class="grid gap-1">
      <header class="pr-12">
        <div class="mb-2 max-h-24 overflow-y-auto text-lg font-semibold">
          {{ event.title }}
        </div>

        <div class="mb-1">
          <template v-if="!event.endDate">
            <p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
          </template>
          <template v-else>
            <p class="font-semibold">
              {{
                $t('entity.calendar.date.fromTo',
                  {
                    startDate: getFormattedDateTitle(event.startDate, true),
                    endDate: getFormattedDateTitle(event.endDate, true)
                  }
                )
              }}
            </p>
          </template>
        </div>
      </header>

      <div class="mb-1 space-y-1">
        <template v-if="event.location">
          <div class="text-sm italic dark:opacity-75 flex items-center gap-1">
            <div>
              <PhMapPinArea size="16" weight="fill" />
            </div>
            <p class="max-h-12 overflow-y-auto">{{ event.location }}</p>
          </div>
        </template>
        <div class="text-sm italic dark:opacity-75 flex items-center gap-1">
          <div>
            <PhAlarm size="16" weight="fill" />
          </div>
          <p>{{ dateDifference }}</p>
        </div>
        <template v-if="dateDuration">
          <div class="text-sm italic dark:opacity-75 flex items-center gap-1">
            <div>
              <PhHourglassMedium size="16" weight="fill" />
            </div>
            <p>{{ $t('entity.calendar.date.while', { duration: dateDuration } )}}</p>
          </div>
        </template>
      </div>

      <template v-if="event.category || event.secondaryCategories">
        <ul class="flex gap-1">
          <li v-if="event.category">
            <UiBadge class="mix-blend-luminosity font-bold bg-gray-400 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
              {{ event.category?.name }}
            </UiBadge>
          </li>

          <li v-for="cat in event.secondaryCategories" :key="cat.id">
            <UiBadge class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
              {{ cat.name }}
            </UiBadge>
          </li>
        </ul>
      </template>

      <template v-if="event.description">
        <hr class="border-border mt-2" >

        <div class="max-h-48 overflow-y-auto mt-2 text-sm text-slate-600 dark:text-slate-300">
          {{ event.description }}
        </div>
      </template>
    </div>

    <menu v-if="!isReadOnly" class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
      <UiPopover v-model:open="commandMenuOpened">
        <UiPopoverTrigger as-child>
          <UiButton size="icon" variant="outline" class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600">
            <PhDotsThreeOutlineVertical size="20" weight="fill" />
          </UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent class="w-fit p-0" align="start" side="right" :collision-padding="20" >
          <UiCommand>
            <UiCommandList>
              <UiCommandGroup>
                <UiCommandItem value="edit-event" @select="deployEditModal"> {{ $t('ui.action.edit') }} </UiCommandItem>
                <UiCommandItem value="delete-event" @select="deployDeleteModal"> {{ $t('ui.action.delete') }} </UiCommandItem>
              </UiCommandGroup>
            </UiCommandList>
          </UiCommand>
        </UiPopoverContent>
      </UiPopover>
    </menu>

    <nav v-if="event.startDate && event.endDate" class="mt-2 flex gap-2">
      <UiBadge class="hover:bg-indigo-400 dark:hover:bg-slate-300" as-child>
        <button
          class="flex gap-1"
          title="Naviguer au début"
          @click="handleJumpToDate(event.startDate!)"
        >
          <PhHourglassHigh size="16" weight="fill" /> {{ $t('entity.calendar.event.isStart') }}
        </button>
      </UiBadge>
      <UiBadge class="hover:bg-indigo-400 dark:hover:bg-slate-300" as-child title="Naviguer à la fin">
        <button
          class="flex gap-1"
          title="Naviguer à la fin"
          @click="handleJumpToDate(event.endDate!)"
        >
          <PhHourglassLow size="16" weight="fill" /> {{ $t('entity.calendar.event.isEnd') }}
        </button>
      </UiBadge>
    </nav>

    <UiTooltipProvider v-if="event.hidden" :delay-duration="250">
      <UiTooltip>
        <UiTooltipTrigger as-child>
          <UiBadge class="absolute -top-2 right-2 flex gap-1">
            <PhEye size="16" weight="fill" /> {{ $t('entity.calendar.event.isHidden') }}
          </UiBadge>
        </UiTooltipTrigger>
        <UiTooltipContent>
          <p>
            {{ $t('entity.calendar.event.hiddenTooltip') }}
          </p>
        </UiTooltipContent>
      </UiTooltip>
    </UiTooltipProvider>
  </UiPopoverContent>
</template>