@frigear-nu/events 0.1.1 → 0.1.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/events",
   "configKey": "events",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { defineNuxtModule, createResolver, hasNuxtModule, addServerImportsDir, addServerPlugin, addImports, addComponentsDir, addServerHandler } from '@nuxt/kit';
-import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, registerDatabaseTable, inlineModuleRuntime, addModulePages, addOptionalMenuSource } from '@frigear-nu/module-kit/utils';
+import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, registerDatabaseTable, registerBootstrapProvider, inlineModuleRuntime, addModulePages, addOptionalMenuSource } from '@frigear-nu/module-kit/utils';
 import { adminRoute } from '@frigear-nu/admin/utils';
 import { addAuthScope } from '@frigear-nu/auth/utils';
 import { addMcpDefinitions } from '@frigear-nu/mcp/utils';
@@ -60,6 +60,11 @@ const module$1 = defineNuxtModule({
     const route = (method, path, file) => addServerHandler({ route: `/api/events${path}`, method, handler: resolver.resolve(`./runtime/server/routes/${file}`) });
     route("get", "", "public/events.get");
     route("get", "/tickets/me", "public/tickets-me.get");
+    registerBootstrapProvider(nuxt, {
+      scope: "account",
+      key: "events:tickets:mine",
+      handler: resolver.resolve("./runtime/server/bootstrap/my-tickets")
+    });
     route("get", "/tickets/:id", "public/ticket.get");
     route("post", "/tickets/:id/pay", "public/ticket-pay.post");
     route("post", "/check-in", "public/check-in.post");

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

@@ -16,12 +16,13 @@ export declare function useEvent(slug: MaybeRefOrGetter<string>): Promise<{
         url?: string;
     }>;
 }>;
-export declare function useMyTickets(): {
-    tickets: any;
-    status: any;
-    refresh: any;
-    pay: (ticketId: string) => Promise<void>;
-};
+/**
+ * The signed-in user's tickets. Awaitable: `await useMyTickets()` in a page renders them on the server; a widget can
+ * use it without `await` and show a skeleton while `loading`.
+ *
+ * `tickets` is `[]` until loaded and after an error: check `loading` and `error` before showing an empty state.
+ */
+export declare function useMyTickets(): any;
 /** Locale for translated texts: `@nuxtjs/i18n`'s when installed, otherwise `en`. */
 export declare function useEventsLocale(): any;
 /** The site's default locale: shown for texts that have no translation in the current locale. */

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

@@ -32,19 +32,26 @@ export async function useEvent(slug) {
   }
   return { event: data, status, error, refresh, purchase };
 }
+const MY_TICKETS_TTL_MS = 60 * 1e3;
 export function useMyTickets() {
   const { loggedIn } = useUserSession();
-  const { data, status, refresh } = useFetch("/api/events/tickets/me", {
+  const fetched = useCachedFetch("/api/events/tickets/me", {
     key: "events:tickets:mine",
-    immediate: loggedIn.value,
-    watch: false,
-    default: () => []
+    ttl: MY_TICKETS_TTL_MS,
+    watch: false
   });
+  const { status, error, loading, refresh, clear } = fetched;
+  watch(loggedIn, (value) => {
+    if (value) refresh();
+    else clear();
+  });
+  const tickets = computed(() => fetched.data.value ?? []);
   async function pay(ticketId) {
     const { url } = await $fetch(`/api/events/tickets/${ticketId}/pay`, { method: "POST" });
     await navigateTo(url, { external: true });
   }
-  return { tickets: data, status, refresh, pay };
+  const api = { tickets, status, error, loading, refresh, pay };
+  return Object.assign(fetched.then(() => api), api);
 }
 export function useEventsLocale() {
   const nuxtApp = useNuxtApp();

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

@@ -1,14 +1,32 @@
 <script setup>
 defineOptions({ name: "EventTicketsPage" });
 const t = useModuleT("events");
-const { tickets, pay } = useMyTickets();
+const { tickets, loading, error, refresh, pay } = await useMyTickets();
 const links = useEventLinks();
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
+    <div
+      v-if="loading"
+      class="grid gap-4 md:grid-cols-2"
+      aria-busy="true"
+    >
+      <SectionCard
+        v-for="index in 2"
+        :key="index"
+        loading
+      />
+    </div>
+    <UEmpty
+      v-else-if="error && !tickets.length"
+      icon="i-lucide-circle-alert"
+      :title="t('ticketsLoadFailed', 'Your tickets could not be loaded')"
+      :description="errorMessage(error, '')"
+      :actions="[{ label: t('tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]"
+    />
     <UEmpty
-      v-if="!tickets.length"
+      v-else-if="!tickets.length"
       icon="i-lucide-ticket"
       :title="t('noTicketsTitle', 'No tickets yet')"
       :description="t('noTickets', 'You do not have any tickets yet.')"

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

@@ -19,9 +19,12 @@ const typeColumns = computed(() => [
   { id: "addons", header: t("admin.addonGroups", "Add-ons") },
   { id: "actions" }
 ]);
-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 { data: membershipOptions, loading: optionsLoading } = useCachedFetch("/api/events/admin/membership-options", {
+  key: "events:admin:membership-options",
+  ttl: 5 * 6e4
+});
+const membershipEnabled = computed(() => membershipOptions.value?.available === true);
+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");
@@ -89,7 +92,14 @@ const menu = (ticketType) => [
           {{ row.original.capacity ?? "\u2013" }}
         </template>
         <template #access-cell="{ row }">
-          <div class="flex flex-wrap gap-1">
+          <USkeleton
+            v-if="optionsLoading && (row.original.requiresMembership || row.original.excludesMembership)"
+            class="h-5 w-28"
+          />
+          <div
+            v-else
+            class="flex flex-wrap gap-1"
+          >
             <UBadge
               v-if="row.original.requiresMembership"
               variant="subtle"

package/dist/runtime/i18n/lang/da.json

@@ -229,6 +229,8 @@
     },
     "listDescription": "Find et arrangement og få din billet.",
     "noTicketsTitle": "Ingen billetter endnu",
+    "ticketsLoadFailed": "Dine billetter kunne ikke indlæses",
+    "tryAgain": "Prøv igen",
     "browseEvents": "Se arrangementer"
   }
 }

package/dist/runtime/i18n/lang/en.json

@@ -229,6 +229,8 @@
     },
     "listDescription": "Find an event and get your ticket.",
     "noTicketsTitle": "No tickets yet",
