fix to populate results in my-settings
This commit is contained in:
parent
b41fbd98a0
commit
9c7cfb3aaa
1 changed files with 153 additions and 103 deletions
|
|
@ -4,33 +4,27 @@
|
|||
import { useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
type Coll = "settings_co2gal" | "settings_co2gan" | "settings_fiber" | "settings_uv";
|
||||
|
||||
type Row = {
|
||||
id: string | number;
|
||||
submission_id?: string | number | null;
|
||||
setting_title?: string | null;
|
||||
status?: string | null;
|
||||
last_modified_date?: string | null;
|
||||
collection: "settings_co2gal" | "settings_co2gan" | "settings_fiber" | "settings_uv";
|
||||
};
|
||||
|
||||
const COLLECTIONS: Array<Row["collection"]> = [
|
||||
"settings_co2gal",
|
||||
"settings_co2gan",
|
||||
"settings_fiber",
|
||||
"settings_uv",
|
||||
];
|
||||
|
||||
const LABEL: Record<Row["collection"], string> = {
|
||||
const COLLECTIONS: Coll[] = ["settings_co2gal", "settings_co2gan", "settings_fiber", "settings_uv"];
|
||||
const LABEL: Record<Coll, string> = {
|
||||
settings_co2gal: "CO₂ Galvo",
|
||||
settings_co2gan: "CO₂ Gantry",
|
||||
settings_fiber: "Fiber",
|
||||
settings_uv: "UV",
|
||||
};
|
||||
|
||||
// Route to the existing detail page for view/edit (you can customize)
|
||||
function detailHref(row: Row) {
|
||||
const subId = row.submission_id ?? row.id;
|
||||
switch (row.collection) {
|
||||
function detailHref(coll: Coll, idOrSubmission: string | number | null | undefined) {
|
||||
const subId = idOrSubmission ?? "";
|
||||
switch (coll) {
|
||||
case "settings_co2gal": return `/settings/co2-galvo/${subId}?edit=1`;
|
||||
case "settings_co2gan": return `/settings/co2-gantry/${subId}?edit=1`;
|
||||
case "settings_fiber": return `/settings/fiber/${subId}?edit=1`;
|
||||
|
|
@ -40,103 +34,144 @@ function detailHref(row: Row) {
|
|||
|
||||
export default function MySettingsPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [me, setMe] = useState<{ id: string; username?: string | null } | null>(null);
|
||||
const [rows, setRows] = useState<Row[]>([]);
|
||||
const [meId, setMeId] = useState<string | null>(null);
|
||||
const [meUsername, setMeUsername] = useState<string | null>(null);
|
||||
const [q, setQ] = useState("");
|
||||
const [byColl, setByColl] = useState<Record<Coll, Row[]>>({
|
||||
settings_co2gal: [],
|
||||
settings_co2gan: [],
|
||||
settings_fiber: [],
|
||||
settings_uv: [],
|
||||
});
|
||||
const [errs, setErrs] = useState<Record<Coll | "me", string | null>>({ me: null, settings_co2gal: null, settings_co2gan: null, settings_fiber: null, settings_uv: null });
|
||||
|
||||
// 1) get current user id
|
||||
// Safe JSON reader so HTML/404s don't explode parsing
|
||||
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})`); }
|
||||
}
|
||||
|
||||
// 1) Who am I (id + username)
|
||||
useEffect(() => {
|
||||
let canceled = false;
|
||||
let dead = false;
|
||||
(async () => {
|
||||
try {
|
||||
const r = await fetch(`/api/dx/users/me?fields=id,username`, {
|
||||
credentials: "include",
|
||||
cache: "no-store",
|
||||
});
|
||||
const j = await r.json();
|
||||
const id = j?.data?.id ?? j?.id;
|
||||
if (!canceled) setMe(id ? { id: String(id), username: j?.data?.username ?? j?.username } : null);
|
||||
} catch {
|
||||
if (!canceled) setMe(null);
|
||||
const r = await fetch(`/api/dx/users/me?fields=id,username`, { credentials: "include", cache: "no-store" });
|
||||
if (!r.ok) {
|
||||
const j = await readJson(r).catch(() => null);
|
||||
throw new Error(j?.errors?.[0]?.message || `HTTP ${r.status}`);
|
||||
}
|
||||
const j = await readJson(r);
|
||||
const id = j?.data?.id ?? j?.id ?? null;
|
||||
const un = j?.data?.username ?? j?.username ?? null;
|
||||
if (!dead) {
|
||||
setMeId(id ? String(id) : null);
|
||||
setMeUsername(un ? String(un) : null);
|
||||
setErrs((e) => ({ ...e, me: null }));
|
||||
}
|
||||
} catch (e: any) {
|
||||
if (!dead) setErrs((er) => ({ ...er, me: e?.message || String(e) }));
|
||||
}
|
||||
})();
|
||||
return () => { canceled = true; };
|
||||
return () => { dead = true; };
|
||||
}, []);
|
||||
|
||||
// 2) fetch my settings from each collection
|
||||
// 2) Load my items per collection with OR(filters)
|
||||
useEffect(() => {
|
||||
if (!me?.id) return;
|
||||
let canceled = false;
|
||||
if (!meId && !meUsername) return;
|
||||
let dead = false;
|
||||
setLoading(true);
|
||||
setErrs((e) => ({ ...e, settings_co2gal: null, settings_co2gan: null, settings_fiber: null, settings_uv: null }));
|
||||
|
||||
(async () => {
|
||||
const all: Row[] = [];
|
||||
const acc: Record<Coll, Row[]> = { settings_co2gal: [], settings_co2gan: [], settings_fiber: [], settings_uv: [] };
|
||||
|
||||
for (const coll of COLLECTIONS) {
|
||||
const url = new URL(`/api/dx/items/${coll}`, window.location.origin);
|
||||
url.searchParams.set("limit", "-1");
|
||||
url.searchParams.set("sort", "-last_modified_date");
|
||||
url.searchParams.set("fields", "id,submission_id,setting_title,status,last_modified_date");
|
||||
url.searchParams.set("filter[owner][_eq]", me.id);
|
||||
const qs = new URLSearchParams();
|
||||
qs.set("limit", "-1");
|
||||
qs.set("sort", "-last_modified_date");
|
||||
qs.set("fields", "id,submission_id,setting_title,status,last_modified_date");
|
||||
|
||||
// Robust OR filter:
|
||||
// - owner == meId
|
||||
// - owner.id == meId (some Directus setups require nested id filter)
|
||||
// - uploader == meUsername (fallback for legacy rows with missing owner)
|
||||
let orIdx = 0;
|
||||
if (meId) {
|
||||
qs.set(`filter[_or][${orIdx}][owner][_eq]`, meId); orIdx++;
|
||||
qs.set(`filter[_or][${orIdx}][owner][id][_eq]`, meId); orIdx++;
|
||||
}
|
||||
if (meUsername) {
|
||||
qs.set(`filter[_or][${orIdx}][uploader][_eq]`, meUsername); orIdx++;
|
||||
}
|
||||
|
||||
const url = `/api/dx/items/${coll}?${qs.toString()}`;
|
||||
|
||||
try {
|
||||
const r = await fetch(url.toString(), { credentials: "include", cache: "no-store" });
|
||||
const j = await r.json();
|
||||
const data = Array.isArray(j?.data) ? j.data : [];
|
||||
for (const item of data) {
|
||||
all.push({
|
||||
id: item.id,
|
||||
submission_id: item.submission_id ?? null,
|
||||
setting_title: item.setting_title ?? null,
|
||||
status: item.status ?? null,
|
||||
last_modified_date: item.last_modified_date ?? null,
|
||||
collection: coll,
|
||||
});
|
||||
const r = await fetch(url, { credentials: "include", cache: "no-store" });
|
||||
if (!r.ok) {
|
||||
const j = await readJson(r).catch(() => null);
|
||||
throw new Error(j?.errors?.[0]?.message || `HTTP ${r.status}`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(`Failed to load ${coll}:`, e);
|
||||
const j = await readJson(r);
|
||||
const rows: Row[] = Array.isArray(j?.data) ? j.data : [];
|
||||
acc[coll] = rows;
|
||||
} catch (e: any) {
|
||||
acc[coll] = [];
|
||||
setErrs((er) => ({ ...er, [coll]: e?.message || String(e) }));
|
||||
}
|
||||
}
|
||||
|
||||
if (!canceled) {
|
||||
setRows(all);
|
||||
if (!dead) {
|
||||
setByColl(acc);
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => { canceled = true; };
|
||||
}, [me?.id]);
|
||||
return () => { dead = true; };
|
||||
}, [meId, meUsername]);
|
||||
|
||||
// 3) Filter client-side
|
||||
const filtered = useMemo(() => {
|
||||
const needle = q.trim().toLowerCase();
|
||||
if (!needle) return rows;
|
||||
return rows.filter((r) =>
|
||||
[r.setting_title, LABEL[r.collection], r.status, r.last_modified_date]
|
||||
.filter(Boolean)
|
||||
.some((v) => String(v).toLowerCase().includes(needle))
|
||||
);
|
||||
}, [rows, q]);
|
||||
if (!needle) return byColl;
|
||||
const out: Record<Coll, Row[]> = { settings_co2gal: [], settings_co2gan: [], settings_fiber: [], settings_uv: [] };
|
||||
for (const coll of COLLECTIONS) {
|
||||
out[coll] = (byColl[coll] || []).filter(r =>
|
||||
[r.setting_title, r.status, r.last_modified_date]
|
||||
.filter(Boolean)
|
||||
.some(v => String(v).toLowerCase().includes(needle))
|
||||
);
|
||||
}
|
||||
return out;
|
||||
}, [byColl, q]);
|
||||
|
||||
async function onDelete(row: Row) {
|
||||
if (!confirm(`Delete "${row.setting_title || "Untitled"}" from ${LABEL[row.collection]}?`)) return;
|
||||
async function onDelete(coll: Coll, row: Row) {
|
||||
if (!confirm(`Delete "${row.setting_title || "Untitled"}" from ${LABEL[coll]}?`)) return;
|
||||
try {
|
||||
const r = await fetch(`/api/dx/items/${row.collection}/${row.id}`, {
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
});
|
||||
const r = await fetch(`/api/dx/items/${coll}/${row.id}`, { method: "DELETE", credentials: "include" });
|
||||
if (!r.ok) {
|
||||
const j = await r.json().catch(() => null);
|
||||
const j = await readJson(r).catch(() => null);
|
||||
throw new Error(j?.errors?.[0]?.message || `HTTP ${r.status}`);
|
||||
}
|
||||
setRows((prev) => prev.filter((x) => !(x.collection === row.collection && String(x.id) === String(row.id))));
|
||||
setByColl(prev => ({ ...prev, [coll]: prev[coll].filter(x => String(x.id) !== String(row.id)) }));
|
||||
} catch (e: any) {
|
||||
alert(`Delete failed: ${e?.message || e}`);
|
||||
}
|
||||
}
|
||||
|
||||
const total = COLLECTIONS.reduce((n, c) => n + (filtered[c]?.length || 0), 0);
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-6xl px-4 py-8">
|
||||
<h1 className="text-2xl font-semibold mb-4">My Settings</h1>
|
||||
|
||||
{!!errs.me && (
|
||||
<div className="mb-4 rounded-md border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">
|
||||
Couldn’t load your profile: {errs.me}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<input
|
||||
className="border rounded px-3 py-2 w-full max-w-md"
|
||||
|
|
@ -144,45 +179,60 @@ export default function MySettingsPage() {
|
|||
value={q}
|
||||
onChange={(e) => setQ(e.currentTarget.value)}
|
||||
/>
|
||||
<span className="text-sm opacity-70">{rows.length} total</span>
|
||||
<span className="text-sm opacity-70">{total} total</span>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<p>Loading…</p>
|
||||
) : filtered.length === 0 ? (
|
||||
<p className="opacity-70">No settings yet.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-muted">
|
||||
<th className="px-2 py-2 text-left">Title</th>
|
||||
<th className="px-2 py-2 text-left">Collection</th>
|
||||
<th className="px-2 py-2 text-left">Status</th>
|
||||
<th className="px-2 py-2 text-left">Updated</th>
|
||||
<th className="px-2 py-2 text-left">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.map((r) => (
|
||||
<tr key={`${r.collection}:${r.id}`} className="border-b hover:bg-muted/30">
|
||||
<td className="px-2 py-2">{r.setting_title || "Untitled"}</td>
|
||||
<td className="px-2 py-2">{LABEL[r.collection]}</td>
|
||||
<td className="px-2 py-2">{r.status || "—"}</td>
|
||||
<td className="px-2 py-2">{r.last_modified_date ? new Date(r.last_modified_date).toLocaleString() : "—"}</td>
|
||||
<td className="px-2 py-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href={detailHref(r)} className="underline">Edit</Link>
|
||||
<button className="text-red-600 underline" onClick={() => onDelete(r)}>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
COLLECTIONS.map((coll) => {
|
||||
const rows = filtered[coll] || [];
|
||||
return (
|
||||
<section key={coll} className="mb-8">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">
|
||||
{LABEL[coll]} <span className="text-xs opacity-70">({rows.length})</span>
|
||||
</h2>
|
||||
{!!errs[coll] && (
|
||||
<span className="text-xs text-red-600">Error: {errs[coll]}</span>
|
||||
)}
|
||||
</div>
|
||||
{rows.length === 0 ? (
|
||||
<p className="opacity-70">No items.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-muted">
|
||||
<th className="px-2 py-2 text-left">Title</th>
|
||||
<th className="px-2 py-2 text-left">Status</th>
|
||||
<th className="px-2 py-2 text-left">Updated</th>
|
||||
<th className="px-2 py-2 text-left">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((r) => (
|
||||
<tr key={`${coll}:${r.id}`} className="border-b hover:bg-muted/30">
|
||||
<td className="px-2 py-2">{r.setting_title || "Untitled"}</td>
|
||||
<td className="px-2 py-2">{r.status || "—"}</td>
|
||||
<td className="px-2 py-2">
|
||||
{r.last_modified_date ? new Date(r.last_modified_date).toLocaleString() : "—"}
|
||||
</td>
|
||||
<td className="px-2 py-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href={detailHref(coll, r.submission_id ?? r.id)} className="underline">Edit</Link>
|
||||
<button className="text-red-600 underline" onClick={() => onDelete(coll, r)}>Delete</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue