racletteJS

import type { PluginFastifyInstance, PluginOptions } from "@raclettejs/core"
import { createEventModels } from "./event.model"
import { registerEventRoutes } from "./routes"
import { createEventService } from "./event.service"

export default async (
  fastify: PluginFastifyInstance,
  _opts: PluginOptions,
) => {
  const models = createEventModels(fastify)
  fastify.custom.eventService = createEventService(models.event)
  await fastify.register((instance) =>
    registerEventRoutes(instance, fastify.custom.eventService),
  )
}

<script setup lang="ts">
import EventFilters from "../components/EventFilters.vue"
import EventCard from "../components/EventCard.vue"
import RsvpPanel from "../components/RsvpPanel.vue"

const { $data, $i18n } = usePluginApi()

const { data: events, refresh } = $data.event.listUpcoming({
  options: { immediate: true },
})

const selectedId = ref<string | null>(null)
</script>

<template>
  <section class="event-management">
    <header>
      <h2>{{ $i18n.t("events.management.title") }}</h2>
      <EventFilters @change="refresh" />
    </header>

    <div class="event-management__grid">
      <EventCard
        v-for="event in events"
        :key="event._id"
        :event="event"
        :active="selectedId === event._id"
        @select="selectedId = event._id"
      />
    </div>

    <RsvpPanel
      v-if="selectedId"
      :event-id="selectedId"
      @updated="refresh"
    />
  </section>
</template>