feat(web): FlexibleFieldValue — resolve term/authority/localized field values (#45)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/i18n/en.json

@@ -1,8 +1,9 @@
 {
   "app": { "name": "Collection" },
+  "common": { "yes": "Yes", "no": "No" },
   "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar" },
   "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server" },
-  "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" } },
+  "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" }, "unknownRef": "(unknown)" },
   "fieldsLabels": { "objectNumber": "Object number", "objectName": "Name", "count": "Number of objects", "briefDescription": "Brief description", "currentLocation": "Current location", "currentOwner": "Current owner", "recorder": "Recorder", "recordingDate": "Recording date", "visibility": "Visibility", "flexible": "Catalogue fields" },
   "visibility": { "draft": "Draft", "internal": "Internal", "public": "Public" },
   "form": { "selectPlaceholder": "— select —", "create": "Create object", "save": "Save", "cancel": "Cancel", "visibility": "Visibility", "draft": "Draft", "internal": "Internal", "required": "This field is required", "rejected": "The server rejected the changes — check required and referenced fields", "fieldRejected": "The field \"{{field}}\" was rejected — check its value", "flexibleHeading": "Catalogue fields" },

web/src/i18n/sv.json

@@ -1,8 +1,9 @@
 {
   "app": { "name": "Samling" },
+  "common": { "yes": "Ja", "no": "Nej" },
   "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "collapseSidebar": "Fäll ihop sidofältet", "expandSidebar": "Fäll ut sidofältet" },
   "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern" },
-  "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" } },
+  "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" }, "unknownRef": "(okänd)" },
   "fieldsLabels": { "objectNumber": "Föremålsnummer", "objectName": "Namn", "count": "Antal föremål", "briefDescription": "Kort beskrivning", "currentLocation": "Nuvarande plats", "currentOwner": "Nuvarande ägare", "recorder": "Registrerad av", "recordingDate": "Registreringsdatum", "visibility": "Synlighet", "flexible": "Katalogfält" },
   "visibility": { "draft": "Utkast", "internal": "Intern", "public": "Publik" },
   "form": { "selectPlaceholder": "— välj —", "create": "Skapa föremål", "save": "Spara", "cancel": "Avbryt", "visibility": "Synlighet", "draft": "Utkast", "internal": "Intern", "required": "Fältet är obligatoriskt", "rejected": "Servern avvisade ändringarna — kontrollera obligatoriska och refererade fält", "fieldRejected": "Fältet \"{{field}}\" avvisades — kontrollera värdet", "flexibleHeading": "Katalogfält" },

web/src/objects/flexible-field-value.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { FlexibleFieldValue } from './flexible-field-value'
+import { fieldDefinitions } from '../test/fixtures'
+
+const def = (key: string) => fieldDefinitions.find((d) => d.key === key)!
+
+const meta = {
+  component: FlexibleFieldValue,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof FlexibleFieldValue>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Term: Story = {
+  args: { def: def('material'), value: 't-bronze', lang: 'en' },
+  play: async ({ canvas }) => {
+    await expect(await canvas.findByText('Bronze')).toBeVisible()
+  },
+}
+
+export const Authority: Story = {
+  args: { def: def('maker'), value: 'a-ada', lang: 'en' },
+  play: async ({ canvas }) => {
+    await expect(await canvas.findByText('Ada Lovelace')).toBeVisible()
+  },
+}
+
+export const LocalizedText: Story = {
+  args: {
+    def: def('title_ml'),
+    value: { sv: 'Brons-amfora', en: 'Bronze amphora' },
+    lang: 'sv',
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('Brons-amfora')).toBeVisible()
+  },
+}
+
+export const Date: Story = {
+  args: { def: def('made_on'), value: '2024-01-05', lang: 'en' },
+  play: async ({ canvas }) => {
+    await expect(canvas.queryByText('2024-01-05')).not.toBeInTheDocument()
+    await expect(canvas.getByText(/Jan.*5.*2024/)).toBeVisible()
+  },
+}
+
+export const Boolean: Story = {
+  args: { def: def('is_fragment'), value: true, lang: 'en' },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('Yes')).toBeVisible()
+  },
+}
+
+export const UnknownRef: Story = {
+  args: { def: def('material'), value: 't-missing', lang: 'en' },
+  play: async ({ canvas }) => {
+    await expect(await canvas.findByText(/t-missing\s*\(unknown\)/)).toBeVisible()
+  },
+}

web/src/objects/flexible-field-value.test.tsx

