@frigear-nu/events 0.1.1 → 0.1.3

package/dist/runtime/app/tabs/Attendees.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { refDebounced } from "@vueuse/core";
+import { eventsApi } from "../../utils/api";
 defineOptions({ name: "EventsAdminAttendeesTab" });
 const props = defineProps({
   event: { type: Object, required: true }
@@ -8,7 +10,18 @@ const tr = useEventsTranslate();
 const format = useFormat();
 const confirmAction = useConfirmDialog();
 const { run } = useAction();
-const { data: attendees, refresh } = await useFetch(() => `/api/events/admin/events/${props.event.id}/tickets`, { default: () => [] });
+const page = ref(1);
+const pageSize = ref(50);
+const search = ref("");
+const q = refDebounced(search, 300);
+watch([q, pageSize], () => {
+  page.value = 1;
+});
+const query = computed(() => ({ page: page.value, pageSize: pageSize.value, q: q.value.trim() || void 0 }));
+const { data, status, error, refresh } = await useFetch(() => eventsApi.admin.attendees(props.event.id), { query });
+const rows = computed(() => data.value?.items ?? []);
+const loading = computed(() => status.value === "pending" && !data.value);
+const refreshing = computed(() => status.value === "pending" && !!data.value);
 const typeName = (ticketTypeId) => tr(props.event.ticketTypes.find((item) => item.id === ticketTypeId)?.name);
 const who = (ticket) => ticket.userName || ticket.userEmail || "";
 const ticketAction = async (ticket, action) => {
@@ -20,7 +33,7 @@ const ticketAction = async (ticket, action) => {
   });
   if (!confirmed) return;
   return run(async () => {
-    await $fetch(`/api/events/admin/tickets/${ticket.id}/${action}`, { method: "POST" });
+    await $fetch(action === "refund" ? eventsApi.admin.refundTicket(ticket.id) : eventsApi.admin.cancelTicket(ticket.id), { method: "POST" });
     await refresh();
   }, { success: action === "refund" ? t("admin.refunded", "Refunded.") : t("admin.cancelled", "Cancelled.") });
 };
@@ -33,53 +46,71 @@ const menu = (ticket) => {
   } }] : [];
   return [refund, cancel].filter((group) => group.length);
 };
+const TableIdentity = resolveComponent("TableIdentity");
+const StatusBadge = resolveComponent("StatusBadge");
+const RowMenu = resolveComponent("RowMenu");
 const columns = computed(() => [
-  { accessorKey: "userName", header: t("admin.attendee", "Attendee") },
-  { accessorKey: "ticketTypeId", header: t("admin.ticketType", "Ticket") },
-  { accessorKey: "status", header: t("admin.status", "Status") },
-  { accessorKey: "checkedInAt", header: t("admin.checkedIn", "Checked in") },
-  { id: "actions" }
+  {
+    accessorKey: "userName",
+    header: t("admin.attendee", "Attendee"),
+    cell: ({ row }) => h(TableIdentity, { title: who(row.original), description: row.original.userName ? row.original.userEmail : null })
+  },
+  {
+    accessorKey: "ticketTypeId",
+    header: t("admin.ticketType", "Ticket"),
+    cell: ({ row }) => typeName(row.original.ticketTypeId) || emptyCell()
+  },
+  {
+    accessorKey: "status",
+    header: t("admin.status", "Status"),
+    cell: ({ row }) => h(StatusBadge, { status: row.original.status, label: t(`tickets.status.${row.original.status}`, row.original.status) })
+  },
+  {
+    accessorKey: "checkedInAt",
+    header: t("admin.checkedIn", "Checked in"),
+    cell: ({ row }) => row.original.checkedInAt ? h("span", { class: "tabular-nums" }, format.dateTime(row.original.checkedInAt)) : emptyCell()
+  },
+  {
+    id: "actions",
+    meta: { class: { th: "w-0", td: "w-0" } },
+    cell: ({ row }) => {
+      const items = menu(row.original);
+      return items.length ? h(RowMenu, { items, subject: who(row.original) }) : null;
+    }
+  }
 ]);
 </script>
 
 <template>
