69 lines
3.1 KiB
JavaScript
69 lines
3.1 KiB
JavaScript
import { alert, api, formatDateTime, h } from './common.js';
|
||
import { createTable } from './table.js';
|
||
import { openUserDialog } from './user-dialog.js';
|
||
|
||
const ROLES = {
|
||
trainer: { title: 'Тренер', badge: 'text-bg-primary' },
|
||
trainee: { title: 'Тренирующийся', badge: 'text-bg-secondary' },
|
||
};
|
||
|
||
const container = document.getElementById('users');
|
||
const reload = () => location.reload();
|
||
|
||
const addButton = () => {
|
||
const button = h('button', { type: 'button', class: 'btn btn-primary mb-3' }, '+ Добавить пользователя');
|
||
button.addEventListener('click', () => openUserDialog(null, reload));
|
||
return button;
|
||
};
|
||
|
||
const editButton = (user) => {
|
||
const button = h('button', { type: 'button', class: 'btn btn-sm btn-outline-secondary' }, 'Изменить');
|
||
button.addEventListener('click', () => openUserDialog(user, reload));
|
||
return button;
|
||
};
|
||
|
||
function usersView(users) {
|
||
if (!users.length) {
|
||
return h('div', {}, addButton(), alert('info', 'Пользователей нет.'));
|
||
}
|
||
return h('div', {},
|
||
addButton(),
|
||
h('p', { class: 'text-muted' },
|
||
'Пользователей: ', h('strong', {}, `${users.length}`),
|
||
', тренеров: ', h('strong', {}, `${users.filter((user) => user.role === 'trainer').length}`)),
|
||
createTable({
|
||
id: 'users-table',
|
||
rows: users,
|
||
columns: [
|
||
{ title: 'ID', className: 'text-nowrap', sort: (user) => user.id, cell: (user) => `${user.id}` },
|
||
{ title: 'Email', className: 'text-nowrap', sort: (user) => user.email, cell: (user) => user.email },
|
||
{ title: 'Имя', sort: (user) => user.first_name, cell: (user) => user.first_name },
|
||
{ title: 'Фамилия', sort: (user) => user.last_name, cell: (user) => user.last_name },
|
||
{
|
||
title: 'Роль',
|
||
className: 'text-nowrap',
|
||
sort: (user) => user.role,
|
||
cell: (user) => h('span', { class: `badge ${ROLES[user.role].badge}` }, ROLES[user.role].title),
|
||
},
|
||
{
|
||
title: 'Активен',
|
||
sort: (user) => Number(user.is_active),
|
||
cell: (user) => user.is_active ? 'Да' : h('span', { class: 'text-muted' }, 'Нет'),
|
||
},
|
||
{ title: 'Создан', className: 'text-nowrap', sort: (user) => user.created_at, cell: (user) => formatDateTime(user.created_at) },
|
||
{
|
||
title: 'Последний вход',
|
||
className: 'text-nowrap',
|
||
sort: (user) => user.last_login || '',
|
||
cell: (user) => user.last_login ? formatDateTime(user.last_login) : h('span', { class: 'text-muted' }, '—'),
|
||
},
|
||
{ title: '', cell: editButton },
|
||
],
|
||
}));
|
||
}
|
||
|
||
try {
|
||
container.replaceChildren(usersView(await api('/users/')));
|
||
} catch (error) {
|
||
container.replaceChildren(alert('danger', `Не удалось загрузить пользователей: ${error.message}`));
|
||
}
|