edit details page non-owner fix
This commit is contained in:
parent
4eeb46fe21
commit
fc380a49fb
1 changed files with 94 additions and 189 deletions
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useSearchParams, useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import SettingsSubmit from "@/components/forms/SettingsSubmit";
|
||||
|
||||
type Rec = {
|
||||
|
|
@ -14,25 +13,15 @@ type Rec = {
|
|||
photo?: { id?: string } | string | null;
|
||||
screen?: { id?: string } | string | null;
|
||||
|
||||
// ids & readable fields
|
||||
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;
|
||||
|
||||
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;
|
||||
|
||||
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;
|
||||
|
||||
laser_soft?: any;
|
||||
|
|
@ -50,11 +39,7 @@ type Rec = {
|
|||
|
||||
async function readJson(res: Response) {
|
||||
const text = await res.text();
|
||||
try {
|
||||
return text ? JSON.parse(text) : null;
|
||||
} catch {
|
||||
throw new Error(`Unexpected response (HTTP ${res.status})`);
|
||||
}
|
||||
try { return text ? JSON.parse(text) : null; } catch { throw new Error(`Unexpected response (HTTP ${res.status})`); }
|
||||
}
|
||||
|
||||
function ownerLabel(o: Rec["owner"]) {
|
||||
|
|
@ -63,40 +48,29 @@ function ownerLabel(o: Rec["owner"]) {
|
|||
return o.username || String(o.id ?? "—");
|
||||
}
|
||||
|
||||
// Public Directus base for <img> sources
|
||||
const API_BASE = (process.env.NEXT_PUBLIC_API_BASE_URL || "").replace(/\/$/, "");
|
||||
function isMine(owner: Rec["owner"], meId: string | null) {
|
||||
if (!meId || !owner) return false;
|
||||
if (typeof owner === "string" || typeof owner === "number") return String(owner) === meId;
|
||||
return owner.id != null && String(owner.id) === meId;
|
||||
}
|
||||
|
||||
function fileUrl(id?: string) {
|
||||
if (!id) return "";
|
||||
return API_BASE ? `${API_BASE}/assets/${id}` : `/api/dx/assets/${id}`;
|
||||
return id ? `/api/dx/assets/${id}` : "";
|
||||
}
|
||||
|
||||
function ZoomableSquareImage(props: { src: string; alt: string; onOpen: () => void }) {
|
||||
const { src, alt, onOpen } = props;
|
||||
return (
|
||||
<div className="border rounded overflow-hidden" style={{ aspectRatio: "1 / 1" }}>
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="w-full h-full object-cover cursor-zoom-in"
|
||||
loading="lazy"
|
||||
onClick={onOpen}
|
||||
onError={(e) => {
|
||||
(e.currentTarget as HTMLImageElement).style.display = "none";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CO2GalvoDetail(props: {
|
||||
export default function CO2GalvoDetail({
|
||||
id,
|
||||
mode,
|
||||
onSaved,
|
||||
onBack,
|
||||
showOwnerEdit = true,
|
||||
}: {
|
||||
id: string | number;
|
||||
mode?: "view" | "edit";
|
||||
onSaved?: (submission_id: string | number) => void;
|
||||
onBack?: () => void;
|
||||
showOwnerEdit?: boolean;
|
||||
}) {
|
||||
const { id, mode, onBack, showOwnerEdit = true } = props;
|
||||
|
||||
const sp = useSearchParams();
|
||||
const router = useRouter();
|
||||
const editParam = sp.get("edit") === "1";
|
||||
|
|
@ -106,17 +80,23 @@ export default function CO2GalvoDetail(props: {
|
|||
const [loading, setLoading] = useState(true);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
|
||||
// lightbox
|
||||
const [viewerSrc, setViewerSrc] = useState<string | null>(null);
|
||||
// current user id (for owner-only edit button)
|
||||
const [meId, setMeId] = useState<string | null>(null);
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setViewerSrc(null);
|
||||
};
|
||||
if (viewerSrc) window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [viewerSrc]);
|
||||
let dead = false;
|
||||
(async () => {
|
||||
try {
|
||||
const r = await fetch(`/api/dx/users/me?fields=id`, { cache: "no-store", credentials: "include" });
|
||||
if (!r.ok) return;
|
||||
const j = await readJson(r);
|
||||
const id = j?.data?.id ?? j?.id ?? null;
|
||||
if (!dead) setMeId(id ? String(id) : null);
|
||||
} catch { /* ignore */ }
|
||||
})();
|
||||
return () => { dead = true; };
|
||||
}, []);
|
||||
|
||||
// load record
|
||||
// load record (with human-readable fields)
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
let dead = false;
|
||||
|
|
@ -132,6 +112,7 @@ export default function CO2GalvoDetail(props: {
|
|||
"setting_notes",
|
||||
"photo.id",
|
||||
"screen.id",
|
||||
|
||||
"mat.id",
|
||||
"mat.name",
|
||||
"mat_coat.id",
|
||||
|
|
@ -141,33 +122,38 @@ export default function CO2GalvoDetail(props: {
|
|||
"mat_opacity.id",
|
||||
"mat_opacity.opacity",
|
||||
"mat_thickness",
|
||||
|
||||
"source.submission_id",
|
||||
"source.make",
|
||||
"source.model",
|
||||
"source.nm",
|
||||
|
||||
"lens.id",
|
||||
"lens.field_size",
|
||||
"lens.focal_length",
|
||||
|
||||
"focus",
|
||||
"laser_soft",
|
||||
"repeat_all",
|
||||
|
||||
"fill_settings",
|
||||
"line_settings",
|
||||
"raster_settings",
|
||||
|
||||
"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).catch(() => null);
|
||||
throw new Error((j as any)?.errors?.[0]?.message || `HTTP ${r.status}`);
|
||||
throw new Error(j?.errors?.[0]?.message || `HTTP ${r.status}`);
|
||||
}
|
||||
const j = await readJson(r);
|
||||
const row: Rec | null = Array.isArray(j?.data) ? j.data[0] || null : null;
|
||||
|
|
@ -180,49 +166,36 @@ export default function CO2GalvoDetail(props: {
|
|||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
dead = true;
|
||||
};
|
||||
return () => { dead = true; };
|
||||
}, [id]);
|
||||
|
||||
const initialValues = useMemo(() => {
|
||||
if (!rec) return null;
|
||||
const toId = (v: any) => (v == null ? null : typeof v === "object" ? v.id ?? v.submission_id ?? null : v);
|
||||
|
||||
const toId = (v: any) =>
|
||||
v == null ? null : typeof v === "object" ? v.id ?? v.submission_id ?? null : 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;
|
||||
|
||||
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;
|
||||
|
||||
const matId = toId(rec.mat);
|
||||
const coatId = toId(rec.mat_coat);
|
||||
const colorId = toId(rec.mat_color);
|
||||
const matId = toId(rec.mat);
|
||||
const coatId = toId(rec.mat_coat);
|
||||
const colorId = toId(rec.mat_color);
|
||||
const opacityId = toId(rec.mat_opacity);
|
||||
const lensId = toId(rec.lens);
|
||||
const sourceId =
|
||||
rec.source && typeof rec.source === "object"
|
||||
? rec.source.submission_id ?? null
|
||||
: (rec.source as any) ?? null;
|
||||
const lensId = toId(rec.lens);
|
||||
const sourceId = rec.source && typeof rec.source === "object" ? rec.source.submission_id ?? null : (rec.source as any) ?? null;
|
||||
|
||||
return {
|
||||
setting_title: rec.setting_title ?? "",
|
||||
setting_notes: rec.setting_notes ?? "",
|
||||
photo: photoId,
|
||||
screen: screenId,
|
||||
mat: matId ? String(matId) : null,
|
||||
mat_coat: coatId ? String(coatId) : null,
|
||||
mat_color: colorId ? String(colorId) : null,
|
||||
mat_opacity: opacityId ? String(opacityId) : null,
|
||||
mat: matId ? String(matId) : null,
|
||||
mat_coat: coatId ? String(coatId) : null,
|
||||
mat_color: colorId ? String(colorId) : null,
|
||||
mat_opacity: opacityId ? String(opacityId) : null,
|
||||
mat_thickness: rec.mat_thickness ?? null,
|
||||
source: sourceId != null ? String(sourceId) : null,
|
||||
lens: lensId != null ? String(lensId) : null,
|
||||
focus: rec.focus ?? null,
|
||||
lens: lensId != null ? String(lensId) : null,
|
||||
focus: rec.focus ?? null,
|
||||
laser_soft: rec.laser_soft ?? null,
|
||||
repeat_all: rec.repeat_all ?? null,
|
||||
fill_settings: rec.fill_settings ?? [],
|
||||
|
|
@ -238,14 +211,7 @@ export default function CO2GalvoDetail(props: {
|
|||
}
|
||||
|
||||
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
|
||||
|
|
@ -254,87 +220,46 @@ export default function CO2GalvoDetail(props: {
|
|||
<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={() => (onBack ? onBack() : clearEditParam())}
|
||||
>
|
||||
<button className="px-2 py-1 border rounded text-xs" onClick={() => (onBack ? onBack() : clearEditParam())}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<SettingsSubmit
|
||||
mode="edit"
|
||||
initialTarget="settings_co2gal"
|
||||
submissionId={rec.submission_id}
|
||||
initialValues={initialValues}
|
||||
/>
|
||||
<SettingsSubmit mode="edit" initialTarget="settings_co2gal" submissionId={rec.submission_id} initialValues={initialValues} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
// VIEW
|
||||
// VIEW (readable)
|
||||
const ownerDisplay = ownerLabel(rec.owner);
|
||||
const canEdit = showOwnerEdit && isMine(rec.owner, meId);
|
||||
|
||||
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)) : "";
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<header className="space-y-1">
|
||||
<h1 className="text-2xl font-bold break-words">
|
||||
{rec.setting_title || "Untitled"}
|
||||
</h1>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Last modified: {rec.last_modified_date || "—"}
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold break-words">{rec.setting_title || "Untitled"}</h1>
|
||||
<div className="text-sm text-muted-foreground">Last modified: {rec.last_modified_date || "—"}</div>
|
||||
</header>
|
||||
|
||||
<section className="grid md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm">
|
||||
<div>
|
||||
<span className="font-medium">Owner:</span> {ownerDisplay}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Uploader:</span> {rec.uploader || "—"}
|
||||
</div>
|
||||
<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">Thickness (mm):</span>{" "}
|
||||
{rec.mat_thickness ?? "—"}
|
||||
</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">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">Software:</span> {rec.laser_soft ?? "—"}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Repeat All:</span> {rec.repeat_all ?? "—"}
|
||||
</div>
|
||||
<div><span className="font-medium">Owner:</span> {ownerDisplay}</div>
|
||||
<div><span className="font-medium">Uploader:</span> {rec.uploader || "—"}</div>
|
||||
<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">Thickness (mm):</span> {rec.mat_thickness ?? "—"}</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">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">Software:</span> {rec.laser_soft ?? "—"}</div>
|
||||
<div><span className="font-medium">Repeat All:</span> {rec.repeat_all ?? "—"}</div>
|
||||
</div>
|
||||
|
||||
{rec.setting_notes ? (
|
||||
|
|
@ -344,44 +269,38 @@ export default function CO2GalvoDetail(props: {
|
|||
</div>
|
||||
) : null}
|
||||
|
||||
{showOwnerEdit && (
|
||||
{canEdit && (
|
||||
<div className="pt-2">
|
||||
<Link
|
||||
href={`/portal/laser-settings?t=co2-galvo&view=${rec.submission_id}&edit=1`}
|
||||
className="underline"
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
router.push(`/portal/laser-settings?t=co2-galvo&view=detail&id=${rec.submission_id}&edit=1`)
|
||||
}
|
||||
className="inline-flex items-center rounded border px-2 py-1 text-xs hover:bg-muted"
|
||||
>
|
||||
Edit this setting
|
||||
</Link>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{photoSrc ? (
|
||||
<figure className="space-y-1">
|
||||
<ZoomableSquareImage
|
||||
src={photoSrc}
|
||||
alt="Result"
|
||||
onOpen={() => setViewerSrc(photoSrc)}
|
||||
/>
|
||||
<figcaption className="text-xs text-muted-foreground">Result</figcaption>
|
||||
<figure className="border rounded overflow-hidden">
|
||||
<img src={photoSrc} alt="Result" className="w-full h-auto" />
|
||||
<figcaption className="text-xs p-1 text-muted-foreground">Result</figcaption>
|
||||
</figure>
|
||||
) : null}
|
||||
{screenSrc ? (
|
||||
<figure className="space-y-1">
|
||||
<ZoomableSquareImage
|
||||
src={screenSrc}
|
||||
alt="Settings Screenshot"
|
||||
onOpen={() => setViewerSrc(screenSrc)}
|
||||
/>
|
||||
<figcaption className="text-xs text-muted-foreground">
|
||||
Settings Screenshot
|
||||
</figcaption>
|
||||
<figure className="border rounded overflow-hidden">
|
||||
<img src={screenSrc} alt="Settings screenshot" className="w-full h-auto" />
|
||||
<figcaption className="text-xs p-1 text-muted-foreground">Settings Screenshot</figcaption>
|
||||
</figure>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Repeaters */}
|
||||
{(rec.fill_settings?.length ?? 0) > 0 && (
|
||||
<section className="space-y-2">
|
||||
<h2 className="text-lg font-semibold">Fill Settings</h2>
|
||||
|
|
@ -487,20 +406,6 @@ export default function CO2GalvoDetail(props: {
|
|||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue