@frigear-nu/events 0.0.10 → 0.1.0

package/dist/runtime/app/components/EventTicketPicker.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { withMdcData } from "@frigear-nu/ui/markdown";
-import { formatMoney as formatPrice } from "@frigear-nu/ui/money";
 import { DEFAULT_CURRENCY, ticketMdcData } from "../../utils";
 const props = defineProps({
   ticketTypes: { type: Array, required: true },
@@ -9,7 +8,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["purchase"]);
 const t = useModuleT("events");
-const locale = useEventsLocale();
+const format = useFormat();
 const hasMdc = typeof resolveComponent("MDC") !== "string";
 const tr = useEventsTranslate();
 const selectedId = ref();
@@ -83,7 +82,7 @@ function toggle(groupId, addonId, multiple) {
         <span
           v-if="!type.hidePrice"
           class="ml-auto font-bold text-primary"
-        >{{ type.price === 0 ? t("picker.free", "Free") : formatPrice(type.price, type.currency, locale) }}</span>
+        >{{ type.price === 0 ? t("picker.free", "Free") : format.money(type.price, type.currency) }}</span>
       </div>
       <div
         v-if="type.description"
@@ -91,7 +90,7 @@ function toggle(groupId, addonId, multiple) {
       >
         <MDC
           v-if="hasMdc"
-          :value="withMdcData(tr(type.description), ticketMdcData(type, tr(type.name), locale))"
+          :value="withMdcData(tr(type.description), ticketMdcData(type, tr(type.name), format.locale.value))"
           class="prose prose-sm max-w-none text-muted"
         />
         <template v-else>
@@ -128,7 +127,7 @@ function toggle(groupId, addonId, multiple) {
         >
           {{ t("picker.soldOut", "Sold out") }}
         </UBadge>
-        <span class="ml-auto text-sm">{{ addon.price === 0 ? t("picker.included", "Included") : `+ ${formatPrice(addon.price, selected.currency, locale)}` }}</span>
+        <span class="ml-auto text-sm">{{ addon.price === 0 ? t("picker.included", "Included") : `+ ${format.money(addon.price, selected.currency)}` }}</span>
       </button>
     </fieldset>
 
@@ -140,7 +139,7 @@ function toggle(groupId, addonId, multiple) {
       :disabled="!selected || !isAvailable(selected) || missingRequired"
       @click="emit('purchase', selected.id, addonIds)"
     >
-      {{ total === 0 ? t("picker.getFree", "Get free ticket") : `${t("picker.buy", "Buy ticket")} \xB7 ${formatPrice(total, selected?.currency ?? DEFAULT_CURRENCY, locale)}` }}
+      {{ total === 0 ? t("picker.getFree", "Get free ticket") : `${t("picker.buy", "Buy ticket")} \xB7 ${format.money(total, selected?.currency ?? DEFAULT_CURRENCY)}` }}
     </UButton>
     <UAlert
       v-else

package/dist/runtime/app/composables/index.d.ts

@@ -1 +1,3 @@
 export { useEvents, useEvent, useMyTickets, useEventsLocale, useEventsFallbackLocale, useEventsTranslate } from './useEvents.js';
+export { useEventLinks } from './useEventLinks.js';
+export { useEventActions } from './useEventActions.js';

package/dist/runtime/app/composables/index.js

@@ -1 +1,3 @@
 export { useEvents, useEvent, useMyTickets, useEventsLocale, useEventsFallbackLocale, useEventsTranslate } from "./useEvents.js";
+export { useEventLinks } from "./useEventLinks.js";
+export { useEventActions } from "./useEventActions.js";

package/dist/runtime/app/composables/useEventActions.d.ts

@@ -0,0 +1,26 @@
+import type { DropdownMenuItem } from '@nuxt/ui';
+import type { StaffEventSummary } from '../utils/admin-event.js';
+export type EventMenuOptions = {
+    /** Items for the middle group, between the edits and the delete action. */
+    extra?: DropdownMenuItem[];
+    /** Runs after the event was deleted (refresh a list, leave the detail page). */
+    onRemoved?: () => unknown;
+    /** Leave out "Open", e.g. on the event's own page. Defaults to `true`. */
+    open?: boolean;
+    /** Leave out "View public page", e.g. when the page shows its own button. Defaults to `true`. */
+    viewPublic?: boolean;
+};
+/**
+ * What staff can do with an event, shared by the list and the event page: `create` (a slideover that resolves with the
+ * new event, or `false` when cancelled), `duplicate`, `remove` (confirms first) and `menu(event)`, the row menu in the
+ * same order everywhere: Open, View public page, Duplicate | extras | Delete.
+ */
+export declare function useEventActions(): {
+    create: () => Promise<{
+        id: string;
+        slug: string;
+    } | false | undefined>;
+    duplicate: (event: StaffEventSummary) => Promise<any>;
+    remove: (event: StaffEventSummary) => Promise<boolean>;
+    menu: (event: StaffEventSummary, options?: EventMenuOptions) => DropdownMenuItem[][];
+};

package/dist/runtime/app/composables/useEventActions.js

@@ -0,0 +1,61 @@
+import EventFormSlideover from "../components/EventFormSlideover.vue";
+export function useEventActions() {
+  const t = useModuleT("events");
+  const overlay = useOverlay();
+  const confirm = useConfirmDialog();
+  const { run } = useAction();
+  const links = useEventLinks();
+  const tr = useEventsTranslate();
+  const hasPublicPage = !!useRuntimeConfig().public.events?.pages?.event;
+  async function create() {
+    return overlay.create(EventFormSlideover, { destroyOnClose: true }).open();
+  }
+  async function duplicate(event) {
+    const copy = await run(
+      () => $fetch(`/api/events/admin/events/${event.id}/clone`, { method: "POST" }),
+      { success: t("admin.duplicated", "Event duplicated as a draft") }
+    );
+    if (copy) await navigateTo(links.adminEvent(copy.id));
+    return copy;
+  }
+  async function remove(event) {
+    const name = tr(event.name);
+    const confirmed = await confirm({
+      title: t("admin.deleteTitle", "Delete {name}?", { name }),
+      description: t("admin.deleteDescription", "Its ticket types and add-ons are deleted too. Events with paid tickets cannot be deleted."),
+      confirmText: t("admin.deleteAction", "Delete event"),
+      destructive: true
+    });
+    if (!confirmed) return false;
+    const done = await run(
+      () => $fetch(`/api/events/admin/events/${event.id}`, { method: "DELETE" }),
+      { success: t("admin.deleted", "Deleted {name}", { name }), error: t("admin.deleteFailed", "Could not delete the event") }
+    );
+    return done !== void 0;
+  }
+  function menu(event, options = {}) {
+    const main = [];
+    if (options.open !== false) {
+      main.push({ label: t("admin.open", "Open"), icon: "i-lucide-arrow-right", to: links.adminEvent(event.id) });
+    }
+    if (options.viewPublic !== false && hasPublicPage && event.status === "published") {
+      main.push({ label: t("admin.viewPublic", "View public page"), icon: "i-lucide-external-link", to: links.event(event.slug), target: "_blank" });
+    }
+    const edits = [
+      { label: t("admin.clone", "Duplicate"), icon: "i-lucide-copy", onSelect: () => {
+        void duplicate(event);
+      } },
+      ...options.extra ?? []
+    ];
+    const destructive = [{
+      label: t("admin.deleteAction", "Delete event"),
+      icon: "i-lucide-trash-2",
+      color: "error",
+      onSelect: async () => {
+        if (await remove(event)) await options.onRemoved?.();
+      }
+    }];
+    return [main, edits, destructive].filter((group) => group.length);
+  }
+  return { create, duplicate, remove, menu };
+}

package/dist/runtime/app/composables/useEventLinks.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Locale-aware links to the event pages (`/events`, `/events/:slug`, `/account/tickets`, the admin list and event
+ * page). Always use these instead of building the path by hand: they keep the locale prefix (`/en/events` stays under
+ * `/en`) and follow `events.settings.pages`.
+ */
+export declare function useEventLinks(): {
+    events: () => string;
+    event: (slug: string) => string;
+    tickets: () => string;
+    admin: () => string;
+    adminEvent: (id: string) => string;
+};

package/dist/runtime/app/composables/useEventLinks.js

@@ -0,0 +1,5 @@
+import { createEventLinks } from "../../utils/links.js";
+export function useEventLinks() {
+  const { localize } = useLocaleLink();
+  return createEventLinks(useRuntimeConfig().public.events?.pages, localize);
+}

package/dist/runtime/app/composables/useEvents.d.ts

@@ -1,4 +1,4 @@
-import type { Translated } from '../../../types.js';
+import type { TicketDto, Translated } from '../../../types.js';
 export declare function useEvents(): Promise<{
     events: any;
     grouped: any;
@@ -11,7 +11,10 @@ export declare function useEvent(slug: MaybeRefOrGetter<string>): Promise<{
     status: any;
     error: any;
     refresh: any;
-    purchase: (ticketTypeId: string, addonIds?: string[]) => Promise<any>;
+    purchase: (ticketTypeId: string, addonIds?: string[]) => Promise<{
+        ticket: TicketDto;
+        url?: string;
+    }>;
 }>;
 export declare function useMyTickets(): {
     tickets: any;

package/dist/runtime/app/pages/admin-event.vue

@@ -2,14 +2,16 @@
 import AttendeesTab from "../tabs/Attendees.vue";
 import DetailsTab from "../tabs/Details.vue";
 import TicketsTab from "../tabs/Tickets.vue";
-import { toLocalInput, useAdminAction } from "../utils/admin-event";
+import { toLocalInput } from "../utils/admin-event";
 defineOptions({ name: "EventsAdminEventPage" });
 const t = useModuleT("events");
 const route = useRoute();
 const tr = useEventsTranslate();
-const pages = useRuntimeConfig().public.events?.pages;
+const links = useEventLinks();
+const actions = useEventActions();
+const hasPublicPage = !!useRuntimeConfig().public.events?.pages?.event;
 const id = computed(() => String(route.params.id));
-const { busy, run } = useAdminAction();
+const { busy, run } = useAction();
 const { data: event, refresh } = await useFetch(() => `/api/events/admin/events/${id.value}`);
 const Tabs = resolveComponent("WidgetTabs");
 const tabs = typeof Tabs === "string" ? void 0 : Tabs;
@@ -31,7 +33,6 @@ watch(event, (value) => {
   });
 }, { immediate: true });
 const statuses = computed(() => ["draft", "published", "archived"].map((value) => ({ value, label: t(`admin.statuses.${value}`, value.charAt(0).toUpperCase() + value.slice(1)) })));
-const statusColor = { draft: "warning", published: "success", archived: "neutral" };
 const saveFacts = () => run(async () => {
   await $fetch(`/api/events/admin/events/${id.value}`, {
     method: "PATCH",
@@ -44,33 +45,43 @@ const saveFacts = () => run(async () => {
     }
   });
   await refresh();
-}, t("admin.saved", "Saved."));
+}, { success: t("admin.saved", "Saved.") });
 </script>
 
 <template>
-  <AdminPage v-if="event">
-    <AdminPageHeader
+  <div
+    v-if="event"
+    class="flex flex-col gap-4"
+  >
+    <PageHeading
       :title="tr(event.name)"
-      :back="{ label: t('admin.title', 'Events'), to: pages?.admin || '/admin/events' }"
+      :breadcrumb="[{ label: t('admin.title', 'Events'), to: links.admin() }, { label: tr(event.name) }]"
     >
-      <UBadge
-        variant="subtle"
-        :color="statusColor[event.status] ?? 'neutral'"
-        :label="t(`admin.statuses.${event.status}`, event.status)"
-      />
+      <template #badge>
+        <UBadge
+          variant="subtle"
+          :color="statusColor(event.status)"
+          :label="t(`admin.statuses.${event.status}`, event.status)"
+        />
+      </template>
       <template #actions>
         <UButton
-          v-if="event.status === 'published' && pages?.event"
-          :to="pages.event.replace(':slug', encodeURIComponent(event.slug))"
+          v-if="event.status === 'published' && hasPublicPage"
+          :to="links.event(event.slug)"
           variant="outline"
           color="neutral"
           icon="i-lucide-external-link"
           :label="t('admin.viewPublic', 'View public page')"
         />
+        <RowMenu
+          variant="outline"
+          :subject="tr(event.name)"
+          :items="actions.menu(event, { open: false, viewPublic: false, onRemoved: () => navigateTo(links.admin()) })"
+        />
       </template>
-    </AdminPageHeader>
+    </PageHeading>
 
-    <AdminSection :title="t('admin.keyFacts', 'Event')">
+    <SectionCard :title="t('admin.keyFacts', 'Event')">
       <form
         id="admin-event-facts"
         class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
@@ -115,11 +126,11 @@ const saveFacts = () => run(async () => {
             type="submit"
             form="admin-event-facts"
             :loading="busy"
-            :label="t('admin.save', 'Save')"
+            :label="t('admin.saveEvent', 'Save event')"
           />
         </div>
       </template>
-    </AdminSection>
+    </SectionCard>
 
     <component
       :is="tabs"
@@ -142,10 +153,11 @@ const saveFacts = () => run(async () => {
         @refresh="refresh"
       />
     </template>
-  </AdminPage>
-  <AdminEmpty
+  </div>
+  <UEmpty
     v-else
     icon="i-lucide-calendar-x"
     :title="t('notFound', 'Event not found')"
+    :actions="[{ label: t('admin.allEvents', 'All events'), to: links.admin(), color: 'neutral', variant: 'outline' }]"
   />
 </template>

package/dist/runtime/app/pages/admin.vue

@@ -1,154 +1,80 @@
 <script setup>
 defineOptions({ name: "EventsAdminPage" });
 const t = useModuleT("events");
-const toast = useToast();
-const locale = useEventsLocale();
 const tr = useEventsTranslate();
-const pages = useRuntimeConfig().public.events?.pages;
-const { data: events, refresh } = await useFetch("/api/events/admin/events", { default: () => [] });
-const eventTo = (id) => (pages?.adminEvent || "/admin/events/:id").replace(":id", encodeURIComponent(id));
-const when = (value) => new Intl.DateTimeFormat(locale.value, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
-const statusColor = { draft: "neutral", published: "success", archived: "warning" };
-const columns = [
-  { accessorKey: "name", header: t("admin.name", "Name"), cell: ({ row }) => tr(row.original.name) },
-  { accessorKey: "status", header: t("admin.status", "Status") },
-  { accessorKey: "startsAt", header: t("admin.starts", "Starts"), cell: ({ row }) => when(row.original.startsAt) },
-  { accessorKey: "location", header: t("admin.location", "Location"), cell: ({ row }) => tr(row.original.location) },
-  { id: "actions", header: "" }
-];
-async function clone(id) {
-  try {
-    const copy = await $fetch(`/api/events/admin/events/${id}/clone`, { method: "POST" });
-    await navigateTo(eventTo(copy.id));
-  } catch (cause) {
-    toast.add({ title: cause.statusMessage ?? t("admin.error", "Something went wrong."), color: "error" });
+const format = useFormat();
+const links = useEventLinks();
+const actions = useEventActions();
+const { data: events, status, refresh } = await useFetch("/api/events/admin/events", { default: () => [] });
+const { sorting, header } = useTableSort({ id: "startsAt", desc: true });
+const UBadge = resolveComponent("UBadge");
+const RowMenu = resolveComponent("RowMenu");
+const TableIdentity = resolveComponent("TableIdentity");
+const columns = computed(() => [
+  {
+    id: "name",
+    accessorFn: (row) => tr(row.name),
+    header: header("name", t("admin.name", "Name")),
+    cell: ({ row }) => h(TableIdentity, { title: tr(row.original.name), description: tr(row.original.location) })
+  },
+  {
+    accessorKey: "status",
+    header: header("status", t("admin.status", "Status")),
+    cell: ({ row }) => h(UBadge, { variant: "subtle", color: statusColor(row.original.status), label: t(`admin.statuses.${row.original.status}`, row.original.status) })
+  },
+  {
+    accessorKey: "startsAt",
+    header: header("startsAt", t("admin.starts", "Starts")),
+    cell: ({ row }) => row.original.startsAt ? h("span", { class: "tabular-nums" }, format.dateTime(row.original.startsAt)) : emptyCell()
+  },
+  {
+    id: "actions",
+    meta: { class: { th: "w-0", td: "w-0" } },
+    cell: ({ row }) => h(RowMenu, { items: actions.menu(row.original, { onRemoved: refresh }), subject: tr(row.original.name) })
   }
-}
-const creating = ref(false);
-const saving = ref(false);
-const draft = reactive({ name: void 0, slug: "", startsAt: "", location: void 0 });
-const slugify = (value) => value.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-const draftName = computed(() => tr(draft.name));
-watch(draftName, (name, previous) => {
-  if (draft.slug === slugify(previous)) draft.slug = slugify(name);
-});
+]);
 async function create() {
-  saving.value = true;
-  try {
-    const created = await $fetch("/api/events/admin/events", {
-      method: "POST",
-      body: { name: draft.name, slug: draft.slug, startsAt: draft.startsAt, location: draft.location || null, status: "draft" }
-    });
-    await refresh();
-    await navigateTo(eventTo(created.id));
-  } catch (cause) {
-    toast.add({ title: cause.statusMessage ?? t("admin.error", "Something went wrong."), color: "error" });
-  } finally {
-    saving.value = false;
-  }
+  const created = await actions.create();
+  if (created) await navigateTo(links.adminEvent(created.id));
 }
 </script>
 
 <template>
-  <AdminPage>
-    <AdminPageHeader :title="t('admin.title', 'Events')">
-      <template #links>
+  <div class="flex flex-col gap-4">
+    <PageHeading
+      :title="t('admin.title', 'Events')"
+      :description="t('admin.listDescription', 'Events, their ticket types and attendees.')"
+    >
+      <template #actions>
         <UButton
           icon="i-lucide-plus"
           :label="t('admin.create', 'New event')"
-          @click="creating = true"
+          @click="create"
         />
       </template>
-    </AdminPageHeader>
+    </PageHeading>
 
-    <AdminTable
-      :data="events"
-      :columns="columns"
-      @select="(_, row2) => navigateTo(eventTo(row2.original.id))"
+    <TableCard
+      :loading="status === 'pending' && !events.length"
+      :refreshing="status === 'pending' && !!events.length"
     >
-      <template #status-cell="{ row }">
-        <UBadge
-          variant="subtle"
-          :color="statusColor[row.original.status]"
-          :label="row.original.status"
-        />
-      </template>
-      <template #actions-cell="{ row }">
-        <UButton
-          color="neutral"
-          variant="ghost"
-          size="sm"
-          icon="i-lucide-copy"
-          :aria-label="t('admin.clone', 'Duplicate')"
-          @click.stop="clone(row.original.id)"
-        />
-      </template>
-      <template #empty>
-        <AdminEmpty
-          icon="i-lucide-calendar"
-          :title="t('admin.empty', 'No events yet')"
-          :description="t('admin.emptyDescription', 'Create the first event to start selling tickets.')"
-        />
-      </template>
-    </AdminTable>
-
-    <UModal
-      v-model:open="creating"
-      :title="t('admin.create', 'New event')"
-    >
-      <template #body>
-        <form
-          id="admin-event-form"
-          class="flex flex-col gap-4"
-          @submit.prevent="create"
-        >
-          <UFormField :label="t('admin.name', 'Name')">
-            <TranslatedInput
-              v-model="draft.name"
-              required
-            />
-          </UFormField>
-          <UFormField
-            :label="t('admin.slug', 'URL name')"
-            :description="t('admin.slugHelp', 'Lowercase letters, numbers and dashes.')"
-          >
-            <UInput
-              v-model="draft.slug"
-              class="w-full"
-              required
-              pattern="[a-z0-9]+(-[a-z0-9]+)*"
-            />
-          </UFormField>
-          <UFormField :label="t('admin.starts', 'Starts')">
-            <UInput
-              v-model="draft.startsAt"
-              type="datetime-local"
-              class="w-full"
-              required
-            />
-          </UFormField>
-          <UFormField :label="t('admin.location', 'Location')">
-            <TranslatedInput v-model="draft.location" />
-          </UFormField>
-        </form>
-      </template>
-      <template #footer>
-        <div class="flex w-full justify-end gap-2">
-          <UButton
-            variant="subtle"
-            color="neutral"
-            :label="t('admin.cancel', 'Cancel')"
-            @click="creating = false"
-          />
-          <UButton
-            type="submit"
-            form="admin-event-form"
-            :loading="saving"
-            :disabled="!draftName"
-            :label="t('admin.createAction', 'Create draft')"
+      <UTable
+        v-model:sorting="sorting"
+        :data="events"
+        :columns="columns"
+        :ui="tableUi()"
+        @select="(_, row) => navigateTo(links.adminEvent(row.original.id))"
+      >
+        <template #empty>
+          <UEmpty
+            variant="naked"
+            icon="i-lucide-calendar"
+            :title="t('admin.empty', 'No events yet')"
+            :description="t('admin.emptyDescription', 'Create the first event to start selling tickets.')"
+            :actions="[{ label: t('admin.create', 'New event'), icon: 'i-lucide-plus', onClick: create }]"
           />
-        </div>
-      </template>
-    </UModal>
-  </AdminPage>
+        </template>
+      </UTable>
+    </TableCard>
+  </div>
 </template>

package/dist/runtime/app/pages/event.d.vue.ts

@@ -1,9 +1,9 @@
-declare var __VLS_82: {
+declare var __VLS_91: {
     event: any;
     body: any;
 };
 type __VLS_Slots = {} & {
-    body?: (props: typeof __VLS_82) => any;
+    body?: (props: typeof __VLS_91) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;