feat: enhance housekeeping page with search, import mode and inline form editing
This commit is contained in:
remco committed
1 parent
393e6ccbee
commit
dca77a891b
1 file changed
+97
-18
@@ -4,20 +4,42 @@ import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function AdminHousekeeping() {
|
||||
export default async function AdminHousekeeping({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ q?: string; mode?: "manage" | "import" }>;
|
||||
}) {
|
||||
const sp = await searchParams;
|
||||
const q = (sp.q ?? "").trim();
|
||||
const mode = sp.mode === "import" ? "import" : "manage";
|
||||
|
||||
let permissions: Awaited<
|
||||
ReturnType<typeof prisma.websiteHousekeepingPermissions.findMany>
|
||||
> = [];
|
||||
try {
|
||||
permissions = await prisma.websiteHousekeepingPermissions.findMany({
|
||||
orderBy: [{ minRank: "asc" }, { permission: "asc" }],
|
||||
orderBy: [{ permission: "asc" }],
|
||||
});
|
||||
} catch {
|
||||
permissions = [];
|
||||
}
|
||||
|
||||
const filtered = q
|
||||
? permissions.filter((p) => p.permission.toLowerCase().includes(q.toLowerCase()))
|
||||
: permissions;
|
||||
|
||||
const ranks = permissions.map((p) => p.minRank);
|
||||
const maxRank = ranks.length ? Math.max(...ranks) : 0;
|
||||
const totalMin = ranks.reduce((sum, r) => sum + r, 0);
|
||||
|
||||
const selectedIds = new Set<number>();
|
||||
if (mode === "import") {
|
||||
const importRaw = String(sp.q ?? "");
|
||||
if (importRaw) {
|
||||
const importIds = importRaw.split(",").map((i) => Number(i.trim())).filter((i) => !isNaN(i));
|
||||
importIds.forEach((id) => selectedIds.add(id));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
@@ -30,33 +52,89 @@ export default async function AdminHousekeeping() {
|
||||
<div className="admin-stats">
|
||||
<StatusCard label="Permissions" value={permissions.length} icon="🔑" />
|
||||
<StatusCard label="Highest min rank" value={maxRank} icon="⬆️" />
|
||||
<StatusCard label="Total min rank" value={totalMin} icon="∑" />
|
||||
</div>
|
||||
|
||||
<section className="admin-section">
|
||||
<h2>Add / overwrite permission</h2>
|
||||
<form action={upsertPermission} className="card">
|
||||
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
||||
<input name="permission" placeholder="permission key" required style={{ minWidth: 200 }} />
|
||||
<input name="minRank" type="number" min={0} placeholder="Min rank" required style={{ width: 110 }} />
|
||||
<input name="description" placeholder="description" style={{ flex: 1, minWidth: 160 }} />
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save
|
||||
<div className="card admin-section-header" style={{ marginBottom: "1rem" }}>
|
||||
<div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
|
||||
<form style={{ display: "flex", gap: "0.5rem", flex: 1 }}>
|
||||
<input
|
||||
name="q"
|
||||
defaultValue={q}
|
||||
placeholder="Search permission key..."
|
||||
style={{ flex: 1, minWidth: 220 }}
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary">Search</button>
|
||||
</form>
|
||||
<div style={{ display: "flex", gap: "0.5rem" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline"
|
||||
onClick={() => window.location.href = window.location.pathname + "?mode=manage"}
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline"
|
||||
onClick={() => window.location.href = window.location.pathname + "?mode=import&form=selected_ids"}
|
||||
>
|
||||
Import selection
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
onClick={() => {
|
||||
if (confirm("Are you sure you want to delete selected permissions?")) {
|
||||
// TODO: implement bulk delete
|
||||
}
|
||||
}}
|
||||
>
|
||||
Delete selected
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mode === "manage" ? (
|
||||
<section className="admin-section">
|
||||
<h2>Add / overwrite permission</h2>
|
||||
<form action={upsertPermission} className="card">
|
||||
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
||||
<input name="permission" placeholder="permission key" required style={{ minWidth: 200 }} />
|
||||
<input name="minRank" type="number" min={0} placeholder="Min rank" required style={{ width: 110 }} />
|
||||
<input name="description" placeholder="description" style={{ flex: 1, minWidth: 160 }} />
|
||||
<button type="submit" className="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
) : (
|
||||
<section className="admin-section">
|
||||
<h2>Import Permissions</h2>
|
||||
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
||||
Paste comma-separated permission IDs to import them as a selection.
|
||||
</p>
|
||||
<form action={upsertPermission} className="card">
|
||||
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
||||
<input name="q" placeholder="Permission IDs (comma-separated)" required style={{ flex: 1, minWidth: 200 }} />
|
||||
<button type="submit" className="btn btn-primary">Import</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="admin-section">
|
||||
<h2>
|
||||
Permissions <span className="admin-badge">{permissions.length}</span>
|
||||
Permissions <span className="admin-badge">{filtered.length}</span>
|
||||
</h2>
|
||||
{permissions.length === 0 ? (
|
||||
<p className="muted">No housekeeping permissions defined yet.</p>
|
||||
{filtered.length === 0 ? (
|
||||
<p className="muted">No housekeeping permissions match this search.</p>
|
||||
) : (
|
||||
<div className="card" style={{ padding: 0, overflowX: "auto" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: "40px" }}>#</th>
|
||||
<th>Permission</th>
|
||||
<th>Description</th>
|
||||
<th style={{ width: 200 }}>Min rank</th>
|
||||
@@ -64,8 +142,9 @@ export default async function AdminHousekeeping() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{permissions.map((p) => (
|
||||
<tr key={String(p.id)}>
|
||||
{filtered.map((p, i) => (
|
||||
<tr key={String(p.id)} style={mode === "import" && selectedIds.has(i) ? { backgroundColor: "color-mix(in srgb, var(--color-primary) 5%, transparent)" } : {}}>
|
||||
<td className="muted" style={{ width: "40px" }}>{i + 1}</td>
|
||||
<td>
|
||||
<strong>{p.permission}</strong>
|
||||
</td>
|
||||
|
||||
Reference in new issue
Block a user