Corp/docs/guides/CALENDAR_TESTING.md
Игорь Надеин 281f0b2bbc feat: современное отображение событий календаря с множественным выбором
Реализовано:

1. Множественный выбор календарей через чекбоксы
   - Заменил <select> на чекбоксы для выбора нескольких календарей
   - События создаются одновременно во всех выбранных календарях
   - При редактировании - обновляется только первый выбранный
   - Цветовые индикаторы для каждого календаря

2. Современный дизайн событий
   - Двухцветная схема: левая граница = цвет календаря, фон = цвет события
   - Полупрозрачный фон события (80%) для лучшей видимости
   - Тени и hover эффекты для объёма
   - Закругленные углы (4px)
   - Плавные анимации (transform + transition)

3. Улучшенное отображение накладывающихся событий
   - dayMaxEvents: автоматически показывать '+N еще'
   - dayMaxEventRows: 4 - максимум 4 строки на день
   - moreLinkClick: 'popover' - красивый popover для остальных
   - eventMaxStack: 3 - до 3 событий в стеке
   - eventOrder: сортировка по началу, длительности, алфавиту

4. Новый CSS файл calendar-improvements.css
   - Современные стили для FullCalendar
   - Улучшенный popover с градиентом
   - Стили для выходных дней (розоватый фон)
   - Hover эффекты на события
   - Анимация fadeInEvent при загрузке
   - Улучшенная читаемость текущего дня
   - Адаптивность для мобильных устройств
   - Кастомные scrollbar для списков

5. Передача цвета календаря в события
   - calendar_color добавляется в extendedProps
   - Используется __calendar из интеграции
   - Отдельная обработка eventColor и calendarColor

6. Визуальные улучшения
   - Текст события: font-weight 500, line-height 1.3
   - Отступы: paddingLeft 6px (с цветом календаря)
   - Тень текста для читаемости на любом фоне
   - Паттерн для ежегодных событий (диагональные полосы)
   - Индикатор текущего дня: синий круг с белым текстом

Результат:
✅ События визуально различимы по календарям (левая граница)
✅ Сохранён индивидуальный цвет события (основной фон)
✅ Множество событий в день отображается компактно (+N еще)
✅ Современный Material Design стиль
✅ Плавные анимации и hover эффекты
✅ Улучшенная читаемость и UX
2026-02-11 12:52:25 +03:00

