Corp/docs/completed/CALENDAR_MODAL_REDESIGN.md

Редизайн модала создания события календаря

Дата: 2024 Статус: ✅ Завершено

Проблема

Старый модал создания события был неудобным:

• ❌ Слишком много полей сразу (152 строки HTML)
• ❌ Сложная форма для простого действия
• ❌ Нет прогрессивного раскрытия (progressive disclosure)
• ❌ Множественные чекбоксы для выбора календарей
• ❌ Не соответствует современным паттернам UX (Google Calendar, Notion, Outlook)

Решение

Создан современный модал с прогрессивным раскрытием:

✅ Быстрый режим (3 поля)

1. Название - крупное поле без лейбла, плейсхолдер "Добавьте название"
2. Дата/время - компактный ряд с иконкой часов + чекбокс "Весь день"
3. Календарь - dropdown с иконками (вместо множественных чекбоксов)

✅ Расширенный режим (кнопка "Больше опций")

• Описание (textarea)
• Место (с иконкой геолокации)
• Повторение (упрощенный выбор: не повторяется, ежедневно, еженедельно, ежемесячно, ежегодно)
• Интервал повторения
• Дни недели (только для weekly)
• Окончание повторения (до даты / после N раз)
• Цветовая палитра (8 свотчей + color picker)

Изменения

1. HTML Template (calendar_modal_create.html)

Было: 152 строки, все поля видны, чекбоксы календарей Стало: Компактный модал с collapse, dropdown календарей

<!-- Основные поля -->
<input type="text" placeholder="Добавьте название" required autofocus>
<datetime-local для start/end с иконкой часов>
<select для выбора календаря с optgroups>

<!-- Кнопка раскрытия -->
<button data-bs-toggle="collapse" data-bs-target="#moreOptions">
  <i class="bi bi-chevron-down"></i>
  <span>Больше опций</span>
</button>

<!-- Дополнительные опции внутри collapse -->
<div class="collapse" id="moreOptions">
  <textarea для описания>
  <input для места>
  <select для повторения>
  <weekdays checkboxes (только для weekly)>
  <recurrence end (дата/счетчик)>
  <color palette>
</div>

Ключевые улучшения HTML:

• Border-0 для большого поля заголовка (чистый дизайн)
• Иконки Bootstrap Icons рядом с каждым полем
• Flexbox layout для компактности
• Btn-group для дней недели (вместо стандартных чекбоксов)
• Color swatches с hover эффектом

2. JavaScript (calendarWidget.js)

А) Заменил populateCalendarCheckboxes() → populateCalendarSelect()

Было: Генерация чекбоксов для множественного выбора Стало: Генерация опций в dropdown с иконками

function populateCalendarSelect() {
  const select = document.getElementById("targetCalendarSelect");

  // Иконки для типов календарей
  📅 Компания (общие события)
  👤 Личный календарь
  🏢 dept-X календари
  🗓️ Настраиваемые календари (в optgroup)

  // Первый legacy календарь выбран по умолчанию
  opt.selected = index === 0;
}

Б) Упростил обработку формы

Было: selectedCalendars = [] + checkboxes.forEach() + Promise.all() для создания во всех Стало: const targetCalendar = selectEl?.value + одно событие

// Получаем выбранный календарь из dropdown
const selectEl = document.querySelector('select[name="target_calendar"]');
const targetCalendar = selectEl?.value;

// Используем утилиту для определения payload
const eventPayload = resolveEventPayload(targetCalendar, payload);

if (isEdit) {
  await fetchJSON(url, { method: "PATCH", body: eventPayload });
} else {
  await fetchJSON(API_EVENTS, { method: "POST", body: eventPayload });
}

В) Обновил syncByRecurrence()

Было: Только показ/скрытие weeklyBlock Стало: Управление видимостью weeklyBlock + recurrenceEndBlock + отключение интервала

function syncByRecurrence() {
  const r = recurrenceSelect?.value || "one_time";

  // Weekly block
  if (r === "weekly") weeklyBlock?.classList.remove("d-none");
  else weeklyBlock?.classList.add("d-none");

  // Recurrence end block (until/count)
  const recurrenceEndBlock = document.getElementById("recurrenceEndBlock");
  if (r !== "one_time") {
    recurrenceEndBlock.style.display = "block";
    recurrenceInterval.disabled = false;
  } else {
    recurrenceEndBlock.style.display = "none";
    recurrenceInterval.value = "1";
    recurrenceInterval.disabled = true;
  }
}

Г) Добавил обработчик кнопки "Больше опций"

