@frigear-nu/events 0.1.1 → 0.1.3

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

@@ -1,20 +1,24 @@
 <script setup>
+import { eventFormSchema } from "../utils/admin-event";
+import { eventsApi } from "../../utils/api";
 defineOptions({ name: "EventFormSlideover" });
 const emit = defineEmits(["close"]);
 const t = useModuleT("events");
 const tr = useEventsTranslate();
 const { busy, run } = useAction();
-const draft = reactive({ name: void 0, slug: "", startsAt: "", location: void 0 });
+const schema = eventFormSchema(t, tr);
+const state = reactive({ name: void 0, slug: "", startsAt: "", endsAt: "", status: "draft", location: void 0 });
 const slugify = (value) => value.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-const draftName = computed(() => tr(draft.name));
+const draftName = computed(() => tr(state.name));
 watch(draftName, (name, previous) => {
-  if (draft.slug === slugify(previous)) draft.slug = slugify(name);
+  if (state.slug === slugify(previous)) state.slug = slugify(name);
 });
-async function save() {
+async function save(event) {
+  const { name, slug, startsAt, endsAt, location } = event.data;
   const created = await run(
-    () => $fetch("/api/events/admin/events", {
+    () => $fetch(eventsApi.admin.events, {
       method: "POST",
-      body: { name: draft.name, slug: draft.slug, startsAt: draft.startsAt, location: draft.location || null, status: "draft" }
+      body: { name, slug, startsAt, endsAt: endsAt || null, location: location || null, status: "draft" }
     }),
     { success: t("admin.created", "Event created") }
   );
@@ -29,42 +33,60 @@ async function save() {
     :description="t('admin.createDescription', 'It is saved as a draft until you publish it.')"
     :submit-label="t('admin.createAction', 'Create draft')"
     :loading="busy"
-    :disabled="!draftName"
     @close="emit('close', false)"
   >
-    <form
+    <UForm
       id="event-form"
+      :schema="schema"
+      :state="state"
       class="flex flex-col gap-4"
-      @submit.prevent="save"
+      @submit="save"
     >
-      <UFormField :label="t('admin.name', 'Name')">
-        <TranslatedInput
-          v-model="draft.name"
-          required
-        />
+      <UFormField
+        name="name"
+        :label="t('admin.name', 'Name')"
+        required
+      >
+        <TranslatedInput v-model="state.name" />
       </UFormField>
       <UFormField
+        name="slug"
         :label="t('admin.slug', 'URL name')"
         :description="t('admin.slugHelp', 'Lowercase letters, numbers and dashes.')"
+        required
+      >
+        <UInput
+          v-model="state.slug"
+          class="w-full"
+        />
+      </UFormField>
+      <UFormField
+        name="startsAt"
+        :label="t('admin.starts', 'Starts')"
+        required
       >
         <UInput
-          v-model="draft.slug"
+          v-model="state.startsAt"
+          type="datetime-local"
           class="w-full"
-          required
-          pattern="[a-z0-9]+(-[a-z0-9]+)*"
         />
       </UFormField>
-      <UFormField :label="t('admin.starts', 'Starts')">
+      <UFormField
+        name="endsAt"
+        :label="t('admin.ends', 'Ends')"
+      >
         <UInput
-          v-model="draft.startsAt"
+          v-model="state.endsAt"
           type="datetime-local"
           class="w-full"
-          required
         />
       </UFormField>
-      <UFormField :label="t('admin.location', 'Location')">
-        <TranslatedInput v-model="draft.location" />
+      <UFormField
+        name="location"
+        :label="t('admin.location', 'Location')"
+      >
+        <TranslatedInput v-model="state.location" />
       </UFormField>
-    </form>
+    </UForm>
   </FormSlideover>
 </template>

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

@@ -8,74 +8,71 @@ const emit = defineEmits(["pay"]);
 const t = useModuleT("events");
 const format = useFormat();
 const tr = useEventsTranslate();
+const description = computed(() => [props.ticket.ticketTypeName, ...props.ticket.addons.map((addon) => addon.label)].map((value) => tr(value)).filter(Boolean).join(" \xB7 "));
 const qr = computed(() => props.ticket.code ? `data:image/svg+xml;utf8,${encodeURIComponent(renderSVG(props.ticket.code, { border: 1 }))}` : null);
 const showQr = ref(false);
+const canPay = computed(() => props.ticket.status === "pending");
+const hasActions = computed(() => !!props.to || !!qr.value || canPay.value);
 </script>
 
 <template>
-  <UCard :ui="{ body: 'flex flex-col gap-3' }">
-    <div class="flex items-start gap-2">
-      <div>
-        <h3 class="text-highlighted font-semibold">
-          {{ tr(ticket.eventName) }}
-        </h3>
-        <p class="text-sm text-muted">
-          {{ tr(ticket.ticketTypeName) }}<template
-            v-for="addon in ticket.addons"
-            :key="addon.id"
-          >
-            · {{ tr(addon.label) }}
-          </template>
-        </p>
-      </div>
-      <UBadge
-        class="ml-auto capitalize"
-        :color="statusColor(ticket.status, { refunded: 'error' })"
-        variant="subtle"
-      >
-        {{ t(`tickets.status.${ticket.status}`, ticket.status) }}
-      </UBadge>
-    </div>
-    <p class="text-sm">
-      {{ ticket.amount === 0 ? t("detail.tickets.free", "Free") : format.money(ticket.amount, ticket.currency) }}
-      <UBadge
-        v-if="ticket.checkedInAt"
-        color="info"
-        variant="subtle"
-        class="ml-2"
-      >
-        {{ t("checkedIn", "Checked in") }}
-      </UBadge>
-    </p>
-    <div class="flex gap-2">
-      <UButton
-        v-if="ticket.status === 'pending'"
-        @click="emit('pay', ticket.id)"
-      >
-        {{ t("tickets.payNow", "Pay now") }}
-      </UButton>
-      <UButton
-        v-if="qr"
-        variant="subtle"
-        icon="i-lucide-qr-code"
-        @click="showQr = !showQr"
-      >
-        {{ showQr ? t("hideQr", "Hide QR code") : t("tickets.viewQrCode", "Show QR code") }}
-      </UButton>
-      <UButton
-        v-if="to"
-        :to="to"
-        variant="ghost"
-        class="ml-auto"
+  <SectionCard
+    :title="tr(ticket.eventName)"
+    :description="description"
+  >
+    <template #actions>
+      <StatusBadge
+        :status="ticket.status"
+        :label="t(`tickets.status.${ticket.status}`, ticket.status)"
+        :colors="{ refunded: 'error' }"
+      />
+    </template>
+
+    <div class="flex flex-col gap-3">
+      <p class="flex flex-wrap items-center gap-2 text-sm">
+        <span class="tabular-nums">{{ ticket.amount === 0 ? t("detail.tickets.free", "Free") : format.money(ticket.amount, ticket.currency) }}</span>
+        <UBadge
+          v-if="ticket.checkedInAt"
+          color="info"
+          variant="subtle"
+          icon="i-lucide-check"
+          :label="t('checkedIn', 'Checked in')"
+        />
+      </p>
+      <img
+        v-if="showQr && qr"
+        :src="qr"
+        :alt="t('tickets.qrAlt', 'Ticket QR code')"
+        class="mx-auto w-56 rounded-md bg-white p-2"
       >
-        {{ t("viewEvent", "View event") }}
-      </UButton>
     </div>
-    <img
-      v-if="showQr && qr"
-      :src="qr"
-      :alt="t('tickets.qrAlt', 'Ticket QR code')"
-      class="mx-auto w-56 rounded-md bg-white p-2"
+
+    <template
+      v-if="hasActions"
+      #footer
     >
-  </UCard>
+      <div class="flex flex-wrap justify-end gap-2">
+        <UButton
+          v-if="to"
+          :to="to"
+          color="neutral"
+          variant="outline"
+          :label="t('viewEvent', 'View event')"
+        />
+        <UButton
+          v-if="qr"
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-qr-code"
+          :label="showQr ? t('hideQr', 'Hide QR code') : t('tickets.viewQrCode', 'Show QR code')"
+          @click="showQr = !showQr"
+        />
+        <UButton
+          v-if="canPay"
+          :label="t('tickets.payNow', 'Pay now')"
+          @click="emit('pay', ticket.id)"
+        />
+      </div>
+    </template>
+  </SectionCard>
 </template>

package/dist/runtime/app/components/EventTicketTypeSlideover.d.vue.ts

@@ -0,0 +1,20 @@
+import type { MembershipPlans, StaffTicketType } from '../utils/admin-event.js';
+type __VLS_Props = {
+    /** The event a new ticket type is added to. */
+    eventId: string;
+    /** The ticket type to edit; leave out to add one. */
+    ticketType?: StaffTicketType;
+    /** Membership rules are only offered when @frigear-nu/subscriptions is installed (`enabled`). */
+    membership?: MembershipPlans;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (saved: false | {
+        id: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((saved: false | {
+        id: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,176 @@
+<script setup>
+import { z } from "zod";
+import { toCents, fromCents } from "@frigear-nu/ui/money";
+import { DEFAULT_CURRENCY, eventsApi, ticketMdcData } from "../../utils";
+defineOptions({ name: "EventTicketTypeSlideover" });
+const props = defineProps({
+  eventId: { type: String, required: true },
+  ticketType: { type: Object, required: false },
+  membership: { type: Object, required: false }
+});
+const emit = defineEmits(["close"]);
+const t = useModuleT("events");
+const locale = useEventsLocale();
+const tr = useEventsTranslate();
+const { busy, run } = useAction();
+const membershipEnabled = computed(() => props.membership?.enabled === true);
+const plans = computed(() => props.membership?.plans ?? []);
+const modes = computed(() => [
+  { label: t("admin.ruleNone", "Nobody"), value: "none" },
+  { label: t("admin.ruleAny", "Any membership"), value: "any" },
+  { label: t("admin.rulePlans", "Specific memberships"), value: "plans" }
+]);
+const toRule = (value) => value === "any" ? { mode: "any", plans: [] } : Array.isArray(value) && value.length ? { mode: "plans", plans: [...value] } : { mode: "none", plans: [] };
+const fromRule = (rule) => rule.mode === "any" ? "any" : rule.mode === "plans" && rule.plans.length ? [...rule.plans] : null;
+const currency = computed(() => props.ticketType?.currency ?? DEFAULT_CURRENCY);
+const count = z.union([z.literal(""), z.null(), z.undefined(), z.coerce.number().int(t("admin.countInvalid", "Enter a whole number of 0 or more.")).min(0, t("admin.countInvalid", "Enter a whole number of 0 or more."))]).transform((value) => typeof value === "number" ? value : null);
+const schema = z.object({
+  key: props.ticketType ? z.string().optional() : z.string().trim().min(1, t("admin.keyRequired", "Enter a key.")).max(64),
+  name: z.custom().refine((value) => !!tr(value).trim(), t("admin.nameRequired", "Enter a name.")),
+  description: z.custom().optional(),
+  price: z.coerce.number().min(0, t("admin.priceInvalid", "Enter a price of 0 or more.")),
+  capacity: count,
+  requires: z.custom(),
+  excludes: z.custom()
+});
+const state = reactive({
+  key: props.ticketType?.key ?? "",
+  name: props.ticketType?.name,
+  description: props.ticketType?.description ?? void 0,
+  price: props.ticketType ? fromCents(props.ticketType.price, props.ticketType.currency) : 0,
+  capacity: props.ticketType?.capacity ?? "",
+  requires: toRule(props.ticketType?.requiresMembership),
+  excludes: toRule(props.ticketType?.excludesMembership)
+});
+const mdcData = computed(() => ticketMdcData({ ...state, price: toCents(Number(state.price) || 0, currency.value) ?? 0, currency: currency.value }, tr(state.name), locale.value));
+async function save(event) {
+  const data = event.data;
+  const body = {
+    name: data.name,
+    description: data.description ?? null,
+    price: toCents(data.price, currency.value) ?? 0,
+    capacity: data.capacity,
+    ...membershipEnabled.value ? { requiresMembership: fromRule(data.requires), excludesMembership: fromRule(data.excludes) } : {}
+  };
+  const saved = await run(
+    () => props.ticketType ? $fetch(eventsApi.admin.ticketType(props.ticketType.id), { method: "PATCH", body }) : $fetch(eventsApi.admin.ticketTypes(props.eventId), { method: "POST", body: { key: data.key, ...body } }),
+    { success: t("admin.typeSaved", "Ticket type saved.") }
+  );
+  if (saved) emit("close", saved);
+}
+</script>
+
+<template>
+  <FormSlideover
+    form-id="event-ticket-type-form"
+    :title="ticketType ? t('admin.editType', 'Edit ticket type') : t('admin.addType', 'Add ticket type')"
+    :submit-label="ticketType ? t('admin.saveType', 'Save ticket type') : t('admin.addType', 'Add ticket type')"
+    :loading="busy"
+    @close="emit('close', false)"
+  >
+    <UForm
+      id="event-ticket-type-form"
+      :schema="schema"
+      :state="state"
+      class="flex flex-col gap-4"
+      @submit="save"
+    >
+      <UFormField
+        name="name"
+        :label="t('admin.name', 'Name')"
+        required
+      >
+        <TranslatedInput v-model="state.name" />
+      </UFormField>
+      <UFormField
+        name="description"
+        :label="t('admin.description', 'Description')"
+      >
+        <TranslatedInput
+          v-model="state.description"
+          multiline
+          mdc
+          :mdc-data="mdcData"
+          :rows="2"
+        />
+      </UFormField>
+      <UFormField
+        v-if="!ticketType"
+        name="key"
+        :label="t('admin.key', 'Key')"
+        :description="t('admin.keyHelp', 'A short unique id, e.g. member.')"
+        required
+      >
+        <UInput
+          v-model="state.key"
+          class="w-full"
+        />
+      </UFormField>
+      <UFormField
+        name="price"
+        :label="t('admin.price', 'Price')"
+      >
+        <UInput
+          v-model="state.price"
+          type="number"
+          min="0"
+          step="0.01"
+          class="w-full"
+        />
+      </UFormField>
+      <UFormField
+        name="capacity"
+        :label="t('admin.capacity', 'Capacity')"
+        :description="t('admin.capacityHelp', 'Leave empty for unlimited.')"
+      >
+        <UInput
+          v-model="state.capacity"
+          type="number"
+          min="0"
+          class="w-full"
+        />
+      </UFormField>
+
+      <template v-if="membershipEnabled">
+        <UFormField
+          name="requires"
+          :label="t('admin.requiresMembership', 'Only for members of')"
+          :description="t('admin.requiresHelp', 'Visitors without a matching active membership cannot buy this ticket.')"
+        >
+          <USelect
+            v-model="state.requires.mode"
+            :items="modes"
+            class="w-full"
+          />
+          <USelectMenu
+            v-if="state.requires.mode === 'plans'"
+            v-model="state.requires.plans"
+            :items="plans"
+            value-key="value"
+            multiple
+            class="mt-2 w-full"
+          />
+        </UFormField>
+        <UFormField
+          name="excludes"
+          :label="t('admin.excludesMembership', 'Not for members of')"
+          :description="t('admin.excludesHelp', 'Holders of these memberships cannot buy this ticket, so members and non-members can have separate prices.')"
+        >
+          <USelect
+            v-model="state.excludes.mode"
+            :items="modes"
+            class="w-full"
+          />
+          <USelectMenu
+            v-if="state.excludes.mode === 'plans'"
+            v-model="state.excludes.plans"
+            :items="plans"
+            value-key="value"
+            multiple
+            class="mt-2 w-full"
+          />
+        </UFormField>
+      </template>
+    </UForm>
+  </FormSlideover>
+</template>

package/dist/runtime/app/components/EventTicketTypeSlideover.vue.d.ts

@@ -0,0 +1,20 @@
+import type { MembershipPlans, StaffTicketType } from '../utils/admin-event.js';
+type __VLS_Props = {
+    /** The event a new ticket type is added to. */
+    eventId: string;
+    /** The ticket type to edit; leave out to add one. */
+    ticketType?: StaffTicketType;
+    /** Membership rules are only offered when @frigear-nu/subscriptions is installed (`enabled`). */
+    membership?: MembershipPlans;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (saved: false | {
+        id: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((saved: false | {
+        id: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

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

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

@@ -11,15 +11,15 @@ export type EventMenuOptions = {
     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
+ * What staff can do with an event, shared by the list and the event page: `create` (a slideover; navigates to the new
+ * event and resolves with it, 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>;
+    } | false>;
     duplicate: (event: StaffEventSummary) => Promise<any>;
     remove: (event: StaffEventSummary) => Promise<boolean>;
     menu: (event: StaffEventSummary, options?: EventMenuOptions) => DropdownMenuItem[][];

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

@@ -1,4 +1,5 @@
 import EventFormSlideover from "../components/EventFormSlideover.vue";
+import { eventsApi } from "../../utils/api.js";
 export function useEventActions() {
   const t = useModuleT("events");
   const overlay = useOverlay();
@@ -8,11 +9,14 @@ export function useEventActions() {
   const tr = useEventsTranslate();
   const hasPublicPage = !!useRuntimeConfig().public.events?.pages?.event;
   async function create() {
-    return overlay.create(EventFormSlideover, { destroyOnClose: true }).open();
+    const created = await overlay.create(EventFormSlideover, { destroyOnClose: true }).open();
+    if (!created) return false;
+    await navigateTo(links.adminEvent(created.id));
+    return created;
   }
   async function duplicate(event) {
     const copy = await run(
-      () => $fetch(`/api/events/admin/events/${event.id}/clone`, { method: "POST" }),
+      () => $fetch(eventsApi.admin.clone(event.id), { method: "POST" }),
       { success: t("admin.duplicated", "Event duplicated as a draft") }
     );
     if (copy) await navigateTo(links.adminEvent(copy.id));
@@ -28,10 +32,11 @@ export function useEventActions() {
     });
     if (!confirmed) return false;
     const done = await run(
-      () => $fetch(`/api/events/admin/events/${event.id}`, { method: "DELETE" }),
+      // 204: resolves with no body, so map success to `true` (`run` resolves `undefined` on failure).
+      () => $fetch(eventsApi.admin.event(event.id), { method: "DELETE" }).then(() => true),
       { success: t("admin.deleted", "Deleted {name}", { name }), error: t("admin.deleteFailed", "Could not delete the event") }
     );
-    return done !== void 0;
+    return done === true;
   }
   function menu(event, options = {}) {
     const main = [];

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

@@ -0,0 +1,33 @@
+import type { DropdownMenuItem } from '@nuxt/ui';
+import { type MaybeRefOrGetter } from 'vue';
+import type { MembershipPlans, StaffAddon, StaffAddonGroup, StaffTicketType } from '../utils/admin-event.js';
+export type EventCatalogActionsOptions = {
+    /** The event new ticket types are added to. Only needed to add ticket types. */
+    eventId?: MaybeRefOrGetter<string | undefined>;
+    /** Runs after a ticket type, add-on group or choice was saved or deleted, e.g. to refresh the event. */
+    onChanged?: () => unknown;
+    /** The memberships the ticket type form offers (`@frigear-nu/subscriptions`), read when the form opens. */
+    membership?: () => MembershipPlans | undefined;
+};
+/** What a catalog form resolves with: the saved record, or `false` when cancelled or failed. */
+export type CatalogSaved = {
+    id: string;
+} | false;
+/**
+ * What staff can do with an event's catalog: its ticket types, their add-on groups and the choices in them.
+ * `openTicketType` / `openGroup` / `openAddon` open the create (no record) or edit form in a slideover and resolve
+ * with the saved record or `false`; `removeTicketType` / `removeGroup` / `removeAddon` confirm first and resolve
+ * `true` once deleted; `typeMenu` / `groupMenu` / `addonMenu` are the `RowMenu` items (edits, then the delete in its
+ * own red group). Every save and delete runs `onChanged` afterwards.
+ */
+export declare function useEventCatalogActions(options?: EventCatalogActionsOptions): {
+    openTicketType: (ticketType?: StaffTicketType) => Promise<CatalogSaved>;
+    openGroup: (ticketType: StaffTicketType, group?: StaffAddonGroup) => Promise<CatalogSaved>;
+    openAddon: (ticketType: StaffTicketType, group: StaffAddonGroup, addon?: StaffAddon) => Promise<CatalogSaved>;
+    removeTicketType: (ticketType: StaffTicketType) => Promise<boolean>;
+    removeGroup: (group: StaffAddonGroup) => Promise<boolean>;
+    removeAddon: (addon: StaffAddon) => Promise<boolean>;
+    typeMenu: (ticketType: StaffTicketType) => DropdownMenuItem[][];
+    groupMenu: (ticketType: StaffTicketType, group: StaffAddonGroup) => DropdownMenuItem[][];
+    addonMenu: (ticketType: StaffTicketType, group: StaffAddonGroup, addon: StaffAddon) => DropdownMenuItem[][];
+};