@frigear-nu/forms 0.0.9 → 0.1.0

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

@@ -3,10 +3,13 @@ import { formDefinitionSchema } from "../../utils";
 const t = useModuleT("forms");
 const route = useRoute();
 const paths = useFormsPaths();
-const toast = useToast();
-const link = useFormLink();
+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(() => `/api/forms/admin/forms/${id.value}`, {
+  key: `forms:admin:form:${id.value}`
+});
+const notFound = computed(() => error.value?.statusCode === 404);
 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");
@@ -40,95 +43,81 @@ const tabs = computed(() => [
   { value: "json", label: t("admin.json", "JSON"), icon: "i-lucide-braces" }
 ]);
 const previewKey = ref(0);
-const saving = ref(false);
 const statuses = ["draft", "published", "archived"];
 async function save() {
   if (!checked.value.definition) return;
-  saving.value = true;
-  try {
+  await run(async () => {
     await $fetch(`/api/forms/admin/forms/${id.value}`, { method: "PATCH", body: { ...draft, definition: checked.value.definition } });
     await refresh();
     previewKey.value++;
-    toast.add({ title: t("admin.saved", "Saved."), color: "success" });
-  } catch (cause) {
-    toast.add({ title: cause.statusMessage ?? t("error.generic", "Something went wrong. Please try again."), color: "error" });
-  } finally {
-    saving.value = false;
-  }
+  }, { 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) }) : []);
 </script>
 
 <template>
-  <AdminPage>
-    <UAlert
-      v-if="error || !form"
-      color="error"
-      variant="subtle"
-      :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
-    />
-
-    <template v-else>
-      <AdminPageHeader
+  <div class="flex flex-col gap-4">
+    <template v-if="form">
+      <PageHeading
+        :breadcrumb="[{ label: t('admin.title', 'Forms'), to: listPath }, { label: form.name }]"
         :title="form.name"
-        :back="{ label: t('admin.title', 'Forms'), to: paths('admin') }"
       >
         <template #title>
-          {{ form.name }} <span class="text-base font-normal text-muted">v{{ form.version }}</span>
+          {{ form.name }} <span class="text-muted text-base font-normal">v{{ form.version }}</span>
         </template>
-        <template #actions>
-          <UButton
-            v-if="form.status === 'published' && link.enabled.value"
-            color="neutral"
-            variant="outline"
-            icon="i-lucide-link"
-            :label="t('admin.copyLink', 'Copy link')"
-            @click="link.copy(form.slug)"
-          />
-          <UButton
-            v-if="form.definition.storage === 'db' || (form.submissionCount ?? 0) > 0"
-            color="neutral"
-            variant="outline"
-            :to="paths('adminSubmissions', { id: form.id })"
-            :label="t('admin.submissionsTitle', 'Submissions')"
+        <template #badge>
+          <UBadge
+            :color="statusColor(form.status, { archived: 'warning' })"
+            variant="subtle"
+            :label="t(`status.${form.status}`, form.status)"
           />
+        </template>
+        <template #actions>
           <UButton
             :loading="saving"
             :disabled="!checked.definition"
-            :label="t('admin.save', 'Save')"
+            :label="t('admin.save', 'Save form')"
             @click="save"
           />
+          <RowMenu
+            :items="menu"
+            :subject="form.name"
+            variant="outline"
+          />
         </template>
-      </AdminPageHeader>
+      </PageHeading>
 
-      <div class="grid gap-4 sm:grid-cols-3">
-        <UFormField :label="t('admin.name', 'Name')">
-          <UInput
-            v-model="draft.name"
-            class="w-full"
-          />
-        </UFormField>
-        <UFormField :label="t('admin.slug', 'Slug')">
-          <UInput
-            v-model="draft.slug"
-            class="w-full"
-          />
-        </UFormField>
-        <UFormField :label="t('admin.status', 'Status')">
-          <USelect
-            v-model="draft.status"
-            :items="statuses.map((value) => ({ value, label: t(`status.${value}`, value) }))"
-            class="w-full"
-          />
-        </UFormField>
-      </div>
+      <SectionCard :title="t('admin.details', 'Details')">
+        <div class="grid gap-4 sm:grid-cols-3">
+          <UFormField :label="t('admin.name', 'Name')">
+            <UInput
+              v-model="draft.name"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField :label="t('admin.slug', 'Slug')">
+            <UInput
+              v-model="draft.slug"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField :label="t('admin.status', 'Status')">
+            <USelect
+              v-model="draft.status"
+              :items="statuses.map((value) => ({ value, label: t(`status.${value}`, value) }))"
+              class="w-full"
+            />
+          </UFormField>
+        </div>
+      </SectionCard>
 
