Maxim Dolgolyov
bd3020067b
Add user-detail.js (~370L) and session-detail.js (~180L) section modules that render full pages for #users/:id and #sessions/:id, plus admin.js dispatch and HTML tab-panes. The legacy .user-panel overlay is intentionally still in place — sub-commit 2 will remove it once the deep pages are verified. * admin.js: DEEP_ROUTES map + activateDeepPane(); activate(route, params) signature; initial dispatch respects hash params (so F5 on #users/123 goes straight to the deep page). * admin.html: new tab-panes #tab-user-detail / #tab-session-detail and two script tags. Old #user-panel overlay untouched. * user-detail.js: header (avatar/role/email/meta) + sub-tabs (Обзор/Сессии/Классы/Audit) with URL-synced sub-tab routing (#users/N/sessions etc). Overview: 4 stat cards + per-subject SVG bar chart. Sessions: clickable rows that navigate to #sessions/N. Classes: placeholder empty-state (no per-user classes endpoint). Audit: client-side filter of /admin/audit-log by uid match. Header action buttons (Изменить/Права/История/Бан/Удалить) call existing overlay handlers; window.activeUid is set before opening any modal. * session-detail.js: full header (user/subject/score/stats) + per- question correctness layout reusing the drawer renderer. Delete button uses LS.adminDeleteSession then navigates to #sessions. Clicking the user name opens the user deep page. * users.js: quickOpenUserSessions now navigates to #users/<uid>/sessions instead of the bare #sessions list. Verified node --check on all new/modified JS. baseline npm test still shows pre-existing 3 auth failures unrelated to this change. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
118 lines
7.4 KiB
Markdown
118 lines
7.4 KiB
Markdown
# Phase 6: Deep entity pages
|
||
|
||
**Status:** 🟡 In Progress (sub-commit 1 of 2 done)
|
||
**Parent plan:** [PLAN.md](./PLAN.md)
|
||
**Domain:** frontend
|
||
|
||
## Objective
|
||
|
||
Заменить выезжающую `.user-panel` overlay на полноценную страницу с URL `#users/123`. Аналогично для session: `#sessions/456` = full detail page. Это самая комплексная фаза — она ломает совместимость с старым overlay UI (удаляет код), потому идёт ПОСЛЕ всех остальных.
|
||
|
||
## Tasks
|
||
|
||
- [ ] **User detail page** (`frontend/js/admin/sections/user-detail.js`):
|
||
- Реагирует на route `#users/:id`
|
||
- Layout:
|
||
- **Header**: avatar, name, role badge, email, action buttons (ban/edit/perms/delete), back-link to `#users`
|
||
- **Tabs** (sub-nav в странице):
|
||
- Overview — статистика (тестов, средний %, регистрация, посл вход)
|
||
- Sessions — таблица последних 20 сессий с pagination
|
||
- Classes — список классов где он состоит
|
||
- Audit — журнал действий (если есть audit log с user_id)
|
||
- **Graphs** (опционально, можно отдельным таб'ом):
|
||
- Простой SVG-чарт: успеваемость по неделям
|
||
- Mini-bar chart: avg % по предметам
|
||
- [ ] **Session detail page** (`frontend/js/admin/sections/session-detail.js`):
|
||
- Реагирует на route `#sessions/:id`
|
||
- Layout: header (user, subject, score, дата) + список вопросов/ответов (правильно/нет, текст), back-link
|
||
- [ ] **Router updates** (`frontend/js/admin/router.js` если ещё не поддерживает):
|
||
- `#users/123` → emit { route: 'users', params: ['123'] }
|
||
- `#sessions/456` → emit { route: 'sessions', params: ['456'] }
|
||
- [ ] **Admin.js dispatch**:
|
||
- При route с params → init detail-section вместо list-section
|
||
- При route без params → init list-section (как раньше)
|
||
- [ ] **Удалить overlay-код:**
|
||
- В `frontend/admin.html` удалить `<div class="user-panel" id="user-panel">` блок
|
||
- В `sections/users.js` удалить `openUserPanel`, `closeUserPanel`, `reloadUserPanel`
|
||
- В `sections/users.js` поменять onclick: `onclick="openUserPanel(event,${u.id},'${u.role}')"` → `onclick="AdminRouter.navigate('#users/${u.id}')"`
|
||
- [ ] **Replace** в Phase 5 quick action "Sessions" — теперь `AdminRouter.navigate('#users/${uid}/sessions')`:
|
||
- Парсить sub-tab из route
|
||
- Открывать user-detail page с активным Sessions tab
|
||
- [ ] **Глоссарий routes после фазы:**
|
||
- `#overview` — dashboard (Phase 3)
|
||
- `#users` — list
|
||
- `#users/123` — user detail (overview tab default)
|
||
- `#users/123/sessions` — user detail with sessions sub-tab
|
||
- `#sessions` — list
|
||
- `#sessions/456` — session detail
|
||
- … остальные без params — как было
|
||
|
||
## Files to Modify/Create
|
||
|
||
- `frontend/js/admin/sections/user-detail.js` — новый, ~400-600L
|
||
- `frontend/js/admin/sections/session-detail.js` — новый, ~200-300L
|
||
- `frontend/admin.html` — удалить `.user-panel` overlay, добавить `<div id="tab-user-detail">` и `<div id="tab-session-detail">`, добавить `<script>` теги
|
||
- `frontend/js/admin/sections/users.js` — удалить overlay-функции (~100-150L удаления)
|
||
- `frontend/js/admin/router.js` — улучшения parsing для sub-routes (если нужно)
|
||
- `frontend/js/admin/admin.js` — dispatch logic для routes с params
|
||
|
||
## Acceptance Criteria
|
||
|
||
- Click на user row → URL становится `#users/123`, открывается deep page
|
||
- F5 на `#users/123` восстанавливает страницу
|
||
- Back navigation → возврат на `#users` list
|
||
- Header содержит все action-кнопки (ban, edit, perms, delete)
|
||
- Sub-tabs (overview, sessions, classes, audit) переключаются, URL обновляется
|
||
- Старая `.user-panel` overlay полностью удалена из HTML и JS
|
||
- Click на session id (в любом контексте) → `#sessions/456` → detail page
|
||
- Нет console errors
|
||
- Графики (если делаются) рендерятся корректно
|
||
|
||
## Notes
|
||
|
||
### Backward compat
|
||
|
||
После Phase 6 старые ссылки/onclick типа `openUserPanel(...)` УЖЕ НЕ работают. Это intentional — мы их удалили. Но `onclick="AdminRouter.navigate('#users/N')"` работает везде.
|
||
|
||
Если есть external links на админку user-panel — они продолжат работать как `#users/N` через router.
|
||
|
||
### Графики
|
||
|
||
Можно использовать chart.js (CDN ~50KB), но проще — inline SVG bar/line chart на нескольких десятках строк. У нас уже есть `.perf-bar` для процентов — можно расширить.
|
||
|
||
Не обязательно делать графики в этой фазе — можно сделать MVP без них и добавить чартами позже. В acceptance criteria графики помечены опционально.
|
||
|
||
### Audit log
|
||
|
||
Если в БД есть таблица `audit_log` с `user_id` — sub-tab Audit показывает её. Если нет — sub-tab скрывается или показывает empty state "Audit logging не активирован".
|
||
|
||
### Session detail
|
||
|
||
Сейчас session detail открывается через `adminGetSessionDetail` → возвращает массив answers. Используем тот же endpoint, рендерим в полноценную страницу вместо modal.
|
||
|
||
### Удаление overlay-кода (опасный шаг)
|
||
|
||
Делать в КОНЦЕ фазы, после того как deep page работает. Сначала добавить deep page, протестировать, потом удалить overlay. Можно даже сделать отдельным коммитом ("remove overlay").
|
||
|
||
### Что НЕ делать
|
||
|
||
- Не делать realtime updates (Phase 7+)
|
||
- Не делать collaborative cursors
|
||
- Не оптимизировать графики до production-grade (chart.js or similar OK)
|
||
|
||
## Review Checklist
|
||
|
||
- [ ] Deep pages работают: F5, back/forward
|
||
- [ ] Sub-tabs URL-обновляемы
|
||
- [ ] Old overlay code fully removed
|
||
- [ ] No regressions: ban/edit/delete user работают из deep page
|
||
- [ ] Mobile-friendly: tabs scrollable, layout не ломается
|
||
- [ ] Build passes
|
||
- [ ] **Final smoke test:** пройти полный сценарий — открыть админку, найти пользователя через Cmd+K, перейти на deep page, выдать монеты, посмотреть сессии, забанить, разбанить, вернуться в overview
|
||
|
||
## Handoff to Next Phase
|
||
|
||
<!-- Это финальная фаза. Implementer записывает: что ещё не сделано,
|
||
какие follow-up задачи стоит зафиксировать (графики, realtime, мобильная версия).
|
||
Эти заметки помогут final-reviewer и при подготовке merge-summary. -->
|