feat(admin): phase 5 — per-row quick actions for users + sessions

Hover-only action buttons (right-aligned, opacity transition, hidden on mobile).

- users.js: 4 actions (ban/unban, award coins, sessions, delete) — replaces `>` glyph cell, falls back to glyph for non-admin / self

- sessions.js: 2 actions (view, delete)

- DELETE /api/admin/sessions/:id (NEW): transactional (assignment_sessions=NULL, user_answers, session_questions, test_sessions), audit-logged, admin-only

- event.stopPropagation defence-in-depth (each button + parent .row-actions)

- LS.confirm for destructive ops; LS.modal for award-coins amount/reason

- CSS injected once via #row-actions-style id-dedup (same content in both sections)

Existing user-panel overlay + session toggle-drawer flows untouched (Phase 6 removes overlay).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-16 23:53:19 +03:00
parent f562fe4a71
commit 69113ab35e
8 changed files with 286 additions and 44 deletions
+54
View File
@@ -7,10 +7,40 @@
let allSessions = [];
let openDrawerId = null;
/* SVG icons (Lucide-style) — kept local to mirror users.js without coupling */
const SESS_ICONS = {
eye: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>',
trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>',
};
/* Inject .row-actions / .row-action-btn styles only if users.js hasn't (sessions can render first). */
function ensureRowActionsStyles() {
if (document.getElementById('row-actions-style')) return;
const s = document.createElement('style');
s.id = 'row-actions-style';
s.textContent = `
.row-actions { opacity: 0; transition: opacity .15s ease; display: inline-flex; gap: 4px; vertical-align: middle; }
tr:hover .row-actions, .sess-tl-item:hover .row-actions { opacity: 1; }
tr.selected .row-actions, .sess-tl-item.open .row-actions { opacity: 1; }
.row-action-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); transition: background .12s ease, border-color .12s ease, color .12s ease; padding: 0; }
.row-action-btn:hover { background: rgba(155,93,229,.08); border-color: var(--violet); color: var(--violet); }
.row-action-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.row-action-btn.danger:hover { background: rgba(239,68,68,.08); border-color: var(--red, #EF4444); color: var(--red, #EF4444); }
.row-action-btn svg { width: 14px; height: 14px; pointer-events: none; }
.row-action-btn:disabled { opacity: .5; cursor: wait; }
.row-actions-cell { text-align: right; white-space: nowrap; padding-right: 12px; }
@media (max-width: 768px) {
.row-actions { display: none; }
}
`;
document.head.appendChild(s);
}
async function load() {
const subject = document.getElementById('t-subject').value;
document.getElementById('t-body').innerHTML = '<div class="spinner"></div>';
openDrawerId = null;
ensureRowActionsStyles();
try {
allSessions = await LS.adminGetSessions({ subject: subject || undefined });
renderSessions();
@@ -68,6 +98,12 @@
</div>
<div class="sess-tl-score">${s.score??'—'} / ${s.total}</div>
<div class="sess-tl-time">${fmtTime(s.duration_sec)}</div>
<div class="row-actions" onclick="event.stopPropagation()">
<button type="button" class="row-action-btn" title="Открыть детали"
onclick="event.stopPropagation();toggleDrawer(${s.id})">${SESS_ICONS.eye}</button>
<button type="button" class="row-action-btn danger" title="Удалить сессию"
onclick="event.stopPropagation();quickDeleteSession(${s.id},this)">${SESS_ICONS.trash}</button>
</div>
</div>
<div class="sess-tl-drawer" id="tdrawer-${s.id}">
<div class="sess-drawer" id="drawer-${s.id}">
@@ -146,10 +182,28 @@
if (window.lucide) lucide.createIcons();
}
async function quickDeleteSession(id, btn) {
if (!await LS.confirm(
'Удалить эту сессию? Все ответы и связанные данные будут удалены.\nЭто действие нельзя отменить.',
{ title: 'Удалить сессию', confirmText: 'Удалить' }
)) return;
btn.disabled = true;
try {
await LS.adminDeleteSession(id);
LS.toast('Сессия удалена', 'success');
// Refresh from server — keeps grouped layout consistent.
await load();
} catch (e) {
LS.toast('Ошибка: ' + e.message, 'error');
btn.disabled = false;
}
}
// Expose handlers
window.loadSessions = load;
window.renderSessions = renderSessions;
window.toggleDrawer = toggleDrawer;
window.quickDeleteSession = quickDeleteSession;
window.AdminSections = window.AdminSections || {};
window.AdminSections.sessions = {