3dtours
d25649a26b
Both columns now have the shape the curator asked for: a narrow shelf of albums down the left — one per account on the uploads side, one per landing section on the other — the frame that is up in the middle, and the open album's thumbnails as a strip across the bottom. The frame keeps its labels, the four section boxes, the look's QR code and the delete button under the picture, where before they sat beside it. Each column previews its own frame; both obey the same name, sort and rating filters.
682 lines
29 KiB
TypeScript
682 lines
29 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
|
|
import { api, type AdminPhoto, type AdminUser, type PhotoSlot, type Rating } from './api';
|
|
import { useI18n } from './i18n/I18nProvider';
|
|
import { Profile } from './ui/Profile';
|
|
import { QrCode } from './ui/QrCode';
|
|
import { Stats } from './ui/Stats';
|
|
import type { MsgKey } from './i18n/vi';
|
|
|
|
// Curating screen: one bordered frame, a left column of what can be managed and
|
|
// the pane for the chosen section.
|
|
// Profile — the signed-in account's own picture/email/password
|
|
// User account — every account: its name, email, picture and contribution count
|
|
// Pictures — two columns of albums: the uploads on the left, one album
|
|
// per account; the landing on the right, one album per
|
|
// section. Every frame carries its own labels, section boxes,
|
|
// QR code and delete button under its preview
|
|
// Stats — the visitor counter: views, clicks and their breakdowns
|
|
// Close — leaves the frame and goes back to the landing page
|
|
// The frame holds no privilege of its own — the API answers 403 unless the
|
|
// signed-in account is on the ADMIN_EMAILS allowlist, so this is only a viewer.
|
|
// ponytail: no pagination. The upload quota caps the table at a handful of
|
|
// rows per account; add a page cursor when the strip outgrows one screen.
|
|
type State = 'loading' | 'guest' | 'forbidden' | 'ready';
|
|
type Tab = 'profile' | 'users' | 'pictures' | 'stats';
|
|
|
|
// Where a photo can be put. The boxes are independent — a photo may sit in all
|
|
// three sections at once, and each section draws one random photo per visit out
|
|
// of its own set. Unticking every box takes the photo off the landing without
|
|
// deleting the uploader's row, which is the same switch the old picker carried.
|
|
const DESTINATIONS: { id: PhotoSlot; key: MsgKey }[] = [
|
|
{ id: 'strip', key: 'adm.pickStrip' },
|
|
{ id: 'tester', key: 'adm.pickTester' },
|
|
{ id: 'creator', key: 'adm.pickCreator' },
|
|
{ id: 'qr', key: 'adm.pickQr' },
|
|
];
|
|
|
|
// Column 2 browses these as albums. QR is not one of them: its code belongs to
|
|
// the frame, so it is drawn under every preview instead of in a shelf of its own.
|
|
const SECTIONS = DESTINATIONS.filter((d) => d.id !== 'qr');
|
|
|
|
// The left column, in the order it reads.
|
|
const MENU: { id: Tab; key: MsgKey }[] = [
|
|
{ id: 'profile', key: 'adm.tabProfile' },
|
|
{ id: 'users', key: 'adm.tabUsers' },
|
|
{ id: 'pictures', key: 'adm.tabPictures' },
|
|
{ id: 'stats', key: 'adm.tabStats' },
|
|
];
|
|
|
|
export function Admin() {
|
|
const { t } = useI18n();
|
|
const [state, setState] = useState<State>('loading');
|
|
const [photos, setPhotos] = useState<AdminPhoto[]>([]);
|
|
const [users, setUsers] = useState<AdminUser[]>([]);
|
|
const [tab, setTab] = useState<Tab>('pictures');
|
|
// The two album browsers: which account's uploads are open on the left, which
|
|
// landing section is open on the right, and the filters both columns obey.
|
|
const [album, setAlbum] = useState<number | 'all'>('all');
|
|
const [section, setSection] = useState<PhotoSlot>('strip');
|
|
// Each column previews its own frame; both start on the newest of their album.
|
|
const [selUploads, setSelUploads] = useState<number | null>(null);
|
|
const [selSections, setSelSections] = useState<number | null>(null);
|
|
const [nameQuery, setNameQuery] = useState('');
|
|
const [sort, setSort] = useState<'newest' | 'recipe' | 'rating'>('newest');
|
|
const [minStars, setMinStars] = useState(0);
|
|
const [ratings, setRatings] = useState<Record<string, Rating>>({});
|
|
const [busy, setBusy] = useState(false);
|
|
const [note, setNote] = useState<string | null>(null);
|
|
const [picked, setPicked] = useState<number[]>([]);
|
|
const filePick = useRef<HTMLInputElement>(null);
|
|
|
|
const load = useCallback(async () => {
|
|
const me = await api.me().catch(() => null);
|
|
if (!me?.user) {
|
|
setState('guest');
|
|
return;
|
|
}
|
|
try {
|
|
const [p, u, r] = await Promise.all([api.adminListPhotos(), api.adminListUsers(), api.ratings()]);
|
|
setPhotos(p.photos);
|
|
setUsers(u.users);
|
|
setRatings(r.ratings);
|
|
setState('ready');
|
|
} catch {
|
|
setState('forbidden');
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, [load]);
|
|
|
|
// Every action reports its own failure into `note` and never throws: one bad
|
|
// upload must not take the whole screen down.
|
|
const run = async (fn: () => Promise<void>) => {
|
|
setBusy(true);
|
|
setNote(null);
|
|
try {
|
|
await fn();
|
|
} catch (err) {
|
|
setNote(err instanceof Error ? err.message : String(err));
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
const refreshPhotos = async () => {
|
|
const [p, u, r] = await Promise.all([api.adminListPhotos(), api.adminListUsers(), api.ratings()]);
|
|
setPhotos(p.photos);
|
|
setUsers(u.users);
|
|
setRatings(r.ratings);
|
|
};
|
|
|
|
const upload = (file: File) =>
|
|
run(async () => {
|
|
await api.uploadPhoto(file);
|
|
await refreshPhotos();
|
|
});
|
|
|
|
const remove = (id: number) =>
|
|
run(async () => {
|
|
await api.adminDeletePhoto(id);
|
|
await refreshPhotos();
|
|
});
|
|
|
|
// One checkbox tick: the whole new set goes to the API in one call. The box
|
|
// flips under the curator's finger first — waiting for the round trip would
|
|
// snap it back for a frame and read as a lost click — and a failed write puts
|
|
// the old set back.
|
|
const setSlots = (id: number, next: PhotoSlot[]) =>
|
|
run(async () => {
|
|
const before = photos.find((p) => p.id === id)?.slots ?? [];
|
|
const show = (slots: PhotoSlot[]) => setPhotos((prev) => prev.map((p) => (p.id === id ? { ...p, slots } : p)));
|
|
show(next);
|
|
try {
|
|
await api.adminSetPhotoSlots(id, next);
|
|
} catch (err) {
|
|
show(before);
|
|
throw err;
|
|
}
|
|
});
|
|
|
|
const clear = () => {
|
|
if (!window.confirm(t('adm.clearConfirm', { n: photos.length }))) return;
|
|
return run(async () => {
|
|
const r = await api.adminClearPhotos();
|
|
await refreshPhotos();
|
|
setNote(t('adm.removed', { n: r.removed }));
|
|
});
|
|
};
|
|
|
|
// From the users table: open that account's album in the left column.
|
|
const showOwner = (userId: number) => {
|
|
setTab('pictures');
|
|
setAlbum(userId);
|
|
};
|
|
|
|
// Block/unblock and remove/restore share one route; the list is reloaded
|
|
// because either flag also changes what the built-in viewer would show.
|
|
const setUserState = (id: number, patch: { blocked?: boolean; removed?: boolean }) =>
|
|
run(async () => {
|
|
await api.adminSetUser(id, patch);
|
|
await refreshPhotos();
|
|
});
|
|
|
|
const deleteUser = (u: AdminUser) => {
|
|
if (!window.confirm(t('adm.userDeleteConfirm', { email: u.email }))) return;
|
|
return run(async () => {
|
|
await api.adminDeleteUser(u.id);
|
|
await refreshPhotos();
|
|
});
|
|
};
|
|
|
|
// The users table's bulk actions. An admin account is the API's own privilege
|
|
// source, so it is never a moderation target: select-all skips it and a stray
|
|
// id is filtered out before the deletes run.
|
|
const selectable = users.filter((u) => !u.admin).map((u) => u.id);
|
|
const allPicked = selectable.length > 0 && selectable.every((id) => picked.includes(id));
|
|
const togglePicked = (id: number) =>
|
|
setPicked((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
|
|
const deleteSelected = () => {
|
|
const ids = picked.filter((id) => selectable.includes(id));
|
|
if (ids.length === 0) return;
|
|
if (!window.confirm(t('adm.userDeleteSelectedConfirm', { n: ids.length }))) return;
|
|
return run(async () => {
|
|
for (const id of ids) await api.adminDeleteUser(id);
|
|
setPicked([]);
|
|
await refreshPhotos();
|
|
});
|
|
};
|
|
|
|
// A frame's score, from the same public tally the landing draws. Whitespace
|
|
// in the name box is not a filter, so `query` is trimmed once for both uses.
|
|
const score = (p: AdminPhoto) => ratings[`photo:${p.id}`]?.avg ?? 0;
|
|
const query = nameQuery.trim().toLowerCase();
|
|
|
|
// Albums: one per account that owns a photo, alphabetical so the column reads
|
|
// as a list of names. The name box narrows the column, not the strip.
|
|
const albums = useMemo(() => {
|
|
const map = new Map<number, { userId: number; email: string; n: number }>();
|
|
for (const p of photos) {
|
|
const a = map.get(p.userId) ?? { userId: p.userId, email: p.email, n: 0 };
|
|
a.n += 1;
|
|
map.set(p.userId, a);
|
|
}
|
|
return [...map.values()].sort((a, b) => a.email.localeCompare(b.email));
|
|
}, [photos]);
|
|
const shownAlbums = query ? albums.filter((a) => a.email.toLowerCase().includes(query)) : albums;
|
|
|
|
// What an album draws: the frames the name box kept, minus anything under the
|
|
// rating bar, in the chosen order. Both columns run it, so one frame sits
|
|
// under the same rules on either side.
|
|
const arrange = useCallback(
|
|
(base: AdminPhoto[]) => {
|
|
const named = base.filter((p) => !query || p.email.toLowerCase().includes(query));
|
|
const sorted = [...(minStars > 0 ? named.filter((p) => score(p) >= minStars) : named)];
|
|
if (sort === 'recipe') sorted.sort((a, b) => (a.recipeName ?? '').localeCompare(b.recipeName ?? ''));
|
|
else if (sort === 'rating') sorted.sort((a, b) => score(b) - score(a));
|
|
else sorted.sort((a, b) => b.id - a.id);
|
|
return sorted;
|
|
// `score` reads `ratings`, which is in the deps.
|
|
},
|
|
[query, minStars, sort, ratings],
|
|
);
|
|
|
|
const albumPhotos = useMemo(
|
|
() => arrange(album === 'all' ? photos : photos.filter((p) => p.userId === album)),
|
|
[arrange, album, photos],
|
|
);
|
|
const sectionPhotos = useMemo(
|
|
() => arrange(photos.filter((p) => p.slots.includes(section))),
|
|
[arrange, photos, section],
|
|
);
|
|
|
|
// A column: the album shelf down the left, the frame that is up in the middle
|
|
// — its picture, then everything a curator can do to it (labels, the four
|
|
// section boxes, the look's own QR code, the delete button) under the picture
|
|
// — and the open album's thumbnail strip across the bottom.
|
|
const column = (
|
|
title: string,
|
|
key: string,
|
|
list: AdminPhoto[],
|
|
sel: number | null,
|
|
setSel: (id: number) => void,
|
|
shelf: ReactNode,
|
|
) => {
|
|
const up = list.find((p) => p.id === sel) ?? list[0] ?? null;
|
|
return (
|
|
<div className="adm-col" data-key={`adm-col-${key}`}>
|
|
<h3 className="adm-row-title">
|
|
{title}
|
|
<span className="adm-row-count">{list.length}</span>
|
|
</h3>
|
|
<div className="adm-split">
|
|
<div className="adm-album-list" data-key={`adm-albums-${key}`}>
|
|
{shelf}
|
|
</div>
|
|
<section className="adm-stage" data-key={`adm-stage-${key}`}>
|
|
{up ? (
|
|
<>
|
|
<img className="adm-stage-img" data-key={`adm-stage-img-${key}`} src={api.photoUrl(up.id)} alt="" />
|
|
<div className="adm-meta">
|
|
<b>#{up.id}</b>
|
|
{up.tag ? <span>{up.tag}</span> : null}
|
|
{up.title ? <span>{up.title}</span> : null}
|
|
{up.meta ? <span>{up.meta}</span> : null}
|
|
{up.recipeName ? (
|
|
<span>
|
|
{t('adm.recipe')}: {up.recipeName}
|
|
</span>
|
|
) : null}
|
|
<span>
|
|
{t('adm.rating')}: {score(up).toFixed(1)} ({ratings[`photo:${up.id}`]?.n ?? 0})
|
|
</span>
|
|
<span>
|
|
{t('adm.owner')}: {up.email}
|
|
</span>
|
|
<span>
|
|
{t('adm.uploaded')}: {new Date(up.createdAt).toLocaleString()}
|
|
</span>
|
|
<span>
|
|
{t('adm.size')}: {Math.round(up.bytes / 1024)} KB · {up.mime}
|
|
</span>
|
|
</div>
|
|
<div className="adm-choices">
|
|
{DESTINATIONS.map((d) => (
|
|
<label className="adm-choice" key={d.id}>
|
|
<input
|
|
type="checkbox"
|
|
data-key={`adm-pick-${d.id}-${up.id}`}
|
|
checked={up.slots.includes(d.id)}
|
|
// A photo with no stored look has no file to hand out, so
|
|
// the QR box would only ever draw an empty card.
|
|
disabled={busy || (d.id === 'qr' && !up.hasPreset)}
|
|
title={d.id === 'qr' && !up.hasPreset ? t('adm.noPreset') : undefined}
|
|
onChange={() =>
|
|
void setSlots(
|
|
up.id,
|
|
up.slots.includes(d.id) ? up.slots.filter((x) => x !== d.id) : [...up.slots, d.id],
|
|
)
|
|
}
|
|
/>
|
|
{t(d.key)}
|
|
</label>
|
|
))}
|
|
</div>
|
|
{/* The QR section's real artefact is the code, not the photo,
|
|
so it is drawn here under the frame — on white, because a
|
|
scanner needs the quiet zone and the dark theme has none. */}
|
|
<div className="adm-qr" data-key={`adm-qr-${up.id}`}>
|
|
{up.hasPreset ? (
|
|
<QrCode url={new URL(api.presetUrl(up.id), window.location.origin).href} size={104} />
|
|
) : (
|
|
<span>{t('adm.noPreset')}</span>
|
|
)}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="btn adm-danger"
|
|
data-key={`adm-del-${up.id}`}
|
|
disabled={busy}
|
|
onClick={() => void remove(up.id)}
|
|
>
|
|
{t('adm.delete')}
|
|
</button>
|
|
</>
|
|
) : (
|
|
<p className="hint adm-row-empty">{t('adm.bigEmpty')}</p>
|
|
)}
|
|
</section>
|
|
</div>
|
|
{/* The strip: one thumbnail per frame the album holds, in the order the
|
|
filters and the sort chose. */}
|
|
<div className="adm-filmstrip" data-key={`adm-strip-${key}`}>
|
|
{list.map((p) => (
|
|
<button
|
|
key={p.id}
|
|
type="button"
|
|
className={`adm-thumb${up?.id === p.id ? ' on' : ''}`}
|
|
data-key={`adm-thumb-${key}-${p.id}`}
|
|
onClick={() => setSel(p.id)}
|
|
>
|
|
<img src={api.photoUrl(p.id)} alt="" loading="lazy" />
|
|
<span className="adm-thumb-cap">#{p.id}</span>
|
|
</button>
|
|
))}
|
|
{list.length === 0 ? <p className="hint adm-row-empty">{t('adm.rowEmpty')}</p> : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="adm">
|
|
<header className="adm-bar">
|
|
<a className="adm-brand" data-key="adm-brand" href="/">
|
|
<img src="/assets/RecipesCamIcon.png" alt="" width="26" height="26" />
|
|
<span>Recipes<em>Cam</em></span>
|
|
</a>
|
|
<b className="adm-title">{t('adm.title')}</b>
|
|
<span className="adm-spacer" />
|
|
<span className="hint">{t('adm.total', { n: photos.length })}</span>
|
|
{state === 'ready' ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className="btn primary"
|
|
data-key="adm-upload"
|
|
disabled={busy}
|
|
onClick={() => filePick.current?.click()}
|
|
>
|
|
{busy ? t('auth.busy') : t('adm.upload')}
|
|
</button>
|
|
<input
|
|
ref={filePick}
|
|
type="file"
|
|
hidden
|
|
accept="image/jpeg,image/png,image/webp"
|
|
data-key="adm-upload-input"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
e.target.value = '';
|
|
if (file) void upload(file);
|
|
}}
|
|
/>
|
|
{photos.length > 0 ? (
|
|
<button type="button" className="btn adm-danger" data-key="adm-clear" disabled={busy} onClick={() => void clear()}>
|
|
{t('adm.clearAll')}
|
|
</button>
|
|
) : null}
|
|
</>
|
|
) : null}
|
|
</header>
|
|
|
|
{note ? <p className="hint adm-note">{note}</p> : null}
|
|
|
|
{state === 'loading' ? <p className="hint adm-note">{t('auth.busy')}</p> : null}
|
|
|
|
{state === 'guest' ? (
|
|
<p className="adm-note">
|
|
<a className="btn primary" href="/?auth=login">{t('adm.signIn')}</a>
|
|
</p>
|
|
) : null}
|
|
|
|
{state === 'forbidden' ? <p className="err adm-note">{t('adm.notAdmin')}</p> : null}
|
|
|
|
{state === 'ready' ? (
|
|
<div className="adm-frame" data-key="adm-frame">
|
|
<nav className="adm-side">
|
|
<span className="adm-side-title">{t('adm.settings')}</span>
|
|
{MENU.map((entry) => (
|
|
<button
|
|
key={entry.id}
|
|
type="button"
|
|
className={`adm-side-item${tab === entry.id ? ' on' : ''}`}
|
|
data-key={`adm-nav-${entry.id}`}
|
|
aria-current={tab === entry.id}
|
|
onClick={() => setTab(entry.id)}
|
|
>
|
|
{t(entry.key)}
|
|
</button>
|
|
))}
|
|
<a className="adm-side-item" data-key="adm-close" href="/">{t('adm.close')}</a>
|
|
</nav>
|
|
|
|
<div className="adm-pane">
|
|
{tab === 'pictures' ? (
|
|
<>
|
|
<p className="hint adm-sub">{t('adm.subtitle')}</p>
|
|
<p className="hint adm-sub">{t('adm.slotHint')}</p>
|
|
{photos.length === 0 ? <p className="hint adm-note">{t('adm.empty')}</p> : null}
|
|
<div className="adm-cols">
|
|
{/* Two columns of the same shape: the uploads on the left, one
|
|
album per account; the landing on the right, one album per
|
|
section. Each column is an album shelf, the frame that is
|
|
up with its own controls, and a thumbnail strip. */}
|
|
{column(
|
|
t('adm.uploads'),
|
|
'uploads',
|
|
albumPhotos,
|
|
selUploads,
|
|
setSelUploads,
|
|
<>
|
|
<input
|
|
type="search"
|
|
className="adm-input"
|
|
data-key="adm-filter-name"
|
|
placeholder={t('adm.filterName')}
|
|
value={nameQuery}
|
|
onChange={(e) => setNameQuery(e.target.value)}
|
|
/>
|
|
<div className="adm-filters">
|
|
<select
|
|
className="adm-input"
|
|
data-key="adm-sort"
|
|
aria-label={t('adm.sort')}
|
|
value={sort}
|
|
onChange={(e) => setSort(e.target.value as 'newest' | 'recipe' | 'rating')}
|
|
>
|
|
<option value="newest">{t('adm.sortNewest')}</option>
|
|
<option value="recipe">{t('adm.sortRecipe')}</option>
|
|
<option value="rating">{t('adm.sortRating')}</option>
|
|
</select>
|
|
<select
|
|
className="adm-input"
|
|
data-key="adm-filter-rating"
|
|
aria-label={t('adm.rating')}
|
|
value={String(minStars)}
|
|
onChange={(e) => setMinStars(Number(e.target.value))}
|
|
>
|
|
<option value="0">{t('adm.ratingAll')}</option>
|
|
{[5, 4, 3, 2, 1].map((n) => (
|
|
<option key={n} value={String(n)}>
|
|
{t('adm.ratingAtLeast', { n })}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className={`adm-album${album === 'all' ? ' on' : ''}`}
|
|
data-key="adm-album-all"
|
|
onClick={() => setAlbum('all')}
|
|
>
|
|
<span className="adm-album-name">{t('adm.albumAll')}</span>
|
|
<span className="adm-album-count">{photos.length}</span>
|
|
</button>
|
|
{shownAlbums.map((a) => (
|
|
<button
|
|
key={a.userId}
|
|
type="button"
|
|
className={`adm-album${album === a.userId ? ' on' : ''}`}
|
|
data-key={`adm-album-${a.userId}`}
|
|
onClick={() => setAlbum(a.userId)}
|
|
>
|
|
<span className="adm-album-name">{a.email}</span>
|
|
<span className="adm-album-count">{a.n}</span>
|
|
</button>
|
|
))}
|
|
</>,
|
|
)}
|
|
{column(
|
|
t('adm.sections'),
|
|
'sections',
|
|
sectionPhotos,
|
|
selSections,
|
|
setSelSections,
|
|
<>
|
|
{SECTIONS.map((d) => (
|
|
<button
|
|
key={d.id}
|
|
type="button"
|
|
className={`adm-album${section === d.id ? ' on' : ''}`}
|
|
data-key={`adm-section-${d.id}`}
|
|
onClick={() => setSection(d.id)}
|
|
>
|
|
<span className="adm-album-name">{t(d.key)}</span>
|
|
<span className="adm-album-count">
|
|
{photos.filter((p) => p.slots.includes(d.id)).length}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</>,
|
|
)}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
|
|
{tab === 'users' ? (
|
|
users.length === 0 ? <p className="hint adm-note">{t('adm.noUsers')}</p> : (
|
|
<>
|
|
<div className="adm-bulk">
|
|
<button
|
|
type="button"
|
|
className="btn"
|
|
data-key="adm-users-all"
|
|
disabled={busy || selectable.length === 0}
|
|
onClick={() => setPicked(selectable)}
|
|
>
|
|
{t('adm.selectAll')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn"
|
|
data-key="adm-users-none"
|
|
disabled={busy || picked.length === 0}
|
|
onClick={() => setPicked([])}
|
|
>
|
|
{t('adm.selectNone')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn adm-danger"
|
|
data-key="adm-users-delete"
|
|
disabled={busy || picked.length === 0}
|
|
onClick={() => void deleteSelected()}
|
|
>
|
|
{t('adm.deleteSelected', { n: picked.length })}
|
|
</button>
|
|
</div>
|
|
<div className="adm-table-wrap">
|
|
<table className="adm-table">
|
|
<thead>
|
|
<tr>
|
|
<th className="adm-check">
|
|
<input
|
|
type="checkbox"
|
|
data-key="adm-user-select-all"
|
|
aria-label={t('adm.selectAll')}
|
|
checked={allPicked}
|
|
disabled={busy || selectable.length === 0}
|
|
onChange={() => setPicked(allPicked ? [] : selectable)}
|
|
/>
|
|
</th>
|
|
<th>{t('adm.userPicture')}</th>
|
|
<th>{t('adm.userName')}</th>
|
|
<th>{t('adm.userEmail')}</th>
|
|
<th>{t('adm.userRole')}</th>
|
|
<th>{t('adm.userPhotos')}</th>
|
|
<th>{t('adm.userJoined')}</th>
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users.map((u) => (
|
|
<tr key={u.id} data-key={`adm-user-${u.id}`}>
|
|
<td className="adm-check">
|
|
{u.admin ? null : (
|
|
<input
|
|
type="checkbox"
|
|
data-key={`adm-user-check-${u.id}`}
|
|
aria-label={u.email}
|
|
checked={picked.includes(u.id)}
|
|
disabled={busy}
|
|
onChange={() => togglePicked(u.id)}
|
|
/>
|
|
)}
|
|
</td>
|
|
<td>
|
|
{/* The account's own picture, straight from the
|
|
public avatar route — nothing to fetch. */}
|
|
{u.avatar ? (
|
|
<img className="adm-face" src={u.avatar} alt="" loading="lazy" />
|
|
) : (
|
|
<span className="adm-face adm-face-empty">{(u.email[0] ?? '?').toUpperCase()}</span>
|
|
)}
|
|
</td>
|
|
<td>
|
|
{u.email.split('@')[0]}
|
|
{u.blocked ? <span className="adm-badge adm-badge-warn">{t('adm.userBlocked')}</span> : null}
|
|
{u.removed ? <span className="adm-badge adm-badge-warn">{t('adm.userRemoved')}</span> : null}
|
|
</td>
|
|
<td>{u.email}</td>
|
|
<td>
|
|
<span className={`adm-badge${u.admin ? ' on' : ''}`}>
|
|
{u.admin ? t('adm.roleAdmin') : t('adm.roleMember')}
|
|
</span>
|
|
</td>
|
|
<td>{u.photos}</td>
|
|
<td>{new Date(u.createdAt).toLocaleDateString()}</td>
|
|
<td>
|
|
<button
|
|
type="button"
|
|
className="btn"
|
|
data-key={`adm-user-photos-${u.id}`}
|
|
onClick={() => showOwner(u.id)}
|
|
>
|
|
{t('adm.viewPhotos')}
|
|
</button>
|
|
{/* An admin account is the API's own privilege
|
|
source, so it is never a moderation target and
|
|
offers no buttons here. */}
|
|
{u.admin ? null : (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className="btn"
|
|
data-key={`adm-user-block-${u.id}`}
|
|
disabled={busy}
|
|
onClick={() => void setUserState(u.id, { blocked: !u.blocked })}
|
|
>
|
|
{u.blocked ? t('adm.userUnblock') : t('adm.userBlock')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn"
|
|
data-key={`adm-user-remove-${u.id}`}
|
|
disabled={busy}
|
|
onClick={() => void setUserState(u.id, { removed: !u.removed })}
|
|
>
|
|
{u.removed ? t('adm.userRestore') : t('adm.userRemove')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn adm-danger"
|
|
data-key={`adm-user-delete-${u.id}`}
|
|
disabled={busy}
|
|
onClick={() => void deleteUser(u)}
|
|
>
|
|
{t('adm.userDelete')}
|
|
</button>
|
|
</>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
)
|
|
) : null}
|
|
|
|
{tab === 'profile' ? <Profile onSaved={(msg) => setNote(msg)} /> : null}
|
|
|
|
{tab === 'stats' ? <Stats /> : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|