makearmy/makearmy-app
1
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

list and details cleanup

Browse source
This commit is contained in:
makearmy 2025-10-05 21:52:16 -04:00
parent e8ba98aa91
commit c59ef98fd9
2 changed files with 269 additions and 250 deletions
Download patch file Download diff file Expand all files Collapse all files

374
components/details/CO2GalvoDetail.tsx
View file

@ -2,128 +2,133 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import SettingsSubmit from "@/components/forms/SettingsSubmit";
type Rec = {
submission_id: string | number;
setting_title?: string | null;
setting_notes?: string | null;
photo?: { id?: string } | string | null;
screen?: { id?: string } | string | null;
// Material
mat?: { id?: string | number; name?: string | null } | null;
mat_coat?: { id?: string | number; name?: string | null } | null;
mat_color?: { id?: string | number; name?: string | null } | null;
mat_opacity?: { id?: string | number; opacity?: string | number | null } | null;
mat_thickness?: number | null;
// Rig & Optics
laser_soft?: { id?: string | number; name?: string | null } | string | number | null;
source?: { submission_id?: string | number; make?: string | null; model?: string | null; nm?: string | null } | null;
lens?: { id?: string | number; field_size?: string | number | null; focal_length?: string | number | null } | null;
focus?: number | null;
// CO₂ Galvo fixed lists
lens_conf?: { id?: string | number; name?: string | null } | null;
lens_apt?: { id?: string | number; name?: string | null } | null;
lens_exp?: { id?: string | number; name?: string | null } | null;
focus?: number | null;
laser_soft?: { id?: string | number; name?: string | null } | string | number | null;
repeat_all?: number | null;
// Repeaters
fill_settings?: any[] | null;
line_settings?: any[] | null;
raster_settings?: any[] | null;
owner?: { id?: string | number; username?: string | null } | string | number | null;
uploader?: string | null;
last_modified_date?: string | null;
};
type Me = { id: string | number; username?: string; email?: string } | null;
const API_BASE = (process.env.NEXT_PUBLIC_API_BASE_URL || "").replace(/\/$/, "");
const fileUrl = (id?: string) => (id ? (API_BASE ? `${API_BASE}/assets/${id}` : `/api/dx/assets/${id}`) : "");
async function readJson(res: Response) {
const t = await res.text();
try { return t ? JSON.parse(t) : null; } catch { return null; }
}
export default function CO2GalvoDetail({ id, editable }: { id: string | number; editable?: boolean }) {
const sp = useSearchParams();
const router = useRouter();
const editParam = sp.get("edit") === "1";
const [rec, setRec] = useState<Rec | null>(null);
const [loading, setLoading] = useState(true);
const [err, setErr] = useState<string | null>(null);
const [me, setMe] = useState<Me>(null);
// robust me
// Lightbox
const [viewerSrc, setViewerSrc] = useState<string | null>(null);
useEffect(() => {
let live = true;
(async () => {
try {
const r1 = await fetch(`/api/me`, { credentials: "include", cache: "no-store" });
if (r1.ok) {
const j = await readJson(r1);
const id = j?.id ?? j?.data?.id ?? null;
const username = j?.username ?? j?.data?.username ?? null;
const email = j?.email ?? j?.data?.email ?? null;
if (live && id) { setMe({ id, username: username ?? undefined, email: email ?? undefined }); return; }
}
const r2 = await fetch(`/api/dx/users/me?fields=id,username,email`, { credentials: "include", cache: "no-store" });
if (live && r2.ok) {
const j2 = await readJson(r2);
const d = j2?.data ?? j2 ?? null;
setMe(d?.id ? { id: d.id, username: d.username ?? undefined, email: d.email ?? undefined } : null);
}
} catch { if (live) setMe(null); }
})();
return () => { live = false; };
}, []);
const onKey = (e: KeyboardEvent) => e.key === "Escape" && setViewerSrc(null);
if (viewerSrc) window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [viewerSrc]);
const API_BASE = (process.env.NEXT_PUBLIC_API_BASE_URL || "").replace(/\/$/, "");
const fileUrl = (assetId?: string) => (assetId ? (API_BASE ? `${API_BASE}/assets/${assetId}` : `/api/dx/assets/${assetId}`) : "");
function ownerLabel(o: Rec["owner"]) {
if (!o) return "—";
if (typeof o === "string" || typeof o === "number") return String(o);
return o.username || String(o.id ?? "—");
}
const yesNo = (v: any) => (v ? "Yes" : "No");
// load record (with readable fields)
useEffect(() => {
if (!id) return;
let dead = false;
(async () => {
try {
setLoading(true);
setErr(null);
const fields = [
"submission_id",
"setting_title",
"setting_notes",
"photo.id",
"screen.id",
"mat.id","mat.name",
"mat_coat.id","mat_coat.name",
"mat_color.id","mat_color.name",
"mat_opacity.id","mat_opacity.opacity",
// Material
"mat.id",
"mat.name",
"mat_coat.id",
"mat_coat.name",
"mat_color.id",
"mat_color.name",
"mat_opacity.id",
"mat_opacity.opacity",
"mat_thickness",
"source.submission_id","source.make","source.model","source.nm",
"laser_soft.id","laser_soft.name",
"lens_conf.id","lens_conf.name",
"lens_apt.id","lens_apt.name",
"lens_exp.id","lens_exp.name",
"lens.id","lens.field_size","lens.focal_length",
"focus","repeat_all",
"fill_settings","line_settings","raster_settings",
"owner.id","owner.username",
// Rig & Optics
"laser_soft.id",
"laser_soft.name",
"source.submission_id",
"source.make",
"source.model",
"source.nm",
"lens.id",
"lens.field_size",
"lens.focal_length",
"lens_conf.id",
"lens_conf.name",
"lens_apt.id",
"lens_apt.name",
"lens_exp.id",
"lens_exp.name",
"focus",
"repeat_all",
// Repeaters
"fill_settings",
"line_settings",
"raster_settings",
// Meta
"owner.id",
"owner.username",
"uploader",
"last_modified_date",
].join(",");
const url = `/api/dx/items/settings_co2gal?fields=${encodeURIComponent(fields)}&filter[submission_id][_eq]=${encodeURIComponent(String(id))}&limit=1`;
const url = `/api/dx/items/settings_co2gal?fields=${encodeURIComponent(
fields
)}&filter[submission_id][_eq]=${encodeURIComponent(String(id))}&limit=1`;
const r = await fetch(url, { cache: "no-store", credentials: "include" });
if (!r.ok) {
const j = await readJson(r);
throw new Error(j?.errors?.[0]?.message || `HTTP ${r.status}`);
}
const j = await readJson(r);
const text = await r.text();
const j = text ? JSON.parse(text) : null;
if (!r.ok) throw new Error(j?.errors?.[0]?.message || `HTTP ${r.status}`);
const row: Rec | null = Array.isArray(j?.data) ? j.data[0] || null : null;
if (!row) throw new Error("Setting not found.");
if (!dead) setRec(row);
@ -133,155 +138,121 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
if (!dead) setLoading(false);
}
})();
return () => { dead = true; };
return () => {
dead = true;
};
}, [id]);
const ownerId = useMemo(() => {
if (!rec?.owner) return null;
return typeof rec.owner === "object" ? (rec.owner.id != null ? String(rec.owner.id) : null) : String(rec.owner);
}, [rec]);
const isMine = me?.id != null && ownerId != null && String(me.id) === String(ownerId);
// Edit-mode initialValues shape for SettingsSubmit
const initialValues = useMemo(() => {
if (!rec) return null;
const toId = (v: any) => (v == null ? "" : typeof v === "object" ? (v.id ?? v.submission_id ?? "") : String(v));
const photoId = typeof rec.photo === "string" || typeof rec.photo === "number" ? String(rec.photo) : rec.photo?.id ?? null;
const screenId = typeof rec.screen === "string" || typeof rec.screen === "number" ? String(rec.screen) : rec.screen?.id ?? null;
return {
submission_id: rec.submission_id,
setting_title: rec.setting_title ?? "",
setting_notes: rec.setting_notes ?? "",
photo: photoId,
screen: screenId,
// Material
mat: toId(rec.mat) || null,
mat_coat: toId(rec.mat_coat) || null,
mat_color: toId(rec.mat_color) || null,
mat_opacity: toId(rec.mat_opacity) || null,
mat_thickness: rec.mat_thickness ?? null,
// Rig & Optics
laser_soft: typeof rec.laser_soft === "object" ? String(rec.laser_soft?.id ?? "") : (rec.laser_soft != null ? String(rec.laser_soft) : null),
source: rec.source && typeof rec.source === "object" ? (rec.source.submission_id != null ? String(rec.source.submission_id) : null) : (rec.source as any) ?? null,
lens_conf: toId(rec.lens_conf) || null,
lens_apt: toId(rec.lens_apt) || null,
lens_exp: toId(rec.lens_exp) || null,
lens: toId(rec.lens) || null,
focus: rec.focus ?? null,
repeat_all: rec.repeat_all ?? null,
// Repeaters
fill_settings: rec.fill_settings ?? [],
line_settings: rec.line_settings ?? [],
raster_settings: rec.raster_settings ?? [],
};
}, [rec]);
function setEdit(on: boolean) {
const q = new URLSearchParams(sp.toString());
if (on) q.set("edit", "1"); else q.delete("edit");
router.replace(`?${q.toString()}`, { scroll: false });
}
if (loading) return <p className="p-6">Loading setting…</p>;
if (err) return <div className="p-6"><div className="rounded-md border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">{err}</div></div>;
if (err)
return (
<div className="p-6">
<div className="rounded-md border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">{err}</div>
</div>
);
if (!rec) return <p className="p-6">Setting not found.</p>;
// EDIT MODE
if (editable && editParam && initialValues) {
return (
<main className="space-y-4">
<div className="flex items-center justify-between">
<h1 className="text-xl lg:text-2xl font-semibold">Edit CO₂ Galvo Setting</h1>
<button className="px-2 py-1 border rounded" onClick={() => setEdit(false)}>Cancel</button>
</div>
<SettingsSubmit mode="edit" submissionId={rec.submission_id} initialValues={initialValues} />
</main>
);
}
// VIEW MODE (sections + order mirrors the form)
const photoId = typeof rec.photo === "object" ? rec.photo?.id : (rec.photo as any);
const screenId = typeof rec.screen === "object" ? rec.screen?.id : (rec.screen as any);
const photoSrc = photoId ? fileUrl(String(photoId)) : "";
const screenSrc = screenId ? fileUrl(String(screenId)) : "";
const softName = typeof rec.laser_soft === "object" ? (rec.laser_soft?.name ?? "—") : "—";
const photoSrc = fileUrl(photoId ? String(photoId) : "");
const screenSrc = fileUrl(screenId ? String(screenId) : "");
const softName = typeof rec.laser_soft === "object" ? rec.laser_soft?.name ?? "—" : "—";
const sourceText =
[rec.source?.make, rec.source?.model].filter(Boolean).join(" ") +
(rec.source?.nm ? ` (${rec.source.nm})` : "");
// Small field renderer: label on top, value below
const Field = ({ label, value }: { label: string; value: any }) => (
<div className="space-y-1">
<div className="text-xs uppercase tracking-wide text-muted-foreground">{label}</div>
<div className="text-sm break-words">{value ?? "—"}</div>
</div>
);
return (
<div className="space-y-6">
{/* Header */}
<header className="space-y-1">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold break-words">{rec.setting_title || "Untitled"}</h1>
{editable && isMine ? (
<button className="px-2 py-1 border rounded text-sm" onClick={() => setEdit(true)}>Edit</button>
) : null}
</div>
<div className="text-sm text-muted-foreground">Last modified: {rec.last_modified_date || "—"}</div>
</header>
{/* Info */}
<section className="space-y-2">
<h2 className="text-lg font-semibold">Info</h2>
{rec.setting_notes ? <p className="text-sm whitespace-pre-wrap">{rec.setting_notes}</p> : <p className="text-sm text-muted-foreground">No notes.</p>}
{/* Info (full width) */}
<section className="grid gap-3">
<Field label="Owner" value={ownerLabel(rec.owner)} />
<Field label="Uploader" value={rec.uploader || "—"} />
{rec.setting_notes ? <Field label="Notes" value={<p className="whitespace-pre-wrap">{rec.setting_notes}</p>} /> : null}
</section>
{/* Images */}
{/* Images (full width, click to expand) */}
{(photoSrc || screenSrc) && (
<section className="space-y-2">
<h2 className="text-lg font-semibold">Images</h2>
<div className="grid grid-cols-2 gap-4">
<section className="grid grid-cols-2 gap-4">
{photoSrc ? (
<figure className="space-y-1">
<img src={photoSrc} alt="Result" className="rounded border object-cover w-full" />
<div
className="border rounded overflow-hidden cursor-zoom-in"
style={{ aspectRatio: "1 / 1" }}
onClick={() => setViewerSrc(photoSrc)}
>
<img src={photoSrc} alt="Result" className="w-full h-full object-cover" loading="lazy" />
</div>
<figcaption className="text-xs text-muted-foreground">Result</figcaption>
</figure>
) : null}
{screenSrc ? (
<figure className="space-y-1">
<img src={screenSrc} alt="Settings Screenshot" className="rounded border object-cover w-full" />
<div
className="border rounded overflow-hidden cursor-zoom-in"
style={{ aspectRatio: "1 / 1" }}
onClick={() => setViewerSrc(screenSrc)}
>
<img src={screenSrc} alt="Settings Screenshot" className="w-full h-full object-cover" loading="lazy" />
</div>
<figcaption className="text-xs text-muted-foreground">Settings Screenshot</figcaption>
</figure>
) : null}
</div>
</section>
)}
{/* Two columns: left Rig & Optics, right Material */}
<section className="grid md:grid-cols-2 gap-6">
{/* Rig & Optics */}
<div className="space-y-3">
<h2 className="text-lg font-semibold">Rig &amp; Optics</h2>
<div className="grid gap-3">
<Field label="Software" value={softName} />
<Field label="Laser Source" value={sourceText || "—"} />
<Field label="Lens Configuration" value={rec.lens_conf?.name || "—"} />
<Field label="Scan Head Aperture" value={rec.lens_apt?.name || "—"} />
<Field label="Beam Expander" value={rec.lens_exp?.name || "—"} />
<Field
label="Scan Lens"
value={
rec.lens
? `${rec.lens.field_size ?? "—"}${rec.lens.focal_length ? ` / ${rec.lens.focal_length} mm` : ""}`
: "—"
}
/>
<Field label="Focus (mm)" value={rec.focus ?? "—"} />
<Field label="Repeat All" value={rec.repeat_all ?? "—"} />
</div>
</div>
{/* Material */}
<section className="space-y-2">
<div className="space-y-3">
<h2 className="text-lg font-semibold">Material</h2>
<div className="grid md:grid-cols-2 gap-2 text-sm">
<div><span className="font-medium">Material:</span> {rec.mat?.name || "—"}</div>
<div><span className="font-medium">Coating:</span> {rec.mat_coat?.name || "—"}</div>
<div><span className="font-medium">Color:</span> {rec.mat_color?.name || "—"}</div>
<div><span className="font-medium">Opacity:</span> {rec.mat_opacity?.opacity ?? "—"}</div>
<div><span className="font-medium">Material Thickness (mm):</span> {rec.mat_thickness ?? "—"}</div>
<div className="grid gap-3">
<Field label="Material" value={rec.mat?.name || "—"} />
<Field label="Coating" value={rec.mat_coat?.name || "—"} />
<Field label="Color" value={rec.mat_color?.name || "—"} />
<Field label="Opacity" value={rec.mat_opacity?.opacity ?? "—"} />
<Field label="Thickness (mm)" value={rec.mat_thickness ?? "—"} />
</div>
</div>
</section>
{/* Rig & Optics (ordered) */}
<section className="space-y-2">
<h2 className="text-lg font-semibold">Rig & Optics</h2>
<div className="grid md:grid-cols-3 gap-2 text-sm">
<div><span className="font-medium">Laser Software:</span> {softName}</div>
<div>
<span className="font-medium">Laser Source:</span>{" "}
{[rec.source?.make, rec.source?.model].filter(Boolean).join(" ") || "—"}
{rec.source?.nm ? ` (${rec.source.nm})` : ""}
</div>
<div><span className="font-medium">Lens Configuration:</span> {rec.lens_conf?.name ?? "—"}</div>
<div><span className="font-medium">Scan Head Aperture:</span> {rec.lens_apt?.name ?? "—"}</div>
<div><span className="font-medium">Beam Expander:</span> {rec.lens_exp?.name ?? "—"}</div>
<div>
<span className="font-medium">Scan Lens:</span>{" "}
{rec.lens?.field_size || "—"}{rec.lens?.focal_length ? ` / ${rec.lens.focal_length} mm` : ""}
</div>
<div><span className="font-medium">Focus (mm):</span> {rec.focus ?? "—"}</div>
<div><span className="font-medium">Repeat All:</span> {rec.repeat_all ?? "—"}</div>
</div>
</section>
{/* Process Settings */}
{/* Repeaters (full width) */}
{(rec.fill_settings?.length ?? 0) > 0 && (
<section className="space-y-2">
<h2 className="text-lg font-semibold">Fill Settings</h2>
@ -298,6 +269,10 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
<th className="px-2 py-1 text-left">Pass</th>
<th className="px-2 py-1 text-left">Freq (kHz)</th>
<th className="px-2 py-1 text-left">Pulse (ns)</th>
<th className="px-2 py-1 text-left">Auto</th>
<th className="px-2 py-1 text-left">Cross</th>
<th className="px-2 py-1 text-left">Flood</th>
<th className="px-2 py-1 text-left">Air</th>
</tr>
</thead>
<tbody className="divide-y">
@ -312,6 +287,10 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
<td className="px-2 py-1">{r.pass ?? "—"}</td>
<td className="px-2 py-1">{r.frequency ?? "—"}</td>
<td className="px-2 py-1">{r.pulse ?? "—"}</td>
<td className="px-2 py-1">{yesNo(r.auto)}</td>
<td className="px-2 py-1">{yesNo(r.cross)}</td>
<td className="px-2 py-1">{yesNo(r.flood)}</td>
<td className="px-2 py-1">{yesNo(r.air)}</td>
</tr>
))}
</tbody>
@ -333,6 +312,10 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
<th className="px-2 py-1 text-left">Freq</th>
<th className="px-2 py-1 text-left">Pulse</th>
<th className="px-2 py-1 text-left">Pass</th>
<th className="px-2 py-1 text-left">Perf</th>
<th className="px-2 py-1 text-left">Cut</th>
<th className="px-2 py-1 text-left">Skip</th>
<th className="px-2 py-1 text-left">Wobble</th>
<th className="px-2 py-1 text-left">Air</th>
</tr>
</thead>
@ -345,7 +328,11 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
<td className="px-2 py-1">{r.frequency ?? "—"}</td>
<td className="px-2 py-1">{r.pulse ?? "—"}</td>
<td className="px-2 py-1">{r.pass ?? "—"}</td>
<td className="px-2 py-1">{r.air ? "Yes" : "No"}</td>
<td className="px-2 py-1">{yesNo(r.perf)}</td>
<td className="px-2 py-1">{yesNo(r.cut)}</td>
<td className="px-2 py-1">{yesNo(r.skip)}</td>
<td className="px-2 py-1">{yesNo(r.wobble)}</td>
<td className="px-2 py-1">{yesNo(r.air)}</td>
</tr>
))}
</tbody>
@ -368,6 +355,14 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
<th className="px-2 py-1 text-left">Speed</th>
<th className="px-2 py-1 text-left">Interval</th>
<th className="px-2 py-1 text-left">Pass</th>
<th className="px-2 py-1 text-left">Cross</th>
<th className="px-2 py-1 text-left">Inversion</th>
<th className="px-2 py-1 text-left">Air</th>
<th className="px-2 py-1 text-left">Freq (kHz)</th>
<th className="px-2 py-1 text-left">Pulse (ns)</th>
<th className="px-2 py-1 text-left">Halftone Cell</th>
<th className="px-2 py-1 text-left">Halftone Angle</th>
<th className="px-2 py-1 text-left">Dot</th>
</tr>
</thead>
<tbody className="divide-y">
@ -380,6 +375,14 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
<td className="px-2 py-1">{r.speed ?? "—"}</td>
<td className="px-2 py-1">{r.interval ?? "—"}</td>
<td className="px-2 py-1">{r.pass ?? "—"}</td>
<td className="px-2 py-1">{yesNo(r.cross)}</td>
<td className="px-2 py-1">{yesNo(r.inversion)}</td>
<td className="px-2 py-1">{yesNo(r.air)}</td>
<td className="px-2 py-1">{r.frequency ?? "—"}</td>
<td className="px-2 py-1">{r.pulse ?? "—"}</td>
<td className="px-2 py-1">{r.halftone_cell ?? "—"}</td>
<td className="px-2 py-1">{r.halftone_angle ?? "—"}</td>
<td className="px-2 py-1">{r.dot ?? "—"}</td>
</tr>
))}
</tbody>
@ -387,6 +390,21 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
</div>
</section>
)}
{/* Lightbox */}
{viewerSrc && (
<div
className="fixed inset-0 z-50 bg-black/80 p-4 flex items-center justify-center"
onClick={() => setViewerSrc(null)}
>
<img
src={viewerSrc}
alt=""
className="max-w-full max-h-full cursor-zoom-out"
onClick={(e) => e.stopPropagation()}
/>
</div>
)}
</div>
);
}

