logaritmisk/biggus-dickus
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): readable, grouped object detail (labels, placeholders, actions toolbar) (#45)

Browse Source 
Refactor object-detail.tsx to resolve term/authority ids to labels via
FlexibleFieldValue, group flexible fields by def.group in definition order
(ungrouped → trailing "Other"), always show core fields with "—" placeholders,
and move Edit (button-styled Link) + Delete into a right-aligned toolbar.

Move formatDate into lib/format-date.ts so the component module no longer
co-exports a non-component (clears the react-refresh/only-export-components
warning); both flexible-field-value.tsx and object-detail.tsx import it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Anders Olsson
2026-06-07 11:38:41 +02:00
parent 2e38af565a
commit 03d5b59b48
6 changed files with 148 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/objects/object-detail.tsx
+67 -31
View File
@@ -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>
);