-  <SectionCard
+  <TableCard
     :title="t('admin.attendees', 'Attendees')"
-    flush
+    :loading="loading"
+    :refreshing="refreshing"
   >
+    <template #actions>
+      <UInput
+        v-model="search"
+        icon="i-lucide-search"
+        size="sm"
+        :placeholder="t('admin.searchAttendees', 'Search name or email')"
+        :aria-label="t('admin.searchAttendees', 'Search name or email')"
+        class="w-full sm:max-w-xs"
+      />
+    </template>
+    <UEmpty
+      v-if="error && !data"
+      variant="naked"
+      icon="i-lucide-circle-alert"
+      :title="t('admin.attendeesLoadFailed', 'Attendees could not be loaded')"
+      :description="errorMessage(error, '')"
+      :actions="[{ label: t('tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]"
+    />
     <UTable
-      :data="attendees"
+      v-else
+      :data="rows"
       :columns="columns"
       :ui="tableUi({ tr: '' })"
     >
-      <template #userName-cell="{ row }">
-        <span class="text-highlighted font-medium">{{ row.original.userName }}</span>
-        <span class="text-muted"> · {{ row.original.userEmail }}</span>
-      </template>
-      <template #ticketTypeId-cell="{ row }">
-        {{ typeName(row.original.ticketTypeId) }}
-      </template>
-      <template #status-cell="{ row }">
-        <UBadge
-          variant="subtle"
-          :color="statusColor(row.original.status)"
-          :label="t(`tickets.status.${row.original.status}`, row.original.status)"
-        />
-      </template>
-      <template #checkedInAt-cell="{ row }">
-        <span v-if="row.original.checkedInAt">{{ format.dateTime(row.original.checkedInAt) }}</span>
-        <span
-          v-else
-          class="text-muted"
-        >–</span>
-      </template>
-      <template #actions-cell="{ row }">
-        <RowMenu
-          v-if="menu(row.original).length"
-          :items="menu(row.original)"
-          :subject="who(row.original)"
-        />
-      </template>
       <template #empty>
         <UEmpty
           variant="naked"
