@frigear-nu/forms 0.0.9 → 0.1.1

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

@@ -1,278 +1,197 @@
 <script setup>
-import { defineForm } from "../../utils";
 const t = useModuleT("forms");
 const paths = useFormsPaths();
-const toast = useToast();
-const link = useFormLink();
-const { data: forms, error, refresh } = await useFetch("/api/forms/admin/forms");
-const starter = defineForm({
-  mode: "single",
-  storage: "db",
-  steps: [{
-    id: "main",
-    fields: [
-      { key: "name", type: "text", label: "Name", required: true },
-      { key: "message", type: "textarea", label: "Message", required: true }
-    ]
-  }]
-});
-const creating = ref(false);
-const draft = reactive({ name: "", slug: "" });
-const importing = ref(false);
-const importJson = ref("");
-const slugify = (value) => value.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-watch(() => draft.name, (name, previous) => {
-  if (draft.slug === slugify(previous)) draft.slug = slugify(name);
-});
-async function create() {
-  try {
-    const created = await $fetch("/api/forms/admin/forms", { method: "POST", body: { ...draft, definition: starter } });
-    await navigateTo(paths("adminForm", { id: created.id }));
-  } catch (cause) {
-    toast.add({ title: cause.statusMessage ?? t("error.generic", "Something went wrong. Please try again."), color: "error" });
-  }
-}
-async function clone(form) {
-  try {
-    const copy = await $fetch(`/api/forms/admin/forms/${form.id}/clone`, { method: "POST" });
-    await navigateTo(paths("adminForm", { id: copy.id }));
-  } catch (cause) {
-    toast.add({ title: cause.statusMessage ?? t("error.generic", "Something went wrong. Please try again."), color: "error" });
-  }
-}
-async function runImport() {
-  try {
-    const parsed = JSON.parse(importJson.value);
-    const result = await $fetch("/api/forms/admin/import", {
-      method: "POST",
-      body: { forms: Array.isArray(parsed) ? parsed : [parsed] }
-    });
-    toast.add({ title: t("admin.imported", "Imported {inserted}, skipped {skipped} existing.", { inserted: result.inserted.length, skipped: result.skipped.length }), color: "success" });
-    importing.value = false;
-    importJson.value = "";
-    await refresh();
-  } catch (cause) {
-    toast.add({ title: cause.statusMessage ?? t("admin.invalidJson", "The JSON is not valid."), color: "error" });
-  }
-}
-const columns = [
-  { accessorKey: "name", header: t("admin.name", "Name") },
-  { accessorKey: "status", header: t("admin.status", "Status") },
-  { id: "actions", header: "" }
-];
-const statusColor = { draft: "neutral", published: "success", archived: "warning" };
-const statuses = ["published", "draft", "archived"];
-const tab = ref("published");
+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 tabs = computed(() => statuses.map((status) => ({
-  value: status,
-  label: t(`status.${status}`, status),
-  badge: (forms.value ?? []).filter((form) => form.status === status).length
-})));
+const statusFilter = ref("all");
+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) => form.status === tab.value && (!query || form.name.toLowerCase().includes(query) || form.slug.toLowerCase().includes(query))
+    (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 columns = computed(() => [
+  { accessorKey: "name", header: header("name", t("admin.name", "Name")) },
+  { accessorKey: "status", header: header("status", t("admin.status", "Status")) },
+  { accessorKey: "submissionCount", header: header("submissionCount", t("admin.submissionsTitle", "Submissions")), meta: numericColumn },
+  { accessorKey: "updatedAt", header: header("updatedAt", t("admin.updated", "Updated")) },
+  { id: "actions", header: "", meta: { class: { th: "w-0", td: "w-0" } } }
+]);
+const formDescription = (form) => [
+  `/${form.slug}`,
+  form.mode === "stepped" ? t("admin.stepped", "Stepped") : t("admin.single", "Single page"),
+  `v${form.version}`,
+  ...form.storage === "none" ? [t("admin.notStored", "Not stored")] : []
+].join(" \xB7 ");
+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;
+  }
+}
 </script>
 
 <template>
-  <AdminPage>
-    <AdminPageHeader :title="t('admin.title', 'Forms')">
+  <div class="flex flex-col gap-4">
+    <PageHeading :title="t('admin.title', 'Forms')">
       <template #actions>
         <UButton
           color="neutral"
           variant="outline"
           icon="i-lucide-upload"
-          :label="t('admin.import', 'Import')"
+          :label="t('admin.import', 'Import JSON')"
           @click="importing = true"
         />
         <UButton
           icon="i-lucide-plus"
           :label="t('admin.new', 'New form')"
-          @click="creating = true"
+          @click="actions.create()"
         />
       </template>
