logaritmisk/biggus-dickus
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): edit/delete field definitions on /fields (in-place edit pane) (#36)

Browse Source
This commit is contained in:
Anders Olsson
2026-06-05 20:19:13 +02:00
parent 194f18c8ed
commit 65ca79f2bd
4 changed files with 179 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/fields/field-form.stories.tsx
+38
View File
@@ -0,0 +1,38 @@
import type { Meta, StoryObj } from '@storybook/react-vite'
import { expect, fn } from 'storybook/test'
import { FieldForm } from './field-form'
const meta = {
component: FieldForm,
tags: ['ai-generated'],
} satisfies Meta<typeof FieldForm>
export default meta
type Story = StoryObj<typeof meta>
export const Create: Story = {
args: { editing: null, onDone: fn() },
play: async ({ canvas }) => {
await expect(canvas.getByLabelText('Key')).toBeEnabled()
},
}
export const Edit: Story = {
args: {
editing: {
key: 'material',
data_type: 'text',
vocabulary_id: null,
authority_kind: null,
required: true,
group: 'Identification',
labels: [{ lang: 'en', label: 'Material' }],
},
onDone: fn(),
},
play: async ({ canvas }) => {
await expect(canvas.getByLabelText('Key')).toBeDisabled()
await expect(canvas.getByRole('button', { name: 'Save' })).toBeVisible()
},
}
web/src/fields/field-form.tsx
+77 -31
View File
@@ -2,7 +2,11 @@ import { useState, type FormEvent } from "react";
import { useTranslation } from "react-i18next";
import type { components } from "../api/schema";
import { useCreateFieldDefinition, useVocabularies } from "../api/queries";
import {
useCreateFieldDefinition,
useUpdateFieldDefinition,
useVocabularies,
} from "../api/queries";
import { LabelEditor } from "../components/label-editor";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
@@ -10,47 +14,52 @@ import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
type LabelInput = components["schemas"]["LabelInput"];
type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
const TYPES = ["text", "localized_text", "integer", "date", "boolean", "term", "authority"] as const;
const KINDS = ["person", "organisation", "place"] as const;
export function FieldForm() {
export function FieldForm({
editing,
onDone,
}: {
editing: FieldDefinitionView | null;
onDone: () => void;
}) {
const { t } = useTranslation();
const create = useCreateFieldDefinition();
const update = useUpdateFieldDefinition();
const { data: vocabularies } = useVocabularies();
const [key, setKey] = useState("");
const [labels, setLabels] = useState<LabelInput[]>([]);
const [dataType, setDataType] = useState<string>("text");
const [vocabularyId, setVocabularyId] = useState("");
const [authorityKind, setAuthorityKind] = useState("");
const [group, setGroup] = useState("");
const [required, setRequired] = useState(false);
const [error, setError] = useState(false);
const isEdit = editing !== null;
const reset = () => {
setKey("");
setLabels([]);
setDataType("text");
setVocabularyId("");
setAuthorityKind("");
setGroup("");
setRequired(false);
setError(false);
};
const [key, setKey] = useState(editing?.key ?? "");
const [labels, setLabels] = useState<LabelInput[]>((editing?.labels as LabelInput[]) ?? []);
const [dataType, setDataType] = useState<string>(editing?.data_type ?? "text");
const [vocabularyId, setVocabularyId] = useState(editing?.vocabulary_id ?? "");
const [authorityKind, setAuthorityKind] = useState(editing?.authority_kind ?? "");
const [group, setGroup] = useState(editing?.group ?? "");
const [required, setRequired] = useState(editing?.required ?? false);
const [error, setError] = useState(false);
const onSubmit = (event: FormEvent) => {
event.preventDefault();
const hasLabel = labels.some((l) => l.label);
const termNeedsVocab = dataType === "term" && !vocabularyId;
if (!key.trim() || !hasLabel || termNeedsVocab) {
if (!hasLabel || (!isEdit && !key.trim()) || (!isEdit && dataType === "term" && !vocabularyId)) {
setError(true);
return;
}
setError(false);
if (isEdit) {
update.mutate(
{ key: editing.key, required, group: group.trim() || null, labels },
{ onSuccess: onDone },
);
} else {
create.mutate(
{
key: key.trim(),
@@ -61,17 +70,47 @@ export function FieldForm() {
group: group.trim() || null,
labels,
},
{ onSuccess: reset },
{
onSuccess: () => {
setKey("");
setLabels([]);
setDataType("text");
setVocabularyId("");
setAuthorityKind("");
setGroup("");
setRequired(false);
setError(false);
onDone();
},
},
);
}
};
const pending = isEdit ? update.isPending : create.isPending;
const failed = isEdit ? update.isError : create.isError;
return (
<form onSubmit={onSubmit} className="space-y-3 overflow-auto p-4">
<div className="text-sm font-medium">{t("fields.newField")}</div>
<div className="flex items-center justify-between">
<div className="text-sm font-medium">
{isEdit ? labelTextOrKey(editing) : t("fields.newField")}
</div>
{isEdit && (
<Button type="button" variant="ghost" size="sm" onClick={onDone}>
{t("form.cancel")}
</Button>
)}
</div>
<div className="space-y-1">
<Label htmlFor="field-key">{t("fields.key")}</Label>
<Input id="field-key" value={key} onChange={(e) => setKey(e.target.value)} />
<Input
id="field-key"
value={key}
disabled={isEdit}
onChange={(e) => setKey(e.target.value)}
/>
</div>
<LabelEditor value={labels} onChange={setLabels} />
@@ -81,8 +120,9 @@ export function FieldForm() {
<select
id="field-type"
value={dataType}
disabled={isEdit}
onChange={(e) => setDataType(e.target.value)}
className="w-full rounded border px-2 py-1 text-sm"
className="w-full rounded border px-2 py-1 text-sm disabled:opacity-60"
>
{TYPES.map((type) => (
<option key={type} value={type}>
@@ -98,8 +138,9 @@ export function FieldForm() {
<select
id="field-vocab"
value={vocabularyId}
disabled={isEdit}
onChange={(e) => setVocabularyId(e.target.value)}
className="w-full rounded border px-2 py-1 text-sm"
className="w-full rounded border px-2 py-1 text-sm disabled:opacity-60"
>
<option value="">{t("form.selectPlaceholder")}</option>
{vocabularies?.map((vocab) => (
@@ -117,8 +158,9 @@ export function FieldForm() {
<select
id="field-kind"
value={authorityKind}
disabled={isEdit}
onChange={(e) => setAuthorityKind(e.target.value)}
className="w-full rounded border px-2 py-1 text-sm"
className="w-full rounded border px-2 py-1 text-sm disabled:opacity-60"
>
<option value="">{t("fields.anyKind")}</option>
{KINDS.map((kind) => (
@@ -145,15 +187,19 @@ export function FieldForm() {
{t("form.required")}
</p>
)}
{create.isError && (
{failed && (
<p role="alert" className="text-xs text-red-600">
{t("form.rejected")}
</p>
)}
<Button type="submit" size="sm" disabled={create.isPending}>
{t("fields.create")}
<Button type="submit" size="sm" disabled={pending}>
{isEdit ? t("actions.save") : t("fields.create")}
</Button>
</form>
);
}
function labelTextOrKey(def: FieldDefinitionView): string {
return def.labels[0]?.label ?? def.key;
}
web/src/fields/field-list.tsx
+27 -3
View File
@@ -1,15 +1,23 @@
import { useTranslation } from "react-i18next";
import type { components } from "../api/schema";
import { useFieldDefinitions } from "../api/queries";
import { useFieldDefinitions, useDeleteFieldDefinition } from "../api/queries";
import { labelText } from "../lib/labels";
import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
import { Skeleton } from "@/components/ui/skeleton";
type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
export function FieldList() {
export function FieldList({
selectedKey,
onSelect,
}: {
selectedKey: string | null;
onSelect: (def: FieldDefinitionView) => void;
}) {
const { t, i18n } = useTranslation();
const { data, isLoading, isError } = useFieldDefinitions();
const deleteField = useDeleteFieldDefinition();
const lang = i18n.language.startsWith("sv") ? "sv" : "en";
if (isLoading) {
@@ -50,7 +58,18 @@ export function FieldList() {
</div>
<ul>
{defs.map((def) => (
<li key={def.key} className="flex items-center gap-2 border-b px-3 py-2 text-sm">
<li
key={def.key}
className={`flex items-center gap-2 border-b px-3 py-2 text-sm ${
def.key === selectedKey ? "bg-indigo-50" : ""
}`}
>
<button
type="button"
className="flex flex-1 items-center gap-2 text-left"
aria-pressed={def.key === selectedKey}
onClick={() => onSelect(def)}
>
<span className="font-medium">{labelText(def.labels, lang)}</span>
<span className="text-xs text-neutral-400">{def.key}</span>
<span className="rounded bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-600">
@@ -65,6 +84,11 @@ export function FieldList() {
*
</span>
)}
</button>
<DeleteConfirmDialog
description={t("actions.confirmDeleteField")}
onConfirm={() => deleteField.mutateAsync(def.key)}
/>
</li>
))}
</ul>
web/src/fields/fields-page.tsx
+13 -2
View File
@@ -1,14 +1,25 @@
import { useState } from "react";
import type { components } from "../api/schema";
import { FieldList } from "./field-list";
import { FieldForm } from "./field-form";
type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
export function FieldsPage() {
const [selected, setSelected] = useState<FieldDefinitionView | null>(null);
return (
<div className="grid h-full grid-cols-[20rem_1fr]">
<div className="overflow-hidden border-r">
<FieldList />
<FieldList selectedKey={selected?.key ?? null} onSelect={setSelected} />
</div>
<div className="overflow-hidden">
<FieldForm />
<FieldForm
key={selected?.key ?? "create"}
editing={selected}
onDone={() => setSelected(null)}
/>
</div>
</div>
);