feat: implement immutable form definitions
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "@govoplan/forms-webui",
|
||||
"version": "0.1.14",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"module": "src/index.ts",
|
||||
"types": "src/index.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./src/index.ts",
|
||||
"import": "./src/index.ts"
|
||||
},
|
||||
"./styles/forms.css": "./src/styles/forms.css"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@govoplan/core-webui": "^0.1.14",
|
||||
"lucide-react": "^1.23.0",
|
||||
"react": ">=19.2.7 <20",
|
||||
"react-dom": ">=19.2.7 <20"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@govoplan/core-webui": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { apiFetch, apiPath, type ApiSettings } from "@govoplan/core-webui";
|
||||
|
||||
|
||||
export type FormValueType = "text" | "multiline_text" | "integer" | "number" | "boolean" | "date" | "datetime" | "email" | "choice" | "multi_choice" | "object" | "list";
|
||||
|
||||
export type FormFieldDefinition = {
|
||||
key: string;
|
||||
label: string;
|
||||
value_type: FormValueType;
|
||||
required: boolean;
|
||||
help_text?: string | null;
|
||||
options: string[];
|
||||
constraints: Record<string, unknown>;
|
||||
default_value?: unknown;
|
||||
};
|
||||
|
||||
export type FormDefinition = {
|
||||
reference: {
|
||||
kind: "form";
|
||||
owner_module: "forms";
|
||||
object_id: string;
|
||||
tenant_id: string;
|
||||
version: string;
|
||||
};
|
||||
key: string;
|
||||
temporal: {
|
||||
revision: string;
|
||||
valid_from?: string | null;
|
||||
valid_to?: string | null;
|
||||
recorded_at: string;
|
||||
superseded_at?: string | null;
|
||||
change_reason: string;
|
||||
};
|
||||
title: string;
|
||||
description?: string | null;
|
||||
fields: FormFieldDefinition[];
|
||||
publication_state: "draft" | "published" | "retired";
|
||||
allow_drafts: boolean;
|
||||
max_attachments: number;
|
||||
signature_requirement: "none" | "optional" | "required";
|
||||
policy_refs: string[];
|
||||
handoff_kinds: string[];
|
||||
metadata: Record<string, unknown>;
|
||||
};
|
||||
|
||||
export function listFormDefinitions(
|
||||
settings: ApiSettings,
|
||||
options: { query?: string; states?: string[]; offset?: number; limit?: number } = {},
|
||||
signal?: AbortSignal
|
||||
): Promise<{ definitions: FormDefinition[]; total: number }> {
|
||||
return apiFetch(settings, apiPath("/api/v1/forms/definitions", {
|
||||
q: options.query,
|
||||
publication_state: options.states,
|
||||
offset: options.offset ?? 0,
|
||||
limit: options.limit ?? 200
|
||||
}), { signal });
|
||||
}
|
||||
|
||||
export function saveFormDefinition(
|
||||
settings: ApiSettings,
|
||||
definition: FormDefinition,
|
||||
expectedRevision?: string | null
|
||||
): Promise<FormDefinition> {
|
||||
return apiFetch(settings, `/api/v1/forms/definitions/${encodeURIComponent(definition.reference.object_id)}`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({
|
||||
definition,
|
||||
expected_revision: expectedRevision ?? null
|
||||
})
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,330 @@
|
||||
import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DismissibleAlert,
|
||||
FormField as Field,
|
||||
IconButton,
|
||||
ToggleSwitch,
|
||||
type ApiSettings
|
||||
} from "@govoplan/core-webui";
|
||||
import {
|
||||
saveFormDefinition,
|
||||
type FormDefinition,
|
||||
type FormFieldDefinition,
|
||||
type FormValueType
|
||||
} from "../../api/forms";
|
||||
|
||||
|
||||
const VALUE_TYPES: Array<{ value: FormValueType; label: string }> = [
|
||||
{ value: "text", label: "Text" },
|
||||
{ value: "multiline_text", label: "Long text" },
|
||||
{ value: "email", label: "Email" },
|
||||
{ value: "integer", label: "Integer" },
|
||||
{ value: "number", label: "Number" },
|
||||
{ value: "boolean", label: "Yes / no" },
|
||||
{ value: "date", label: "Date" },
|
||||
{ value: "datetime", label: "Date and time" },
|
||||
{ value: "choice", label: "Single choice" },
|
||||
{ value: "multi_choice", label: "Multiple choice" },
|
||||
{ value: "object", label: "Structured object" },
|
||||
{ value: "list", label: "Structured list" }
|
||||
];
|
||||
|
||||
export default function FormDefinitionDialog({
|
||||
open,
|
||||
settings,
|
||||
tenantId,
|
||||
definition,
|
||||
canPublish,
|
||||
onClose,
|
||||
onSaved
|
||||
}: {
|
||||
open: boolean;
|
||||
settings: ApiSettings;
|
||||
tenantId: string;
|
||||
definition: FormDefinition | null;
|
||||
canPublish: boolean;
|
||||
onClose: () => void;
|
||||
onSaved: (definition: FormDefinition) => void;
|
||||
}) {
|
||||
const [draft, setDraft] = useState<FormDefinition>(() => initialDraft(tenantId, definition));
|
||||
const [changeReason, setChangeReason] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setDraft(initialDraft(tenantId, definition));
|
||||
setChangeReason("");
|
||||
setBusy(false);
|
||||
setError("");
|
||||
}, [definition, open, tenantId]);
|
||||
|
||||
const valid = useMemo(() => Boolean(
|
||||
draft.title.trim()
|
||||
&& draft.key.trim()
|
||||
&& draft.fields.length > 0
|
||||
&& draft.fields.every((field) => field.key.trim() && field.label.trim())
|
||||
&& changeReason.trim()
|
||||
), [changeReason, draft]);
|
||||
|
||||
async function save() {
|
||||
if (!valid) return;
|
||||
setBusy(true);
|
||||
setError("");
|
||||
const revision = crypto.randomUUID();
|
||||
const recordedAt = new Date().toISOString();
|
||||
const payload: FormDefinition = {
|
||||
...draft,
|
||||
reference: {
|
||||
...draft.reference,
|
||||
version: revision
|
||||
},
|
||||
temporal: {
|
||||
...draft.temporal,
|
||||
revision,
|
||||
recorded_at: recordedAt,
|
||||
superseded_at: null,
|
||||
change_reason: changeReason.trim()
|
||||
},
|
||||
title: draft.title.trim(),
|
||||
key: draft.key.trim(),
|
||||
description: draft.description?.trim() || null,
|
||||
fields: draft.fields.map(normalizeField),
|
||||
policy_refs: draft.policy_refs.map((item) => item.trim()).filter(Boolean),
|
||||
metadata: { ...draft.metadata }
|
||||
};
|
||||
try {
|
||||
const saved = await saveFormDefinition(
|
||||
settings,
|
||||
payload,
|
||||
definition?.reference.version
|
||||
);
|
||||
onSaved(saved);
|
||||
} catch (reason) {
|
||||
setError(reason instanceof Error ? reason.message : "The Form definition could not be saved.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
function patchField(index: number, patch: Partial<FormFieldDefinition>) {
|
||||
setDraft((current) => ({
|
||||
...current,
|
||||
fields: current.fields.map((field, fieldIndex) => fieldIndex === index ? { ...field, ...patch } : field)
|
||||
}));
|
||||
}
|
||||
|
||||
function moveField(index: number, delta: -1 | 1) {
|
||||
setDraft((current) => {
|
||||
const target = index + delta;
|
||||
if (target < 0 || target >= current.fields.length) return current;
|
||||
const fields = [...current.fields];
|
||||
[fields[index], fields[target]] = [fields[target], fields[index]];
|
||||
return { ...current, fields };
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
title={definition ? `Revise ${definition.title}` : "New Form definition"}
|
||||
onClose={onClose}
|
||||
closeDisabled={busy}
|
||||
portal
|
||||
className="form-definition-dialog"
|
||||
footer={
|
||||
<>
|
||||
<Button onClick={onClose} disabled={busy}>Cancel</Button>
|
||||
<Button variant="primary" onClick={() => void save()} disabled={busy || !valid}>
|
||||
{busy ? "Saving" : "Save revision"}
|
||||
</Button>
|
||||
</>
|
||||
}>
|
||||
<div className="form-definition-editor">
|
||||
{error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
|
||||
<div className="form-definition-grid">
|
||||
<Field label="Title">
|
||||
<input value={draft.title} disabled={busy} onChange={(event) => setDraft({ ...draft, title: event.target.value })} />
|
||||
</Field>
|
||||
<Field label="Key">
|
||||
<input value={draft.key} disabled={busy || Boolean(definition)} onChange={(event) => setDraft({ ...draft, key: event.target.value })} />
|
||||
</Field>
|
||||
<Field label="Description" className="form-definition-wide">
|
||||
<textarea rows={3} value={draft.description ?? ""} disabled={busy} onChange={(event) => setDraft({ ...draft, description: event.target.value })} />
|
||||
</Field>
|
||||
<Field label="Publication state">
|
||||
<select value={draft.publication_state} disabled={busy} onChange={(event) => setDraft({ ...draft, publication_state: event.target.value as FormDefinition["publication_state"] })}>
|
||||
{definition?.publication_state !== "published" && <option value="draft">Draft</option>}
|
||||
{canPublish && <option value="published">Published</option>}
|
||||
{canPublish && <option value="retired">Retired</option>}
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="Signature">
|
||||
<select value={draft.signature_requirement} disabled={busy} onChange={(event) => setDraft({ ...draft, signature_requirement: event.target.value as FormDefinition["signature_requirement"] })}>
|
||||
<option value="none">Not used</option>
|
||||
<option value="optional">Optional</option>
|
||||
<option value="required">Required</option>
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="Maximum attachments">
|
||||
<input type="number" min={0} max={1000} value={draft.max_attachments} disabled={busy} onChange={(event) => setDraft({ ...draft, max_attachments: Number(event.target.value) })} />
|
||||
</Field>
|
||||
<div className="form-definition-toggle">
|
||||
<ToggleSwitch label="Draft saving" checked={draft.allow_drafts} disabled={busy} onChange={(allow_drafts) => setDraft({ ...draft, allow_drafts })} />
|
||||
</div>
|
||||
<Field label="Policy references" className="form-definition-wide">
|
||||
<input value={draft.policy_refs.join(", ")} disabled={busy} placeholder="policy:permit-intake" onChange={(event) => setDraft({ ...draft, policy_refs: splitValues(event.target.value) })} />
|
||||
</Field>
|
||||
<div className="form-definition-handoffs form-definition-wide">
|
||||
<span>Permitted handoffs</span>
|
||||
{(["case", "workflow", "record"] as const).map((kind) =>
|
||||
<ToggleSwitch
|
||||
key={kind}
|
||||
label={humanize(kind)}
|
||||
checked={draft.handoff_kinds.includes(kind)}
|
||||
disabled={busy}
|
||||
onChange={(checked) => setDraft({
|
||||
...draft,
|
||||
handoff_kinds: checked
|
||||
? [...draft.handoff_kinds, kind]
|
||||
: draft.handoff_kinds.filter((item) => item !== kind)
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-field-editor-heading">
|
||||
<h3>Fields</h3>
|
||||
<Button onClick={() => setDraft({ ...draft, fields: [...draft.fields, emptyField(draft.fields.length + 1)] })} disabled={busy}>
|
||||
<Plus size={16} aria-hidden="true" />Add field
|
||||
</Button>
|
||||
</div>
|
||||
<div className="form-field-editor-list">
|
||||
{draft.fields.map((field, index) =>
|
||||
<div className="form-field-editor-row" key={`${index}:${field.key}`}>
|
||||
<div className="form-field-order">
|
||||
<IconButton label={`Move ${field.label || "field"} up`} icon={<ArrowUp size={15} />} disabled={busy || index === 0} onClick={() => moveField(index, -1)} />
|
||||
<IconButton label={`Move ${field.label || "field"} down`} icon={<ArrowDown size={15} />} disabled={busy || index === draft.fields.length - 1} onClick={() => moveField(index, 1)} />
|
||||
</div>
|
||||
<Field label="Key"><input value={field.key} disabled={busy} onChange={(event) => patchField(index, { key: event.target.value })} /></Field>
|
||||
<Field label="Label"><input value={field.label} disabled={busy} onChange={(event) => patchField(index, { label: event.target.value })} /></Field>
|
||||
<Field label="Type">
|
||||
<select value={field.value_type} disabled={busy} onChange={(event) => patchField(index, { value_type: event.target.value as FormValueType, options: isChoice(event.target.value) ? field.options : [] })}>
|
||||
{VALUE_TYPES.map((type) => <option key={type.value} value={type.value}>{type.label}</option>)}
|
||||
</select>
|
||||
</Field>
|
||||
<div className="form-field-required"><ToggleSwitch label="Required" checked={field.required} disabled={busy} onChange={(required) => patchField(index, { required })} /></div>
|
||||
<Field label="Help text" className="form-field-help"><input value={field.help_text ?? ""} disabled={busy} onChange={(event) => patchField(index, { help_text: event.target.value })} /></Field>
|
||||
{isChoice(field.value_type) &&
|
||||
<Field label="Options" className="form-field-options"><input value={field.options.join(", ")} disabled={busy} onChange={(event) => patchField(index, { options: splitValues(event.target.value) })} /></Field>
|
||||
}
|
||||
<ConstraintFields field={field} disabled={busy} onChange={(constraints) => patchField(index, { constraints })} />
|
||||
<IconButton
|
||||
label={`Remove ${field.label || "field"}`}
|
||||
icon={<Trash2 size={16} />}
|
||||
variant="danger"
|
||||
disabled={busy || draft.fields.length === 1}
|
||||
onClick={() => setDraft({ ...draft, fields: draft.fields.filter((_, fieldIndex) => fieldIndex !== index) })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Field label="Change reason">
|
||||
<input value={changeReason} disabled={busy} maxLength={1000} onChange={(event) => setChangeReason(event.target.value)} placeholder="Why is this revision needed?" />
|
||||
</Field>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function ConstraintFields({ field, disabled, onChange }: { field: FormFieldDefinition; disabled: boolean; onChange: (value: Record<string, unknown>) => void }) {
|
||||
if (["text", "multiline_text", "email"].includes(field.value_type)) {
|
||||
return (
|
||||
<div className="form-field-constraints">
|
||||
<Field label="Minimum length"><input type="number" min={0} value={constraintValue(field.constraints.min_length)} disabled={disabled} onChange={(event) => onChange(patchConstraint(field.constraints, "min_length", event.target.value))} /></Field>
|
||||
<Field label="Maximum length"><input type="number" min={0} value={constraintValue(field.constraints.max_length)} disabled={disabled} onChange={(event) => onChange(patchConstraint(field.constraints, "max_length", event.target.value))} /></Field>
|
||||
<Field label="Pattern"><input value={String(field.constraints.pattern ?? "")} disabled={disabled} onChange={(event) => onChange(patchTextConstraint(field.constraints, "pattern", event.target.value))} /></Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (["integer", "number"].includes(field.value_type)) {
|
||||
return (
|
||||
<div className="form-field-constraints">
|
||||
<Field label="Minimum"><input type="number" value={constraintValue(field.constraints.minimum)} disabled={disabled} onChange={(event) => onChange(patchConstraint(field.constraints, "minimum", event.target.value))} /></Field>
|
||||
<Field label="Maximum"><input type="number" value={constraintValue(field.constraints.maximum)} disabled={disabled} onChange={(event) => onChange(patchConstraint(field.constraints, "maximum", event.target.value))} /></Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function initialDraft(tenantId: string, definition: FormDefinition | null): FormDefinition {
|
||||
if (definition) return structuredClone(definition);
|
||||
const id = crypto.randomUUID();
|
||||
const revision = crypto.randomUUID();
|
||||
const now = new Date().toISOString();
|
||||
return {
|
||||
reference: { kind: "form", owner_module: "forms", object_id: id, tenant_id: tenantId, version: revision },
|
||||
key: "",
|
||||
temporal: { revision, recorded_at: now, change_reason: "" },
|
||||
title: "",
|
||||
description: "",
|
||||
fields: [emptyField(1)],
|
||||
publication_state: "draft",
|
||||
allow_drafts: true,
|
||||
max_attachments: 0,
|
||||
signature_requirement: "none",
|
||||
policy_refs: [],
|
||||
handoff_kinds: [],
|
||||
metadata: {}
|
||||
};
|
||||
}
|
||||
|
||||
function emptyField(index: number): FormFieldDefinition {
|
||||
return { key: `field-${index}`, label: "", value_type: "text", required: false, help_text: "", options: [], constraints: {} };
|
||||
}
|
||||
|
||||
function normalizeField(field: FormFieldDefinition): FormFieldDefinition {
|
||||
return {
|
||||
...field,
|
||||
key: field.key.trim(),
|
||||
label: field.label.trim(),
|
||||
help_text: field.help_text?.trim() || null,
|
||||
options: isChoice(field.value_type) ? field.options.map((item) => item.trim()).filter(Boolean) : [],
|
||||
constraints: Object.fromEntries(Object.entries(field.constraints).filter(([, value]) => value !== "" && value !== null && value !== undefined))
|
||||
};
|
||||
}
|
||||
|
||||
function splitValues(value: string): string[] {
|
||||
return value.split(",").map((item) => item.trim()).filter(Boolean);
|
||||
}
|
||||
|
||||
function isChoice(value: string): boolean {
|
||||
return value === "choice" || value === "multi_choice";
|
||||
}
|
||||
|
||||
function patchConstraint(current: Record<string, unknown>, key: string, value: string): Record<string, unknown> {
|
||||
const next = { ...current };
|
||||
if (!value.trim()) delete next[key];
|
||||
else next[key] = Number(value);
|
||||
return next;
|
||||
}
|
||||
|
||||
function patchTextConstraint(current: Record<string, unknown>, key: string, value: string): Record<string, unknown> {
|
||||
const next = { ...current };
|
||||
if (!value) delete next[key];
|
||||
else next[key] = value;
|
||||
return next;
|
||||
}
|
||||
|
||||
function constraintValue(value: unknown): number | "" {
|
||||
return typeof value === "number" ? value : "";
|
||||
}
|
||||
|
||||
function humanize(value: string): string {
|
||||
return value.replace(/[_:.-]+/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import { Pencil, Plus, RefreshCw, Search } from "lucide-react";
|
||||
import { useCallback, useEffect, useState, type FormEvent } from "react";
|
||||
import {
|
||||
Button,
|
||||
DismissibleAlert,
|
||||
IconButton,
|
||||
LoadingIndicator,
|
||||
PageScrollViewport,
|
||||
StatusBadge,
|
||||
hasScope,
|
||||
type PlatformRouteContext
|
||||
} from "@govoplan/core-webui";
|
||||
import { listFormDefinitions, type FormDefinition } from "../../api/forms";
|
||||
import FormDefinitionDialog from "./FormDefinitionDialog";
|
||||
|
||||
|
||||
export default function FormsPage({ settings, auth }: PlatformRouteContext) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [submittedQuery, setSubmittedQuery] = useState("");
|
||||
const [state, setState] = useState("");
|
||||
const [items, setItems] = useState<FormDefinition[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [editing, setEditing] = useState<FormDefinition | "new" | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const canWrite = hasScope(auth, "forms:definition:write");
|
||||
const canAdmin = hasScope(auth, "forms:definition:admin");
|
||||
const tenantId = auth.active_tenant?.id ?? auth.tenant.id;
|
||||
|
||||
const load = useCallback((signal?: AbortSignal) => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
return listFormDefinitions(settings, {
|
||||
query: submittedQuery,
|
||||
states: state ? [state] : undefined,
|
||||
limit: 200
|
||||
}, signal).
|
||||
then((result) => {
|
||||
setItems(result.definitions);
|
||||
setTotal(result.total);
|
||||
}).
|
||||
finally(() => setLoading(false));
|
||||
}, [settings, state, submittedQuery]);
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
load(controller.signal).catch((reason) => {
|
||||
if ((reason as Error).name !== "AbortError") {
|
||||
setError(reason instanceof Error ? reason.message : "Form definitions could not be loaded.");
|
||||
}
|
||||
});
|
||||
return () => controller.abort();
|
||||
}, [load]);
|
||||
|
||||
function search(event: FormEvent) {
|
||||
event.preventDefault();
|
||||
setSubmittedQuery(query.trim());
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="forms-page">
|
||||
<div className="forms-shell">
|
||||
<div className="forms-toolbar">
|
||||
<form onSubmit={search} className="forms-search">
|
||||
<Search size={17} aria-hidden="true" />
|
||||
<input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search definitions" aria-label="Search Form definitions" />
|
||||
<Button type="submit">Search</Button>
|
||||
</form>
|
||||
<label>
|
||||
<span>State</span>
|
||||
<select value={state} onChange={(event) => setState(event.target.value)}>
|
||||
<option value="">All</option>
|
||||
<option value="draft">Draft</option>
|
||||
<option value="published">Published</option>
|
||||
<option value="retired">Retired</option>
|
||||
</select>
|
||||
</label>
|
||||
<IconButton label="Refresh definitions" icon={<RefreshCw size={16} />} onClick={() => void load()} disabled={loading} />
|
||||
{canWrite && <Button variant="primary" onClick={() => setEditing("new")}><Plus size={16} aria-hidden="true" />New definition</Button>}
|
||||
<span className="forms-count">{total}</span>
|
||||
</div>
|
||||
<PageScrollViewport className="forms-list-viewport">
|
||||
{error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
|
||||
{loading && <LoadingIndicator label="Loading Form definitions" />}
|
||||
{!loading && !error && items.length === 0 && <div className="forms-empty">No matching definitions.</div>}
|
||||
{!loading && items.length > 0 &&
|
||||
<div className="forms-list" role="list">
|
||||
{items.map((item) => {
|
||||
const mayRevise = canWrite && (item.publication_state === "draft" || canAdmin) && item.publication_state !== "retired";
|
||||
return (
|
||||
<div className="forms-row" role="listitem" key={item.reference.object_id}>
|
||||
<span><strong>{item.title}</strong><small>{item.key}</small></span>
|
||||
<span>{item.fields.length} fields</span>
|
||||
<span>Revision {item.reference.version}</span>
|
||||
<StatusBadge status={item.publication_state === "published" ? "active" : "inactive"} label={humanize(item.publication_state)} />
|
||||
{mayRevise
|
||||
? <IconButton label={`Revise ${item.title}`} icon={<Pencil size={16} />} onClick={() => setEditing(item)} />
|
||||
: <span className="forms-row-action-spacer" />}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
</PageScrollViewport>
|
||||
</div>
|
||||
{editing &&
|
||||
<FormDefinitionDialog
|
||||
open
|
||||
settings={settings}
|
||||
tenantId={tenantId}
|
||||
definition={editing === "new" ? null : editing}
|
||||
canPublish={canAdmin}
|
||||
onClose={() => setEditing(null)}
|
||||
onSaved={() => {
|
||||
setEditing(null);
|
||||
void load().catch((reason) => setError(reason instanceof Error ? reason.message : "Definitions could not be reloaded."));
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function humanize(value: string): string {
|
||||
return value.replace(/[_:.-]+/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default, formsModule } from "./module";
|
||||
export * from "./api/forms";
|
||||
@@ -0,0 +1,39 @@
|
||||
import { createElement, lazy } from "react";
|
||||
import type { PlatformWebModule } from "@govoplan/core-webui";
|
||||
import "./styles/forms.css";
|
||||
|
||||
|
||||
const FormsPage = lazy(() => import("./features/forms/FormsPage"));
|
||||
|
||||
export const formsModule: PlatformWebModule = {
|
||||
id: "forms",
|
||||
label: "Form definitions",
|
||||
version: "0.1.14",
|
||||
dependencies: ["access"],
|
||||
optionalDependencies: ["forms_runtime", "portal", "workflow_engine", "cases", "policy"],
|
||||
routes: [
|
||||
{
|
||||
path: "/forms",
|
||||
anyOf: ["forms:definition:read"],
|
||||
order: 36,
|
||||
surfaceId: "forms.catalogue",
|
||||
render: (context) => createElement(FormsPage, context)
|
||||
}
|
||||
],
|
||||
navItems: [
|
||||
{
|
||||
to: "/forms",
|
||||
label: "Form definitions",
|
||||
iconName: "list-tree",
|
||||
anyOf: ["forms:definition:read"],
|
||||
order: 36,
|
||||
surfaceId: "forms.navigation"
|
||||
}
|
||||
],
|
||||
viewSurfaces: [
|
||||
{ id: "forms.navigation", moduleId: "forms", kind: "navigation", label: "Form definitions navigation", order: 10 },
|
||||
{ id: "forms.catalogue", moduleId: "forms", kind: "route", label: "Form definition catalogue", order: 20 }
|
||||
]
|
||||
};
|
||||
|
||||
export default formsModule;
|
||||
@@ -0,0 +1,265 @@
|
||||
.forms-page,
|
||||
.forms-shell {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.forms-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.forms-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 58px;
|
||||
padding: 10px 18px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.forms-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: min(520px, 100%);
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.forms-search input {
|
||||
min-width: 120px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.forms-toolbar > label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.forms-toolbar > label > span,
|
||||
.forms-count {
|
||||
color: var(--text-soft);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.forms-list-viewport {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 16px 18px 24px;
|
||||
}
|
||||
|
||||
.forms-list {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.forms-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 1fr) minmax(90px, auto) minmax(120px, auto) auto 36px;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-height: 64px;
|
||||
padding: 9px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.forms-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.forms-row:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.forms-row > span:first-child {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.forms-row > span:first-child strong,
|
||||
.forms-row > span:first-child small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.forms-row > span:not(:first-child, .status-badge),
|
||||
.forms-row small {
|
||||
color: var(--text-soft);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.forms-row-action-spacer {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.forms-empty {
|
||||
padding: 36px 0;
|
||||
color: var(--text-soft);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-definition-dialog {
|
||||
width: min(1120px, calc(100vw - 32px));
|
||||
height: min(860px, calc(100vh - 32px));
|
||||
}
|
||||
|
||||
.form-definition-editor {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.form-definition-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px 16px;
|
||||
}
|
||||
|
||||
.form-definition-wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.form-definition-toggle {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
min-height: 58px;
|
||||
}
|
||||
|
||||
.form-definition-handoffs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 18px;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.form-definition-handoffs > span {
|
||||
margin-right: auto;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-field-editor-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-field-editor-heading h3 {
|
||||
margin: 0;
|
||||
font-size: 0.98rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.form-field-editor-list {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.form-field-editor-row {
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(120px, 0.8fr) minmax(160px, 1.1fr) minmax(130px, 0.8fr) minmax(100px, auto) 36px;
|
||||
align-items: end;
|
||||
gap: 9px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.form-field-order {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.form-field-order .icon-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.form-field-required {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.form-field-help,
|
||||
.form-field-options,
|
||||
.form-field-constraints {
|
||||
grid-column: 2 / -1;
|
||||
}
|
||||
|
||||
.form-field-constraints {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.forms-toolbar {
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.forms-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.forms-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
}
|
||||
|
||||
.forms-row > span:nth-child(2),
|
||||
.forms-row > span:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-field-editor-row {
|
||||
grid-template-columns: 36px minmax(0, 1fr) 36px;
|
||||
}
|
||||
|
||||
.form-field-editor-row > .form-field {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.form-field-order {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 4;
|
||||
}
|
||||
|
||||
.form-field-required,
|
||||
.form-field-help,
|
||||
.form-field-options,
|
||||
.form-field-constraints {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.form-field-editor-row > .icon-button:last-child {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.form-definition-grid,
|
||||
.form-field-constraints {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-definition-wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user