-    </AdminPageHeader>
+    </PageHeading>
 
-    <UAlert
+    <UEmpty
       v-if="error"
-      color="error"
-      variant="subtle"
+      icon="i-lucide-lock"
       :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
     />
 
-    <div
-      v-else
-      class="flex flex-wrap items-center justify-between gap-3"
-    >
-      <UTabs
-        v-model="tab"
-        :items="tabs"
-        :content="false"
-        class="w-auto"
-      />
-      <UInput
-        v-model="search"
-        class="w-full sm:w-72"
-        icon="i-lucide-search"
-        :placeholder="t('admin.search', 'Search forms')"
-        :aria-label="t('admin.search', 'Search forms')"
-      />
-    </div>
-
-    <AdminTable
-      v-if="!error"
-      :data="visibleForms"
-      :columns="columns"
-      @select="(_, row2) => navigateTo(paths('adminForm', { id: row2.original.id }))"
-    >
-      <template #name-cell="{ row }">
-        <div class="space-y-0.5">
-          <p class="font-medium">
-            {{ row.original.name }}
-          </p>
-          <p class="text-sm text-muted">
-            /{{ row.original.slug }} · {{ row.original.mode === "stepped" ? t("admin.stepped", "Stepped") : t("admin.single", "Single page") }}
-            · v{{ row.original.version }}
-            <template v-if="row.original.storage === 'none'">
-              · {{ t("admin.notStored", "Not stored") }}
-            </template>
-          </p>
-        </div>
-      </template>
-      <template #status-cell="{ row }">
-        <UBadge
-          :color="statusColor[row.original.status]"
-          variant="subtle"
-          :label="t(`status.${row.original.status}`, row.original.status)"
+    <template v-else>
+      <PageToolbar>
+        <UInput
+          v-model="search"
+          class="w-full sm:w-72"
+          icon="i-lucide-search"
+          :placeholder="t('admin.search', 'Search forms')"
+          :aria-label="t('admin.search', 'Search forms')"
         />
-      </template>
-      <template #actions-cell="{ row }">
-        <div class="flex items-center justify-end gap-2">
-          <UButton
-            v-if="row.original.storage === 'db' || row.original.submissionCount > 0"
-            color="neutral"
-            variant="outline"
-            size="sm"
-            :to="paths('adminSubmissions', { id: row.original.id })"
-            :label="t('admin.submissions', 'Submissions ({count})', { count: row.original.submissionCount })"
-            @click.stop
-          />
-          <UButton
-            v-if="row.original.status === 'published' && link.enabled.value"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            icon="i-lucide-link"
-            :aria-label="t('admin.copyLink', 'Copy link')"
-            @click.stop="link.copy(row.original.slug)"
-          />
-          <UButton
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            icon="i-lucide-copy"
-            :aria-label="t('admin.clone', 'Duplicate')"
-            @click="clone(form)"
-          />
-          <UButton
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            icon="i-lucide-pencil"
-            :to="paths('adminForm', { id: row.original.id })"
-            :aria-label="t('admin.edit', 'Edit')"
-            @click.stop
-          />
-        </div>
-      </template>
-      <template #empty>
-        <AdminEmpty
-          icon="i-lucide-clipboard-list"
-          :title="forms?.length ? t('admin.noMatches', 'No forms match.') : t('admin.empty', 'No forms yet.')"
+        <USelect
+          v-model="statusFilter"
+          class="w-full sm:w-44"
+          :items="statusItems"
+          :aria-label="t('admin.statusFilter', 'Filter by status')"
         />
-      </template>
-    </AdminTable>
+      </PageToolbar>
 
-    <UModal
-      v-model:open="creating"
-      :title="t('admin.new', 'New form')"
-    >
-      <template #body>
-        <form
-          id="admin-form-create"
-          class="space-y-4"
-          @submit.prevent="create"
+      <TableCard
+        :loading="status === 'pending' && !forms"
+        :refreshing="status === 'pending' && !!forms"
+      >
+        <UTable
+          v-model:sorting="sorting"
+          :data="visibleForms"
+          :columns="columns"
+          :ui="tableUi()"
+          @select="(_, row2) => navigateTo(editPath(row2.original))"
         >
-          <UFormField :label="t('admin.name', 'Name')">
-            <UInput
-              v-model="draft.name"
-              class="w-full"
-              autofocus
+          <template #name-cell="{ row }">
+            <TableIdentity
+              :title="row.original.name"
+              :description="formDescription(row.original)"
             />
-          </UFormField>
-          <UFormField
-            :label="t('admin.slug', 'Slug')"
-            :description="t('admin.slugHint', 'Used in the public address.')"
-          >
-            <UInput
-              v-model="draft.slug"
-              class="w-full"
+          </template>
+          <template #status-cell="{ row }">
+            <UBadge
+              :color="statusColor(row.original.status, { archived: 'warning' })"
+              variant="subtle"
+              :label="t(`status.${row.original.status}`, row.original.status)"
             />
