{# JavaScript инициализация #}
{% include "employees/components/employee_form_scripts.html" %}
{% endblock %}
```
---
### Компоненты формы
#### `employee_form_personal.html`
Личные данные сотрудника.
**Поля:**
- Фамилия, Имя, Отчество
- Пол
- Дата рождения
**Особенности:**
- iOS-стайлинг аккордеона
- Валидация обязательных полей
- Автофокус на первое поле
---
#### `employee_form_contacts.html`
Контактная информация.
**Поля:**
- Email (корпоративная почта)
- Телефон (рабочий)
- Внутренний номер
**Особенности:**
- Форматирование телефона
- Валидация email
- Опциональные поля
---
#### `employee_form_position.html` (360 строк)
Управление должностью сотрудника.
**Разделы:**
1. Текущая должность (select/input)
2. Создание новой должности (collapse)
3. Редактирование должности (модал)
4. Назначение групп должностей
**JavaScript:**
- `positionManager.js` - CRUD должностей
- `groupPickers.js` - выбор групп
**Особенности:**
- Динамические модалы
- AJAX операции
- Валидация прав доступа
---
#### `employee_form_employment.html`
Информация о трудоустройстве.
**Поля:**
- Дата приёма на работу
- Статус (работает/уволен)
- Дата увольнения
**Особенности:**
- Datepicker интеграция
- Условное отображение (статус)
- Автозаполнение текущей даты
---
#### `employee_form_photo.html`
Загрузка фотографии.
**Поля:**
- Превью текущей фотографии
- File input для загрузки
- Кнопка удаления фото
**Особенности:**
- Предпросмотр перед загрузкой
- Валидация размера/формата
- Crop функционал (опционально)
---
#### `employee_form_actions.html`
Кнопки действий формы.
**Кнопки:**
- Сохранить изменения
- Отмена (возврат назад)
- Удалить сотрудника (для админов)
**Особенности:**
- Sticky позиционирование на мобильных
- Подтверждение удаления
- Отслеживание изменений
---
#### `employee_form_scripts.html` (22 строки)
JavaScript инициализация для формы.
```django
{% load static %}
```
---
### Детали сотрудника
#### `employee_detail.html` (432 строки)
Страница просмотра профиля сотрудника.
**Разделы:**
1. Шапка с фото и основной информацией
2. Контактная информация
3. Должность и отделы
4. Навыки (skills)
5. История изменений
6. Форма редактирования (collapse)
**JavaScript:**
```django
{% include "employees/components/employee_detail_scripts.html" %}
```
#### `employee_detail_scripts.html` (47 строк)
```django
{% load static %}
```
---
## 📅 Компоненты календаря
### `rightbar_calendar.html` (17 строк)
Основной файл правой панели с календарём.
```django
{% load static %}
{# Правая колонка с календарём - рефакторированная версия #}
{# Заголовок отдела #}
{% include "departments/components/department_header.html" %}
{# Колесо команды #}
{% include "departments/components/department_wheel.html" %}
{# Список участников #}
{% include "departments/components/department_members.html" %}
{# Боковая панель с настройками #}
{% include "departments/components/department_sidebar.html" %}
{# JavaScript инициализация #}
{% include "employees/components/department_scripts.html" %}
{% endblock %}
```
---
### `_department_controls.html` (275 строк)
Управление отделом (настройки, роли, права).
**Разделы:**
1. Выбор руководителя отдела (headPicker)
2. Управление ролями отдела (roleManager)
3. Создание/редактирование ролей
4. Назначение прав (permissions)
**JavaScript:**
```django
{% include "employees/components/department_controls_scripts.html" %}
```
#### `department_controls_scripts.html` (19 строк)
```django
{% load static %}
```
---
## ✅ Best Practices
### 1. Структура компонентов
```
✅ ХОРОШО: Малый размер, одна ответственность
employees/components/
├── employee_form_personal.html # ~80 строк
├── employee_form_contacts.html # ~60 строк
└── employee_form_scripts.html # ~22 строки
❌ ПЛОХО: Монолитный файл
employees/
└── employee_edit.html # 1391 строка!
```
### 2. Именование файлов
```
✅ ХОРОШО: Префиксы, понятные имена
calendar_modal_create.html
employee_form_personal.html
department_controls_scripts.html
❌ ПЛОХО: Неясные имена
modal.html
form.html
scripts.html
```
### 3. Подключение компонентов
```django
✅ ХОРОШО: Явное включение с комментариями
{# Личные данные #}
{% include "employees/components/employee_form_personal.html" %}
{# Контакты #}
{% include "employees/components/employee_form_contacts.html" %}
❌ ПЛОХО: Неясный порядок без комментариев
{% include "comp1.html" %}
{% include "comp2.html" %}
```
### 4. Разделение JavaScript
```django
✅ ХОРОШО: Отдельный файл инициализации
{% include "employees/components/employee_form_scripts.html" %}
❌ ПЛОХО: Встроенный
```
### 5. Передача контекста
```django
✅ ХОРОШО: Явная передача параметров
{% include "component.html" with employee=emp can_edit=True %}
❌ ПЛОХО: Неявный контекст
{% include "component.html" %}
{# Компонент зависит от глобальных переменных #}
```
### 6. Блоки и наследование
```django
✅ ХОРОШО: Расширение базового шаблона
{% extends "base.html" %}
{% block content %}
{% endblock %}
❌ ПЛОХО: Дублирование структуры
```
### 7. CSS подключение
```django
✅ ХОРОШО: Модульные стили в extra_css
{% block extra_css %}
...
```
### 8. Условное включение
```django
✅ ХОРОШО: Проверка прав перед включением
{% if user.is_authenticated %}
{% include "includes/rightbar_calendar.html" %}
{% endif %}
❌ ПЛОХО: Проверка внутри компонента
{# В компоненте: #}
{% if user.is_authenticated %}
{% endif %}
```
---
## 🔧 Отладка шаблонов
### Вывод отладочной информации
```django
{# Проверка контекста #}
{% if debug %}