list and details cleanup

This commit is contained in:
makearmy 2025-10-05 22:06:32 -04:00
parent c59ef98fd9
commit 8fc0989b17
2 changed files with 199 additions and 141 deletions

View file

@ -54,11 +54,32 @@ export default function CO2GalvoList({
// id -> username map (fix showing UUIDs)
const [ownerMap, setOwnerMap] = useState<Record<string, string>>({});
// current user id for "Edit" visibility
const [meId, setMeId] = useState<string | null>(null);
useEffect(() => {
if (queryText !== undefined) setLocalQuery(queryText);
}, [queryText]);
// Load current user id
useEffect(() => {
let alive = true;
(async () => {
try {
const r = await fetch(`${API}/users/me?fields=id`, { credentials: "include", cache: "no-store" });
if (!r.ok) return;
const j = await r.json().catch(() => null);
const id = j?.data?.id ?? j?.id ?? null;
if (alive) setMeId(id ? String(id) : null);
} catch {
/* ignore */
}
})();
return () => {
alive = false;
};
}, []);
useEffect(() => {
let live = true;
(async () => {
@ -92,7 +113,7 @@ export default function CO2GalvoList({
};
}, []);
// Resolve owner usernames when we only have an id/UUID
// Resolve owner usernames when only id/UUID is present
useEffect(() => {
const ids = new Set<string>();
for (const r of rows) {
@ -130,7 +151,7 @@ export default function CO2GalvoList({
updates[String(u.id)] = u.username || String(u.id);
}
} catch {
/* ignore batch errors */
/* ignore */
}
}
if (!cancelled && Object.keys(updates).length) {
@ -146,7 +167,7 @@ export default function CO2GalvoList({
if (!o) return "—";
if (typeof o === "string" || typeof o === "number") {
const id = String(o);
return ownerMap[id] || id; // prefer resolved username
return ownerMap[id] || id;
}
return (
o.username ||
@ -156,6 +177,15 @@ export default function CO2GalvoList({
);
};
const isMine = (o: Owner) => {
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 withEditParam = (href: string) => (href.includes("?") ? `${href}&edit=1` : `${href}?edit=1`);
const filtered = useMemo(() => {
const q = (localQuery || "").toLowerCase();
if (!q) return rows;
@ -185,29 +215,42 @@ 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-[30%]">Title</th>
<th className="px-2 py-2 text-left w-[28%]">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) => (
<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>
))}
{filtered.map((r) => {
const href = linkFor(r.submission_id);
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)}</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">
{isMine(r.owner) ? (
<Link href={withEditParam(href)} className="underline">
Edit
</Link>
) : (
<span className="opacity-50"></span>
)}
</td>
</tr>
);
})}
</tbody>
</table>
</div>