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

web/src/fields/field-form.stories.tsx

@@ -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

@@ -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,68 +14,103 @@ 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 isEdit = editing !== null;
-  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 reset = () => {
+  const [key, setKey] = useState(editing?.key ?? "");
-    setKey("");
+  const [labels, setLabels] = useState<LabelInput[]>((editing?.labels as LabelInput[]) ?? []);
-    setLabels([]);
+  const [dataType, setDataType] = useState<string>(editing?.data_type ?? "text");
-    setDataType("text");
+  const [vocabularyId, setVocabularyId] = useState(editing?.vocabulary_id ?? "");
-    setVocabularyId("");
+  const [authorityKind, setAuthorityKind] = useState(editing?.authority_kind ?? "");
-    setAuthorityKind("");
+  const [group, setGroup] = useState(editing?.group ?? "");
-    setGroup("");
+  const [required, setRequired] = useState(editing?.required ?? false);
-    setRequired(false);
+  const [error, setError] = useState(false);
-    setError(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);
-    create.mutate(
+
-      {
+    if (isEdit) {
-        key: key.trim(),
+      update.mutate(
-        data_type: dataType,
+        { key: editing.key, required, group: group.trim() || null, labels },
-        vocabulary_id: dataType === "term" ? vocabularyId : null,
+        { onSuccess: onDone },
-        authority_kind: dataType === "authority" ? authorityKind || null : null,
+      );
-        required,
+    } else {
-        group: group.trim() || null,
+      create.mutate(
-        labels,
+        {
-      },
+          key: key.trim(),
-      { onSuccess: reset },
+          data_type: dataType,
-    );
+          vocabulary_id: dataType === "term" ? vocabularyId : null,
+          authority_kind: dataType === "authority" ? authorityKind || null : null,
+          required,
+          group: group.trim() || null,
+          labels,
+        },
+        {
+          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}>
+      <Button type="submit" size="sm" disabled={pending}>
-        {t("fields.create")}
+        {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

@@ -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,21 +58,37 @@ 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
-                <span className="font-medium">{labelText(def.labels, lang)}</span>
+                key={def.key}
-                <span className="text-xs text-neutral-400">{def.key}</span>
+                className={`flex items-center gap-2 border-b px-3 py-2 text-sm ${
-                <span className="rounded bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-600">
+                  def.key === selectedKey ? "bg-indigo-50" : ""
-                  {t(`fields.types.${def.data_type}`)}
+                }`}
-                </span>
+              >
-                {def.required && (
+                <button
-                  <span
+                  type="button"
-                    className="text-xs text-red-600"
+                  className="flex flex-1 items-center gap-2 text-left"
-                    title={t("fields.required")}
+                  aria-pressed={def.key === selectedKey}
-                    aria-label={t("fields.required")}
+                  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">
+                    {t(`fields.types.${def.data_type}`)}
                   </span>
-                )}
+                  {def.required && (
+                    <span
+                      className="text-xs text-red-600"
+                      title={t("fields.required")}
+                      aria-label={t("fields.required")}
+                    >
+                      *
+                    </span>
+                  )}
+                </button>
+                <DeleteConfirmDialog
+                  description={t("actions.confirmDeleteField")}
+                  onConfirm={() => deleteField.mutateAsync(def.key)}
+                />
               </li>
             ))}
           </ul>

web/src/fields/fields-page.tsx

@@ -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>
   );