merge: object detail readability — resolve labels, group fields (#45)
Object detail resolves term/authority ids to labels, localized_text to the active language, dates locale-formatted; flexible fields grouped by definition; core fields always shown with placeholders; Edit/Delete actions toolbar. Closes #45. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,10 @@
|
||||
{
|
||||
"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" } },
|
||||
"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" },
|
||||
"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" },
|
||||
"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" },
|
||||
"actions": { "edit": "Edit", "delete": "Delete", "rename": "Rename", "save": "Save", "closeDetail": "Close detail", "confirmDelete": "Delete this object? This cannot be undone.", "confirmDeleteTerm": "Delete this term? This cannot be undone.", "confirmDeleteAuthority": "Delete this authority? This cannot be undone.", "confirmDeleteField": "Delete this field definition? This cannot be undone.", "confirmDeleteVocabulary": "Delete this vocabulary? This cannot be undone.", "inUse": "Can't delete — used by {{count}} object(s). Clear those fields first." },
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
{
|
||||
"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" } },
|
||||
"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" },
|
||||
"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" },
|
||||
"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" },
|
||||
"actions": { "edit": "Redigera", "delete": "Ta bort", "rename": "Byt namn", "save": "Spara", "closeDetail": "Stäng detalj", "confirmDelete": "Ta bort detta föremål? Detta kan inte ångras.", "confirmDeleteTerm": "Ta bort denna term? Detta kan inte ångras.", "confirmDeleteAuthority": "Ta bort denna auktoritet? Detta kan inte ångras.", "confirmDeleteField": "Ta bort denna fältdefinition? Detta kan inte ångras.", "confirmDeleteVocabulary": "Ta bort denna vokabulär? Detta kan inte ångras.", "inUse": "Kan inte ta bort — används av {{count}} föremål. Rensa de fälten först." },
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 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);
|
||||
}
|
||||
@@ -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()
|
||||
},
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
@@ -0,0 +1,94 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import type { components } from "../api/schema";
|
||||
import { useTerms, useAuthorities } from "../api/queries";
|
||||
import { labelText } from "../lib/labels";
|
||||
import { formatDate } from "../lib/format-date";
|
||||
|
||||
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);
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
import { expect, test } from "vitest";
|
||||
import { screen } from "@testing-library/react";
|
||||
import { screen, within } from "@testing-library/react";
|
||||
import { http, HttpResponse } from "msw";
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import { server } from "../test/server";
|
||||
import { renderApp } from "../test/render";
|
||||
import { amphora } from "../test/fixtures";
|
||||
import { ObjectDetail } from "./object-detail";
|
||||
|
||||
function tree() {
|
||||
@@ -14,35 +15,81 @@ function tree() {
|
||||
);
|
||||
}
|
||||
|
||||
test("renders inventory-minimum fields, flexible values and visibility", async () => {
|
||||
// override so the object carries a flexible field value (schema types fields as
|
||||
// Record<string,never>, so return a plain object literal here)
|
||||
server.use(
|
||||
http.get("/api/admin/objects/:id", () =>
|
||||
HttpResponse.json({
|
||||
id: "11111111-1111-1111-1111-111111111111",
|
||||
object_number: "LM-0042",
|
||||
object_name: "Amphora",
|
||||
number_of_objects: 1,
|
||||
brief_description: "Storage jar",
|
||||
current_location: "Vault 3",
|
||||
current_owner: null,
|
||||
recorder: null,
|
||||
recording_date: null,
|
||||
visibility: "public",
|
||||
fields: { material: "Bronze" },
|
||||
}),
|
||||
),
|
||||
);
|
||||
renderApp(tree(), { route: "/objects/11111111-1111-1111-1111-111111111111" });
|
||||
// An object seeded with a term, a localized_text and a date flexible value.
|
||||
// `inscription` belongs to the "Description" group; the rest are ungrouped
|
||||
// ("Other"). recording_date is null to exercise the empty-core placeholder.
|
||||
const detailed = {
|
||||
...amphora,
|
||||
recording_date: null,
|
||||
fields: {
|
||||
inscription: "AVE",
|
||||
material: "t-bronze",
|
||||
title_ml: { sv: "Brons-amfora", en: "Bronze amphora" },
|
||||
made_on: "2024-01-05",
|
||||
// No matching field definition — its definition was removed after the value
|
||||
// was set. Must still render (muted), keyed by its raw key.
|
||||
legacy_note: "orphaned value",
|
||||
},
|
||||
};
|
||||
|
||||
function renderDetail() {
|
||||
server.use(http.get("/api/admin/objects/:id", () => HttpResponse.json(detailed)));
|
||||
return renderApp(tree(), { route: `/objects/${detailed.id}` });
|
||||
}
|
||||
|
||||
test("renders inventory-minimum fields and visibility", async () => {
|
||||
renderDetail();
|
||||
expect(await screen.findByText("Amphora")).toBeInTheDocument();
|
||||
expect(screen.getByText("Vault 3")).toBeInTheDocument();
|
||||
expect(screen.getByText("Bronze")).toBeInTheDocument(); // flexible field value
|
||||
// "Public" appears in both the VisibilityBadge and the PublishControl stepper;
|
||||
// scope the assertion to the badge element to avoid ambiguity.
|
||||
expect(document.querySelector("[data-slot='badge']")).toHaveTextContent("Public");
|
||||
});
|
||||
|
||||
test("resolves a term id to its label, not the UUID", async () => {
|
||||
renderDetail();
|
||||
expect(await screen.findByText("Bronze")).toBeInTheDocument();
|
||||
expect(screen.queryByText("t-bronze")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders a localized_text value as a string, not JSON", async () => {
|
||||
renderDetail();
|
||||
// i18n falls back to "en", so the en variant is picked, never the JSON object.
|
||||
expect(await screen.findByText("Bronze amphora")).toBeInTheDocument();
|
||||
expect(screen.queryByText(/\{.*"en".*\}/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("groups flexible fields under subheadings in definition order", async () => {
|
||||
renderDetail();
|
||||
await screen.findByText("Bronze");
|
||||
// "Description" (the inscription def's group) precedes the trailing "Other" group.
|
||||
const description = screen.getByText("Description");
|
||||
const other = screen.getByText("Other");
|
||||
expect(description.compareDocumentPosition(other)).toBe(
|
||||
Node.DOCUMENT_POSITION_FOLLOWING,
|
||||
);
|
||||
});
|
||||
|
||||
test("renders an orphaned field key (no definition) with its raw key and value", async () => {
|
||||
renderDetail();
|
||||
await screen.findByText("Bronze");
|
||||
// The key itself is the label, since there is no definition to localize it.
|
||||
expect(screen.getByText("legacy_note")).toBeInTheDocument();
|
||||
expect(screen.getByText("orphaned value")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("an empty core field shows a placeholder dash", async () => {
|
||||
renderDetail();
|
||||
const recordingDate = (await screen.findByText("Recording date")).parentElement;
|
||||
expect(within(recordingDate!).getByText("—")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("the Edit link points to the object's edit route", async () => {
|
||||
renderDetail();
|
||||
const edit = await screen.findByRole("link", { name: "Edit" });
|
||||
expect(edit).toHaveAttribute("href", `/objects/${detailed.id}/edit`);
|
||||
});
|
||||
|
||||
test("shows a not-found state for a missing object", async () => {
|
||||
server.use(http.get("/api/admin/objects/:id", () => new HttpResponse(null, { status: 404 })));
|
||||
renderApp(tree(), { route: "/objects/does-not-exist" });
|
||||
|
||||
@@ -1,25 +1,26 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import type { components } from "../api/schema";
|
||||
import { useObject, useFieldDefinitions } from "../api/queries";
|
||||
import { formatDate } from "../lib/format-date";
|
||||
import { DeleteObjectDialog } from "./delete-object-dialog";
|
||||
import { FlexibleFieldValue } from "./flexible-field-value";
|
||||
import { PublishControl } from "./publish-control";
|
||||
import { VisibilityBadge } from "./visibility-badge";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
function Field({
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
label: string;
|
||||
value: string | number | null | undefined;
|
||||
}) {
|
||||
if (value === null || value === undefined || value === "") return null;
|
||||
type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
|
||||
|
||||
function Field({ label, value }: { label: string; value: ReactNode }) {
|
||||
const empty = value === null || value === undefined || value === "";
|
||||
|
||||
return (
|
||||
<div className="border-b py-2">
|
||||
<div className="text-xs uppercase tracking-wide text-neutral-400">{label}</div>
|
||||
<div className="text-sm text-neutral-900">{value}</div>
|
||||
<div className="text-sm text-neutral-900">{empty ? "—" : value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -52,17 +53,45 @@ export function ObjectDetail() {
|
||||
return byLang ?? byEnglish ?? key;
|
||||
};
|
||||
|
||||
const flexible = Object.entries(object.fields);
|
||||
// Iterate definitions (stable order) and keep only defs whose key has a
|
||||
// non-null value on this object, grouped by def.group. Ungrouped defs fall
|
||||
// into a trailing "Other" group.
|
||||
const other = t("fields.other");
|
||||
const present = (definitions ?? []).filter((d) => object.fields[d.key] != null);
|
||||
const groups: { group: string; defs: FieldDefinitionView[] }[] = [];
|
||||
for (const def of present) {
|
||||
const isOther = !def.group?.trim();
|
||||
const group = isOther ? other : def.group!;
|
||||
let bucket = groups.find((x) => x.group === group);
|
||||
if (!bucket) {
|
||||
bucket = { group, defs: [] };
|
||||
groups.push(bucket);
|
||||
}
|
||||
bucket.defs.push(def);
|
||||
}
|
||||
// Defensive: a key present in object.fields with no matching definition (e.g. a
|
||||
// definition removed after the value was set). Render it muted under "Other"
|
||||
// rather than silently dropping data; the raw key is the label.
|
||||
const definedKeys = new Set((definitions ?? []).map((d) => d.key));
|
||||
const orphans = Object.entries(object.fields).filter(
|
||||
([key, value]) => !definedKeys.has(key) && value != null,
|
||||
);
|
||||
if (orphans.length > 0 && !groups.some((g) => g.group === other)) {
|
||||
groups.push({ group: other, defs: [] });
|
||||
}
|
||||
groups.sort((a, b) => Number(a.group === other) - Number(b.group === other));
|
||||
|
||||
return (
|
||||
<div className="overflow-auto p-4">
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<h2 className="text-xl font-semibold">{object.object_name}</h2>
|
||||
<VisibilityBadge visibility={object.visibility} />
|
||||
<Link to={`/objects/${object.id}/edit`} className="text-sm font-medium text-indigo-600">
|
||||
{t("actions.edit")}
|
||||
</Link>
|
||||
<DeleteObjectDialog id={object.id} />
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<Link to={`/objects/${object.id}/edit`} className={buttonVariants({ size: "sm" })}>
|
||||
{t("actions.edit")}
|
||||
</Link>
|
||||
<DeleteObjectDialog id={object.id} />
|
||||
</div>
|
||||
</div>
|
||||
<Field label={t("fieldsLabels.objectNumber")} value={object.object_number} />
|
||||
<Field label={t("fieldsLabels.count")} value={object.number_of_objects} />
|
||||
@@ -70,27 +99,34 @@ export function ObjectDetail() {
|
||||
<Field label={t("fieldsLabels.currentLocation")} value={object.current_location} />
|
||||
<Field label={t("fieldsLabels.currentOwner")} value={object.current_owner} />
|
||||
<Field label={t("fieldsLabels.recorder")} value={object.recorder} />
|
||||
<Field label={t("fieldsLabels.recordingDate")} value={object.recording_date} />
|
||||
{flexible.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<div className="mb-1 text-xs font-medium uppercase text-neutral-500">
|
||||
{t("fieldsLabels.flexible")}
|
||||
</div>
|
||||
{flexible.map(([key, value]) => (
|
||||
<Field
|
||||
label={t("fieldsLabels.recordingDate")}
|
||||
value={object.recording_date ? formatDate(object.recording_date, lang) : null}
|
||||
/>
|
||||
{groups.map((g) => (
|
||||
<div key={g.group} className="mt-4">
|
||||
<div className="mb-1 text-xs font-medium uppercase text-neutral-500">{g.group}</div>
|
||||
{g.defs.map((d) => (
|
||||
<Field
|
||||
key={key}
|
||||
label={labelFor(key)}
|
||||
value={
|
||||
value == null
|
||||
? null
|
||||
: typeof value === "object"
|
||||
? JSON.stringify(value)
|
||||
: String(value)
|
||||
}
|
||||
key={d.key}
|
||||
label={labelFor(d.key)}
|
||||
value={<FlexibleFieldValue def={d} value={object.fields[d.key]} lang={lang} />}
|
||||
/>
|
||||
))}
|
||||
{g.group === other &&
|
||||
orphans.map(([key, value]) => (
|
||||
<Field
|
||||
key={key}
|
||||
label={key}
|
||||
value={
|
||||
<span className="text-neutral-400">
|
||||
{typeof value === "object" ? JSON.stringify(value) : String(value)}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
<PublishControl object={object} />
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user