feat(web): searchable combobox (Base UI) for term/authority options (#27)

2026-06-06 10:31:58 +02:00
parent 6e52a331bc
commit 0188e730e8
4 changed files with 297 additions and 0 deletions
@@ -0,0 +1,72 @@
+import type { components } from "../api/schema";
+import {
+  ComboboxRoot,
+  ComboboxInputGroup,
+  ComboboxInput,
+  ComboboxClear,
+  ComboboxTrigger,
+  ComboboxPopup,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxEmpty,
+} from "@/components/ui/combobox";
+
+type LabelView = components["schemas"]["LabelView"];
+
+export type Option = { id: string; labels: LabelView[] };
+
+export function labelIn(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 OptionsCombobox({
+  id,
+  value,
+  onChange,
+  options,
+  lang,
+  placeholder,
+}: {
+  id: string;
+  value: string;
+  onChange: (v: string) => void;
+  options: Option[];
+  lang: string;
+  placeholder: string;
+}) {
+  const selected = options.find((o) => o.id === value) ?? null;
+
+  return (
+    <ComboboxRoot<Option | null>
+      items={options}
+      value={selected}
+      onValueChange={(option) => onChange(option?.id ?? "")}
+      itemToStringLabel={(option) => (option ? labelIn(option.labels, lang) : "")}
+      isItemEqualToValue={(a, b) => a?.id === b?.id}
+    >
+      <ComboboxInputGroup>
+        <ComboboxInput id={id} placeholder={placeholder} />
+        <ComboboxClear aria-label="Clear" />
+        <ComboboxTrigger aria-label="Open" />
+      </ComboboxInputGroup>
+
+      <ComboboxPopup>
+        <ComboboxEmpty>No matches.</ComboboxEmpty>
+        <ComboboxList>
+          {(option: Option) => (
+            <ComboboxItem key={option.id} value={option}>
+              <ComboboxItemIndicator className="text-indigo-600">✓</ComboboxItemIndicator>
+              {labelIn(option.labels, lang)}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </ComboboxRoot>
+  );
+}