feat(web): vocabularies two-pane screen (list/create + terms/add) + nav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-04 09:22:38 +02:00
parent e8d173a18f
commit ac30eadbb2
9 changed files with 270 additions and 2 deletions
@@ -0,0 +1,94 @@
+import { useState, type FormEvent } from "react";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import type { components } from "../api/schema";
+import { useTerms, useAddTerm } from "../api/queries";
+import { LabelEditor } from "../components/label-editor";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type LabelInput = components["schemas"]["LabelInput"];
+type LabelView = components["schemas"]["LabelView"];
+
+function labelText(labels: LabelView[], lang: string): string {
+  return (
+    labels.find((l) => l.lang === lang)?.label ??
+    labels.find((l) => l.lang === "en")?.label ??
+    labels[0]?.label ??
+    ""
+  );
+}
+
+export function VocabularyTerms() {
+  const { t, i18n } = useTranslation();
+
+  const { id } = useParams();
+
+  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
+
+  const { data: terms } = useTerms(id);
+
+  const addTerm = useAddTerm();
+
+  const [labels, setLabels] = useState<LabelInput[]>([]);
+
+  const [uri, setUri] = useState("");
+
+  const [error, setError] = useState(false);
+
+  const onAdd = (event: FormEvent) => {
+    event.preventDefault();
+
+    if (!labels.some((l) => l.lang === "en" && l.label)) {
+      setError(true);
+      return;
+    }
+
+    setError(false);
+
+    addTerm.mutate(
+      { vocabularyId: id!, external_uri: uri.trim() || null, labels },
+      { onSuccess: () => { setLabels([]); setUri(""); } },
+    );
+  };
+
+  return (
+    <div className="overflow-auto p-4">
+      <h3 className="mb-2 text-sm font-medium uppercase text-neutral-500">
+        {t("vocab.terms")}
+      </h3>
+      <ul className="mb-4">
+        {terms?.length === 0 && (
+          <li className="text-sm text-neutral-500">{t("vocab.noTerms")}</li>
+        )}
+        {terms?.map((term) => (
+          <li key={term.id} className="border-b py-1 text-sm">
+            {labelText(term.labels, lang)}
+          </li>
+        ))}
+      </ul>
+      <form onSubmit={onAdd} className="space-y-2 border-t pt-3">
+        <div className="text-sm font-medium">{t("vocab.addTerm")}</div>
+        <LabelEditor value={labels} onChange={setLabels} />
+        <div className="space-y-1">
+          <Label htmlFor="term-uri">{t("labels.externalUri")}</Label>
+          <Input
+            id="term-uri"
+            value={uri}
+            onChange={(e) => setUri(e.target.value)}
+          />
+        </div>
+        {error && (
+          <p role="alert" className="text-xs text-red-600">
+            {t("form.required")}
+          </p>
+        )}
+        <Button type="submit" size="sm" disabled={addTerm.isPending}>
+          {t("vocab.addTerm")}
+        </Button>
+      </form>
+    </div>
+  );
+}