Реализована фильтрация столбцов и улучшена сортировка в расписании

frontend/admin/css/components.css

@@ -432,6 +432,230 @@ thead th {
     border-bottom: 1px solid var(--bg-card-border);
 }
 
+/* Sortable columns */
+thead th.sortable {
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: color 0.2s ease;
+}
+
+thead th.sortable:hover {
+    color: var(--accent);
+}
+
+thead th.sortable.sort-active {
+    color: var(--accent);
+}
+
+.sort-arrow {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: 5px;
+    vertical-align: middle;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-bottom: 5px solid currentColor;
+    opacity: 0.3;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+}
+
+thead th.sortable:hover .sort-arrow {
+    opacity: 0.6;
+}
+
+thead th.sortable.sort-asc .sort-arrow {
+    opacity: 1;
+    border-bottom: 5px solid var(--accent);
+    transform: rotate(0deg);
+}
+
+thead th.sortable.sort-desc .sort-arrow {
+    opacity: 1;
+    border-bottom: 5px solid var(--accent);
+    transform: rotate(180deg);
+}
+
+/* ===== Filter Icon & Popup ===== */
+thead th.filterable {
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: color 0.2s ease;
+}
+
+thead th.filterable:hover {
+    color: var(--accent);
+}
+
+.filter-icon {
+    display: inline-block;
+    margin-left: 4px;
+    font-size: 0.65rem;
+    opacity: 0.4;
+    cursor: pointer;
+    transition: opacity 0.2s ease, color 0.2s ease;
+    vertical-align: middle;
+}
+
+thead th.filterable:hover .filter-icon {
+    opacity: 0.8;
+}
+
+thead th.filter-active .filter-icon {
+    opacity: 1;
+    color: var(--accent);
+}
+
+thead th.filter-active {
+    color: var(--accent);
+}
+
+.filter-popup {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 220px;
+    max-width: 280px;
+    background: rgba(15, 23, 42, 0.97);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+    padding: 0.75rem;
+    z-index: 200;
+    animation: filterPopupIn 0.2s ease-out both;
+    text-transform: none;
+}
+
+[data-theme="light"] .filter-popup {
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+}
+
+@keyframes filterPopupIn {
+    from {
+        opacity: 0;
+        transform: translateY(-6px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.filter-search {
+    width: 100%;
+    padding: 0.5rem 0.7rem;
+    background: var(--bg-input);
+    border: 1px solid var(--bg-card-border);
+    border-radius: 6px;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 0.85rem;
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    margin-bottom: 0.5rem;
+}
+
+.filter-search::placeholder {
+    color: var(--text-placeholder);
+}
+
+.filter-search:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.filter-btn-row {
+    display: flex;
+    gap: 0.4rem;
+    margin-bottom: 0.5rem;
+}
+
+.filter-btn-action {
+    flex: 1;
+    padding: 0.3rem 0.5rem;
+    background: var(--bg-input);
+    border: 1px solid var(--bg-card-border);
+    border-radius: 6px;
+    color: var(--text-secondary);
+    font-family: inherit;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.filter-btn-action:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    border-color: var(--accent);
+}
+
+.filter-list {
+    max-height: 180px;
+    overflow-y: auto;
+    margin-bottom: 0.5rem;
+    scrollbar-width: thin;
+    scrollbar-color: var(--bg-card-border) transparent;
+}
+
+.filter-list::-webkit-scrollbar {
+    width: 4px;
+}
+
+.filter-list::-webkit-scrollbar-thumb {
+    background: var(--bg-card-border);
+    border-radius: 2px;
+}
+
+.filter-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.35rem 0.3rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    color: var(--text-primary);
+    transition: background 0.15s ease;
+}
+
+.filter-item:hover {
+    background: var(--bg-hover);
+}
+
+.filter-item input[type="checkbox"] {
+    cursor: pointer;
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--accent);
+    flex-shrink: 0;
+}
+
+.filter-btn-apply {
+    width: 100%;
+    padding: 0.5rem;
+    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
+    border: none;
+    border-radius: 6px;
+    color: #fff;
+    font-family: inherit;
+    font-size: 0.82rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: 0 3px 10px var(--accent-glow);
+}
+
+.filter-btn-apply:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 5px 15px var(--accent-glow);
+}
+
 tbody td {
     padding: 0.85rem 1rem;
     font-size: 0.95rem;
@@ -610,12 +834,14 @@ tbody tr:hover {
     display: inline-block;
     cursor: pointer;
 }
+
 .btn-checkbox input {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0;
 }
+
 .checkbox-btn {
     display: inline-block;
     padding: 0.5rem 1rem;
@@ -626,8 +852,10 @@ tbody tr:hover {
     transition: all var(--transition);
     user-select: none;
 }
-.btn-checkbox input:checked + .checkbox-btn {
-    background: var(--success, #10b981);  /* используем success или зелёный */
+
+.btn-checkbox input:checked+.checkbox-btn {
+    background: var(--success, #10b981);
+    /* используем success или зелёный */
     border-color: var(--success, #10b981);
     color: white;
 }

frontend/admin/js/views/schedule.js

@@ -3,28 +3,336 @@ import { escapeHtml } from '../utils.js';
 
 export async function initSchedule() {
     const tbody = document.getElementById('schedule-tbody');
+    const table = document.getElementById('schedule-table');
+
+    let lessonsData = [];
+    let sortKey = null;
+    let sortDir = 'asc';
+
+    // Активные фильтры: { teacher: Set, group: Set, subject: Set, day: Set }
+    const activeFilters = {};
+
+    // Маппинг дней недели для корректной сортировки
+    const dayOrder = {
+        'понедельник': 1, 'вторник': 2, 'среда': 3,
+        'четверг': 4, 'пятница': 5, 'суббота': 6, 'воскресенье': 7
+    };
+
+    // ===================== Фильтрация =====================
+
+    // Извлечение отображаемого значения поля для фильтрации
+    function getDisplayValue(lesson, key) {
+        switch (key) {
+            case 'teacher':
+                return lesson.teacher?.username || lesson.teacherName || '—';
+            case 'group':
+                return lesson.group?.name || lesson.groupName || '—';
+            case 'subject':
+                return lesson.subject?.name || lesson.subjectName || '—';
+            case 'day':
+                return lesson.day || '—';
+            case 'educationForm':
+                return lesson.educationForm?.name || lesson.educationFormName || '—';
+            default:
+                return '';
+        }
+    }
+
+    // Собрать уникальные значения из данных
+    function getUniqueValues(key) {
+        const vals = new Set();
+        lessonsData.forEach(lesson => {
+            vals.add(getDisplayValue(lesson, key));
+        });
+        // Для дней — сортируем по порядку
+        if (key === 'day') {
+            return [...vals].sort((a, b) => (dayOrder[a.toLowerCase()] ?? 99) - (dayOrder[b.toLowerCase()] ?? 99));
+        }
+        return [...vals].sort((a, b) => a.localeCompare(b, 'ru'));
+    }
+
+    // Применить все фильтры
+    function applyFilters(lessons) {
+        return lessons.filter(lesson => {
+            for (const key of Object.keys(activeFilters)) {
+                const filterSet = activeFilters[key];
+                if (filterSet && filterSet.size > 0) {
+                    const val = getDisplayValue(lesson, key);
+                    if (!filterSet.has(val)) return false;
+                }
+            }
+            return true;
+        });
+    }
+
+    // ===================== Попап фильтра =====================
+
+    let currentPopup = null;
+
+    function closePopup() {
+        if (currentPopup) {
+            currentPopup.remove();
+            currentPopup = null;
+        }
+        document.removeEventListener('click', onDocumentClick, true);
+    }
+
+    function onDocumentClick(e) {
+        if (currentPopup && !currentPopup.contains(e.target)) {
+            // Проверяем, не кликнули ли по иконке фильтра
+            if (!e.target.closest('.filter-icon')) {
+                closePopup();
+            }
+        }
+    }
+
+    function openFilterPopup(th, filterKey) {
+        // Если уже открыт этот же — закрыть
+        if (currentPopup && currentPopup.dataset.filterKey === filterKey) {
+            closePopup();
+            return;
+        }
+        closePopup();
+
+        const uniqueValues = getUniqueValues(filterKey);
+        const currentFilter = activeFilters[filterKey];
+
+        // Создаём попап
+        const popup = document.createElement('div');
+        popup.className = 'filter-popup';
+        popup.dataset.filterKey = filterKey;
+
+        // Поисковое поле
+        const searchInput = document.createElement('input');
+        searchInput.type = 'text';
+        searchInput.className = 'filter-search';
+        searchInput.placeholder = 'Поиск...';
+        popup.appendChild(searchInput);
+
+        // Кнопки «Выбрать все» / «Сбросить»
+        const btnRow = document.createElement('div');
+        btnRow.className = 'filter-btn-row';
+
+        const btnAll = document.createElement('button');
+        btnAll.className = 'filter-btn-action';
+        btnAll.textContent = 'Все';
+        btnAll.addEventListener('click', (e) => {
+            e.stopPropagation();
+            checkboxes.forEach(cb => { cb.checked = true; });
+        });
+
+        const btnNone = document.createElement('button');
+        btnNone.className = 'filter-btn-action';
+        btnNone.textContent = 'Сбросить';
+        btnNone.addEventListener('click', (e) => {
+            e.stopPropagation();
+            checkboxes.forEach(cb => { cb.checked = false; });
+        });
+
+        btnRow.appendChild(btnAll);
+        btnRow.appendChild(btnNone);
+        popup.appendChild(btnRow);
+
+        // Список чекбоксов
+        const listWrap = document.createElement('div');
+        listWrap.className = 'filter-list';
+
+        const checkboxes = [];
+
+        uniqueValues.forEach(val => {
+            const label = document.createElement('label');
+            label.className = 'filter-item';
+
+            const cb = document.createElement('input');
+            cb.type = 'checkbox';
+            cb.value = val;
+            // Если фильтр активен — отмечаем только выбранные; если нет — все отмечены
+            cb.checked = currentFilter ? currentFilter.has(val) : true;
+
+            const span = document.createElement('span');
+            span.textContent = val;
+
+            label.appendChild(cb);
+            label.appendChild(span);
+            listWrap.appendChild(label);
+            checkboxes.push(cb);
+        });
+
+        popup.appendChild(listWrap);
+
+        // Кнопка «Применить»
+        const btnApply = document.createElement('button');
+        btnApply.className = 'filter-btn-apply';
+        btnApply.textContent = 'Применить';
+        btnApply.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const selected = new Set();
+            checkboxes.forEach(cb => {
+                if (cb.checked) selected.add(cb.value);
+            });
+
+            // Если все выбраны — снимаем фильтр
+            if (selected.size === uniqueValues.length) {
+                delete activeFilters[filterKey];
+                th.classList.remove('filter-active');
+            } else {
+                activeFilters[filterKey] = selected;
+                th.classList.add('filter-active');
+            }
+
+            closePopup();
+            renderSchedule(lessonsData);
+        });
+        popup.appendChild(btnApply);
+
+        // Поиск по чекбоксам
+        searchInput.addEventListener('input', () => {
+            const query = searchInput.value.toLowerCase();
+            listWrap.querySelectorAll('.filter-item').forEach(item => {
+                const text = item.querySelector('span').textContent.toLowerCase();
+                item.style.display = text.includes(query) ? '' : 'none';
+            });
+        });
+
+        // Предотвращаем всплытие кликов внутри попапа (чтобы не срабатывала сортировка th)
+        popup.addEventListener('click', (e) => e.stopPropagation());
+        searchInput.addEventListener('click', (e) => e.stopPropagation());
+
+        // Позиционируем попап под th
+        th.style.position = 'relative';
+        th.appendChild(popup);
+        currentPopup = popup;
+
+        // Фокус на поиск
+        setTimeout(() => searchInput.focus(), 50);
+
+        // Закрытие по клику вне
+        setTimeout(() => {
+            document.addEventListener('click', onDocumentClick, true);
+        }, 10);
+    }
+
+    // Обработчики кликов по заголовкам с фильтрами (клик по всей ячейке)
+    table.querySelectorAll('thead th.filterable').forEach(th => {
+        th.addEventListener('click', (e) => {
+            // Не открываем попап при клике внутри самого попапа
+            if (e.target.closest('.filter-popup')) return;
+            const filterKey = th.dataset.filterKey;
+            openFilterPopup(th, filterKey);
+        });
+    });
+
+    // ===================== Сортировка =====================
+
+    function getSortValue(lesson, key) {
+        switch (key) {
+            case 'id':
+                return lesson.id ?? 0;
+            case 'teacher':
+                return (lesson.teacher?.username || lesson.teacherName || '').toLowerCase();
+            case 'group':
+                return (lesson.group?.name || lesson.groupName || '').toLowerCase();
+            case 'educationForm':
+                return (lesson.educationForm?.name || lesson.educationFormName || '').toLowerCase();
+            case 'subject':
+                return (lesson.subject?.name || lesson.subjectName || '').toLowerCase();
+            case 'day': {
+                const d = (lesson.day || '').toLowerCase();
+                return dayOrder[d] ?? 99;
+            }
+            case 'week':
+                return (lesson.week || '').toLowerCase();
+            case 'time': {
+                // Составной ключ: день + время для правильной сортировки
+                const d = (lesson.day || '').toLowerCase();
+                const dayNum = dayOrder[d] ?? 99;
+                const t = lesson.time || '99:99';
+                return String(dayNum).padStart(2, '0') + '_' + t;
+            }
+            default:
+                return '';
+        }
+    }
+
+    function sortLessons(lessons) {
+        if (!sortKey) return lessons;
+
+        return [...lessons].sort((a, b) => {
+            let va = getSortValue(a, sortKey);
+            let vb = getSortValue(b, sortKey);
+
+            if (typeof va === 'number' && typeof vb === 'number') {
+                return sortDir === 'asc' ? va - vb : vb - va;
+            }
+
+            va = String(va);
+            vb = String(vb);
+            const cmp = va.localeCompare(vb, 'ru');
+            return sortDir === 'asc' ? cmp : -cmp;
+        });
+    }
+
+    function updateSortHeaders() {
+        table.querySelectorAll('thead th.sortable').forEach(th => {
+            th.classList.remove('sort-asc', 'sort-desc', 'sort-active');
+            if (th.dataset.sortKey === sortKey) {
+                th.classList.add('sort-active', sortDir === 'asc' ? 'sort-asc' : 'sort-desc');
+            }
+        });
+    }
+
+    // Навешиваем обработчики клика на заголовки (сортировка)
+    table.querySelectorAll('thead th.sortable').forEach(th => {
+        th.addEventListener('click', (e) => {
+            // Не сортируем, если кликнули по иконке фильтра или внутри попапа
+            if (e.target.closest('.filter-icon') || e.target.closest('.filter-popup')) return;
+
+            const key = th.dataset.sortKey;
+            if (sortKey === key) {
+                if (sortDir === 'asc') {
+                    sortDir = 'desc';
+                } else {
+                    sortKey = null;
+                    sortDir = 'asc';
+                }
+            } else {
+                sortKey = key;
+                sortDir = 'asc';
+            }
+            updateSortHeaders();
+            renderSchedule(lessonsData);
+        });
+    });
+
+    // ===================== Загрузка и рендер =====================
 
     async function loadSchedule() {
         try {
-            // Предполагается, что на сервере есть endpoint GET /api/lessons,
-            // возвращающий массив объектов с полями:
-            // id, teacher (объект с username), group (объект с name),
-            // subject (объект с name), day, week, time.
             const lessons = await api.get('/api/users/lessons');
+            lessonsData = lessons;
             renderSchedule(lessons);
         } catch (e) {
-            tbody.innerHTML = `<tr><td colspan="7" class="loading-row">Ошибка загрузки: ${escapeHtml(e.message)}</td></tr>`;
+            tbody.innerHTML = `<tr><td colspan="8" class="loading-row">Ошибка загрузки: ${escapeHtml(e.message)}</td></tr>`;
         }
     }
 
     function renderSchedule(lessons) {
         if (!lessons || !lessons.length) {
-            tbody.innerHTML = '<tr><td colspan="7" class="loading-row">Нет занятий</td></tr>';
+            tbody.innerHTML = '<tr><td colspan="8" class="loading-row">Нет занятий</td></tr>';
             return;
         }
 
-        tbody.innerHTML = lessons.map(lesson => {
-            // Извлекаем имена из вложенных объектов или используем запасные поля
+        // Сначала фильтруем, потом сортируем
+        const filtered = applyFilters(lessons);
+
+        if (!filtered.length) {
+            tbody.innerHTML = '<tr><td colspan="8" class="loading-row">Нет занятий по выбранным фильтрам</td></tr>';
+            return;
+        }
+
+        const sorted = sortLessons(filtered);
+
+        tbody.innerHTML = sorted.map(lesson => {
             const teacherName = lesson.teacher?.username || lesson.teacherName || '—';
             const groupName = lesson.group?.name || lesson.groupName || '—';
             const educationForm = lesson.educationForm?.name || lesson.educationFormName || '-';

frontend/admin/views/schedule.html

@@ -3,21 +3,31 @@
     <div class="table-wrap">
         <table id="schedule-table">
             <thead>
-            <tr>
-                <th>ID</th>
-                <th>Преподаватель</th>
-                <th>Группа</th>
-                <th>Форма обучения</th>
-                <th>Дисциплина</th>
-                <th>День недели</th>
-                <th>Неделя</th>
-                <th>Время</th>
-            </tr>
+                <tr>
+                    <th class="sortable" data-sort-key="id">ID <span class="sort-arrow"></span></th>
+                    <th class="filterable" data-filter-key="teacher">
+                        Преподаватель <span class="filter-icon">&#9662;</span>
+                    </th>
+                    <th class="filterable" data-filter-key="group">
+                        Группа <span class="filter-icon">&#9662;</span>
+                    </th>
+                    <th class="filterable" data-filter-key="educationForm">
+                        Форма обучения <span class="filter-icon">&#9662;</span>
+                    </th>
+                    <th class="filterable" data-filter-key="subject">
+                        Дисциплина <span class="filter-icon">&#9662;</span>
+                    </th>
+                    <th class="filterable" data-filter-key="day">
+                        День недели <span class="filter-icon">&#9662;</span>
+                    </th>
+                    <th>Неделя</th>
+                    <th>Время</th>
+                </tr>
             </thead>
             <tbody id="schedule-tbody">
-            <tr>
-                <td colspan="7" class="loading-row">Загрузка...</td>
-            </tr>
+                <tr>
+                    <td colspan="8" class="loading-row">Загрузка...</td>
+                </tr>
             </tbody>
         </table>
     </div>