feat(perm-ui): P0 usability improvements (search, default-dot, confirm-critical, wording)
- registry.js: добавлен флаг requireConfirmOff для 7 критичных прав (questions.manage, classes.manage, library.upload, courses.manage, sessions.reset, theory.access, simulations.access); byRole() теперь возвращает это поле - admin.html: subtitle в модале прав — «учителя» → «пользователя»; tooltip на кнопке «Сбросить всё по умолчанию»; поле поиска над сеткой прав; CSS .perm-modified-dot (amber, 8px) - admin.js: badge «Инд.» → «Индивидуально» (font-size 11px); renderPermissions() рисует .perm-modified-dot когда значение отличается от registry default; togglePermission() показывает LS.confirm перед выключением критичных прав; window.filterPermissions() скрывает карточки и role-блоки по поисковому запросу Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -31,6 +31,7 @@ const PERMISSIONS = {
|
||||
role: 'teacher', roles: ['teacher'], default: 0,
|
||||
label: 'Управление вопросами',
|
||||
desc: 'Создавать, редактировать и копировать вопросы в банке',
|
||||
requireConfirmOff: true,
|
||||
},
|
||||
'questions.delete': {
|
||||
role: 'teacher', roles: ['teacher'], default: 0,
|
||||
@@ -46,6 +47,7 @@ const PERMISSIONS = {
|
||||
role: 'teacher', roles: ['teacher'], default: 1,
|
||||
label: 'Сброс попыток',
|
||||
desc: 'Сбрасывать прохождение теста ученика в своём классе',
|
||||
requireConfirmOff: true,
|
||||
},
|
||||
'results.export': {
|
||||
role: 'teacher', roles: ['teacher'], default: 1,
|
||||
@@ -56,11 +58,13 @@ const PERMISSIONS = {
|
||||
role: 'teacher', roles: ['teacher'], default: 1,
|
||||
label: 'Управление классами',
|
||||
desc: 'Создавать, редактировать и удалять свои классы',
|
||||
requireConfirmOff: true,
|
||||
},
|
||||
'library.upload': {
|
||||
role: 'teacher', roles: ['teacher'], default: 1,
|
||||
label: 'Загрузка файлов',
|
||||
desc: 'Загружать файлы в библиотеку',
|
||||
requireConfirmOff: true,
|
||||
},
|
||||
'library.folders': {
|
||||
role: 'teacher', roles: ['teacher'], default: 1,
|
||||
@@ -91,6 +95,7 @@ const PERMISSIONS = {
|
||||
role: 'teacher', roles: ['teacher'], default: 1,
|
||||
label: 'Управление курсами',
|
||||
desc: 'Создавать и редактировать теоретические курсы и уроки',
|
||||
requireConfirmOff: true,
|
||||
},
|
||||
'courses.interactive': {
|
||||
role: 'teacher', roles: ['teacher'], default: 1,
|
||||
@@ -138,11 +143,13 @@ const PERMISSIONS = {
|
||||
role: 'student', roles: ['student', 'free_student'], default: 1,
|
||||
label: 'Доступ к теории',
|
||||
desc: 'Просматривать теоретические курсы и уроки',
|
||||
requireConfirmOff: true,
|
||||
},
|
||||
'simulations.access': {
|
||||
role: 'student', roles: ['student', 'free_student'], default: 1,
|
||||
label: 'Доступ к симуляциям',
|
||||
desc: 'Открывать лабораторию с физическими, химическими и биологическими симуляциями',
|
||||
requireConfirmOff: true,
|
||||
},
|
||||
'simulations.quiz': {
|
||||
role: 'student', roles: ['student', 'free_student'], default: 1,
|
||||
@@ -171,7 +178,7 @@ function listKeys() {
|
||||
function byRole(role) {
|
||||
return Object.entries(PERMISSIONS)
|
||||
.filter(([, v]) => v.role === role)
|
||||
.map(([key, v]) => ({ key, role: v.role, default: v.default, label: v.label, desc: v.desc }));
|
||||
.map(([key, v]) => ({ key, role: v.role, default: v.default, label: v.label, desc: v.desc, requireConfirmOff: !!v.requireConfirmOff }));
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
+15
-2
@@ -261,6 +261,12 @@
|
||||
.perm-toggle input:checked ~ .perm-track { background: var(--green, #06d6a0); }
|
||||
.perm-toggle input:checked ~ .perm-thumb { transform: translateX(20px); }
|
||||
.perm-toggle input:focus-visible ~ .perm-track { outline: 2px solid var(--violet); }
|
||||
/* dot shown when a role-level perm differs from its registry default */
|
||||
.perm-modified-dot {
|
||||
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
|
||||
background: var(--amber, #FFB347); flex-shrink: 0;
|
||||
vertical-align: middle; margin-left: 6px;
|
||||
}
|
||||
|
||||
/* toolbar */
|
||||
.t-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
@@ -1223,6 +1229,12 @@
|
||||
<p style="color:var(--muted);font-size:13px;margin:4px 0 0">Настройте, что могут делать учителя и ученики. Администраторы имеют все права всегда.</p>
|
||||
</div>
|
||||
|
||||
<div class="perm-search-wrap" style="margin: 16px 0 20px">
|
||||
<input type="search" id="perm-search-input" placeholder="Поиск по правам..."
|
||||
style="width:100%;max-width:420px;padding:9px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:0.9rem"
|
||||
oninput="filterPermissions(this.value)">
|
||||
</div>
|
||||
|
||||
<div class="perm-role-block">
|
||||
<div class="perm-role-title">
|
||||
<span class="badge badge-warn" style="font-size:13px;padding:4px 12px">Учитель</span>
|
||||
@@ -1563,10 +1575,11 @@
|
||||
<div class="q-modal" id="up-modal" onclick="if(event.target===this)closeUserPermsModal()">
|
||||
<div class="q-modal-box" style="max-width:520px">
|
||||
<div class="q-modal-title" id="up-modal-title">Права пользователя</div>
|
||||
<p style="font-size:12.5px;color:var(--muted);margin:-8px 0 16px">Индивидуальные настройки переопределяют права роли для этого учителя.</p>
|
||||
<p style="font-size:12.5px;color:var(--muted);margin:-8px 0 16px">Индивидуальные настройки переопределяют права роли для этого пользователя.</p>
|
||||
<div id="up-modal-list" style="display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;padding-right:4px"></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px">
|
||||
<button class="btn-del-q" onclick="doResetAllUserPerms()" id="up-modal-reset-btn">
|
||||
<button class="btn-del-q" onclick="doResetAllUserPerms()" id="up-modal-reset-btn"
|
||||
title="Удалить индивидуальные настройки — пользователь будет иметь права как у его роли">
|
||||
<i data-lucide="rotate-ccw" style="width:13px;height:13px;vertical-align:-2px"></i> Сбросить всё по умолчанию
|
||||
</button>
|
||||
<button class="btn-close" onclick="closeUserPermsModal()">Закрыть</button>
|
||||
|
||||
@@ -2144,7 +2144,7 @@
|
||||
const hasOverride = p.userVal !== undefined;
|
||||
const checked = p.effective;
|
||||
const badge = hasOverride
|
||||
? `<span style="font-size:10px;padding:2px 7px;border-radius:var(--r-pill);background:rgba(155,93,229,0.12);color:var(--violet);font-weight:700">Инд.</span>`
|
||||
? `<span style="font-size:11px;padding:2px 5px;border-radius:var(--r-pill);background:rgba(155,93,229,0.12);color:var(--violet);font-weight:700">Индивидуально</span>`
|
||||
: `<span style="font-size:10px;padding:2px 7px;border-radius:var(--r-pill);background:rgba(136,152,170,0.12);color:var(--text-3);font-weight:700">По роли</span>`;
|
||||
const resetBtn = hasOverride
|
||||
? `<button style="background:none;border:none;cursor:pointer;color:var(--text-3);padding:3px 6px;border-radius:6px;font-size:11px;font-weight:700;transition:color .2s"
|
||||
@@ -2230,10 +2230,14 @@
|
||||
const defs = definitions.filter(d => d.role === role);
|
||||
container.innerHTML = defs.map(def => {
|
||||
const enabled = permissions[role]?.[def.key] ?? def.default;
|
||||
const isModified = (enabled ? 1 : 0) !== def.default;
|
||||
const modDot = isModified
|
||||
? `<span class="perm-modified-dot" title="Отличается от значения по умолчанию"></span>`
|
||||
: '';
|
||||
return `
|
||||
<div class="perm-card${enabled ? ' enabled' : ''}" id="perm-card-${role}-${def.key.replace('.','_')}">
|
||||
<div class="perm-info">
|
||||
<div class="perm-label">${esc(def.label)}</div>
|
||||
<div class="perm-label">${esc(def.label)}${modDot}</div>
|
||||
<div class="perm-desc">${esc(def.desc)}</div>
|
||||
</div>
|
||||
<label class="perm-toggle" title="${enabled ? 'Выключить' : 'Включить'}">
|
||||
@@ -2248,6 +2252,17 @@
|
||||
}
|
||||
|
||||
async function togglePermission(role, key, enabled, checkbox) {
|
||||
if (!enabled) {
|
||||
const def = (_permData.definitions || []).find(d => d.role === role && d.key === key);
|
||||
if (def && def.requireConfirmOff) {
|
||||
const roleLabel = role === 'teacher' ? 'Учитель' : 'Ученик';
|
||||
const ok = await LS.confirm(
|
||||
`Выключение «${def.label}» затронет всех пользователей роли «${roleLabel}». Они потеряют доступ. Продолжить?`,
|
||||
{ title: 'Подтвердите выключение права', confirmText: 'Выключить' }
|
||||
);
|
||||
if (!ok) { checkbox.checked = true; return; }
|
||||
}
|
||||
}
|
||||
checkbox.disabled = true;
|
||||
try {
|
||||
await LS.setPermission(role, key, enabled);
|
||||
@@ -2267,6 +2282,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
window.filterPermissions = function filterPermissions(query) {
|
||||
const q = query.trim().toLowerCase();
|
||||
['teacher', 'student'].forEach(role => {
|
||||
const block = document.querySelector(`#perm-${role}`)?.closest('.perm-role-block');
|
||||
const cards = document.querySelectorAll(`#perm-${role} .perm-card`);
|
||||
let visibleCount = 0;
|
||||
cards.forEach(card => {
|
||||
const label = (card.querySelector('.perm-label')?.textContent || '').toLowerCase();
|
||||
const desc = (card.querySelector('.perm-desc')?.textContent || '').toLowerCase();
|
||||
const show = !q || label.includes(q) || desc.includes(q);
|
||||
card.style.display = show ? '' : 'none';
|
||||
if (show) visibleCount++;
|
||||
});
|
||||
if (block) block.style.display = visibleCount === 0 ? 'none' : '';
|
||||
});
|
||||
};
|
||||
|
||||
/* ════════════════════════════════════════════════
|
||||
МАГАЗИН (Shop)
|
||||
════════════════════════════════════════════════ */
|
||||
|
||||
Reference in New Issue
Block a user