Public Access
feat(hint): targets, automatic hints and formatting
Target fields on the admin hints page. The dashboard shows the four automatic hints after admin hints when their condition is true, using data Core already serves. HintText renders **bold** and safe links (app path or https) as React elements, never HTML, in hints and news. Auto-close without tick hides for this session, X for 7 days, tick + X for good.
This commit is contained in:
lobo committed
1 parent
ae904d946a
commit
8598024bce
14 files changed
+578
-53
No files matched your search
@@ -12,7 +12,8 @@ import {Textarea} from '@/components/ui/textarea';
|
||||
import HintCard from '../components/HintCard.jsx';
|
||||
import {formatDateTime} from '../utils/format.js';
|
||||
import PageContainer from '../components/PageContainer.jsx';
|
||||
import {createHint, endHint, fetchAdminHints} from '../utils/hints.js';
|
||||
import {createHint, endHint, fetchAdminHints, setAutoHintEnabled} from '../utils/hints.js';
|
||||
import {ROLES} from '../utils/admin.js';
|
||||
import {MAX_HINT_LENGTH} from '../utils/limits.js';
|
||||
|
||||
const WEEK_MS = 7 * 24 * 60 * 60 * 1000;
|
||||
@@ -25,7 +26,18 @@ const toLocalInput = (date) => {
|
||||
|
||||
const emptyForm = () => {
|
||||
const now = new Date();
|
||||
return {textEn: '', textDe: '', kind: 'DISMISS', startsAt: toLocalInput(now), endsAt: toLocalInput(new Date(now.getTime() + WEEK_MS))};
|
||||
return {textEn: '', textDe: '', kind: 'DISMISS', startsAt: toLocalInput(now), endsAt: toLocalInput(new Date(now.getTime() + WEEK_MS)),
|
||||
targetNoSteam: false, targetRole: '', targetNewDays: '', targetEmptyLibrary: false};
|
||||
};
|
||||
|
||||
const targetSummary = (hint, t) => {
|
||||
const groups = [
|
||||
hint.targetNoSteam && t('ADMIN_HINTS.TARGET_SUMMARY_NO_STEAM'),
|
||||
hint.targetRole && t('ADMIN_HINTS.TARGET_SUMMARY_ROLE', {role: t(`ROLES.${hint.targetRole}`)}),
|
||||
hint.targetNewDays && t('ADMIN_HINTS.TARGET_SUMMARY_NEW', {count: hint.targetNewDays}),
|
||||
hint.targetEmptyLibrary && t('ADMIN_HINTS.TARGET_SUMMARY_EMPTY_LIBRARY'),
|
||||
].filter(Boolean);
|
||||
return groups.length ? groups.join(' + ') : t('ADMIN_HINTS.TARGET_ALL');
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -34,6 +46,7 @@ const emptyForm = () => {
|
||||
export default function AdminHintsPage() {
|
||||
const {t, i18n} = useTranslation();
|
||||
const [hints, setHints] = useState([]);
|
||||
const [automatic, setAutomatic] = useState([]);
|
||||
const [status, setStatus] = useState('loading');
|
||||
const [form, setForm] = useState(emptyForm);
|
||||
const [busy, setBusy] = useState(false);
|
||||
@@ -50,7 +63,9 @@ export default function AdminHintsPage() {
|
||||
setStatus('error');
|
||||
return;
|
||||
}
|
||||
setHints((await response.json()).results);
|
||||
const data = await response.json();
|
||||
setHints(data.results);
|
||||
setAutomatic(data.automatic ?? []);
|
||||
setStatus('ready');
|
||||
} catch (err) {
|
||||
console.error('Admin hints error:', err);
|
||||
@@ -91,10 +106,15 @@ export default function AdminHintsPage() {
|
||||
kind: form.kind,
|
||||
startsAt: new Date(form.startsAt).toISOString(),
|
||||
endsAt: new Date(form.endsAt).toISOString(),
|
||||
targetNoSteam: form.targetNoSteam,
|
||||
targetRole: form.targetRole || null,
|
||||
targetNewDays: form.targetNewDays ? Number(form.targetNewDays) : null,
|
||||
targetEmptyLibrary: form.targetEmptyLibrary,
|
||||
}), 'ADMIN_HINTS.CREATED', () => setForm(emptyForm()));
|
||||
};
|
||||
|
||||
const change = (field) => (event) => setForm({...form, [field]: event.target.value});
|
||||
const tick = (field) => (event) => setForm({...form, [field]: event.target.checked});
|
||||
const formatDate = (value) => formatDateTime(value, i18n.language, {dateStyle: 'short', timeStyle: 'short'});
|
||||
|
||||
if (status === 'forbidden') {
|
||||
@@ -132,6 +152,35 @@ export default function AdminHintsPage() {
|
||||
</label>
|
||||
))}
|
||||
</fieldset>
|
||||
<fieldset className="space-y-2">
|
||||
<legend className="text-sm font-medium">{t('ADMIN_HINTS.TARGET')}</legend>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" className="accent-primary" checked={form.targetNoSteam}
|
||||
onChange={tick('targetNoSteam')}/>
|
||||
{t('ADMIN_HINTS.TARGET_NO_STEAM')}
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" className="accent-primary" checked={form.targetEmptyLibrary}
|
||||
onChange={tick('targetEmptyLibrary')}/>
|
||||
{t('ADMIN_HINTS.TARGET_EMPTY_LIBRARY')}
|
||||
</label>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="hintTargetRole">{t('ADMIN_HINTS.TARGET_ROLE')}</Label>
|
||||
<select id="hintTargetRole" value={form.targetRole} onChange={change('targetRole')}
|
||||
className="h-9 w-full rounded-md border bg-transparent px-3 text-sm">
|
||||
<option value="">{t('ADMIN_HINTS.TARGET_ROLE_ALL')}</option>
|
||||
{ROLES.map((role) => <option key={role} value={role}>{t(`ROLES.${role}`)}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="hintTargetNewDays">{t('ADMIN_HINTS.TARGET_NEW_DAYS')}</Label>
|
||||
<Input id="hintTargetNewDays" type="number" min={1} max={365} value={form.targetNewDays}
|
||||
onChange={change('targetNewDays')}/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">{t('ADMIN_HINTS.TARGET_HELP')}</p>
|
||||
</fieldset>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="hintStartsAt">{t('ADMIN_HINTS.STARTS_AT')}</Label>
|
||||
@@ -157,6 +206,22 @@ export default function AdminHintsPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('ADMIN_HINTS.AUTO_TITLE')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{automatic.map(({key, enabled}) => (
|
||||
<label key={key} className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" className="accent-primary" checked={enabled} disabled={busy}
|
||||
onChange={(event) => run(() => setAutoHintEnabled(key, event.target.checked),
|
||||
'ADMIN_HINTS.AUTO_SAVED')}/>
|
||||
{t(`ADMIN_HINTS.AUTO_${key}`)}
|
||||
</label>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('ADMIN_HINTS.LIST')}</CardTitle>
|
||||
@@ -176,6 +241,7 @@ export default function AdminHintsPage() {
|
||||
{[t('ADMIN_HINTS.RANGE', {start: formatDate(hint.startsAt), end: formatDate(hint.endsAt)}),
|
||||
t(`ADMIN_HINTS.KIND_${hint.kind}`),
|
||||
t('ADMIN_HINTS.DONE_COUNT', {count: hint.doneCount}),
|
||||
targetSummary(hint, t),
|
||||
].join(' · ')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user