-      <UTabs
+      <PageTabs
         v-model="tab"
         :items="tabs"
-        :content="false"
-        class="w-full"
       />
 
+      <!-- The builder has its own chrome (canvas and settings panel), so it is not framed again. -->
       <FormBuilder
         v-if="tab === 'builder'"
         v-model="definition"
@@ -144,32 +133,29 @@ async function save() {
         </template>
       </FormBuilder>
 
-      <FormBuilderSettings
-        v-else-if="tab === 'settings'"
-        v-model="definition"
-      />
+      <SectionCard v-else-if="tab === 'settings'">
+        <FormBuilderSettings v-model="definition" />
+      </SectionCard>
 
-      <FormBuilderAccess
-        v-else-if="tab === 'access'"
-        v-model="definition"
-        :form-id="form.id"
-        :slug="form.slug"
-      />
+      <SectionCard v-else-if="tab === 'access'">
+        <FormBuilderAccess
+          v-model="definition"
+          :form-id="form.id"
+          :slug="form.slug"
+        />
+      </SectionCard>
 
-      <div
+      <SectionCard
         v-else-if="tab === 'json'"
-        class="space-y-3"
+        :title="t('admin.definition', 'Definition (JSON)')"
       >
-        <h2 class="font-semibold">
-          {{ t("admin.definition", "Definition (JSON)") }}
-        </h2>
         <UTextarea
           :model-value="json"
           :rows="30"
           class="w-full font-mono text-xs"
           @update:model-value="onJson(String($event))"
         />
-      </div>
+      </SectionCard>
 
       <UAlert
         v-if="checked.issues.length"
@@ -189,5 +175,21 @@ async function save() {
         </template>
       </UAlert>
     </template>
-  </AdminPage>
+
+    <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.')"
+    >
+      <template #actions>
+        <UButton
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-arrow-left"
+          :to="listPath"
+          :label="t('admin.allForms', 'All forms')"
+        />
+      </template>
+    </UEmpty>
+  </div>
 </template>

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

@@ -2,49 +2,80 @@
 const t = useModuleT("forms");
 const route = useRoute();
 const paths = useFormsPaths();
-const toast = useToast();
+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}`);
-const redelivering = ref(false);
 async function redeliver() {
-  redelivering.value = true;
-  try {
-    await $fetch(`/api/forms/admin/submissions/${submissionId.value}/redeliver`, { method: "POST" });
-    await refresh();
-  } catch (cause) {
-    toast.add({ title: cause.statusMessage ?? t("error.generic", "Something went wrong. Please try again."), color: "error" });
-  } finally {
-    redelivering.value = false;
-  }
+  if (await actions.redeliver(submissionId.value)) await refresh();
 }
+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 notFound = computed(() => error.value?.statusCode === 404);
 </script>
 
 <template>
-  <AdminPage>
-    <UAlert
-      v-if="error || !submission"
-      color="error"
-      variant="subtle"
-      :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
-    />
-
-    <template v-else>
-      <AdminPageHeader
-        :title="new Date(submission.createdAt).toLocaleString()"
+  <div class="flex flex-col gap-4">
+    <template v-if="submission">
+      <PageHeading
+        :title="format.dateTime(submission.createdAt)"
         :description="`${submission.formSlug} \xB7 v${submission.formVersion} \xB7 ${submission.locale}`"
-        :back="{ label: t('admin.submissionsTitle', 'Submissions'), to: paths('adminSubmissions', { id }) }"
-      />
+        :breadcrumb="breadcrumb"
+      >
+        <template #badge>
+          <UBadge
+            :color="statusColor(submission.deliveryStatus)"
+            variant="subtle"
+            :label="t(`delivery.${submission.deliveryStatus}`, submission.deliveryStatus)"
+          />
+        </template>
+        <template #actions>
+          <RowMenu
+            :items="menu"
+            :subject="format.dateTime(submission.createdAt)"
+            variant="outline"
+          />
+        </template>
+      </PageHeading>
 
       <UAlert
-        :color="submission.deliveryStatus === 'failed' ? 'error' : 'neutral'"
+        v-if="submission.deliveryError"
+        color="error"
         variant="subtle"
         :title="t(`delivery.${submission.deliveryStatus}`, submission.deliveryStatus)"
-        :description="submission.deliveryError ?? void 0"
-        :actions="[{ label: t('admin.redeliver', 'Deliver again'), loading: redelivering, onClick: redeliver }]"
+        :description="submission.deliveryError"
       />
 
-      <FormSubmissionView :submission="submission" />
+      <SectionCard :title="t('admin.answers', 'Answers')">
+        <FormSubmissionView :submission="submission" />
+      </SectionCard>
     </template>
-  </AdminPage>
+
+    <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.')"
+    >
+      <template #actions>
+        <UButton
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-arrow-left"
+          :to="paths('adminSubmissions', { id })"
+          :label="t('admin.submissionsTitle', 'Submissions')"
+        />
+      </template>
+    </UEmpty>
+  </div>
 </template>

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

@@ -2,65 +2,99 @@
 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: submissions, error } = await useFetch(() => `/api/forms/admin/forms/${id.value}/submissions`);
-const color = { none: "neutral", pending: "warning", delivered: "success", failed: "error" };
-const columns = [
-  { accessorKey: "createdAt", header: t("admin.submittedAt", "Submitted") },
+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 columns = computed(() => [
+  { accessorKey: "createdAt", header: header("createdAt", t("admin.submittedAt", "Submitted")) },
   { id: "preview", header: t("admin.answers", "Answers") },
-  { accessorKey: "deliveryStatus", header: t("admin.delivery", "Delivery") }
-];
-const format = (iso) => new Date(iso).toLocaleString();
+  { accessorKey: "deliveryStatus", header: header("deliveryStatus", t("admin.delivery", "Delivery")) },
+  { 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 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") }
+]);
 </script>
 
 <template>
-  <AdminPage>
-    <AdminPageHeader
+  <div class="flex flex-col gap-4">
+    <PageHeading
       :title="t('admin.submissionsTitle', 'Submissions')"
-      :back="{ label: t('admin.edit', 'Edit'), to: paths('adminForm', { id }) }"
+      :breadcrumb="breadcrumb"
     />
 
-    <UAlert
+    <UEmpty
       v-if="error"
-      color="error"
-      variant="subtle"
+      icon="i-lucide-lock"
       :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
     />
-    <AdminTable
+
+    <TableCard
       v-else
-      :data="submissions ?? []"
-      :columns="columns"
-      @select="(_, row2) => navigateTo(paths('adminSubmission', { id, submissionId: row2.original.id }))"
+      :loading="status === 'pending' && !submissions"
+      :refreshing="status === 'pending' && !!submissions"
     >
-      <template #createdAt-cell="{ row }">
-        <span class="text-muted">{{ format(row.original.createdAt) }}</span>
-      </template>
-      <template #preview-cell="{ row }">
-        <p class="max-w-md truncate">
-          <span
-            v-for="(answer, index) in row.original.preview"
-            :key="answer.label"
-          >
+      <UTable
+        v-model:sorting="sorting"
+        :data="submissions ?? []"
+        :columns="columns"
+        :ui="tableUi()"
+        @select="(_, row2) => navigateTo(submissionPath(row2.original))"
+      >
+        <template #createdAt-cell="{ row }">
+          <span class="tabular-nums">{{ format.dateTime(row.original.createdAt) }}</span>
+        </template>
+        <template #preview-cell="{ row }">
+          <p class="max-w-md truncate">
             <span
-              v-if="index"
-              class="text-muted"
-            > · </span>{{ answer.value }}
-          </span>
-        </p>
-      </template>
-      <template #deliveryStatus-cell="{ row }">
-        <UBadge
-          :color="color[row.original.deliveryStatus]"
-          variant="subtle"
-          :label="t(`delivery.${row.original.deliveryStatus}`, row.original.deliveryStatus)"
-        />
-      </template>
-      <template #empty>
-        <AdminEmpty
-          icon="i-lucide-inbox"
-          :title="t('admin.noSubmissions', 'No submissions yet.')"
-        />
-      </template>
-    </AdminTable>
-  </AdminPage>
+              v-for="(answer, index) in row.original.preview"
+              :key="answer.label"
+            >
+              <span
+                v-if="index"
+                class="text-muted"
+              > · </span>{{ answer.value }}
+            </span>
+          </p>
+        </template>
+        <template #deliveryStatus-cell="{ row }">
+          <UBadge
+            :color="statusColor(row.original.deliveryStatus)"
+            variant="subtle"
+            :label="t(`delivery.${row.original.deliveryStatus}`, row.original.deliveryStatus)"
+          />
+        </template>
+        <template #actions-cell="{ row }">
+          <RowMenu
+            :items="menu(row.original)"
+            :subject="format.dateTime(row.original.createdAt)"
+          />
+        </template>
+        <template #empty>
+          <UEmpty
+            variant="naked"
+            icon="i-lucide-inbox"
+            :title="t('admin.noSubmissions', 'No submissions yet.')"
+            :description="t('admin.noSubmissionsHint', 'Answers appear here once someone submits the form.')"
+          />
+        </template>
+      </UTable>
+    </TableCard>
+  </div>
 </template>