145
components/lists/CO2GalvoList.tsx
View file

@ -51,43 +51,14 @@ export default function CO2GalvoList({
const [rows, setRows] = useState<Row[]>([]);
const [loading, setLoading] = useState(true);
const [localQuery, setLocalQuery] = useState(queryText ?? "");
const [meId, setMeId] = useState<string | null>(null);
// id -> username map (fix showing UUIDs)
const [ownerMap, setOwnerMap] = useState<Record<string, string>>({});
useEffect(() => {
if (queryText !== undefined) setLocalQuery(queryText);
}, [queryText]);
// Robust current-user id fetch so we can show "Edit" for owners
useEffect(() => {
let live = true;
(async () => {
try {
// 1) Try app-level /api/me
const r1 = await fetch(`/api/me`, { cache: "no-store", credentials: "include" });
if (r1.ok) {
const j1 = await readJson(r1);
const id1 = j1?.id ?? j1?.data?.id ?? null;
if (live && id1 != null) {
setMeId(String(id1));
return;
}
}
// 2) Fallback to Directus /users/me
const r2 = await fetch(`/api/dx/users/me?fields=id`, { cache: "no-store", credentials: "include" });
if (!r2.ok) return;
const j2 = await readJson(r2);
const id2 = j2?.data?.id ?? j2?.id ?? null;
if (live && id2 != null) setMeId(String(id2));
} catch {
/* ignore */
}
})();
return () => {
live = false;
};
}, []);
// Load rows
useEffect(() => {
let live = true;
(async () => {
@ -121,9 +92,62 @@ export default function CO2GalvoList({
};
}, []);
// Resolve owner usernames when we only have an id/UUID
useEffect(() => {
const ids = new Set<string>();
for (const r of rows) {
const o = r.owner;
if (!o) continue;
if (typeof o === "string" || typeof o === "number") {
const id = String(o);
if (!ownerMap[id]) ids.add(id);
} else {
const id = o.id != null ? String(o.id) : "";
const hasUsername = !!o.username;
if (id && !hasUsername && !ownerMap[id]) ids.add(id);
}
}
if (!ids.size) return;
let cancelled = false;
(async () => {
const all = Array.from(ids);
const updates: Record<string, string> = {};
const chunkSize = 100;
for (let i = 0; i < all.length; i += chunkSize) {
const slice = all.slice(i, i + chunkSize);
const qs = new URLSearchParams();
qs.set("fields", "id,username");
qs.set("limit", String(slice.length));
qs.set("filter[id][_in]", slice.join(","));
const url = `${API}/users?${qs.toString()}`;
try {
const r = await fetch(url, { credentials: "include", cache: "no-store" });
if (!r.ok) continue;
const j = await r.json().catch(() => null);
const arr: Array<{ id: string | number; username?: string | null }> = j?.data || [];
for (const u of arr) {
updates[String(u.id)] = u.username || String(u.id);
}
} catch {
/* ignore batch errors */
}
}
if (!cancelled && Object.keys(updates).length) {
setOwnerMap((prev) => ({ ...prev, ...updates }));
}
})();
return () => {
cancelled = true;
};
}, [rows, ownerMap]);
const ownerLabel = (o: Owner) => {
if (!o) return "—";
if (typeof o === "string" || typeof o === "number") return String(o);
if (typeof o === "string" || typeof o === "number") {
const id = String(o);
return ownerMap[id] || id; // prefer resolved username
}
return (
o.username ||
[o.first_name, o.last_name].filter(Boolean).join(" ").trim() ||
@ -132,15 +156,6 @@ export default function CO2GalvoList({
);
};
const isMine = (o: Owner): boolean => {
if (!meId || !o) return false;
if (typeof o === "string" || typeof o === "number") return String(o) === meId;
if (o.id != null) return String(o.id) === meId;
return false;
};
const withEdit = (href: string) => (href.includes("?") ? `${href}&edit=1` : `${href}?edit=1`);
const filtered = useMemo(() => {
const q = (localQuery || "").toLowerCase();
if (!q) return rows;
@ -149,7 +164,7 @@ export default function CO2GalvoList({
.filter(Boolean)
.some((v) => String(v).toLowerCase().includes(q))
);
}, [rows, localQuery]);
}, [rows, localQuery, ownerMap]);
return (
<div className="space-y-3">
@ -170,43 +185,29 @@ export default function CO2GalvoList({
<table className="w-full table-fixed text-sm">
<thead className="border-b">
<tr>
<th className="px-2 py-2 text-left w-[28%]">Title</th>
<th className="px-2 py-2 text-left w-[30%]">Title</th>
<th className="px-2 py-2 text-left w-[16%]">Owner</th>
<th className="px-2 py-2 text-left w-[14%]">Material</th>
<th className="px-2 py-2 text-left w-[14%]">Coating</th>
<th className="px-2 py-2 text-left w-[14%]">Model</th>
<th className="px-2 py-2 text-left w-[10%]">Field</th>
<th className="px-2 py-2 text-left w-[4%]">Edit</th>
</tr>
</thead>
<tbody className="divide-y">
{filtered.map((r) => {
const href = linkFor(r.submission_id);
const mine = isMine(r.owner);
return (
<tr key={r.submission_id} className="hover:bg-muted/40">
<td className="px-2 py-2 truncate">
<Link href={href} className="underline">
{r.setting_title || "Untitled"}
</Link>
</td>
<td className="px-2 py-2 truncate">{ownerLabel(r.owner)}{mine ? " (you)" : ""}</td>
<td className="px-2 py-2 truncate">{r.mat?.name || "—"}</td>
<td className="px-2 py-2 truncate">{r.mat_coat?.name || "—"}</td>
<td className="px-2 py-2 truncate">{r.source?.model || "—"}</td>
<td className="px-2 py-2 truncate">{r.lens?.field_size || "—"}</td>
<td className="px-2 py-2">
{mine ? (
<Link href={withEdit(href)} className="underline">
Edit
</Link>
) : (
<span className="opacity-50">—</span>
)}
</td>
</tr>
);
})}
{filtered.map((r) => (
<tr key={r.submission_id} className="hover:bg-muted/40">
<td className="px-2 py-2 truncate">
<Link href={linkFor(r.submission_id)} className="underline">
{r.setting_title || "Untitled"}
</Link>
</td>
<td className="px-2 py-2 truncate">{ownerLabel(r.owner)}</td>
<td className="px-2 py-2 truncate">{r.mat?.name || "—"}</td>
<td className="px-2 py-2 truncate">{r.mat_coat?.name || "—"}</td>
<td className="px-2 py-2 truncate">{r.source?.model || "—"}</td>
<td className="px-2 py-2 truncate">{r.lens?.field_size || "—"}</td>
</tr>
))}
</tbody>
</table>
</div>