/**
* @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 = '' +
departments.map(dept =>
``
).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()
};
}