280 lines
11 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Тестирование интеграции календарей
## Быстрая проверка функциональности
### 1. Запуск сервера
```bash
cd c:/Users/nadeini/Dev/EUSRR/backend
.venv/Scripts/python manage.py runserver
```
Откройте: http://localhost:8000/calendar/
### 2. Проверка списка календарей
**Что проверить**:
- [ ] В левой панели отображаются чекбоксы календарей
- [ ] Присутствуют legacy календари: "Компания", "Личный календарь", отделы
- [ ] Если есть новые календари - они тоже в списке
- [ ] Клик на чекбокс включает/выключает отображение событий
**Ожидаемое поведение**:
- Отключение календаря → события исчезают
- Включение календаря → события появляются
- НЕТ дублирования событий
### 3. Создание нового события
**Шаги**:
1. Кликните на любую дату в календаре
2. Откроется модальное окно "Создать событие"
3. Проверьте селектор "Календарь" внизу формы
**Что проверить**:
- [ ] Селектор содержит:
- "Компания (общие события)"
- "Личный календарь"
- Отделы (если есть)
- ─────────────────
- 📅 Новые календари (если созданы)
- [ ] Заполните название, дату, время
- [ ] Выберите календарь в селекторе
- [ ] Нажмите "Сохранить"
- [ ] Событие появилось в выбранном календаре
**Тест 1: Создание в "Компания"**
```
Название: Общее совещание
Календарь: Компания (общие события)
```
→ Событие видно всем
**Тест 2: Создание в "Личный календарь"**
```
Название: Моя встреча
Календарь: Личный календарь
```
→ Событие видно только текущему пользователю
**Тест 3: Создание в новом календаре**
```
Название: Проектная задача
Календарь: 📅 Мой проект
```
→ Событие создано с calendar_id
### 4. Редактирование события
**Шаги**:
1. Кликните на существующее событие
2. Откроется форма редактирования
3. Проверьте селектор календаря
**Что проверить**:
- [ ] Селектор автоматически установлен на текущий календарь события
- [ ] Можно изменить календарь
- [ ] После сохранения событие переместилось в новый календарь
- [ ] Старый календарь больше не показывает это событие
**Тест: Перемещение события**
```
1. Событие "Совещание" в календаре "Компания"
2. Открыть редактирование
3. Изменить календарь на "Личный календарь"
4. Сохранить
```
→ Событие теперь только в "Личный календарь"
### 5. Проверка фильтрации
**Шаги**:
1. Создайте 3 события в разных календарях:
- "Событие A" → Компания
- "Событие B" → Личный календарь
- "Событие C" → Новый календарь (если есть)
2. Используйте чекбоксы в левой панели:
- Отключите "Компания" → "Событие A" исчезло
- Отключите "Личный" → "Событие B" исчезло
- Включите все → все события видны
**Что проверить**:
- [ ] Каждое событие привязано к одному календарю
- [ ] Нет дублирования (одно событие в двух календарях)
- [ ] Фильтрация работает мгновенно
- [ ] События разных календарей имеют разные цвета
### 6. Управление календарями
**Шаги**:
1. Нажмите кнопку "Управление календарями"
2. Откроется модальное окно со списком календарей
**Что проверить**:
- [ ] Отображаются созданные Calendar записи
- [ ] Можно создать новый календарь
- [ ] Новый календарь сразу появляется в списке слева
- [ ] Новый календарь доступен в селекторе создания события
**Тест: Создание нового календаря**
```
1. "Управление календарями" → "Создать календарь"
2. Название: "Проект X"
3. Цвет: #ff6b6b (красный)
4. Сохранить
```
→ "📅 Проект X" появился в списке и селекторе
### 7. Проверка API запросов
Откройте DevTools (F12) → Network → Fetch/XHR
**При создании события в "Компания"**:
```json
POST /api/v1/calendar/events/
{
"title": "Событие",
"start": "2026-02-12T10:00:00",
"end": "2026-02-12T11:00:00"
// Нет employee_id, department_id, calendar_id
}
```
**При создании в "Личный календарь"**:
```json
POST /api/v1/calendar/events/
{
"title": "Событие",
"start": "2026-02-12T10:00:00",
"end": "2026-02-12T11:00:00",
"employee_id": 1 // ID текущего пользователя
}
```
**При создании в новом календаре**:
```json
POST /api/v1/calendar/events/
{
"title": "Событие",
"start": "2026-02-12T10:00:00",
"end": "2026-02-12T11:00:00",
"calendar_id": 5 // ID Calendar записи
}
```
## Известные ограничения
1. **Legacy календари не редактируются**
- "Компания", "Личный календарь", отделы - системные
- Нельзя изменить их название или цвет
- Это legacy поведение, сохранено для совместимости
2. **Подписка на календари**
- Функция подписки работает только для новых Calendar записей
- Legacy календари всегда видны пользователю
## Что делать, если не работает
### Событие не создается
- Проверьте консоль браузера (F12)
- Проверьте, что выбран календарь в селекторе
- Проверьте, что заполнены обязательные поля (название, дата)
### Селектор пустой
- Проверьте консоль: `window.calendarIntegration.calendars`
- Должен вернуть массив календарей
- Если пусто - проблема в calendarManager.js
### События дублируются
- Откройте DevTools → Network
- Проверьте параметры в GET запросах к `/api/v1/calendar/events/`
- Должны быть разные employee_id/department_id/calendar_id
### NaN ошибки
- Проверьте, что используется последняя версия кода (commit 6bf3cc4)
- Проверьте логи в консоли
- Убедитесь, что `meta[name="user-id"]` существует в HTML
## Тестовые данные
### Создание тестового календаря через Django shell
```bash
.venv/Scripts/python manage.py shell
```
```python
from calendar_app.models import Calendar
from employees.models import Employee
# Получаем текущего пользователя
employee = Employee.objects.get(id=1)
# Создаем тестовый календарь
calendar = Calendar.objects.create(
name="Проект Альфа",
description="Календарь проекта",
owner=employee,
color="#ff6b6b",
is_public=False
)
print(f"Создан календарь: {calendar.id} - {calendar.name}")
```
### SQL запросы для проверки
```sql
-- Все календари пользователя
SELECT id, name, owner_id, color, is_public
FROM calendar_app_calendar
WHERE owner_id = 1;
-- События с calendar_id
SELECT id, title, calendar_id, employee_id, department_id
FROM calendar_app_event
WHERE calendar_id IS NOT NULL;
-- События в личном календаре (legacy)
SELECT id, title, employee_id
FROM calendar_app_event
WHERE employee_id = 1 AND calendar_id IS NULL;
```
## Чеклист финального тестирования
- [ ] Сервер запускается без ошибок
- [ ] Страница `/calendar/` открывается
- [ ] Список календарей отображается
- [ ] Чекбоксы включают/выключают события
- [ ] Клик на дату открывает форму создания
- [ ] Селектор календаря заполнен
- [ ] Создание события в "Компания" работает
- [ ] Создание события в "Личный календарь" работает
- [ ] Создание события в новом календаре работает (если есть)
- [ ] Редактирование события работает
- [ ] Перемещение между календарями работает
- [ ] Нет дублирования событий
- [ ] Нет ошибок в консоли браузера
- [ ] Нет NaN в URL запросах
- [ ] API запросы корректны (проверить через DevTools)
## Отчет о тестировании
После прохождения всех тестов заполните:
**Дата**: ___________
**Тестировщик**: ___________
**Результаты**:
- ✅ / ❌ Создание событий
- ✅ / ❌ Редактирование событий
- ✅ / ❌ Фильтрация календарей
- ✅ / ❌ Управление календарями
- ✅ / ❌ API запросы
**Найденные баги**: ___________
**Комментарии**: ___________