+    "ticketsLoadFailed": "Your tickets could not be loaded",
+    "tryAgain": "Try again",
     "browseEvents": "Browse events"
   }
 }

package/dist/runtime/server/bootstrap/my-tickets.d.ts

@@ -0,0 +1,7 @@
+import type { H3Event } from 'h3';
+import type { TicketDto } from '../../../types.js';
+/**
+ * The caller's tickets: the body of `GET /api/events/tickets/me` and the account bootstrap's `events:tickets:mine`
+ * (the key `useMyTickets()` reads), so both always return the same thing.
+ */
+export default function myTickets(event: H3Event): Promise<TicketDto[]>;

package/dist/runtime/server/bootstrap/my-tickets.js

@@ -0,0 +1,4 @@
+export default async function myTickets(event) {
+  const user = await requireUser(event, { scopes: ["tickets:read"] });
+  return listUserTickets(user.id);
+}

package/dist/runtime/server/routes/public/tickets-me.get.js

@@ -1,4 +1,2 @@
-export default defineEventHandler(async (event) => {
-  const user = await requireUser(event, { scopes: ["tickets:read"] });
-  return listUserTickets(user.id);
-});
+import myTickets from "../../bootstrap/my-tickets.js";
+export default defineEventHandler(myTickets);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frigear-nu/events",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Events with ticket types, addons, capacity, membership requirements, Stripe payments and QR check-in for the frigear ecosystem, built on @frigear-nu/payments.",
   "homepage": "https://docs.frigear.dev/modules/events",
   "repository": {
@@ -30,15 +30,15 @@
     "playground"
   ],
   "dependencies": {
-    "@frigear-nu/admin": "0.1.1",
-    "@frigear-nu/module-kit": "1.1.1",
-    "@frigear-nu/payments": "0.1.1",
-    "@frigear-nu/stripe": "0.1.1",
-    "@frigear-nu/subscriptions": "0.1.1",
-    "@frigear-nu/ui": "0.1.1",
-    "@frigear-nu/auth": "0.1.2",
-    "@frigear-nu/mcp": "0.1.1",
-    "@frigear-nu/users": "1.1.2",
+    "@frigear-nu/admin": "0.1.2",
+    "@frigear-nu/module-kit": "1.1.2",
+    "@frigear-nu/payments": "0.1.2",
+    "@frigear-nu/stripe": "0.1.2",
+    "@frigear-nu/subscriptions": "0.1.2",
+    "@frigear-nu/ui": "0.1.2",
+    "@frigear-nu/auth": "0.1.3",
+    "@frigear-nu/mcp": "0.1.2",
+    "@frigear-nu/users": "1.1.3",
     "@libsql/client": "^0.18.0",
     "@nuxt/kit": "^4.6.1",
     "@vueuse/core": "^15.0.0",
@@ -51,9 +51,9 @@
     "zod": "^4.6.5"
   },
   "peerDependencies": {
-    "@frigear-nu/menu": "0.1.1",
-    "@frigear-nu/widget": "0.1.1",
-    "@nuxt/ui": "^4.11.2",
+    "@frigear-nu/menu": "0.1.2",
+    "@frigear-nu/widget": "0.1.2",
+    "@nuxt/ui": "^4.12.0",
     "@nuxthub/core": "^0.10.8"
   },
   "peerDependenciesMeta": {
@@ -68,14 +68,14 @@
     }
   },
   "devDependencies": {
-    "@frigear-nu/menu": "0.1.1",
-    "@frigear-nu/widget": "0.1.1",
+    "@frigear-nu/menu": "0.1.2",
+    "@frigear-nu/widget": "0.1.2",
     "@nuxt/devtools": "^3.4.2",
     "@nuxt/eslint-config": "^1.17.0",
     "@nuxt/module-builder": "^1.0.3",
     "@nuxt/schema": "^4.6.1",
     "@nuxt/test-utils": "^4.3.2",
-    "@nuxt/ui": "^4.11.2",
+    "@nuxt/ui": "^4.12.0",
     "@nuxthub/core": "^0.10.8",
     "@types/node": "^26.6.5",
     "changelogen": "^0.6.2",