@frigear-nu/forms 0.1.2 → 0.1.4

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

@@ -1,4 +1,5 @@
-import { LazyFormCreateSlideover } from "#components";
+import { LazyFormCreateSlideover, LazyFormImportSlideover } from "#components";
+import { formsApi } from "../../utils/index.js";
 export const FORMS_LIST_KEY = "forms:admin:forms";
 export function useFormActions() {
   const t = useModuleT("forms");
@@ -10,6 +11,7 @@ export function useFormActions() {
   const showError = useErrorToast();
   const { busy, run } = useAction();
   const creator = overlay.create(LazyFormCreateSlideover, { destroyOnClose: true });
+  const importer = overlay.create(LazyFormImportSlideover, { destroyOnClose: true });
   async function create() {
     const created = await creator.open().result;
     if (created) await navigateTo(paths("adminForm", { id: created.id }));
@@ -17,7 +19,7 @@ export function useFormActions() {
   }
   async function clone(form) {
     const copy = await run(
-      () => $fetch(`/api/forms/admin/forms/${form.id}/clone`, { method: "POST" }),
+      () => $fetch(formsApi.admin.clone(form.id), { method: "POST" }),
       { success: t("admin.cloned", "Form duplicated") }
     );
     if (!copy) return false;
@@ -33,25 +35,16 @@ export function useFormActions() {
     });
     if (!confirmed) return false;
     const archived = await run(
-      () => $fetch(`/api/forms/admin/forms/${form.id}`, { method: "DELETE" }),
+      // 204 No Content: `run` resolves with `undefined` on failure, so map success to `true`.
+      () => $fetch(formsApi.admin.form(form.id), { method: "DELETE" }).then(() => true),
       { success: t("admin.archived", "Form archived") }
     );
     if (!archived) return false;
     await refreshNuxtData(FORMS_LIST_KEY);
     return true;
   }
-  async function importJson(text) {
-    let parsed;
-    try {
-      parsed = JSON.parse(text);
-    } catch {
-      toast.add({ title: t("admin.invalidJson", "The JSON is not valid."), color: "error" });
-      return false;
-    }
-    const result = await run(() => $fetch("/api/forms/admin/import", {
-      method: "POST",
-      body: { forms: Array.isArray(parsed) ? parsed : [parsed] }
-    }));
+  async function importJson() {
+    const result = await importer.open().result;
     if (!result) return false;
     toast.add({
       title: t("admin.imported", "Imported {inserted}, skipped {skipped} existing.", { inserted: result.inserted.length, skipped: result.skipped.length }),
@@ -61,10 +54,7 @@ export function useFormActions() {
     return true;
   }
   async function redeliver(submissionId) {
-    const result = await run(() => $fetch(
-      `/api/forms/admin/submissions/${submissionId}/redeliver`,
-      { method: "POST" }
-    ));
+    const result = await run(() => $fetch(formsApi.admin.redeliver(submissionId), { method: "POST" }));
     if (!result) return false;
     if (result.deliveryStatus === "failed") {
       showError(new Error(result.deliveryError ?? ""), t("delivery.failed", "Delivery failed"));
@@ -74,7 +64,11 @@ export function useFormActions() {
     return true;
   }
   function menu(form, options = {}) {
-    const items = [...options.extra ?? []];
+    const items = [];
+    if (options.open ?? true) {
+      items.push({ label: t("admin.open", "Open"), icon: "i-lucide-arrow-right", to: paths("adminForm", { id: form.id }) });
+    }
+    items.push(...options.extra ?? []);
     if (form.storage === "db" || (form.submissionCount ?? 0) > 0) {
       items.push({
         label: t("admin.submissionsTitle", "Submissions"),
@@ -99,5 +93,23 @@ export function useFormActions() {
     }
     return groups;
   }
-  return { busy, create, clone, remove, importJson, redeliver, menu };
+  function submissionMenu(submission, options = {}) {
+    const items = [];
+    if (options.open ?? true) {
+      items.push({
+        label: t("admin.open", "Open"),
+        icon: "i-lucide-arrow-right",
+        to: paths("adminSubmission", { id: submission.formId, submissionId: submission.id })
+      });
+    }
+    items.push({
+      label: t("admin.redeliver", "Deliver again"),
+      icon: "i-lucide-send",
+      onSelect: async () => {
+        if (await redeliver(submission.id)) await options.onRedelivered?.();
+      }
+    });
+    return [items];
+  }
+  return { busy, create, clone, remove, importJson, redeliver, menu, submissionMenu };
 }

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

@@ -1,4 +1,4 @@
-import type { FormDefinition, FormField } from '../../../types.js';
+import type { FormDefinition, FormField, SubmitResponse } from '../../../types.js';
 /** Locale for translated form content: `@nuxtjs/i18n`'s when installed, otherwise `en`. */
 export declare function useFormsLocale(): any;
 /** Locales content can be translated into: `@nuxtjs/i18n`'s configured locales when installed, otherwise just `en`. */
@@ -11,11 +11,18 @@ export declare function useForm(slug: MaybeRefOrGetter<string>, password?: Maybe
 export declare function useFormAccess(slug: MaybeRefOrGetter<string>): any;
 /** Initial answers: empty arrays for files, `false` for checkboxes, everything else unset. */
 export declare function emptyAnswers(definition: Pick<FormDefinition, 'steps'>): Record<string, unknown>;
+/** One problem with a submission, as the submit route reports it. */
+export type SubmissionIssue = {
+    path: (string | number)[];
+    message: string;
+};
+/**
+ * The issues of a failed submit: the route answers 400 `validation_failed` with `{ path, message }` issues in
+ * `data.issues`, for a malformed body as well as for answers the definition rejects. Empty for any other error.
+ */
+export declare function submissionIssues(error: unknown): SubmissionIssue[];
 /** Posts the answers: JSON for forms without files, multipart (answers + `file:<key>` parts) otherwise. */
-export declare function submitAnswers(slug: string, definition: Pick<FormDefinition, 'steps'>, answers: Record<string, unknown>, locale: string, password?: string): Promise<{
-    ok: true;
-    id: string | null;
-}>;
+export declare function submitAnswers(slug: string, definition: Pick<FormDefinition, 'steps'>, answers: Record<string, unknown>, locale: string, password?: string): Promise<SubmitResponse>;
 declare const DEFAULT_PATHS: {
     readonly form: "/forms/:slug";
     readonly admin: "/admin/forms";

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

@@ -1,4 +1,4 @@
-import { resolveVisibility, translate } from "../../utils/index.js";
+import { formsApi, resolveVisibility, translate } from "../../utils/index.js";
 export function useFormsLocale() {
   const nuxtApp = useNuxtApp();
   return computed(() => nuxtApp.$i18n?.locale?.value ?? "en");
@@ -12,13 +12,13 @@ export function useFormsLocales() {
 }
 export const FORM_PASSWORD_HEADER = "x-form-password";
 export function useForm(slug, password) {
-  return useFetch(() => `/api/forms/${toValue(slug)}`, {
+  return useFetch(() => formsApi.form(toValue(slug)), {
     key: `forms:${toValue(slug)}${toValue(password) ? ":pw" : ""}`,
     headers: computed(() => toValue(password) ? { [FORM_PASSWORD_HEADER]: toValue(password) } : void 0)
   });
 }
 export function useFormAccess(slug) {
-  return useFetch(() => `/api/forms/${toValue(slug)}/access`, { key: `forms:access:${toValue(slug)}` });
+  return useFetch(() => formsApi.access(toValue(slug)), { key: `forms:access:${toValue(slug)}` });
 }
 export function emptyAnswers(definition) {
   const state = {};
@@ -31,6 +31,12 @@ export function emptyAnswers(definition) {
   }
   return state;
 }
+export function submissionIssues(error) {
+  const body = error?.data;
+  if (body?.statusCode !== void 0 && body.statusCode !== 400) return [];
+  const issues = body?.data?.issues;
+  return Array.isArray(issues) ? issues.filter((issue) => typeof issue?.message === "string" && Array.isArray(issue?.path)) : [];
+}
 export async function submitAnswers(slug, definition, answers, locale, password) {
   const headers = password ? { [FORM_PASSWORD_HEADER]: password } : void 0;
   const files = [];
@@ -45,13 +51,13 @@ export async function submitAnswers(slug, definition, answers, locale, password)
     plain[key] = value;
   }
   if (!files.length) {
-    return $fetch(`/api/forms/${slug}/submit`, { method: "POST", body: { answers: plain, locale }, headers });
+    return $fetch(formsApi.submit(slug), { method: "POST", body: { answers: plain, locale }, headers });
   }
   const body = new FormData();
   body.append("answers", JSON.stringify(plain));
   body.append("locale", locale);
   for (const { key, file } of files) body.append(`file:${key}`, file, file.name);
-  return $fetch(`/api/forms/${slug}/submit`, { method: "POST", body, headers });
+  return $fetch(formsApi.submit(slug), { method: "POST", body, headers });
 }
 const DEFAULT_PATHS = {
   form: "/forms/:slug",

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

@@ -1,15 +1,16 @@
 <script setup>
-import { formDefinitionSchema } from "../../utils";
+import { formDefinitionSchema, formsApi } from "../../utils";
 const t = useModuleT("forms");
 const route = useRoute();
 const paths = useFormsPaths();
 const actions = useFormActions();
 const { busy: saving, run } = useAction();
 const id = computed(() => String(route.params.id));
-const { data: form, error, refresh } = await useFetch(() => `/api/forms/admin/forms/${id.value}`, {
+const { data: form, error, refresh } = await useFetch(() => formsApi.admin.form(id.value), {
   key: `forms:admin:form:${id.value}`
 });
 const notFound = computed(() => error.value?.statusCode === 404);
+const forbidden = computed(() => [401, 403].includes(error.value?.statusCode ?? 0));
 const draft = reactive({ name: form.value?.name ?? "", slug: form.value?.slug ?? "", status: form.value?.status ?? "draft" });
 const definition = ref(structuredClone(toRaw(form.value?.definition ?? { mode: "single", storage: "db", steps: [] })));
 const tab = ref("builder");
@@ -47,13 +48,13 @@ const statuses = ["draft", "published", "archived"];
 async function save() {
   if (!checked.value.definition) return;
   await run(async () => {
-    await $fetch(`/api/forms/admin/forms/${id.value}`, { method: "PATCH", body: { ...draft, definition: checked.value.definition } });
+    await $fetch(formsApi.admin.form(id.value), { method: "PATCH", body: { ...draft, definition: checked.value.definition } });
     await refresh();
     previewKey.value++;
   }, { success: t("admin.saved", "Saved.") });
 }
 const listPath = paths("admin");
-const menu = computed(() => form.value ? actions.menu({ ...form.value, storage: form.value.definition.storage }, { onRemoved: () => navigateTo(listPath) }) : []);
+const menu = computed(() => form.value ? actions.menu({ ...form.value, storage: form.value.definition.storage }, { open: false, onRemoved: () => navigateTo(listPath) }) : []);
 </script>
 
 <template>
@@ -67,10 +68,10 @@ const menu = computed(() => form.value ? actions.menu({ ...form.value, storage:
           {{ form.name }} <span class="text-muted text-base font-normal">v{{ form.version }}</span>
         </template>
         <template #badge>
-          <UBadge
-            :color="statusColor(form.status, { archived: 'warning' })"
-            variant="subtle"
+          <StatusBadge
+            :status="form.status"
             :label="t(`status.${form.status}`, form.status)"
+            :colors="{ archived: 'warning' }"
           />
         </template>
         <template #actions>
@@ -117,7 +118,8 @@ const menu = computed(() => form.value ? actions.menu({ ...form.value, storage:
         :items="tabs"
       />
 
-      <!-- The builder has its own chrome (canvas and settings panel), so it is not framed again. -->
+      <!-- The builder has its own chrome (canvas and settings panel), so it is not framed again; settings and
+           access render their own `SectionCard`s, one per topic. -->
       <FormBuilder
         v-if="tab === 'builder'"
         v-model="definition"
@@ -133,17 +135,17 @@ const menu = computed(() => form.value ? actions.menu({ ...form.value, storage:
         </template>
       </FormBuilder>
 
-      <SectionCard v-else-if="tab === 'settings'">
-        <FormBuilderSettings v-model="definition" />
-      </SectionCard>
+      <FormBuilderSettings
+        v-else-if="tab === 'settings'"
+        v-model="definition"
+      />
 
-      <SectionCard v-else-if="tab === 'access'">
-        <FormBuilderAccess
-          v-model="definition"
-          :form-id="form.id"
-          :slug="form.slug"
-        />
-      </SectionCard>
+      <FormBuilderAccess
+        v-else-if="tab === 'access'"
+        v-model="definition"
+        :form-id="form.id"
+        :slug="form.slug"
+      />
 
       <SectionCard
         v-else-if="tab === 'json'"
@@ -177,9 +179,9 @@ const menu = computed(() => form.value ? actions.menu({ ...form.value, storage:
     </template>
 
     <UEmpty
-      v-else
-      :icon="notFound ? 'i-lucide-clipboard-x' : 'i-lucide-lock'"
-      :title="notFound ? t('admin.notFound', 'This form does not exist.') : t('admin.forbidden', 'You are not allowed to manage forms.')"
+      v-else-if="notFound"
+      icon="i-lucide-clipboard-x"
+      :title="t('admin.notFound', 'This form does not exist.')"
     >
       <template #actions>
         <UButton
@@ -191,5 +193,19 @@ const menu = computed(() => form.value ? actions.menu({ ...form.value, storage:
         />
       </template>
     </UEmpty>
+
+    <UEmpty
+      v-else-if="forbidden"
+      icon="i-lucide-lock"
+      :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
+    />
+
+    <UEmpty
+      v-else
+      icon="i-lucide-circle-alert"
+      :title="t('admin.formLoadFailed', 'The form could not be loaded')"
+      :description="errorMessage(error, '')"
+      :actions="[{ label: t('admin.tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]"
+    />
   </div>
 </template>

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

@@ -1,4 +1,5 @@
 <script setup>
+import { formsApi } from "../../utils";
 const t = useModuleT("forms");
 const route = useRoute();
 const paths = useFormsPaths();
@@ -6,22 +7,19 @@ const format = useFormat();
 const actions = useFormActions();
 const id = computed(() => String(route.params.id));
 const submissionId = computed(() => String(route.params.submissionId));
-const { data: form } = await useFetch(() => `/api/forms/admin/forms/${id.value}`, { key: `forms:admin:form:${id.value}` });
-const { data: submission, error, refresh } = await useFetch(() => `/api/forms/admin/submissions/${submissionId.value}`);
-async function redeliver() {
-  if (await actions.redeliver(submissionId.value)) await refresh();
-}
+const { data: form } = await useFetch(() => formsApi.admin.form(id.value), { key: `forms:admin:form:${id.value}` });
+const { data: submission, error, refresh } = await useFetch(() => formsApi.admin.submission(submissionId.value));
 const breadcrumb = computed(() => [
   { label: t("admin.title", "Forms"), to: paths("admin") },
   { label: form.value?.name ?? id.value, to: paths("adminForm", { id: id.value }) },
   { label: t("admin.submissionsTitle", "Submissions"), to: paths("adminSubmissions", { id: id.value }) },
   { label: `#${submissionId.value}` }
 ]);
-const menu = computed(() => [[{
-  label: t("admin.redeliver", "Deliver again"),
-  icon: "i-lucide-send",
-  onSelect: redeliver
-}]]);
+const menu = computed(() => actions.submissionMenu(
+  { id: submissionId.value, formId: id.value },
+  { open: false, onRedelivered: () => refresh() }
+));
+const forbidden = computed(() => [401, 403].includes(error.value?.statusCode ?? 0));
 const notFound = computed(() => error.value?.statusCode === 404);
 </script>
 
@@ -34,9 +32,8 @@ const notFound = computed(() => error.value?.statusCode === 404);
         :breadcrumb="breadcrumb"
       >
         <template #badge>
-          <UBadge
-            :color="statusColor(submission.deliveryStatus)"
-            variant="subtle"
+          <StatusBadge
+            :status="submission.deliveryStatus"
             :label="t(`delivery.${submission.deliveryStatus}`, submission.deliveryStatus)"
           />
         </template>
@@ -63,9 +60,9 @@ const notFound = computed(() => error.value?.statusCode === 404);
     </template>
 
     <UEmpty
-      v-else
-      :icon="notFound ? 'i-lucide-inbox' : 'i-lucide-lock'"
-      :title="notFound ? t('admin.submissionNotFound', 'This submission does not exist.') : t('admin.forbidden', 'You are not allowed to manage forms.')"
+      v-else-if="notFound"
+      icon="i-lucide-inbox"
+      :title="t('admin.submissionNotFound', 'This submission does not exist.')"
     >
       <template #actions>
         <UButton
@@ -77,5 +74,19 @@ const notFound = computed(() => error.value?.statusCode === 404);
         />
       </template>
     </UEmpty>
+
+    <UEmpty
+      v-else-if="forbidden"
+      icon="i-lucide-lock"
+      :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
+    />
+
+    <UEmpty
+      v-else
+      icon="i-lucide-circle-alert"
+      :title="t('admin.submissionLoadFailed', 'The submission could not be loaded')"
+      :description="errorMessage(error, '')"
+      :actions="[{ label: t('admin.tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]"
+    />
   </div>
 </template>

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

@@ -1,13 +1,17 @@
 <script setup>
+import { formsApi } from "../../utils";
 const t = useModuleT("forms");
 const route = useRoute();
 const paths = useFormsPaths();
 const format = useFormat();
 const actions = useFormActions();
 const id = computed(() => String(route.params.id));
-const { data: form } = await useFetch(() => `/api/forms/admin/forms/${id.value}`, { key: `forms:admin:form:${id.value}` });
-const { data: submissions, error, status, refresh } = await useFetch(() => `/api/forms/admin/forms/${id.value}/submissions`);
-const { sorting, header } = useTableSort({ id: "createdAt", desc: true });
+const { data: form } = await useFetch(() => formsApi.admin.form(id.value), { key: `forms:admin:form:${id.value}` });
+const list = useTableQuery({ sort: { id: "createdAt", desc: true } });
+const { page, pageSize } = list;
+const { data, error, status, refresh } = await useFetch(() => formsApi.admin.submissions(id.value), { query: list.query });
+const submissions = computed(() => data.value?.items ?? []);
+const { sorting, header } = useTableSort(null, list.sort);
 const columns = computed(() => [
   { accessorKey: "createdAt", header: header("createdAt", t("admin.submittedAt", "Submitted")) },
   { id: "preview", header: t("admin.answers", "Answers") },
@@ -15,16 +19,11 @@ const columns = computed(() => [
   { id: "actions", header: "", meta: { class: { th: "w-0", td: "w-0" } } }
 ]);
 const submissionPath = (submission) => paths("adminSubmission", { id: id.value, submissionId: submission.id });
-const menu = (submission) => [[
-  { label: t("admin.open", "Open"), icon: "i-lucide-arrow-right", to: submissionPath(submission) },
-  {
-    label: t("admin.redeliver", "Deliver again"),
-    icon: "i-lucide-send",
-    onSelect: async () => {
-      if (await actions.redeliver(submission.id)) await refresh();
-    }
-  }
-]];
+const menu = (submission) => actions.submissionMenu(
+  { id: submission.id, formId: id.value },
+  { onRedelivered: () => refresh() }
+);
+const forbidden = computed(() => [401, 403].includes(error.value?.statusCode ?? 0));
 const breadcrumb = computed(() => [
   { label: t("admin.title", "Forms"), to: paths("admin") },
   { label: form.value?.name ?? id.value, to: paths("adminForm", { id: id.value }) },
@@ -40,20 +39,23 @@ const breadcrumb = computed(() => [
     />
 
     <UEmpty
-      v-if="error"
-      icon="i-lucide-lock"
-      :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
+      v-if="error && !data"
+      :icon="forbidden ? 'i-lucide-lock' : 'i-lucide-circle-alert'"
+      :title="forbidden ? t('admin.forbidden', 'You are not allowed to manage forms.') : t('admin.submissionsLoadFailed', 'Submissions could not be loaded')"
+      :description="forbidden ? void 0 : errorMessage(error, '')"
+      :actions="forbidden ? void 0 : [{ label: t('admin.tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]"
     />
 
     <TableCard
       v-else
-      :loading="status === 'pending' && !submissions"
-      :refreshing="status === 'pending' && !!submissions"
+      :loading="status === 'pending' && !data"
+      :refreshing="status === 'pending' && !!data"
     >
       <UTable
         v-model:sorting="sorting"
-        :data="submissions ?? []"
+        :data="submissions"
         :columns="columns"
+        :sorting-options="{ manualSorting: true }"
         :ui="tableUi()"
         @select="(_, row2) => navigateTo(submissionPath(row2.original))"
       >
@@ -74,9 +76,8 @@ const breadcrumb = computed(() => [
           </p>
         </template>
         <template #deliveryStatus-cell="{ row }">
-          <UBadge
-            :color="statusColor(row.original.deliveryStatus)"
-            variant="subtle"
+          <StatusBadge
+            :status="row.original.deliveryStatus"
             :label="t(`delivery.${row.original.deliveryStatus}`, row.original.deliveryStatus)"
           />
         </template>
@@ -95,6 +96,13 @@ const breadcrumb = computed(() => [
           />
         </template>
       </UTable>
+      <template #footer>
+        <TablePagination
+          v-model:page="page"
+          v-model:page-size="pageSize"
+          :total="data?.total ?? 0"
+        />
+      </template>
     </TableCard>
   </div>
 </template>

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

@@ -1,27 +1,19 @@
 <script setup>
+import { formsApi } from "../../utils";
 const t = useModuleT("forms");
 const paths = useFormsPaths();
 const format = useFormat();
 const actions = useFormActions();
-const { data: forms, error, status } = await useFetch("/api/forms/admin/forms", { key: FORMS_LIST_KEY });
-const search = ref("");
-const statusFilter = ref("all");
+const list = useTableQuery({ sort: { id: "updatedAt", desc: true }, filters: { status: "all" } });
+const { page, pageSize, search, filters, filtered } = list;
+const { data, error, status, refresh } = await useFetch(formsApi.admin.forms, { key: FORMS_LIST_KEY, query: list.query });
+const forms = computed(() => data.value?.items ?? []);
 const statusItems = computed(() => [
   { value: "all", label: t("admin.allStatuses", "All statuses") },
   ...["published", "draft", "archived"].map((value) => ({ value, label: t(`status.${value}`, value) }))
 ]);
-const visibleForms = computed(() => {
-  const query = search.value.trim().toLowerCase();
-  return (forms.value ?? []).filter(
-    (form) => (statusFilter.value === "all" || form.status === statusFilter.value) && (!query || form.name.toLowerCase().includes(query) || form.slug.toLowerCase().includes(query))
-  );
-});
-const filtered = computed(() => !!search.value.trim() || statusFilter.value !== "all");
-function clearFilters() {
-  search.value = "";
-  statusFilter.value = "all";
-}
-const { sorting, header } = useTableSort({ id: "updatedAt", desc: true });
+const clearFilters = () => list.reset();
+const { sorting, header } = useTableSort(null, list.sort);
 const columns = computed(() => [
   { accessorKey: "name", header: header("name", t("admin.name", "Name")) },
   { accessorKey: "status", header: header("status", t("admin.status", "Status")) },
@@ -35,24 +27,9 @@ const formDescription = (form) => [
   `v${form.version}`,
   ...form.storage === "none" ? [t("admin.notStored", "Not stored")] : []
 ].join(" \xB7 ");
+const forbidden = computed(() => [401, 403].includes(error.value?.statusCode ?? 0));
 const editPath = (form) => paths("adminForm", { id: form.id });
-const menu = (form) => actions.menu(form, {
-  extra: [{ label: t("admin.open", "Open"), icon: "i-lucide-arrow-right", to: editPath(form) }]
-});
-const importing = ref(false);
-const importText = ref("");
-const importBusy = ref(false);
-async function runImport() {
-  importBusy.value = true;
-  try {
-    if (await actions.importJson(importText.value)) {
-      importing.value = false;
-      importText.value = "";
-    }
-  } finally {
-    importBusy.value = false;
-  }
-}
+const menu = (form) => actions.menu(form);
 </script>
 
 <template>
@@ -64,7 +41,7 @@ async function runImport() {
           variant="outline"
           icon="i-lucide-upload"
           :label="t('admin.import', 'Import JSON')"
-          @click="importing = true"
+          @click="actions.importJson()"
         />
         <UButton
           icon="i-lucide-plus"
@@ -75,9 +52,11 @@ async function runImport() {
     </PageHeading>
 
     <UEmpty
-      v-if="error"
-      icon="i-lucide-lock"
-      :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
+      v-if="error && !data"
+      :icon="forbidden ? 'i-lucide-lock' : 'i-lucide-circle-alert'"
+      :title="forbidden ? t('admin.forbidden', 'You are not allowed to manage forms.') : t('admin.loadFailed', 'Forms could not be loaded')"
+      :description="forbidden ? void 0 : errorMessage(error, '')"
+      :actions="forbidden ? void 0 : [{ label: t('admin.tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]"
     />
 
     <template v-else>
@@ -90,7 +69,7 @@ async function runImport() {
           :aria-label="t('admin.search', 'Search forms')"
         />
         <USelect
-          v-model="statusFilter"
+          v-model="filters.status"
           class="w-full sm:w-44"
           :items="statusItems"
           :aria-label="t('admin.statusFilter', 'Filter by status')"
@@ -98,13 +77,14 @@ async function runImport() {
       </PageToolbar>
 
       <TableCard
-        :loading="status === 'pending' && !forms"
-        :refreshing="status === 'pending' && !!forms"
+        :loading="status === 'pending' && !data"
+        :refreshing="status === 'pending' && !!data"
       >
         <UTable
           v-model:sorting="sorting"
-          :data="visibleForms"
+          :data="forms"
           :columns="columns"
+          :sorting-options="{ manualSorting: true }"
           :ui="tableUi()"
           @select="(_, row2) => navigateTo(editPath(row2.original))"
         >
@@ -115,10 +95,10 @@ async function runImport() {
             />
           </template>
           <template #status-cell="{ row }">
-            <UBadge
-              :color="statusColor(row.original.status, { archived: 'warning' })"
-              variant="subtle"
+            <StatusBadge
+              :status="row.original.status"
               :label="t(`status.${row.original.status}`, row.original.status)"
+              :colors="{ archived: 'warning' }"
             />
           </template>
           <template #updatedAt-cell="{ row }">
@@ -155,43 +135,14 @@ async function runImport() {
             </UEmpty>
           </template>
         </UTable>
-        <template
-          v-if="forms?.length"
-          #footer
-        >
-          <span>{{ t("admin.showing", "{shown} of {total} forms", { shown: visibleForms.length, total: forms.length }) }}</span>
+        <template #footer>
+          <TablePagination
+            v-model:page="page"
+            v-model:page-size="pageSize"
+            :total="data?.total ?? 0"
+          />
         </template>
       </TableCard>
     </template>
-
-    <UModal
-      v-model:open="importing"
-      :title="t('admin.import', 'Import JSON')"
-      :description="t('admin.importHint', 'Paste one form or a list of forms (each with slug, name and definition). Forms whose slug already exists are skipped.')"
-      :ui="{ footer: 'justify-end gap-2' }"
-    >
-      <template #body>
-        <UTextarea
-          v-model="importText"
-          :rows="12"
-          class="w-full font-mono text-xs"
-        />
-      </template>
-      <template #footer>
-        <UButton
-          color="neutral"
-          variant="outline"
-          :label="t('admin.cancel', 'Cancel')"
-          :disabled="importBusy"
-          @click="importing = false"
-        />
-        <UButton
-          :label="t('admin.importSubmit', 'Import forms')"
-          :loading="importBusy"
-          :disabled="!importText.trim()"
-          @click="runImport"
-        />
-      </template>
-    </UModal>
   </div>
 </template>