// Меняем текст кнопки при раскрытии/сворачивании
moreOptionsCollapse.addEventListener('show.bs.collapse', () => {
  moreOptionsBtn.querySelector('span').textContent = 'Меньше опций';
});
moreOptionsCollapse.addEventListener('hide.bs.collapse', () => {
  moreOptionsBtn.querySelector('span').textContent = 'Больше опций';
});

3. CSS (inline в template)

/* Минималистичный дизайн */
#eventCreateModal .modal-body {
  padding: 1rem 1.5rem;
}

/* Убираем box-shadow при фокусе, только цвет бордера */
#eventCreateModal .form-control:focus {
  box-shadow: none;
  border-color: #0d6efd;
}

/* Красивые свотчи цветов */
#eventCreateModal .color-swatch {
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  transition: all 0.2s;
}

#eventCreateModal .color-swatch:hover {
  border-color: #000;
  transform: scale(1.1);
}

/* Анимация шеврона */
#eventCreateModal [data-bs-toggle="collapse"]:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
  transition: transform 0.3s;
}

Преимущества нового модала

UX

✅ Быстрое создание - 3 поля для простых событий (название, время, календарь) ✅ Прогрессивное раскрытие - сложные опции скрыты за "Больше опций" ✅ Чистый дизайн - минимум визуального шума, иконки вместо лейблов ✅ Один календарь - проще выбрать, чем отмечать чекбоксы ✅ Быстрая отмена - кнопка "Отмена" в footer для быстрого закрытия

UI

✅ Компактность - меньше вертикального скролла ✅ Группировка - логические блоки с иконками ✅ Визуальная иерархия - важные поля крупнее ✅ Анимации - плавное раскрытие, поворот шеврона, hover свотчей

Backend

✅ Проще логика - один календарь вместо массива ✅ Меньше запросов - не нужен Promise.all для создания ✅ Чище код - меньше циклов и проверок

Сравнение с популярными календарями

Функция	Google Calendar	Notion	Outlook	Наш модал
Быстрый режим	✅ 3 поля	✅ 2 поля	✅ 4 поля	✅ 3 поля
Progressive disclosure	✅	✅	⚠️	✅
Иконки у полей	✅	⚠️	✅	✅
Inline редактирование	✅	✅	❌	✅
Color picker	✅	✅	❌	✅
Один календарь	✅	✅	✅	✅

Тестирование

Сценарий 1: Быстрое создание события

1. Открыть модал
2. Ввести название: "Встреча"
3. Выбрать дату/время
4. Календарь выбран по умолчанию (Компания)
5. Нажать "Сохранить" Результат: Событие создано за 10 секунд ✅

Сценарий 2: Сложное повторяющееся событие

1. Открыть модал
2. Ввести название: "Еженедельная планерка"
3. Выбрать дату/время: Понедельник 10:00
4. Нажать "Больше опций"
5. Повторение: Еженедельно
6. Выбрать дни: Пн, Ср, Пт
7. До даты: 31.12.2024
8. Цвет: Синий
9. Нажать "Сохранить" Результат: Серия событий создана ✅

Сценарий 3: Редактирование существующего события

1. Кликнуть на событие в календаре
2. Открылся модал редактирования
3. Dropdown показывает текущий календарь
4. Поля заполнены данными события
5. Изменить название, сохранить Результат: Событие обновлено ✅

Проблемы и решения

Проблема 1: Лишняя закрывающая скобка

Ошибка: Ожидалось объявление или оператор на строке 775 Решение: Удалил дублирующую } после select.value = targetValue;

Проблема 2: Promise.all для одного события

Ошибка: createPromises is not defined Решение: Убрал Promise.all() и map() - теперь создается только одно событие

Проблема 3: Множественные вызовы populateCalendarCheckboxes

Ошибка: Multiple matches found for the text to replace Решение: Заменил оба вызова по отдельности с контекстом

Файлы изменены

1. backend/templates/includes/components/calendar_modal_create.html - редизайн модала
2. backend/static/js/components/calendarWidget.js:
   • populateCalendarCheckboxes() → populateCalendarSelect()
   • Обработка формы (убрал Promise.all)
   • syncByRecurrence() - управление recurrenceEndBlock
   • Обработчик кнопки "Больше опций"

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

• Протестировать создание событий на реальном сервере
• Проверить работу dropdown с 4+ календарями
• Добавить автосохранение черновиков (будущее)
• Добавить quick actions (Завтра в 10:00, Через неделю, и т.д.)

Ссылки

• Google Calendar UX patterns
• Notion Calendar design
• Bootstrap 5 Collapse
• Progressive Disclosure in UX