-          </UFormField>
-        </form>
-      </template>
-      <template #footer>
-        <div class="flex w-full justify-end gap-2">
-          <UButton
-            variant="subtle"
-            color="neutral"
-            :label="t('admin.cancel', 'Cancel')"
-            @click="creating = false"
-          />
-          <UButton
-            type="submit"
-            form="admin-form-create"
-            :label="t('admin.create', 'Create')"
-            :disabled="!draft.name || !draft.slug"
-          />
-        </div>
-      </template>
-    </UModal>
+          </template>
+          <template #updatedAt-cell="{ row }">
+            <span class="tabular-nums">{{ format.date(row.original.updatedAt) }}</span>
+          </template>
+          <template #actions-cell="{ row }">
+            <RowMenu
+              :items="menu(row.original)"
+              :subject="row.original.name"
+            />
+          </template>
+          <template #empty>
+            <UEmpty
+              variant="naked"
+              icon="i-lucide-clipboard-list"
+              :title="filtered ? t('admin.noMatches', 'No forms match.') : t('admin.empty', 'No forms yet')"
+              :description="filtered ? void 0 : t('admin.emptyDescription', 'Create a form to start collecting answers.')"
+            >
+              <template #actions>
+                <UButton
+                  v-if="filtered"
+                  color="neutral"
+                  variant="outline"
+                  :label="t('admin.clearFilters', 'Clear filters')"
+                  @click="clearFilters"
+                />
+                <UButton
+                  v-else
+                  icon="i-lucide-plus"
+                  :label="t('admin.new', 'New form')"
+                  @click="actions.create()"
+                />
+              </template>
+            </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>
+      </TableCard>
+    </template>
 
     <UModal
       v-model:open="importing"
-      :title="t('admin.import', 'Import')"
+      :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>
-        <div class="space-y-4">
-          <p class="text-sm text-muted">
-            {{ t("admin.importHint", "Paste one form or a list of forms (each with slug, name and definition). Forms whose slug already exists are skipped.") }}
-          </p>
-          <UTextarea
-            v-model="importJson"
-            :rows="12"
-            class="w-full font-mono text-xs"
-          />
-        </div>
+        <UTextarea
+          v-model="importText"
+          :rows="12"
+          class="w-full font-mono text-xs"
+        />
       </template>
       <template #footer>
-        <div class="flex w-full justify-end gap-2">
-          <UButton
-            variant="subtle"
-            color="neutral"
-            :label="t('admin.cancel', 'Cancel')"
-            @click="importing = false"
-          />
-          <UButton
-            :label="t('admin.import', 'Import')"
-            :disabled="!importJson.trim()"
-            @click="runImport"
-          />
-        </div>
+        <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>
-  </AdminPage>
+  </div>
 </template>

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

@@ -1,6 +1,7 @@
 <script setup>
 const route = useRoute();
 const t = useModuleT("forms");