@@ -88,5 +119,13 @@ const columns = computed(() => [
         />
       </template>
     </UTable>
-  </SectionCard>
+    <template #footer>
+      <TablePagination
+        v-model:page="page"
+        v-model:page-size="pageSize"
+        :page-sizes="[50, 100]"
+        :total="data?.total ?? 0"
+      />
+    </template>
+  </TableCard>
 </template>

package/dist/runtime/app/tabs/Details.d.vue.ts

@@ -1,4 +1,4 @@
-import type { StaffEvent } from '../utils/admin-event.js';
+import { type StaffEvent } from '../utils/admin-event.js';
 type __VLS_Props = {
     event: StaffEvent;
 };

package/dist/runtime/app/tabs/Details.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { eventsApi } from "../../utils/api";
+import { EVENT_STATUSES, eventFormSchema, toLocalInput } from "../utils/admin-event";
 defineOptions({ name: "EventsAdminDetailsTab" });
 const props = defineProps({
   event: { type: Object, required: true }
@@ -7,65 +9,145 @@ const emit = defineEmits(["refresh"]);
 const t = useModuleT("events");
 const tr = useEventsTranslate();
 const { busy, run } = useAction();
-const form = reactive({
-  name: void 0,
-  description: void 0,
-  body: void 0
-});
+const schema = eventFormSchema(t, tr);
+const statuses = computed(() => EVENT_STATUSES.map((value) => ({ value, label: t(`admin.statuses.${value}`, value.charAt(0).toUpperCase() + value.slice(1)) })));
+const state = reactive({ name: void 0, slug: "", startsAt: "", endsAt: "", status: "draft" });
 function fill(value) {
-  Object.assign(form, { name: value.name, description: value.description ?? void 0, body: value.body ?? void 0 });
+  Object.assign(state, {
+    name: value.name,
+    slug: value.slug,
+    status: value.status,
+    startsAt: toLocalInput(value.startsAt),
+    endsAt: toLocalInput(value.endsAt),
+    location: value.location ?? void 0,
+    description: value.description ?? void 0,
+    body: value.body ?? void 0
+  });
 }
 fill(props.event);
 watch(() => props.event, fill);
-const save = () => run(async () => {
-  await $fetch(`/api/events/admin/events/${props.event.id}`, {
-    method: "PATCH",
-    body: { name: form.name, description: form.description ?? null, body: form.body ?? null }
-  });
-  emit("refresh");
-}, { success: t("admin.saved", "Saved.") });
+async function save(event) {
+  const data = event.data;
+  const saved = await run(
+    () => $fetch(eventsApi.admin.event(props.event.id), {
+      method: "PATCH",
+      body: {
+        name: data.name,
+        slug: data.slug,
+        status: data.status,
+        startsAt: data.startsAt,
+        endsAt: data.endsAt || null,
+        location: data.location ?? null,
+        description: data.description ?? null,
+        body: data.body ?? null
+      }
+    }).then(() => true),
+    { success: t("admin.saved", "Saved.") }
+  );
+  if (saved) emit("refresh");
+}
 </script>
 
 <template>
   <SectionCard :title="t('admin.details', 'Details')">
-    <form
+    <UForm
       id="admin-event-details"
-      class="flex flex-col gap-4"
-      @submit.prevent="save"
+      :schema="schema"
+      :state="state"
+      class="flex flex-col divide-y divide-default"
+      @submit="save"
     >
-      <UFormField :label="t('admin.name', 'Name')">
+      <FormRow
+        name="name"
+        :label="t('admin.name', 'Name')"
+        required
+      >
         <TranslatedInput
-          v-model="form.name"
-          required
+          v-model="state.name"
+          class="sm:max-w-sm"
+        />
+      </FormRow>
+      <FormRow
+        name="status"
+        :label="t('admin.status', 'Status')"
+      >
+        <USelect
+          v-model="state.status"
+          :items="statuses"
+          class="w-full sm:max-w-sm"
+        />
+      </FormRow>
+      <FormRow
+        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 sm:max-w-sm"
         />
-      </UFormField>
-      <UFormField :label="t('admin.description', 'Description')">
+      </FormRow>
+      <FormRow
+        name="startsAt"
+        :label="t('admin.starts', 'Starts')"
+        required
+      >
+        <UInput
+          v-model="state.startsAt"
+          type="datetime-local"
+          class="w-full sm:max-w-sm"
+        />
+      </FormRow>
+      <FormRow
+        name="endsAt"
+        :label="t('admin.ends', 'Ends')"
+      >
+        <UInput
+          v-model="state.endsAt"
+          type="datetime-local"
+          class="w-full sm:max-w-sm"
+        />
+      </FormRow>
+      <FormRow
+        name="location"
+        :label="t('admin.location', 'Location')"
+      >
+        <TranslatedInput
+          v-model="state.location"
+          class="sm:max-w-sm"
+        />
+      </FormRow>
+      <FormRow
+        name="description"
+        :label="t('admin.description', 'Description')"
+      >
         <TranslatedInput
-          v-model="form.description"
+          v-model="state.description"
           multiline
           mdc
         />
-      </UFormField>
-      <UFormField
+      </FormRow>
+      <FormRow
+        name="body"
         :label="t('admin.body', 'Details')"
         :description="t('admin.bodyHelp', 'Shown on the event page. Markdown is supported.')"
       >
         <TranslatedInput
-          v-model="form.body"
+          v-model="state.body"
           multiline
           mdc
           :rows="8"
         />
-      </UFormField>
-    </form>
+      </FormRow>
+    </UForm>
     <template #footer>
-      <div class="flex justify-end">
+      <div class="flex justify-end gap-2">
         <UButton
           type="submit"
           form="admin-event-details"
           :loading="busy"
-          :disabled="!tr(form.name)"
-          :label="t('admin.save', 'Save')"
+          :label="t('admin.saveEvent', 'Save event')"
         />
       </div>
     </template>

package/dist/runtime/app/tabs/Details.vue.d.ts

@@ -1,4 +1,4 @@
-import type { StaffEvent } from '../utils/admin-event.js';
+import { type StaffEvent } from '../utils/admin-event.js';
 type __VLS_Props = {
     event: StaffEvent;
 };

package/dist/runtime/app/tabs/Tickets.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { eventsApi } from "../../utils/api";
 defineOptions({ name: "EventsAdminTicketsTab" });
 const props = defineProps({
   event: { type: Object, required: true }
@@ -7,151 +8,123 @@ const emit = defineEmits(["refresh"]);
 const t = useModuleT("events");
 const format = useFormat();
 const tr = useEventsTranslate();
-const confirmAction = useConfirmDialog();
-const { run } = useAction();
 const refresh = () => emit("refresh");
+const { data: membershipOptions, loading: optionsLoading } = useCachedFetch(eventsApi.admin.membershipOptions, {
+  key: "events:admin:membership-options",
+  ttl: 5 * 6e4
+});
+const plans = computed(() => (membershipOptions.value?.options ?? []).map((option) => ({ label: option.label, value: option.value })));
+const planLabel = (key) => plans.value.find((plan) => plan.value === key)?.label ?? key;
+const describeRule = (value) => value === "any" ? t("admin.ruleAny", "Any membership") : Array.isArray(value) ? value.map(planLabel).join(", ") : "";
+const catalog = useEventCatalogActions({
+  eventId: () => props.event.id,
+  onChanged: refresh,
+  membership: () => ({ enabled: membershipOptions.value?.available === true, plans: plans.value })
+});
+const RowMenu = resolveComponent("RowMenu");
 const typeColumns = computed(() => [
-  { id: "expand" },
-  { accessorKey: "name", header: t("admin.name", "Name") },
-  { accessorKey: "price", header: t("admin.price", "Price") },
-  { accessorKey: "capacity", header: t("admin.capacity", "Capacity") },
+  { id: "expand", meta: { class: { th: "w-0", td: "w-0" } } },
+  {
+    accessorKey: "name",
+    header: t("admin.name", "Name"),
+    cell: ({ row }) => h("span", { class: "text-highlighted font-medium" }, tr(row.original.name))
+  },
+  {
+    accessorKey: "price",
+    header: t("admin.price", "Price"),
+    meta: numericColumn,
+    cell: ({ row }) => h("span", { class: "whitespace-nowrap" }, format.money(row.original.price, row.original.currency))
+  },
+  {
+    accessorKey: "capacity",
+    header: t("admin.capacity", "Capacity"),
+    meta: numericColumn,
+    cell: ({ row }) => row.original.capacity ?? emptyCell()
+  },
   { id: "access", header: t("admin.access", "Access") },
-  { id: "addons", header: t("admin.addonGroups", "Add-ons") },
-  { id: "actions" }
+  {
+    id: "addons",
+    header: t("admin.addonGroups", "Add-ons"),
+    meta: numericColumn,
+    cell: ({ row }) => row.original.addonGroups.length
+  },
+  {
+    id: "actions",
+    meta: { class: { th: "w-0", td: "w-0" } },
+    cell: ({ row }) => h(RowMenu, { items: catalog.typeMenu(row.original), subject: tr(row.original.name) })
+  }
 ]);
-const { data: membershipOptions } = useLazyFetch("/api/events/admin/membership-options", { default: () => ({ available: false, options: [] }) });
-const membershipEnabled = computed(() => membershipOptions.value.available);
-const plans = computed(() => membershipOptions.value.options.map((option) => ({ label: option.label, value: option.value })));
-const planLabel = (key) => plans.value.find((plan) => plan.value === key)?.label ?? key;
-const describeRule = (value) => value === "any" ? t("admin.ruleAny", "Any membership") : Array.isArray(value) ? value.map(planLabel).join(", ") : "";
-const typeDialog = useTemplateRef("typeDialog");
-const groupDialog = useTemplateRef("groupDialog");
-const addonDialog = useTemplateRef("addonDialog");
-const removeType = async (ticketType) => {
-  const name = tr(ticketType.name);
-  if (!await confirmAction({
-    title: t("admin.confirmRemoveType", "Delete {name}?", { name }),
-    description: t("admin.confirmRemoveTypeDescription", "Its add-on groups and choices are deleted too. A ticket type with active tickets cannot be deleted."),
-    confirmText: t("admin.removeType", "Delete ticket type"),
-    destructive: true
-  })) return;
-  return run(async () => {
-    await $fetch(`/api/events/admin/ticket-types/${ticketType.id}`, { method: "DELETE" });
-    await refresh();
-  }, { success: t("admin.typeDeleted", "Deleted {name}", { name }) });
-};
-const menu = (ticketType) => [
-  [{ label: t("admin.editType", "Edit ticket type"), icon: "i-lucide-pencil", onSelect: () => typeDialog.value?.open(ticketType) }],
-  [{ label: t("admin.removeType", "Delete ticket type"), icon: "i-lucide-trash-2", color: "error", onSelect: () => {
-    void removeType(ticketType);
-  } }]
-];
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
-    <SectionCard
-      :title="t('admin.ticketTypes', 'Ticket types')"
-      flush
+  <TableCard :title="t('admin.ticketTypes', 'Ticket types')">
+    <template #actions>
+      <UButton
+        icon="i-lucide-plus"
+        variant="outline"
+        color="neutral"
+        size="xs"
+        :label="t('admin.addType', 'Add ticket type')"
+        @click="catalog.openTicketType()"
+      />
+    </template>
+    <UTable
+      :data="event.ticketTypes"
+      :columns="typeColumns"
+      :ui="tableUi({ tr: 'data-[expanded=true]:bg-elevated/30' })"
     >
-      <template #actions>
+      <template #expand-cell="{ row }">
         <UButton
-          icon="i-lucide-plus"
-          variant="outline"
           color="neutral"
+          variant="ghost"
           size="xs"
-          :label="t('admin.addType', 'Add ticket type')"
-          @click="typeDialog?.open()"
+          :icon="row.getIsExpanded() ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          :aria-label="t('admin.addonGroups', 'Add-ons')"
+          :aria-expanded="row.getIsExpanded()"
+          @click="row.toggleExpanded()"
         />
       </template>
-      <UTable
-        :data="event.ticketTypes"
-        :columns="typeColumns"
-        :ui="tableUi({ tr: 'data-[expanded=true]:bg-elevated/30' })"
-      >
-        <template #expand-cell="{ row }">
-          <UButton
-            color="neutral"
-            variant="ghost"
-            size="xs"
-            :icon="row.getIsExpanded() ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-            :aria-label="t('admin.addonGroups', 'Add-ons')"
-            @click="row.toggleExpanded()"
-          />
-        </template>
-        <template #name-cell="{ row }">
-          <span class="text-highlighted font-medium">{{ tr(row.original.name) }}</span>
-        </template>
-        <template #price-cell="{ row }">
-          <span class="whitespace-nowrap">{{ format.money(row.original.price, row.original.currency) }}</span>
-        </template>
-        <template #capacity-cell="{ row }">
-          {{ row.original.capacity ?? "\u2013" }}
-        </template>
-        <template #access-cell="{ row }">
-          <div class="flex flex-wrap gap-1">
-            <UBadge
-              v-if="row.original.requiresMembership"
-              variant="subtle"
-              color="success"
-              :label="`${t('admin.requires', 'Requires')}: ${describeRule(row.original.requiresMembership)}`"
-            />
-            <UBadge
-              v-if="row.original.excludesMembership"
-              variant="subtle"
-              color="warning"
-              :label="`${t('admin.notFor', 'Not for')}: ${describeRule(row.original.excludesMembership)}`"
-            />
-            <span
-              v-if="!row.original.requiresMembership && !row.original.excludesMembership"
-              class="text-muted"
-            >–</span>
-          </div>
-        </template>
-        <template #addons-cell="{ row }">
-          {{ row.original.addonGroups.length }}
-        </template>
-        <template #actions-cell="{ row }">
-          <RowMenu
-            :items="menu(row.original)"
-            :subject="tr(row.original.name)"
-          />
-        </template>
-        <template #expanded="{ row }">
-          <EventAdminAddonGroups
-            :ticket-type="row.original"
-            @refresh="refresh"
-            @add-group="groupDialog?.open(row.original)"
-            @edit-group="(group) => groupDialog?.open(row.original, group)"
-            @add-addon="(group) => addonDialog?.open(group, row.original.currency)"
-            @edit-addon="(group, addon) => addonDialog?.open(group, row.original.currency, addon)"
+      <template #access-cell="{ row }">
+        <USkeleton
+          v-if="optionsLoading && (row.original.requiresMembership || row.original.excludesMembership)"
+          class="h-5 w-28"
+        />
+        <div
+          v-else-if="row.original.requiresMembership || row.original.excludesMembership"
+          class="flex flex-wrap gap-1"
+        >
+          <UBadge
+            v-if="row.original.requiresMembership"
+            variant="subtle"
+            color="success"
+            :label="`${t('admin.requires', 'Requires')}: ${describeRule(row.original.requiresMembership)}`"
           />
-        </template>
-        <template #empty>
-          <UEmpty
-            variant="naked"
-            icon="i-lucide-ticket"
-            :title="t('admin.noTypes', 'No ticket types yet: nobody can buy a ticket.')"
-            :actions="[{ label: t('admin.addType', 'Add ticket type'), icon: 'i-lucide-plus', onClick: () => typeDialog?.open() }]"
+          <UBadge
+            v-if="row.original.excludesMembership"
+            variant="subtle"
+            color="warning"
+            :label="`${t('admin.notFor', 'Not for')}: ${describeRule(row.original.excludesMembership)}`"
           />
-        </template>
-      </UTable>
-    </SectionCard>
-
-    <EventAdminTicketTypeDialog
-      ref="typeDialog"
-      :event-id="props.event.id"
-      :membership-enabled="membershipEnabled"
-      :plans="plans"
-      @refresh="refresh"
-    />
-    <EventAdminAddonGroupDialog
-      ref="groupDialog"
-      @refresh="refresh"
-    />
-    <EventAdminAddonDialog
-      ref="addonDialog"
-      @refresh="refresh"
-    />
-  </div>
+        </div>
+        <component
+          :is="emptyCell"
+          v-else
+        />
+      </template>
+      <template #expanded="{ row }">
+        <EventAdminAddonGroups
+          :ticket-type="row.original"
+          @refresh="refresh"
+        />
+      </template>
+      <template #empty>
+        <UEmpty
+          variant="naked"
+          icon="i-lucide-ticket"
+          :title="t('admin.noTypes', 'No ticket types yet: nobody can buy a ticket.')"
+          :actions="[{ label: t('admin.addType', 'Add ticket type'), icon: 'i-lucide-plus', onClick: () => catalog.openTicketType() }]"
+        />
+      </template>
+    </UTable>
+  </TableCard>
 </template>