84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
 
|
// Small pieces the phase 9 Admin tabs share.
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { admin9Api, type ProfileUser } from "../../api/admin";
|
||
|
|
import { errorText } from "../../lib/format";
|
||
|
|
import type { Load } from "../../lib/useLoad";
|
||
|
|
|
||
|
|
export function Problem({ load }: { load: Load<unknown> }) {
|
||
|
|
if (load.state === "loading") return <div className="empty slim">Loading</div>;
|
||
|
|
if (load.state === "error") return <div className="callout warn">{load.message}</div>;
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
export type Msg = { ok: boolean; text: string } | null;
|
||
|
|
|
||
|
|
export function Notice({ msg }: { msg: Msg }) {
|
||
|
|
if (!msg) return null;
|
||
|
|
return (
|
||
|
|
<div className={msg.ok ? "callout flush" : "callout warn flush"} role={msg.ok ? "status" : "alert"}>
|
||
|
|
{msg.text}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Search the users Packet Station knows and pick one. `label` names the search box. */
|
||
|
|
export function UserPicker({ label, onPick, exclude = [] }: { label: string; onPick: (u: ProfileUser) => void; exclude?: readonly string[] }) {
|
||
|
|
const [q, setQ] = useState("");
|
||
|
|
const [rows, setRows] = useState<ProfileUser[]>([]);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const term = q.trim();
|
||
|
|
if (term.length < 2) {
|
||
|
|
setRows([]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const ctl = new AbortController();
|
||
|
|
const t = window.setTimeout(() => {
|
||
|
|
admin9Api
|
||
|
|
.users(term, ctl.signal)
|
||
|
|
.then((r) => {
|
||
|
|
setRows(r.slice(0, 10));
|
||
|
|
setError(null);
|
||
|
|
})
|
||
|
|
.catch((err: unknown) => {
|
||
|
|
if (!ctl.signal.aborted) setError(errorText(err));
|
||
|
|
});
|
||
|
|
}, 250);
|
||
|
|
return () => {
|
||
|
|
window.clearTimeout(t);
|
||
|
|
ctl.abort();
|
||
|
|
};
|
||
|
|
}, [q]);
|
||
|
|
|
||
|
|
const shown = rows.filter((u) => !exclude.includes(u.id));
|
||
|
|
return (
|
||
|
|
<div className="stack tight">
|
||
|
|
<label className="f">
|
||
|
|
{label}
|
||
|
|
<input className="in" type="search" placeholder="Name or account, 2 letters or more" value={q} onChange={(e) => setQ(e.target.value)} />
|
||
|
|
</label>
|
||
|
|
{error ? <div className="callout warn flush">{error}</div> : null}
|
||
|
|
{shown.length ? (
|
||
|
|
<ul className="chips plain">
|
||
|
|
{shown.map((u) => (
|
||
|
|
<li key={u.id}>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="chip sm"
|
||
|
|
aria-label={`Pick ${u.display_name}`}
|
||
|
|
onClick={() => {
|
||
|
|
onPick(u);
|
||
|
|
setQ("");
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{u.display_name} <span className="mono small muted">{u.sam_account}</span>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|