Реализовано:
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 с задачей очистки
Проблема:
- У медиафайлов были большие пустые поля сверху и снизу
- Причины: padding/margin от .attachment-item и .bubble .attachment-item a
- inline стили конфликтовали с CSS
Решение:
CSS (_chat-detail.scss):
- Добавлен модификатор .attachment-item--media для медиа-контейнеров
- .attachment-item--media имеет margin-bottom: 0 (вместо 8px)
- Вложенные <a> в медиа-контейнерах: padding: 0, line-height: 0
- .chat-media: display: block (было inline-block), vertical-align: top
- Селектор для файлов: .attachment-item:not(.attachment-item--media)
JavaScript (messageRendererV2.js):
- Добавлен класс attachment-item--media к изображениям и видео
- Убраны inline стили (style="display: block; ...")
- Чистая разметка без конфликтов
Результат: медиафайлы отображаются плотно без пустых полей
Проблема:
- Изображения и видео отображались только как ссылки с иконками
- Нет 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" для быстрой загрузки первого кадра
Тестирование: Требуется загрузка реальных изображений/видео для проверки
Проблема:
- Аватары деформировались из-за object-fit на контейнере
- Аватары выравнивались по верху сообщения вместо низа
- Неконсистентная HTML структура: <img class="mini-ava"> vs <div class="mini-ava"><i></i></div>
Решение:
SCSS (_common.scss):
- object-fit: cover перемещен с контейнера на вложенный img
- Добавлен display: block для img элементов
SCSS (_chat-detail.scss):
- Добавлен align-items: flex-end к .d-flex.msg для выравнивания по низу
- .mini-ava рефакторинг: display: flex (было grid), border-radius: 50% (было 9999px)
- Добавлен background и border для контейнера
- Добавлен font-size: 20px для fallback иконки
- object-fit остается только на img тегах
JavaScript (messageRendererV2.js):
- Всегда создавать <div class="mini-ava"> как контейнер
- Вложенный <img> или <i class="bi bi-person-circle"> внутри
- Устранена несогласованность разметки
Рефакторинг архитектуры SCSS (бонус):
- Создан Design System: abstracts/_variables.scss (200+ токенов)
- Создано abstracts/_mixins.scss (40+ миксинов)
- Реорганизована файловая структура: layout/, components/, components/chat/
- Централизованы стили аватаров в _common.scss
- Устранены дубликаты (avatar определялся в 3 файлах)
- Применены design tokens к navbar, page-header
- Создана документация: SCSS_NAMING_CONVENTIONS.md
- Удалено 9 дублирующихся CSS файлов
Компиляция: 280KB, 0 ошибок, production ready
Two types of bottom:
1. Historical bottom (hasMoreAfter=true):
- Button ALWAYS visible (even at scroll bottom)
- Click → loads latest 50 messages to present time
- Renders and scrolls to bottom
2. Present bottom (hasMoreAfter=false):
- Button hidden when isNearBottom()
- Click → smart scroll (to unread or bottom)
Changes:
- _setupSmartButtonVisibility() monitors hasMoreAfter
- _handleScrollButtonClick() loads history if hasMoreAfter
- Added public loadLatest() method
- Emits 'chat:messagesLoaded' event for UI updates
Result:
- Historical view: button always shows, loads to present
- Present view: button hides at bottom, smart unread scroll
- No more stuck in history without way to present
Implements Telegram-like behavior for new messages:
1. Smart Auto-scroll (WS messages):
✅ User at bottom + present time → auto-scroll to new message
✅ User NOT at bottom + present time → show unread badge
❌ Historical view (hasMoreAfter=true) → no action
2. Smart Scroll Button (#scrollBtn):
- Shows unread badge when new messages arrive
- Click behavior:
* Has unread + lastReadId → scroll to first unread
* No unread → scroll to bottom
- Auto-hides badge when user scrolls to bottom
3. Badge Styling:
- Red badge with count on top-right of button
- Pulse animation on appearance
- Button subtle pulse when has unread
Key Logic:
- Only auto-scroll when hasMoreAfter=false (present time)
- Historical bottom (hasMoreAfter=true) doesn't trigger auto-scroll
- Badge resets on: manual scroll to bottom, button click
- Respects user's scroll position unless at bottom
Added:
- Test chat API script
- Date group CSS and JS utilities
- IntersectionObserver modules
- Bidirectional loading test files
- Autoscroll testing checklist
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
Problem: After removing autoscroll, last read message wasn't visible on initial load
Solution:
- ✨ NEW: _positionToMessage() - instant viewport positioning WITHOUT scroll animation
- Sets scrollTop BEFORE user sees chat (no visible scrolling)
- Centers last read message with sticky header offset (96px)
- Falls back to bottom position for new chats
Difference:
- ❌ Old: render → scrollIntoView() → visible scroll animation
- ✅ New: render → scrollTop = X → instant positioning
Result:
- Chat opens IMMEDIATELY showing last read message
- NO visible scrolling or animation
- Telegram-like behavior: position is set, not scrolled to
- Natural user experience
BREAKTHROUGH: Discovered append doesn't need autoscroll!
Changes:
- ✅ KEPT: scrollTop correction after prepend (physics, not autoscroll)
Prevents infinite history loading by compensating scrollHeight growth
- ❌ REMOVED: scrollToBottom() - now empty stub
- ❌ REMOVED: scrollToMessage() - now empty stub
- ❌ REMOVED: Initial scroll on chat open
- ❌ REMOVED: Scroll after loadAround
Philosophy shift:
- Old: We control user's scroll position
- New: IntersectionObserver + physics = natural behavior
Results:
- Newer messages load perfectly WITHOUT autoscroll
- Older messages need ONLY physics correction
- User controls their own scroll position
- Natural infinite scroll experience
ПРОБЛЕМЫ:
- chatDetailV2.js не передавал lastReadTimestamp в config
- метод _loadAround не имел return statement
- scrollIntoView скроллил родительские контейнеры
ИСПРАВЛЕНИЯ:
✅ Добавлен lastReadTimestamp в readConfig() chatDetailV2.js
✅ Добавлена передача lastReadTimestamp в ChatControllerV2
✅ Исправлен _loadAround - добавлен return loadResult
✅ Заменен scrollIntoView на ручной расчет scrollTop в _scrollToMessage
✅ Добавлено подробное логирование для отладки
РЕЗУЛЬТАТ:
- Чат загружается вокруг последнего прочитанного (16 сообщений вместо 30)
- Скролл к правильной позиции
- Header не прячется под navbar
- IntersectionObserver не срабатывает при инициализации
- Прямой импорт ChatControllerV2 без промежуточных слоев
- Убраны deprecated обертки (window.messageRenderer, window.chatHistoryLoader)
- Меньше кода: 231 vs 264 строки
- Более явная архитектура
- Для тестирования работы в production
- Проблема: lastReadMessageId часто равен 0/null
- Решение: используем lastReadTimestamp (API поддерживает оба формата)
- Добавлен this.lastReadTimestamp в ChatControllerV2
- Передаем оба параметра из chatDetail.js
- anchorValue = lastReadMessageId || lastReadTimestamp
- Исправлена поврежденная структура в chatControllerV2.js
- Логируем сырое значение из data-last-read-message-id
- Логируем решение загрузки (around vs latest)
- Поможет понять почему скролит в низ вместо последнего прочитанного
- проблема: Observer срабатывал сразу после setup даже с проверкой isNearBottom
- isNearBottom() возвращает false когда scrollTop=0 (пользователь вверху)
- решение: игнорируем события Observer в течение 500ms после init
- флаг _isInitializing снимается через setTimeout
- это гарантирует что автозагрузка не произойдет при первом рендере
- проблема: Observer срабатывал сразу после init когда scrollTop=0
- первое сообщение было видимо → автоматическая загрузка истории
- решение: не загружаем историю если пользователь внизу (isNearBottom)
- это предотвращает ложное срабатывание при инициализации
- scrollTo() НЕ работает при первичной загрузке (scrollTop остается 0)
- используется прямое присвоение scrollTop как в legacy коде
- тройной RAF для надежности
- это должно исправить проблему с автозагрузкой истории
- scrollToBottom: использует scrollTop (мгновенно) вместо scrollTo smooth
- scrollToMessage: дефолт behavior изменен с 'smooth' на 'auto'
- это исправляет проблему с незавершенным плавным скроллом при инициализации
- messageLoader.js → messageLoader.legacy.js
- scrollManager.js → scrollManager.legacy.js
- messageRenderer.js → messageRenderer.legacy.js
Теперь используются V2 версии этих модулей
- ScrollManagerV2: использует prepend + height difference вместо полного ре-рендера
- MessageLoaderV2: фильтрует новые сообщения, возвращает только их
- MessageStoreV2: silent mode для загрузки истории (без событий)
- MessageRendererV2: детальное логирование для диагностики
Проблема: Store emit'ил события → appendMessage добавлял в конец → prependMessages пропускал дубликаты
Решение: silent mode отключает события → отрисовка только через prepend → сообщения в начало