@@ -0,0 +1,54 @@
+import { expect, test } from "vitest";
+import { screen } from "@testing-library/react";
+
+import { renderApp } from "../test/render";
+import { FlexibleFieldValue } from "./flexible-field-value";
+import { fieldDefinitions } from "../test/fixtures";
+
+function def(key: string) {
+  return fieldDefinitions.find((d) => d.key === key)!;
+}
+
+test("term id resolves to its label", async () => {
+  renderApp(<FlexibleFieldValue def={def("material")} value="t-bronze" lang="en" />);
+
+  expect(await screen.findByText("Bronze")).toBeInTheDocument();
+});
+
+test("authority id resolves to its label", async () => {
+  renderApp(<FlexibleFieldValue def={def("maker")} value="a-ada" lang="en" />);
+
+  expect(await screen.findByText("Ada Lovelace")).toBeInTheDocument();
+});
+
+test("unknown term id renders <id> (unknown)", async () => {
+  renderApp(<FlexibleFieldValue def={def("material")} value="t-missing" lang="en" />);
+
+  expect(await screen.findByText(/t-missing\s*\(unknown\)/)).toBeInTheDocument();
+});
+
+test("localized_text picks the active language string", () => {
+  renderApp(
+    <FlexibleFieldValue
+      def={def("title_ml")}
+      value={{ sv: "Brons-amfora", en: "Bronze amphora" }}
+      lang="sv"
+    />,
+  );
+
+  expect(screen.getByText("Brons-amfora")).toBeInTheDocument();
+  expect(screen.queryByText("Bronze amphora")).not.toBeInTheDocument();
+});
+
+test("date is formatted, not the raw ISO string", () => {
+  renderApp(<FlexibleFieldValue def={def("made_on")} value="2024-01-05" lang="en" />);
+
+  expect(screen.queryByText("2024-01-05")).not.toBeInTheDocument();
+  expect(screen.getByText(/Jan.*5.*2024/)).toBeInTheDocument();
+});
+
+test("boolean true renders Yes", () => {
+  renderApp(<FlexibleFieldValue def={def("is_fragment")} value={true} lang="en" />);
+
+  expect(screen.getByText("Yes")).toBeInTheDocument();
+});

web/src/objects/flexible-field-value.tsx

@@ -0,0 +1,102 @@
+import { useTranslation } from "react-i18next";
+
+import type { components } from "../api/schema";
+import { useTerms, useAuthorities } from "../api/queries";
+import { labelText } from "../lib/labels";
+
+type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
+
+/** Renders one flexible field value as human-readable text, resolving term/authority ids
+ *  to labels and localized_text to the active language. */
+export function FlexibleFieldValue({
+  def,
+  value,
+  lang,
+}: {
+  def: FieldDefinitionView;
+  value: unknown;
+  lang: string;
+}) {
+  switch (def.data_type) {
+    case "term":
+      return <TermValue vocabularyId={def.vocabulary_id ?? null} value={value} lang={lang} />;
+    case "authority":
+      return <AuthorityValue kind={def.authority_kind ?? null} value={value} lang={lang} />;
+    case "localized_text":
+      return <>{pickLocalized(value, lang)}</>;
+    case "date":
+      return <>{formatDate(value, lang)}</>;
+    case "boolean":
+      return <BooleanValue value={value} />;
+    default:
+      return <>{value == null ? "—" : String(value)}</>;
+  }
+}
+
+function TermValue({
+  vocabularyId,
+  value,
+  lang,
+}: {
+  vocabularyId: string | null;
+  value: unknown;
+  lang: string;
+}) {
+  const { t } = useTranslation();
+  const { data: terms, isLoading } = useTerms(vocabularyId ?? undefined);
+
+  if (typeof value !== "string") return <>—</>;
+  const term = terms?.find((x) => x.id === value);
+  if (term) return <>{labelText(term.labels, lang)}</>;
+  if (isLoading) return <span className="text-neutral-400">…</span>;
+  return (
+    <span className="text-neutral-400">
+      {value} {t("objects.unknownRef")}
+    </span>
+  );
+}
+
+function AuthorityValue({
+  kind,
+  value,
+  lang,
+}: {
+  kind: string | null;
+  value: unknown;
+  lang: string;
+}) {
+  const { t } = useTranslation();
+  const { data: authorities, isLoading } = useAuthorities(kind ?? undefined);
+
+  if (typeof value !== "string") return <>—</>;
+  const authority = authorities?.find((x) => x.id === value);
+  if (authority) return <>{labelText(authority.labels, lang)}</>;
+  if (isLoading) return <span className="text-neutral-400">…</span>;
+  return (
+    <span className="text-neutral-400">
+      {value} {t("objects.unknownRef")}
+    </span>
+  );
+}
+
+function BooleanValue({ value }: { value: unknown }) {
+  const { t } = useTranslation();
+  return <>{value ? t("common.yes") : t("common.no")}</>;
+}
+
+function pickLocalized(value: unknown, lang: string): string {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    const map = value as Record<string, string>;
+    return map[lang] ?? map.en ?? Object.values(map)[0] ?? "—";
+  }
+  return value == null ? "—" : String(value);
+}
+
+/** Formats a date-only ISO string (YYYY-MM-DD) for display in the active locale.
+ *  Parses as local midnight so a date-only value isn't shifted a day by tz. */
+export function formatDate(value: unknown, lang: string): string {
+  if (typeof value !== "string") return value == null ? "—" : String(value);
+  const date = new Date(`${value}T00:00:00`);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(lang, { dateStyle: "medium" }).format(date);
+}