+const format = useFormat();
 const slug = computed(() => String(route.params.slug));
 const { data: access } = await useFormAccess(slug);
 if (access.value && (access.value.access.availability === "api" || access.value.access.auth === "token")) {
@@ -32,53 +33,54 @@ useHead({ title: computed(() => access.value?.name ?? "") });
 </script>
 
 <template>
-  <UContainer class="max-w-2xl py-10">
-    <h1
-      v-if="access"
-      class="mb-6 text-3xl font-bold"
-    >
-      {{ access.name }}
-    </h1>
+  <UContainer>
+    <UPage>
+      <UPageHeader
+        v-if="access"
+        :title="access.name"
+      />
+      <UPageBody class="max-w-2xl">
+        <UAlert
+          v-if="access && !access.open"
+          icon="i-lucide-calendar-x"
+          color="neutral"
+          variant="subtle"
+          :title="t('schedule.closed', 'This form is closed.')"
+          :description="access.opensAt ? t('schedule.opensAt', 'It opens again {date}.', { date: format.dateTime(access.opensAt) }) : void 0"
+        />
 
-    <UAlert
-      v-if="access && !access.open"
-      icon="i-lucide-calendar-x"
-      color="neutral"
-      variant="subtle"
-      :title="t('schedule.closed', 'This form is closed.')"
-      :description="access.opensAt ? t('schedule.opensAt', 'It opens again {date}.', { date: new Date(access.opensAt).toLocaleString() }) : void 0"
-    />
+        <SectionCard v-else-if="gated && !unlocked">
+          <form
+            class="space-y-4"
+            @submit.prevent="unlock"
+          >
+            <UFormField
+              :label="t('access.passwordLabel', 'Password')"
+              :description="t('access.passwordHint', 'This form is protected. Enter the password you were given.')"
+              :error="wrong ? t('access.passwordWrong', 'Wrong password.') : void 0"
+            >
+              <UInput
+                v-model="password"
+                type="password"
+                autocomplete="off"
+                class="w-full"
+              />
+            </UFormField>
+            <UButton
+              type="submit"
+              :loading="checking"
+              :disabled="!password"
+              :label="t('access.unlock', 'Continue')"
+            />
+          </form>
+        </SectionCard>
 
-    <UCard v-else-if="gated && !unlocked">
-      <form
-        class="space-y-4"
-        @submit.prevent="unlock"
-      >
-        <UFormField
-          :label="t('access.passwordLabel', 'Password')"
-          :description="t('access.passwordHint', 'This form is protected. Enter the password you were given.')"
-          :error="wrong ? t('access.passwordWrong', 'Wrong password.') : void 0"
-        >
-          <UInput
-            v-model="password"
-            type="password"
-            autocomplete="off"
-            class="w-full"
-          />
-        </UFormField>
-        <UButton
-          type="submit"
-          :loading="checking"
-          :disabled="!password"
-          :label="t('access.unlock', 'Continue')"
+        <FormRenderer
+          v-else-if="!needsSignIn"
+          :slug="slug"
+          :password="unlocked || void 0"
         />
-      </form>
-    </UCard>
-
-    <FormRenderer
-      v-else-if="!needsSignIn"
-      :slug="slug"
-      :password="unlocked || void 0"
-    />
+      </UPageBody>
+    </UPage>
   </UContainer>
 </template>

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

@@ -48,12 +48,6 @@
       "published": "Udgivet",
       "archived": "Arkiveret"
     },
-    "delivery": {
-      "none": "Ikke leveret",
-      "pending": "Afventer",
-      "delivered": "Leveret",
-      "failed": "Levering fejlede"
-    },
     "validation": {
       "required": "Feltet er påkrævet.",
       "email": "Indtast en gyldig e-mailadresse.",
@@ -74,19 +68,19 @@
     "admin": {
       "title": "Formularer",
       "new": "Ny formular",
-      "import": "Importér",
+      "import": "Importér JSON",
       "edit": "Rediger",
       "create": "Opret",
       "copyLink": "Kopiér link",
       "linkCopied": "Link kopieret.",
       "settings": "Levering og lagring",
-      "save": "Gem",
+      "save": "Gem formular",
       "saved": "Gemt.",
       "name": "Navn",
       "slug": "Slug",
       "slugHint": "Bruges i den offentlige adresse.",
       "status": "Status",
-      "empty": "Ingen formularer endnu.",
+      "empty": "Ingen formularer endnu",
       "stepped": "Flere trin",
       "single": "Én side",
       "notStored": "Gemmes ikke",
@@ -109,7 +103,30 @@
       "builder": "Opbygning",
       "json": "JSON",
       "access": "Adgang",
-      "clone": "Duplikér"
+      "clone": "Duplikér formular",
+      "createForm": "Opret formular",
+      "importSubmit": "Importér formularer",
+      "search": "Søg i formularer",
+      "statusFilter": "Filtrér efter status",
+      "allStatuses": "Alle statusser",
+      "clearFilters": "Ryd filtre",
+      "noMatches": "Ingen formularer matcher.",
+      "emptyDescription": "Opret en formular for at begynde at indsamle svar.",
+      "showing": "{shown} af {total} formularer",
+      "open": "Åbn",
+      "updated": "Opdateret",
+      "cloned": "Formular duplikeret",
+      "created": "Formular oprettet",
+      "archive": "Arkivér formular",
+      "archiveTitle": "Arkivér {name}?",
+      "archiveBody": "Den modtager ikke længere besvarelser og forsvinder fra det offentlige site. Besvarelserne beholdes.",
+      "archived": "Formular arkiveret",
+      "allForms": "Alle formularer",
+      "notFound": "Formularen findes ikke.",
+      "details": "Detaljer",
+      "submissionNotFound": "Besvarelsen findes ikke.",
+      "noSubmissionsHint": "Svar vises her, når nogen udfylder formularen.",
+      "redelivered": "Leveret igen"
     },
     "schedule": {
       "closed": "Formularen er lukket.",
@@ -175,6 +192,10 @@
       }
     },
     "delivery": {
+      "none": "Ikke leveret",
+      "pending": "Afventer",
+      "delivered": "Leveret",
+      "failed": "Levering fejlede",
       "title": "Levering og lagring",
       "storeTitle": "Gem besvarelser",
       "storeHint": "Gem besvarelser i databasen, så de kan ses under Besvarelser.",