109 lines
4.1 KiB
JavaScript
109 lines
4.1 KiB
JavaScript
import { api } from '../api.js';
|
||
import { escapeHtml, showAlert, hideAlert } from '../utils.js';
|
||
import { fetchEducationForms } from './edu-forms.js';
|
||
|
||
export async function initGroups() {
|
||
const groupsTbody = document.getElementById('groups-tbody');
|
||
const createGroupForm = document.getElementById('create-group-form');
|
||
const newGroupEfSelect = document.getElementById('new-group-ef');
|
||
const filterEfSelect = document.getElementById('filter-ef');
|
||
|
||
let allGroups = [];
|
||
let educationForms = [];
|
||
|
||
async function loadInitialData() {
|
||
try {
|
||
educationForms = await fetchEducationForms();
|
||
populateEfSelects(educationForms);
|
||
await loadGroups();
|
||
} catch (e) {
|
||
groupsTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Ошибка загрузки данных</td></tr>';
|
||
}
|
||
}
|
||
|
||
async function loadGroups() {
|
||
try {
|
||
allGroups = await api.get('/api/groups');
|
||
applyGroupFilter();
|
||
} catch (e) {
|
||
groupsTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Ошибка загрузки</td></tr>';
|
||
}
|
||
}
|
||
|
||
function applyGroupFilter() {
|
||
const filterId = filterEfSelect.value;
|
||
const filtered = filterId
|
||
? allGroups.filter(g => g.educationFormId == filterId)
|
||
: allGroups;
|
||
renderGroups(filtered);
|
||
}
|
||
|
||
filterEfSelect.addEventListener('change', applyGroupFilter);
|
||
|
||
function populateEfSelects(forms) {
|
||
// Group creation select
|
||
const currentVal = newGroupEfSelect.value;
|
||
newGroupEfSelect.innerHTML = forms.map(ef =>
|
||
`<option value="${ef.id}">${escapeHtml(ef.name)}</option>`
|
||
).join('');
|
||
if (currentVal && forms.find(f => f.id == currentVal)) {
|
||
newGroupEfSelect.value = currentVal;
|
||
}
|
||
|
||
// Filter select
|
||
const currentFilter = filterEfSelect.value;
|
||
filterEfSelect.innerHTML = '<option value="">Все формы</option>' +
|
||
forms.map(ef =>
|
||
`<option value="${ef.id}">${escapeHtml(ef.name)}</option>`
|
||
).join('');
|
||
if (currentFilter) filterEfSelect.value = currentFilter;
|
||
}
|
||
|
||
function renderGroups(groups) {
|
||
if (!groups || !groups.length) {
|
||
groupsTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Нет групп</td></tr>';
|
||
return;
|
||
}
|
||
groupsTbody.innerHTML = groups.map(g => `
|
||
<tr>
|
||
<td>${g.id}</td>
|
||
<td>${escapeHtml(g.name)}</td>
|
||
<td><span class="badge badge-ef">${escapeHtml(g.educationFormName)}</span></td>
|
||
<td><button class="btn-delete" data-id="${g.id}">Удалить</button></td>
|
||
</tr>`).join('');
|
||
}
|
||
|
||
createGroupForm.addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
hideAlert('create-group-alert');
|
||
const name = document.getElementById('new-group-name').value.trim();
|
||
const educationFormId = newGroupEfSelect.value;
|
||
|
||
if (!name) { showAlert('create-group-alert', 'Введите название группы', 'error'); return; }
|
||
if (!educationFormId) { showAlert('create-group-alert', 'Выберите форму обучения', 'error'); return; }
|
||
|
||
try {
|
||
const data = await api.post('/api/groups', { name, educationFormId: Number(educationFormId) });
|
||
showAlert('create-group-alert', `Группа "${escapeHtml(data.name)}" создана`, 'success');
|
||
createGroupForm.reset();
|
||
loadGroups();
|
||
} catch (e) {
|
||
showAlert('create-group-alert', e.message || 'Ошибка создания', 'error');
|
||
}
|
||
});
|
||
|
||
groupsTbody.addEventListener('click', async (e) => {
|
||
const btn = e.target.closest('.btn-delete');
|
||
if (!btn) return;
|
||
if (!confirm('Удалить группу?')) return;
|
||
try {
|
||
await api.delete('/api/groups/' + btn.dataset.id);
|
||
loadGroups();
|
||
} catch (e) {
|
||
alert(e.message || 'Ошибка удаления');
|
||
}
|
||
});
|
||
|
||
loadInitialData();
|
||
}
|