Corp/backend/static/js/components/calendarManageModal.js

/**
 * @fileoverview Calendar Manage Modal - модальное окно создания/редактирования календаря
 * @module components/calendarManageModal
 */

import { createCalendar, updateCalendar, deleteCalendar } from '../api/calendarsApi.js';
import { getMyDepartments } from '../api/departmentsApi.js';

/**
 * Инициализация модального окна управления календарём
 * @param {Object} options - Параметры
 * @param {Function} options.onSuccess - Callback при успешном сохранении/удалении
 * @returns {Object} API модального окна
 */
export function initCalendarManageModal(options = {}) {
  const { onSuccess = () => {} } = options;

  const modal = document.getElementById('calendarManageModal');
  if (!modal) {
    console.warn('[CalendarManageModal] Modal element not found');
    return null;
  }

  const bsModal = new bootstrap.Modal(modal);
  
  // Elements
  const form = document.getElementById('calendarManageForm');
  const titleEl = document.getElementById('calendarManageModalTitle');
  const calendarIdInput = document.getElementById('calendarId');
  const titleInput = document.getElementById('calendarTitle');
  const descInput = document.getElementById('calendarDescription');
  const colorInput = document.getElementById('calendarColor');
  const colorTextInput = document.getElementById('calendarColorText');
  const typeInputs = document.querySelectorAll('input[name="calendar_type"]');
  const deptSelect = document.getElementById('calendarDepartment');
  const deptSelectWrapper = document.getElementById('calendarDepartmentSelect');
  const autoSubscribeDeptWrapper = document.getElementById('calendarAutoSubscribeDeptWrapper');
  const saveBtn = document.getElementById('calendarSaveBtn');
  const deleteBtn = document.getElementById('calendarDeleteBtn');
  const errorEl = document.getElementById('calendarManageError');

  let currentCalendar = null;

  /**
   * Открыть модальное окно для создания календаря
   */
  function openForCreate() {
    currentCalendar = null;
    titleEl.textContent = 'Создать календарь';
    deleteBtn.classList.add('d-none');
    resetForm();
    bsModal.show();
  }

  /**
   * Открыть модальное окно для редактирования календаря
   * @param {Object} calendar - Данные календаря
   */
  function openForEdit(calendar) {
    currentCalendar = calendar;
    titleEl.textContent = 'Редактировать календарь';
    deleteBtn.classList.remove('d-none');
    
    // Заполнить форму
    calendarIdInput.value = calendar.id;
    titleInput.value = calendar.title;
    descInput.value = calendar.description || '';
    colorInput.value = calendar.color || '#0d6efd';
    colorTextInput.value = calendar.color || '#0d6efd';
    
    // Определить тип
    let type = 'personal';
    if (calendar.is_global) {
      type = 'public';
    } else if (calendar.is_department) {
      type = 'department';
    }
    
    typeInputs.forEach(input => {
      input.checked = input.value === type;
    });
    
    // Если отдел, выбрать его
    if (calendar.owner_department) {
      deptSelect.value = calendar.owner_department;
    }
    
    // Настройки
    document.getElementById('calendarAutoSubscribeNewUsers').checked = 
      calendar.auto_subscribe_new_users || false;
    document.getElementById('calendarAutoSubscribeDept').checked = 
      calendar.auto_subscribe_department_members || false;
    
    updateTypeVisibility();
    bsModal.show();
  }

  /**
   * Сбросить форму
   */
  function resetForm() {
    form.reset();
    calendarIdInput.value = '';
    colorInput.value = '#0d6efd';
    colorTextInput.value = '#0d6efd';
    errorEl.classList.add('d-none');
    updateTypeVisibility();
  }

  /**
   * Обновить видимость полей в зависимости от типа
   */
  function updateTypeVisibility() {
    const selectedType = document.querySelector('input[name="calendar_type"]:checked')?.value;
    
    if (selectedType === 'department') {
      deptSelectWrapper.classList.remove('d-none');
      autoSubscribeDeptWrapper.classList.remove('d-none');
    } else {
      deptSelectWrapper.classList.add('d-none');
      autoSubscribeDeptWrapper.classList.add('d-none');
    }
  }

  /**
   * Загрузить список отделов
   */
  async function loadDepartments() {
    try {
      const departments = await getMyDepartments();
      
      // Заполнить select
      deptSelect.innerHTML = '<option value="">Выберите отдел...</option>' +
        departments.map(dept => 
          `<option value="${dept.id}">${dept.name}</option>`
        ).join('');
        
    } catch (error) {
      console.error('[CalendarManageModal] Failed to load departments:', error);
    }
  }

  /**
   * Собрать данные формы
   * @returns {Object}
   */
  function getFormData() {
    const data = {
      title: titleInput.value.trim(),
      description: descInput.value.trim(),
      color: colorInput.value,
      auto_subscribe_new_users: document.getElementById('calendarAutoSubscribeNewUsers').checked,
      auto_subscribe_department_members: document.getElementById('calendarAutoSubscribeDept').checked
    };
    
    const type = document.querySelector('input[name="calendar_type"]:checked')?.value;
    
    if (type === 'personal') {
      data.visibility = 'private';
      // owner_user будет установлен автоматически на backend
    } else if (type === 'public') {
      data.visibility = 'public';
    } else if (type === 'department') {
      data.visibility = 'department';
      data.owner_department = parseInt(deptSelect.value);
      
      if (!data.owner_department) {
        throw new Error('Выберите отдел');
      }
    }
    
    return data;
  }

  /**
   * Сохранить календарь
   */
  async function save() {
    try {
      errorEl.classList.add('d-none');
      saveBtn.disabled = true;
      
      const data = getFormData();
      
      if (currentCalendar) {
        // Обновление
        await updateCalendar(currentCalendar.id, data);
      } else {
        // Создание
        await createCalendar(data);
      }
      
      bsModal.hide();
      onSuccess();
      
    } catch (error) {
      console.error('[CalendarManageModal] Save failed:', error);
      errorEl.textContent = error.message || 'Не удалось сохранить календарь';
      errorEl.classList.remove('d-none');
    } finally {
      saveBtn.disabled = false;
    }
  }

  /**
   * Удалить календарь
   */
  async function remove() {
    if (!currentCalendar) return;
    
    if (!confirm(`Удалить календарь "${currentCalendar.title}"?\n\nВсе события этого календаря будут удалены.`)) {
      return;
    }
    
    try {
      deleteBtn.disabled = true;
      await deleteCalendar(currentCalendar.id);
      bsModal.hide();
      onSuccess();
    } catch (error) {
      console.error('[CalendarManageModal] Delete failed:', error);
      errorEl.textContent = error.message || 'Не удалось удалить календарь';
      errorEl.classList.remove('d-none');
    } finally {
      deleteBtn.disabled = false;
    }
  }

  // Event listeners
  
  // Синхронизация цвета
  colorInput.addEventListener('input', (e) => {
    colorTextInput.value = e.target.value;
  });
  
  colorTextInput.addEventListener('input', (e) => {
    const value = e.target.value;
    if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
      colorInput.value = value;
    }
  });
  
  // Изменение типа календаря
  typeInputs.forEach(input => {
    input.addEventListener('change', updateTypeVisibility);
  });
  
  // Сохранить
  saveBtn.addEventListener('click', save);
  
  // Удалить
  deleteBtn.addEventListener('click', remove);
  
  // Сброс при закрытии
  modal.addEventListener('hidden.bs.modal', resetForm);
  
  // Слушать событие редактирования из других компонентов
  document.addEventListener('calendar:edit', (e) => {
    openForEdit(e.detail);
  });
  
  // Инициализация
  loadDepartments();

  // Public API
  return {
    openForCreate,
    openForEdit,
    show: () => bsModal.show(),
    hide: () => bsModal.hide()
  };
}