Приложение для тестирования сотрудников клиники методом один вопрос - до пяти ответов один из которых правильный. Сотрудник должен выбрать правильный вариант ответа

3.8 KiB

Raw Blame History

ШАГ 009 — Спринт 2: Доработки UX после тестирования

Дата: 2026-03-21 Контекст: Мастер-класс по разработке системы тестирования сотрудников клиники.

Запросы

На странице теста видны правильные ответы — зачем тогда проходить тест?

На главной колонка с названием теста стала слишком узкой из-за трёх кнопок действий.

Изменения

1. Разделение страницы теста на два вида

Проблема: /tests/:id показывала зелёные галочки у правильных ответов. Пользователь мог подсмотреть ответы до прохождения теста.

Решение: два отдельных маршрута с разным содержимым.

Маршрут	Для кого	Что показывает
`/tests/:id`	Сотрудник	Вопросы и варианты ответов без отметок
`/tests/:id/edit`	Автор	Все ответы с отметками ✓/✗ + жёлтый баннер «Вид автора»

Кнопка «Редактировать» на странице автора пока задизаблена — активируется в Спринте 4 вместе с авторизацией.

Затронутые файлы:

frontend/src/pages/TestDetail/index.tsx   ← убраны CheckCircleTwoTone / CloseCircleTwoTone
frontend/src/pages/TestEdit/index.tsx     ← новый файл, бывший TestDetail + баннер
frontend/src/App.tsx                      ← добавлен маршрут /tests/:id/edit

2. Выпадающее меню «⋯» в списке тестов

Проблема: Три кнопки («Открыть», «Изменить», «Пройти тест») в одной ячейке сжимали колонку с названием теста.

Решение: Все три действия убраны в Dropdown по кнопке MoreOutlined (⋯). Колонка действий сужена до 60px, колонка с названием занимает всю оставшуюся ширину.

frontend/src/pages/TestList/index.tsx   ← Space + 3 Button → Dropdown с menu.items

Структура меню:

Открыть
Изменить
─────────
Пройти тест

Архитектурное решение для джуниора

Разделение «вид сотрудника» / «вид автора» сделано через два отдельных React-компонента на разных маршрутах, а не через условный рендеринг внутри одного компонента.

Почему: в Спринте 4 эти маршруты будут защищены разными ролями (ProtectedRoute). Если бы логика была в одном компоненте, пришлось бы прятать данные на фронте — это ненадёжно. Два маршрута = два разных запроса = чистое разграничение доступа.

Следующие шаги

Спринт 1: Инфраструктура + Создание тестов
Спринт 2: Прохождение теста + результат
Спринт 3: Трекер результатов
Спринт 4: Авторизация и роли
Спринт 5: Уведомления в MAX

3.8 KiB Raw Blame History