49 lines
7.0 KiB
Markdown
49 lines
7.0 KiB
Markdown
 
|
# Кликабельные строки во всех реестрах UI (изменение 005)
|
||
|
|
|
||
|
|
## Context
|
||
|
|
В журнале аудита строка таблицы целиком кликабельна (`.tr.clickable`, `data-action="jr-open"`, курсор-указатель, подсветка при наведении).
|
||
|
|
В остальных реестрах кликабельно только отдельное значение: на «Префиксах» — сам CIDR (ссылка) у листовых строк и шеврон у родительских.
|
||
|
|
Это неудобно: попадать нужно в узкую цель. Задача — сделать строки кликабельными по единому паттерну журнала во всех реестрах
|
||
|
|
(решения пользователя: родитель → свернуть/развернуть ветку, дочерний (лист) → открыть адреса; распространить на все реестры).
|
||
|
|
|
||
|
|
## Поведение по экранам (`web/app.js`)
|
||
|
|
| Экран | Клик по строке | Уже работающие элементы (сохраняются) |
|
||
|
|
|---|---|---|
|
||
|
|
| Префиксы — лист (нет вложенных) | открыть адреса подсети (`#/prefixes/<id>`) | ссылка-CIDR, меню «⋯» |
|
||
|
|
| Префиксы — родитель (есть вложенные) | свернуть/развернуть ветку | шеврон |
|
||
|
|
| Организации | открыть префиксы организации (выбрать её и перейти на «Префиксы») | ссылки «название» и «число префиксов», меню «⋯» |
|
||
|
|
| Операторы | окно редактирования оператора | ссылка на организацию, меню «⋯» |
|
||
|
|
| Устройства | окно редактирования устройства | ссылка «число IP», меню «⋯» |
|
||
|
|
| Адреса подсети — занятый/резерв/устаревший | окно редактирования адреса | меню «⋯» |
|
||
|
|
| Адреса подсети — «Свободен» | окно «Назначить адрес» с подставленным IP | меню «⋯» |
|
||
|
|
| Журнал | без изменений (уже так) | — |
|
||
|
|
Не входят: таблицы на «Обзоре» (это сводка, не реестры) — при желании отдельной доработкой.
|
||
|
|
|
||
|
|
## Реализация
|
||
|
|
- Строка получает `class="tr hoverable clickable"` + `data-action="<действие>"` + `data-id`/`data-ip` (как `jr-open`). Новые действия переиспользуют существующие
|
||
|
|
обработчики: `pfx-open` (навигация), `toggle` (уже есть), `org-open` (`store.orgId = id; location.hash = "#/prefixes"`), `isp-edit` → `ispDialog`, `dev-edit` → `deviceDialog`,
|
||
|
|
`adr-edit` → `addressDialog(a)`, `adr-assign` → `addressDialog(null, ip)`; данные строки берутся из `S.rows`/`S.page.items` через существующий `rowById`.
|
||
|
|
- **Защита от лишних срабатываний** в едином глобальном обработчике клика (`document.addEventListener("click")`): действие строки не выполняется, если клик
|
||
|
|
пришёл из `a[href]`, `button`, `input`/`label`/`select`/`textarea`, из всплывающего меню `.pop`, при нажатых Ctrl/Cmd/Shift (открытие ссылки в новой вкладке),
|
||
|
|
при выделенном тексте (`getSelection()`), а также если в этот момент было открыто меню (тогда клик лишь закрывает меню). Вложенные элементы с собственным `data-action`
|
||
|
|
(шеврон, «⋯», пункты меню) по-прежнему выигрывают у строки — берётся ближайший `[data-action]`.
|
||
|
|
- Клавиатура: строки с вложенными элементами управления не делаем `role="button"` (вложенные интерактивные элементы — a11y-антипаттерн); доступ с клавиатуры остаётся
|
||
|
|
через ссылку и меню «⋯» в строке. Шеврону добавляем `aria-expanded`.
|
||
|
|
- Стили: `.tr.clickable{cursor:pointer}` и подсветка `.tr.hoverable:hover` уже есть; вёрстка строк, размеры и цвета не меняются (макеты не затрагиваются).
|
||
|
|
|
||
|
|
## Порядок работ
|
||
|
|
0. Скопировать план в `docs/changes/005-clickable-rows/PLAN.md`.
|
||
|
|
1. Строки и действия на 5 экранах + защита в глобальном обработчике.
|
||
|
|
2. Проверка сценарием в браузере (Playwright, как в прошлых доработках) и регрессия вёрстки (сравнение скриншотов со сверкой макетов — без изменений).
|
||
|
|
3. README (строка про поведение), `SUMMARY.md`.
|
||
|
|
|
||
|
|
## Проверка
|
||
|
|
Сценарий в браузере на `http://192.168.5.9:8088`: клик по пустому месту строки — лист «Префиксов» открывает адреса, родитель сворачивает/разворачивает; Организации →
|
||
|
|
префиксы нужной организации; Операторы/Устройства/Адреса → окно редактирования; свободный адрес → «Назначить адрес» с этим IP; клик по «⋯», шеврону, пункту меню, ссылке
|
||
|
|
не вызывает действие строки дважды; Ctrl+клик по ссылке открывает новую вкладку без действия строки; выделение текста мышью не открывает диалог;
|
||
|
|
клик при открытом меню только закрывает его. Автотесты бэкенда (11) остаются зелёными — backend не меняется; новых pytest-тестов не добавляем
|
||
|
|
(правило проекта — минимум тестов, изменение чисто интерфейсное).
|
||
|
|
|
||
|
|
## Допущения (скажите, если не так)
|
||
|
|
- У родительской строки нельзя открыть адреса, назначенные прямо на неё (как и сейчас) — только раскрыть ветку.
|
||
|
|
- Клик по строке организации ведёт в её префиксы (это уже основной сценарий: название и счётчик были ссылками туда), а не в окно редактирования; редактирование — через «⋯».
|