Проблема: настройка 'Подписчики могут редактировать по умолчанию'
не сохранялась при создании/редактировании календаря.
Причина: поле default_can_edit отсутствовало в fields
CalendarWriteSerializer.
Решение: добавлено поле default_can_edit в список полей сериализатора.
Теперь можно включить эту настройку для глобального календаря,
и обычные пользователи смогут создавать события.
- Создана заглушка для calendarEventDragDrop.js с экспортом initCalendarEventDragDrop
- Закомментирован импорт несуществующего database.js в emoji-picker/index.js
- Исправлена ошибка 'does not provide an export named initCalendarEventDragDrop'
- Исправлена ошибка 404 для emoji-picker/database.js
- Для папок события dragover/drop навешиваются только на header
- Дочерние календари больше не вызывают срабатывание на родительской папке
- Папка отдела подсвечивается только при наведении на её header
- Календари внутри папки работают независимо
- Создан модуль calendarEventDragDrop.js с классами DragDropState и CalendarUtils
- Реализовано перетаскивание событий между календарями через модальное окно
- Добавлена кнопка 'Переместить все' для массового перемещения
- Модальное окно отображает источник и цель перемещения
- Поддержка legacy-календарей (company/department/personal)
- Добавлены стили для подсветки drop-target (папки и календари)
- Backend: исправлена обработка null значений в serializer
- Backend: добавлен endpoint list_raw для получения немодерируемых событий
- Использованы стандартные Bootstrap стили для модалов
- Исправлено всплытие событий dragover/drop (stopPropagation)
- Эмодзи иконки для типов календарей (����)
- Toast уведомления об успехе/ошибках перемещения
Проблема:
- Левая граница (корешок) событий была белой
- Не отображался цвет календаря
- border-left устанавливался без цвета в SCSS
Решение:
1. calendarWidget.js - eventDidMount:
- Вернул установку полного border-left через JS
- С цветом календаря: border-left: 4px solid <calendarColor>
- Без цвета календаря: border-left: 3px solid <eventColor>
2. _calendar-events.scss:
- Оставил только padding-left (не конфликтует с JS)
- Добавил комментарии что border-left устанавливается через JS
Результат:
✅ Корешок показывает цвет календаря (4px)
✅ Для legacy календарей - цвет события (3px)
✅ Двухцветная схема работает корректно
✅ SCSS не перезаписывает JS стили
Пример:
- Календарь отдела (красный) + событие (синее) = красный корешок + синий фон
- Legacy календарь + событие (синее) = синий корешок + синий фон
Проблемы:
- Многодневные события неправильно растягивались
- Инлайн-стили JS перезаписывали SCSS правила
- Не было четкой визуализации начала/конца/середины события
Решение:
1. Обновлён eventDidMount в calendarWidget.js:
- Убраны инлайн-стили для border-radius, padding, box-shadow
- Добавлен атрибут data-has-calendar-color для SCSS селекторов
- Упрощена логика - доверяем SCSS стилям
- Определение многодневных событий через info.isStart/isEnd
2. Улучшены SCSS стили в _calendar-events.scss:
- Добавлен width: 100% для растягивания на всю ячейку
- Раздельные border-radius для start/middle/end сегментов
- Улучшены визуальные индикаторы (‹ › с цветом)
- Явные правила для всех комбинаций fc-event-start/end
Результаты:
✅ Многодневные события корректно растягиваются
✅ Четкая визуализация начала (левый радиус) и конца (правый радиус)
✅ Средние дни без закруглений (seamless переход)
✅ Индикаторы продолжения (‹ ›) белого цвета
✅ Совместимость с двухцветной схемой (календарь + событие)
Изменения:
- 2 files changed, 48 insertions(+), 51 deletions(-)
- Компилирован app.css
Проблема:
- В eventDidMount использовалась переменная recurrence без объявления
- Ошибка: ReferenceError: recurrence is not defined at line 1145
Решение:
- Добавлена строка: const recurrence = info.event.extendedProps?.recurrence || null;
- Переменная теперь корректно извлекается из extendedProps события
Результат:
✅ Ошибка исправлена
✅ События рендерятся без ошибок
✅ Ежегодные события корректно помечаются атрибутом data-recurrence
Реализовано:
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
Реализовано:
1. Селектор календаря в форме создания события
- Заменил статический текст 'Календарь: Компания' на <select>
- Показывает legacy календари (Компания, Личный, Отделы)
- Показывает новые Calendar записи из БД
- Разделитель между legacy и новыми календарями
2. Функция populateCalendarSelector()
- Динамическое заполнение селектора при открытии формы
- Использует window.calendarIntegration.calendars
- Фильтрует legacy календари (startsWith('legacy-'))
- Устанавливает значение по умолчанию по state.type
3. Обновлена логика создания/редактирования событий
- Убран старый код с state.type (personal/dept/company)
- Новая логика читает target_calendar из формы:
* 'company' → без доп. параметров (общие события)
* 'personal' → employee_id из meta[name='user-id']
* 'dept-{id}' → department_id
* numeric ID → calendar_id (новые календари)
- Поддержка смешанных ID (string для legacy, int для новых)
- Работает как для POST (создание), так и для PATCH (редактирование)
4. При редактировании события
- Автоматическое определение календаря из data:
* data.calendar_id → numeric ID
* data.employee_id → 'personal'
* data.department_id → 'dept-{id}'
* иначе → 'company'
- Селектор устанавливается в правильное положение
Результат:
✅ События можно создавать в любом календаре (legacy + новые)
✅ События можно редактировать и перемещать между календарями
✅ Сохранение calendar_id в БД для новых календарей
✅ Обратная совместимость с legacy системой (employee_id/department_id)
✅ UI с иконками � для новых календарей
Проблема: employee_id=null приводил к дублированию событий
- События попадали и в 'Компания' (все события)
- И в 'Личный календарь' (employee_id=null тоже возвращал все)
Решение:
- Получаем currentEmployeeId из meta[name='user-id']
- Передаем реальный ID сотрудника в getCalendarEvents
- Добавлена валидация: skip если ID не найден
- Теперь 'Компания' и 'Личный' показывают разные события
Дедупликация: было 26 событий → 13 уникальных
Теперь: 13 компании + реальные личные (без дублей)
Проблема: parseInt('legacy-company') возвращал NaN
Решение:
- Не парсим calendarId при toggle visibility
- Проверяем /^\d+$/ перед parseInt - только для числовых ID
- Добавлена валидация isNaN перед subscribe/unsubscribe
- Legacy календари (строковые ID) работают корректно
- Новые календари (числовые ID) конвертируются в number
Fixes: calendar_id=NaN запросы к API
- Добавлено подробное логирование payload и response при ошибках
- Специальная обработка 400 ошибок с детализацией по полям
- Alert показывает конкретные поля с ошибками валидации
- Помогает диагностировать проблемы типа start_date == end_date для all_day событий
- calendarManager.js: правильное извлечение ID из объектов департаментов
- departments возвращает массив {id, name}, а не просто ID
- добавлена валидация и fallback для department_id
- фильтрация null/undefined из visibleCalendarIds
- добавлено подробное логирование для отладки
- calendarWidgetIntegration.js: убрано переопределение цветов событий
- events сохраняют свой оригинальный цвет
- добавлена только ссылка __calendar для метаданных
Fixes:
- department_id=NaN (неправильный парсинг ID отдела)
- calendar_id=NaN (null в visibleCalendarIds)
- legacy-dept-[object Object] (неправильный toString())
- calendarManager.js: добавлена функция createLegacyCalendars() для создания pseudo-calendar объектов
- loadCalendars() теперь объединяет legacy (Компания, Личный, Отделы) и новые календари в единый массив
- calendarWidgetIntegration.js: обновлена логика fetchEventsForVisibleCalendars для работы с legacy ID
- legacy-company: все события без фильтров
- legacy-personal: события текущего сотрудника (employee_id)
- legacy-dept-{id}: события конкретного отдела (department_id)
- calendar_desktop.html: удален старый dropdown, оставлен только унифицированный список с чекбоксами
- Все календари теперь в одном списке с возможностью выбора через чекбоксы
- Цвета: Компания (красный), Личный (синий), Отделы (зеленый), новые календари (свои цвета)
- CalendarManager no longer updates state when no calendars found
- Shows friendly message 'Events displayed in classic mode'
- Integration stays uninitialized, uses legacy fetchEventsCombined
- This ensures existing events always visible without Calendar records
- Fixed calendar_scripts.html to wait for DOM ready before initialization
- Added retry logic if widget not found on first attempt
- Changed integration fallback: show ALL events when no calendars configured
- Changed behavior: if no calendars selected, show all events (legacy mode)
- This ensures backward compatibility with existing events
User feedback: Integration wasn't initializing on page load, button '+' didn't work.
Solution: Auto-init with retry + always show events (no empty state).
- Removed duplicate modal opening via data-bs-toggle attribute
- Changed to programmatic opening via openForCreate() only
- Added calendar:edit event listener for edit functionality
- Updated button selector from data-bs-target to data-action
Issue: Button had both Bootstrap modal trigger and JS event listener,
causing double initialization and infinite loading state.
Solution: Use only programmatic modal opening through calendarManageModal API.
- Created calendarWidgetIntegration.js as integration layer
- Modified calendarWidget.js to use new calendar filtering system
- Added fallback to legacy mode for backward compatibility
- Updated calendar_scripts.html to initialize integration
- Implemented fetchEventsForVisibleCalendars with calendar_id filtering
- Added event deduplication and color override from calendars
- Exposed window.calendarIntegration for global access
- Added comprehensive logging for debugging
Technical decisions:
- Non-invasive integration via optional chaining
- Callback-based synchronization (onCalendarToggle, onCalendarsChange)
- Parallel event loading with Promise.all()
- Automatic legacy mode when no calendars configured
- Удалена автоматическая инициализация из модуля
- Добавлено детальное логирование для отладки
- Инициализация остается только в employee_detail_scripts.html
- Добавлено поле Employee.username для кэширования LDAP логина
- API endpoint обновлен: поддержка кэша и force_refresh параметра
- Новый дизайн: убран blur, добавлена иконка обновления
- Автоматическая загрузка при инициализации (из кэша или LDAP)
- Визуальная индикация источника данных (cached/fresh)
- Доступно всем пользователям без ограничений
- Использована встроенная система пермишенов DRF вместо ручной проверки
- Добавлен ldap_info в required_perms_by_action с правом view_ldap_info
- Добавлен ldap_info в get_permissions() для применения IsSelfOrStaff
- Удалена избыточная ручная проверка прав внутри метода ldap_info()
- Проверка прав теперь выполняется автоматически через get_object()
- Пользователь может видеть свой LDAP логин (IsSelfOrStaff)
- Админы и пользователи с view_ldap_info могут видеть любые логины
- Добавлено поле с LDAP логином (sAMAccountName) в профиле сотрудника
- Реализован blur-эффект с раскрытием по клику для безопасности
- Создан API endpoint /api/v1/employees/{id}/ldap-info/ для получения LDAP данных
- Добавлен новый пермишен employees.view_ldap_info
- Стили: SCSS компонент _ldap-login.scss с анимациями и состояниями
- JavaScript: класс LdapLoginField с AJAX запросами и обработкой ошибок
- Доступ только для staff или пользователей с правом view_ldap_info
- Данные запрашиваются из Active Directory on-demand (не хранятся в БД)
- Исправлен PollSerializer для создания опросов с опциями
- Добавлено поле read_only_fields для корректной валидации
- Реализована отправка WebSocket уведомлений при создании опроса
- Исправлен импорт serialize_message из communications.serialization
- Добавлен обработчик poll_update в UserConsumer для WebSocket событий
- Исправлен эндпоинт /results/ для возврата user_voted_option_ids
- Добавлено поле voters в PollOptionSerializer для списка проголосовавших
- Реализована инициализация poll виджетов после рендера сообщений
- Добавлено игнорирование poll_update в notification-manager
- Исправлены стили для request list badges (height, word-break, flex)
- Восстановлены стили team-wheel (.wheel-focus, .scroll-arc) из git истории
- Реализовано отображение forwarded message info в messageRendererV2
- Множественные улучшения UI и UX для опросов
Fixes: создание опросов, голосование, отображение результатов, список проголосовавших
Изменения:
- Новый endpoint /api/v1/communications/messages/upload-temp/ для загрузки файлов без создания сообщения
- Поле message в MessageAttachment теперь nullable для временных вложений
- Логика перемещения attachments между сообщениями при редактировании
- Frontend использует upload-temp вместо создания временных сообщений
- Celery задача cleanup_orphaned_attachments для очистки забытых файлов (каждый час)
- Исправлена проблема с WebSocket обновлениями при редактировании
- Удалены debug логи после успешного тестирования
Технические детали:
- communications/models.py: добавлено null=True, blank=True к MessageAttachment.message
- communications/migrations/0022: миграция для изменения поля
- api/v1/communications/viewsets.py: новый action upload_temp() + логика перемещения в update()
- static/js/components/chatComposer.js: использование upload-temp вместо upload
- communications/tasks.py: новая Celery задача для очистки старых orphaned attachments
- eusrr_backend/settings.py: добавлен CELERY_BEAT_SCHEDULE с задачей очистки
Проблема:
- Изображения и видео отображались только как ссылки с иконками
- Нет preview изображений в composer
- Вся инфраструктура существовала (DB поля, CSS, WebSocket), но не была подключена
Реализация:
messageRendererV2.js (_renderAttachment):
- Добавлена проверка file_type === 'image': рендеринг <img class="chat-media chat-media--image">
- Добавлена проверка file_type === 'video': рендеринг <video class="chat-media chat-media--video"> с controls
- Используется thumbnail URL для изображений (если доступен), иначе file_url
- Атрибуты: loading="lazy", playsinline, preload="metadata" для оптимизации
- Файлы (PDF, Word, Audio) рендерятся как ссылки с иконками
chatComposer.js (renderPreview):
- Для изображений: показываем thumbnail через URL.createObjectURL
- Для других файлов: иконка (как раньше)
- Добавлен URL.revokeObjectURL при удалении для предотвращения утечек памяти
- Preview размеры: 60x60px с border-radius и object-fit: cover
CSS (_chat-detail.scss):
- Все стили .chat-media уже были готовы:
* max-width: min(640px, 85vw)
* border-radius: 12px
* object-fit: cover (изображения) / contain (видео)
* Responsive sizing для мобильных
- Стили применяются автоматически при рендеринге
Технические детали:
- WebSocket уже передает: file_type, file_url, thumbnail, mime_type
- Database модель MessageAttachment поддерживает thumbnail поле
- CSS классы .chat-media--image и .chat-media--video определены
- Lazy loading для изображений (атрибут loading="lazy")
- Video с preload="metadata" для быстрой загрузки первого кадра
Тестирование: Требуется загрузка реальных изображений/видео для проверки
Added:
- Autoscroll audit and reports
- Date divider analysis and Telegram comparison
- Bidirectional loading tests and results
- Date group manager and utilities
- Test scripts and HTML test pages
- CSS for chat date groups
- IntersectionObserver utilities
- messageLoader.js → messageLoader.legacy.js
- scrollManager.js → scrollManager.legacy.js
- messageRenderer.js → messageRenderer.legacy.js
Теперь используются V2 версии этих модулей
- Created comprehensive badges-telegram-style.css (240 lines) based on Telegram Web K
- Updated all badge markup in templates (navbar, sidebar, chat_list, chat_detail, chat_title)
- Replaced Bootstrap badge classes with .badge-telegram classes
- Implemented Telegram specifications: 20px height, 10px radius, 11px font, 600 weight
- Added smooth animations: pulse (on update), animate-in (on mount), animate-out (on unmount)
- Updated JavaScript: replaced .d-none with style.display for badge visibility
- Updated 5 JS files: bottom-navbar, notification-manager, chatBadgeHandler, chatBadgeManager, chatListRealtime
- Added pulse animation on badge value increase
- Improved shadows and transitions with cubic-bezier easing
- Added badges-telegram-style.css to base.html for global availability
- Created documentation: TELEGRAM_BADGES_GUIDE.md, TELEGRAM_BADGES_UPDATE.md
Technical details:
- Research: Analyzed 50+ files from Telegram Web K GitHub repository
- Perfect circles: border-radius: 10px (not 50%)
- Spring animation: cubic-bezier(0.175, 0.885, 0.32, 1.275)
- Auto-hide: :empty and [data-count='0'] selectors
- Responsive design + dark theme support
ГЛУБОКИЙ АУДИТ выявил корневые причины прыжков:
НАЙДЕННЫЕ ПРОБЛЕМЫ:
1. chatMarkRead делал свою прокрутку ПОСЛЕ handleInitialMessages
- mark.scrollIntoView() или autoscroll() в requestAnimationFrame
- Конфликтовал с уже установленной прокруткой
2. Дублирование обработчика кнопки 'вниз':
- chatMarkRead.js: btn.addEventListener
- chat-detail-enhanced.js: scrollBtn.addEventListener
- Два обработчика на одну кнопку!
3. Излишняя сложность в scrollToBottom():
- Вызывал markReadApi.autoscroll() вместо прямой установки
- Дополнительный уровень косвенности = источник багов
ИСПРАВЛЕНИЯ:
1. chatMarkRead НЕ скроллит при инициализации:
- Divider создается, но не скроллится к нему
- Прокрутка управляется ТОЛЬКО из handleInitialMessages
- Единая точка ответственности
2. Убрано дублирование кнопки:
- Удален обработчик из chat-detail-enhanced.js
- Остался только в chatMarkRead.js
3. Упрощен scrollToBottom():
- Прямая установка scrollTop вместо вызова markReadApi
- Поддержка instant режима (без анимации)
- Предсказуемое поведение
4. Добавлены комментарии и документация:
- Пояснено почему НЕ скроллим в chatMarkRead
- Описано назначение каждой функции прокрутки
- Создан полный аудит в docs/completed/SCROLL_CONFLICTS_AUDIT.md
АРХИТЕКТУРА ПРОКРУТКИ:
✅ При загрузке: ТОЛЬКО handleInitialMessages
✅ Кнопка вниз: chatMarkRead.autoscroll()
✅ Новые сообщения: ТОЛЬКО если свое ИЛИ уже внизу
✅ Ввод текста: autoscroll() если внизу
РЕЗУЛЬТАТ:
✅ Нет прыжков - единая точка управления прокруткой
✅ Нет конфликтов - каждая функция делает одно
✅ Нет дублирования - один обработчик на событие
✅ Предсказуемость - прямые вызовы вместо косвенных
Файлы:
- userWebSocket.js: упрощен scrollToBottom
- chatMarkRead.js: убрана автопрокрутка при инициализации
- chat-detail-enhanced.js: убран дублирующий обработчик
- docs/completed/SCROLL_CONFLICTS_AUDIT.md: полный аудит
ПРОБЛЕМЫ:
1. Видимые прыжки прокрутки при загрузке чата
2. Принудительный скролл при получении чужих сообщений
3. Дублирование загрузки chat-detail-enhanced.js
РЕШЕНИЯ:
1. Используем requestAnimationFrame для гарантии обновления DOM перед прокруткой
- Скрываем контейнер → рендерим → ждем RAF → скроллим → показываем
- Прокрутка происходит ДО показа контейнера = нет видимых прыжков
2. Убираем агрессивный автоскролл в handleNewMessage:
- Скроллим только если это наше сообщение ИЛИ мы уже внизу
- Предотвращаем прерывание чтения старых сообщений
3. Убираем дублирование chat-detail-enhanced.js в шаблоне:
- Было: загружается ДО chatDetail.js
- Стало: загружается ПОСЛЕ для правильного порядка инициализации
4. Улучшен порядок загрузки скриптов в chat_detail.html:
- emoji-picker (третья сторона)
- chatDetail.js (core инициализация)
- chat-detail-enhanced.js (UI расширения)
РЕЗУЛЬТАТЫ:
✅ Нет видимых прыжков - чат открывается сразу в конце
✅ Не прерывается чтение старых сообщений при приходе новых
✅ Правильный порядок инициализации компонентов
✅ Убрано дублирование загрузки скриптов
Проблема: При открытии чата сначала загружались сообщения,
затем происходила видимая прокрутка вниз - плохой UX
Решение:
1. Скрываем контейнер (visibility: hidden) перед рендерингом
2. Используем DocumentFragment в renderMessages для батчевой вставки
3. Устанавливаем scrollTop ДО показа контейнера
4. Показываем контейнер - пользователь сразу видит конец диалога
Преимущества:
- Нет видимой прокрутки - сразу показывается конец чата
- Меньше reflow (1 вместо N при forEach)
- Быстрее рендеринг больших чатов (все элементы вставляются за раз)
- Лучший UX - нет "прыжков" при загрузке
Изменения:
- userWebSocket.js: добавлено скрытие/показ контейнера, прямая установка scrollTop
- messageRenderer.js: renderMessages использует DocumentFragment вместо множественных insertAdjacentHTML
- Добавлен метод MessageRenderer.createMessageElement() для создания DOM элементов
- Обновлен chatComposer для использования MessageRenderer
- Обновлен chatHistoryLoader для использования MessageRenderer
- Обновлен chatDetail.js для передачи messageRenderer в модули
- Все модули теперь используют единый источник рендеринга
- Сохранена обратная совместимость через fallback на createMessageElement()
Phase 2 of 4: Rendering unification completed
- Удалён chatWebSocket.js (дублировал userWebSocket.js)
- Удалён initialMessagesLoader.js (не используется, загрузка через WS)
- Очищены импорты и закомментированный код в chatDetail.js
- Добавлен план рефакторинга в docs/in-progress/
Загрузка initial messages теперь происходит только через:
- userWebSocket.handleInitialMessages() - начальные сообщения
- chatHistoryLoader - подгрузка истории при скролле
- Добавлен API endpoint для включения/выключения уведомлений чата
- Реализован frontend для управления уведомлениями через меню чата
- Обновлены сигналы для проверки настроек notifications_enabled
- Стандартизирована логика уведомлений для всех типов чатов
- Оптимизированы запросы к БД (1 запрос вместо N для ChatUserSettings)
- Переведены детальные логи с INFO на DEBUG уровень
Файлы:
- backend/api/v1/communications/views.py (новый endpoint)
- backend/api/v1/urls.py (новый маршрут)
- backend/static/js/components/chatMenuActions.js (полная реализация)
- backend/communications/notification_signals.py (проверка настроек + оптимизация)
- backend/notifications/services.py (оптимизация логирования)
