feat(materials): Фаза 2 — коллекции (папки), поиск и фильтры
- Миграция 061: material_collections + student_materials.collection_id (ON DELETE SET NULL) + tags.
- API: CRUD коллекций (/api/materials/collections), GET /materials отдаёт {materials, collections}
со счётчиками; PATCH /materials/:id принимает collection_id/tags. Хелперы в js/api.js.
- /my-materials: бар папок (Все/папки/Без папки/+папка) с фильтром, поиск по тексту, фильтр по типу,
перенос материала в папку (select на карточке), создание/переименование/удаление папок.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
+150
-26
@@ -12,7 +12,19 @@
|
||||
.mm-main { padding: 28px 24px; max-width: 1100px; margin: 0 auto; width: 100%; }
|
||||
.mm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
|
||||
.mm-title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--text); }
|
||||
.mm-sub { color: var(--text-3); font-size: 0.9rem; margin-bottom: 22px; }
|
||||
.mm-sub { color: var(--text-3); font-size: 0.9rem; margin-bottom: 16px; }
|
||||
.mm-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
|
||||
.mm-search { flex: 1; min-width: 180px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; font: inherit; background: var(--surface); color: var(--text); }
|
||||
.mm-kind { padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; font: inherit; background: var(--surface); color: var(--text); }
|
||||
.mm-cols { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
|
||||
.mm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--text-2); }
|
||||
.mm-chip:hover { border-color: var(--violet); color: var(--violet); }
|
||||
.mm-chip.active { background: var(--violet); border-color: var(--violet); color: #fff; }
|
||||
.mm-chip-count { font-size: .7rem; opacity: .7; }
|
||||
.mm-chip-edit { display: inline-flex; opacity: .65; margin-left: 2px; }
|
||||
.mm-chip-edit svg { width: 12px; height: 12px; }
|
||||
.mm-chip-edit:hover { opacity: 1; }
|
||||
.mm-chip-add { border-style: dashed; }
|
||||
.mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
|
||||
.mm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
|
||||
.mm-card-media { background: #f1f5f9; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||
@@ -21,12 +33,13 @@
|
||||
.mm-card-body { padding: 12px 14px; border-top: 1px solid var(--border); }
|
||||
.mm-card-title { font-weight: 700; font-size: 0.86rem; color: var(--text); margin-bottom: 3px; }
|
||||
.mm-card-meta { font-size: 0.74rem; color: var(--text-3); }
|
||||
.mm-card-actions { display: flex; gap: 8px; margin-top: 10px; }
|
||||
.mm-card-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
|
||||
.mm-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-size: 0.76rem; font-weight: 600; color: var(--text-2); text-decoration: none; transition: border-color .12s, color .12s; }
|
||||
.mm-btn:hover { border-color: var(--violet); color: var(--violet); }
|
||||
.mm-btn.danger:hover { border-color: #ef4444; color: #ef4444; }
|
||||
.mm-btn svg { width: 13px; height: 13px; }
|
||||
.mm-kind { position: absolute; top: 8px; left: 8px; font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(155,93,229,0.12); color: var(--violet); }
|
||||
.mm-move { padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; font-size: .74rem; background: var(--surface); color: var(--text-2); max-width: 130px; margin-right: auto; }
|
||||
.mm-kind-badge { position: absolute; top: 8px; left: 8px; font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(155,93,229,0.12); color: var(--violet); }
|
||||
.mm-empty { padding: 60px 20px; text-align: center; color: var(--text-3); }
|
||||
.mm-empty svg { width: 38px; height: 38px; opacity: 0.4; margin-bottom: 12px; }
|
||||
@media (max-width: 640px) { .mm-grid { grid-template-columns: 1fr 1fr; } .mm-main { padding: 18px 14px; } }
|
||||
@@ -42,6 +55,17 @@
|
||||
<button class="mm-btn" style="margin-left:auto" onclick="createNote()"><i data-lucide="plus"></i> Заметка</button>
|
||||
</div>
|
||||
<div class="mm-sub">Сохранённые с уроков: страницы доски, заметки и вложения. Хранятся у вас и не пропадают, даже если урок удалят.</div>
|
||||
<div class="mm-toolbar">
|
||||
<input class="mm-search" id="mm-search" placeholder="Поиск по материалам…" oninput="onSearch(this.value)" />
|
||||
<select class="mm-kind" id="mm-kind" onchange="onKind(this.value)">
|
||||
<option value="all">Все типы</option>
|
||||
<option value="board">Доска</option>
|
||||
<option value="image">Изображения</option>
|
||||
<option value="note">Заметки</option>
|
||||
<option value="link">Ссылки</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mm-cols" id="mm-cols"></div>
|
||||
<div class="mm-grid" id="mm-grid"><div class="mm-empty">Загрузка…</div></div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -62,23 +86,35 @@
|
||||
}
|
||||
|
||||
const KIND_LABEL = { board: 'Доска', note: 'Заметка', link: 'Ссылка', image: 'Изображение' };
|
||||
const PENCIL = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>';
|
||||
let _mats = [];
|
||||
let _cols = [];
|
||||
const _filter = { col: 'all', kind: 'all', q: '' };
|
||||
|
||||
/* ── Move-to-collection select ── */
|
||||
function moveSelect(m) {
|
||||
const opts = ['<option value=""' + (!m.collection_id ? ' selected' : '') + '>Без папки</option>']
|
||||
.concat(_cols.map(c => `<option value="${c.id}"${m.collection_id === c.id ? ' selected' : ''}>${esc(c.name)}</option>`));
|
||||
return `<select class="mm-move" title="Папка" onchange="moveMaterial(${m.id}, this.value)">${opts.join('')}</select>`;
|
||||
}
|
||||
|
||||
function card(m) {
|
||||
const kind = KIND_LABEL[m.kind] || m.kind;
|
||||
const meta = `${esc(m.source_title || '')}${m.source_title ? ' · ' : ''}${fmtDate(m.created_at)}`;
|
||||
const del = `<button class="mm-btn danger" onclick="delMaterial(${m.id})"><i data-lucide="trash-2"></i> Удалить</button>`;
|
||||
const del = `<button class="mm-btn danger" onclick="delMaterial(${m.id})" title="Удалить"><i data-lucide="trash-2"></i></button>`;
|
||||
const edit = `<button class="mm-btn" onclick="editMaterial(${m.id})" title="Изменить"><i data-lucide="pencil"></i></button>`;
|
||||
const mv = moveSelect(m);
|
||||
if (m.kind === 'board' || m.kind === 'image') {
|
||||
return `<div class="mm-card">
|
||||
<span class="mm-kind">${kind}</span>
|
||||
<span class="mm-kind-badge">${kind}</span>
|
||||
<a class="mm-card-media" href="${esc(m.url)}" target="_blank" rel="noopener"><img src="${esc(m.url)}" alt="" loading="lazy"/></a>
|
||||
<div class="mm-card-body">
|
||||
<div class="mm-card-title">${esc(m.title || kind)}</div>
|
||||
<div class="mm-card-meta">${meta}</div>
|
||||
<div class="mm-card-actions">
|
||||
<a class="mm-btn" href="${esc(m.url)}" target="_blank" rel="noopener"><i data-lucide="external-link"></i> Открыть</a>
|
||||
<a class="mm-btn" href="${esc(m.url)}" download><i data-lucide="download"></i></a>
|
||||
${mv}
|
||||
<a class="mm-btn" href="${esc(m.url)}" target="_blank" rel="noopener" title="Открыть"><i data-lucide="external-link"></i></a>
|
||||
<a class="mm-btn" href="${esc(m.url)}" download title="Скачать"><i data-lucide="download"></i></a>
|
||||
${edit}${del}
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,47 +122,98 @@
|
||||
}
|
||||
if (m.kind === 'link') {
|
||||
return `<div class="mm-card">
|
||||
<span class="mm-kind">${kind}</span>
|
||||
<span class="mm-kind-badge">${kind}</span>
|
||||
<div class="mm-card-note"><a href="${esc(m.url)}" target="_blank" rel="noopener" style="color:var(--violet)">${esc(m.url)}</a></div>
|
||||
<div class="mm-card-body">
|
||||
<div class="mm-card-title">${esc(m.title || kind)}</div>
|
||||
<div class="mm-card-meta">${meta}</div>
|
||||
<div class="mm-card-actions">${edit}${del}</div>
|
||||
<div class="mm-card-actions">${mv}${edit}${del}</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
// note
|
||||
return `<div class="mm-card">
|
||||
<span class="mm-kind">${kind}</span>
|
||||
<span class="mm-kind-badge">${kind}</span>
|
||||
<div class="mm-card-note">${esc(m.body || '')}</div>
|
||||
<div class="mm-card-body">
|
||||
<div class="mm-card-title">${esc(m.title || kind)}</div>
|
||||
<div class="mm-card-meta">${meta}</div>
|
||||
<div class="mm-card-actions">${del}</div>
|
||||
<div class="mm-card-actions">${mv}${edit}${del}</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
async function load() {
|
||||
const grid = document.getElementById('mm-grid');
|
||||
try {
|
||||
const { materials } = await LS.listMaterials();
|
||||
_mats = materials || [];
|
||||
if (!materials || !materials.length) {
|
||||
grid.innerHTML = `<div class="mm-empty" style="grid-column:1/-1">
|
||||
<i data-lucide="folder-open"></i>
|
||||
<p>Пока пусто. На странице «Мои уроки» откройте прошлый урок и нажмите «К себе» на странице доски или заметке.</p>
|
||||
</div>`;
|
||||
lucide.createIcons();
|
||||
return;
|
||||
/* ── Collections bar ── */
|
||||
function chip(key, label, count, editId) {
|
||||
const active = _filter.col === key ? ' active' : '';
|
||||
const ed = editId ? `<span class="mm-chip-edit" onclick="event.stopPropagation();editCollection(${editId})" title="Изменить папку">${PENCIL}</span>` : '';
|
||||
return `<button class="mm-chip${active}" onclick="setCol('${key}')">${esc(label)} <span class="mm-chip-count">${count}</span>${ed}</button>`;
|
||||
}
|
||||
function renderCols() {
|
||||
const bar = document.getElementById('mm-cols');
|
||||
const noneCount = _mats.filter(m => !m.collection_id).length;
|
||||
let html = chip('all', 'Все', _mats.length);
|
||||
_cols.forEach(c => { html += chip(String(c.id), c.name, c.count, c.id); });
|
||||
if (noneCount) html += chip('none', 'Без папки', noneCount);
|
||||
html += `<button class="mm-chip mm-chip-add" onclick="createCollection()">+ папка</button>`;
|
||||
bar.innerHTML = html;
|
||||
}
|
||||
|
||||
function filtered() {
|
||||
return _mats.filter(m => {
|
||||
if (_filter.col === 'none' && m.collection_id) return false;
|
||||
if (_filter.col !== 'all' && _filter.col !== 'none' && String(m.collection_id) !== _filter.col) return false;
|
||||
if (_filter.kind !== 'all' && m.kind !== _filter.kind) return false;
|
||||
if (_filter.q) {
|
||||
const hay = ((m.title || '') + ' ' + (m.body || '') + ' ' + (m.source_title || '') + ' ' + (m.url || '') + ' ' + (m.tags || '')).toLowerCase();
|
||||
if (!hay.includes(_filter.q)) return false;
|
||||
}
|
||||
grid.innerHTML = materials.map(card).join('');
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function renderGrid() {
|
||||
const grid = document.getElementById('mm-grid');
|
||||
if (!_mats.length) {
|
||||
grid.innerHTML = `<div class="mm-empty" style="grid-column:1/-1">
|
||||
<i data-lucide="folder-open"></i>
|
||||
<p>Пока пусто. На уроке или в «Мои уроки» нажмите «К себе»/«Область», или создайте заметку.</p>
|
||||
</div>`;
|
||||
lucide.createIcons();
|
||||
return;
|
||||
}
|
||||
const rows = filtered();
|
||||
grid.innerHTML = rows.length
|
||||
? rows.map(card).join('')
|
||||
: `<div class="mm-empty" style="grid-column:1/-1"><i data-lucide="search-x"></i><p>Ничего не найдено</p></div>`;
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const data = await LS.listMaterials();
|
||||
_mats = data.materials || [];
|
||||
_cols = data.collections || [];
|
||||
renderCols();
|
||||
renderGrid();
|
||||
} catch (e) {
|
||||
grid.innerHTML = `<div class="mm-empty" style="grid-column:1/-1">Ошибка загрузки</div>`;
|
||||
document.getElementById('mm-grid').innerHTML = `<div class="mm-empty" style="grid-column:1/-1">Ошибка загрузки</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Filters ── */
|
||||
function setCol(key) { _filter.col = key; renderCols(); renderGrid(); }
|
||||
function onKind(v) { _filter.kind = v; renderGrid(); }
|
||||
function onSearch(v) { _filter.q = (v || '').trim().toLowerCase(); renderGrid(); }
|
||||
window.setCol = setCol; window.onKind = onKind; window.onSearch = onSearch;
|
||||
|
||||
/* ── Material actions ── */
|
||||
async function moveMaterial(id, cid) {
|
||||
try { await LS.updateMaterial(id, { collection_id: cid || null }); await load(); }
|
||||
catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
|
||||
}
|
||||
window.moveMaterial = moveMaterial;
|
||||
|
||||
async function delMaterial(id) {
|
||||
if (!confirm('Удалить этот материал?')) return;
|
||||
try { await LS.deleteMaterial(id); load(); }
|
||||
@@ -146,7 +233,8 @@
|
||||
const title = m.body.querySelector('#mm-nt-title').value.trim();
|
||||
const text = m.body.querySelector('#mm-nt-body').value.trim();
|
||||
if (!text && !title) { LS.toast('Введите текст заметки', 'warn'); return; }
|
||||
try { await LS.saveMaterial({ kind: 'note', title, body: text }); m.close(); load(); }
|
||||
const col = _filter.col !== 'all' && _filter.col !== 'none' ? Number(_filter.col) : null;
|
||||
try { await LS.saveMaterial({ kind: 'note', title, body: text, collection_id: col }); m.close(); load(); }
|
||||
catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
|
||||
} },
|
||||
] });
|
||||
@@ -173,6 +261,42 @@
|
||||
}
|
||||
window.editMaterial = editMaterial;
|
||||
|
||||
/* ── Collection CRUD ── */
|
||||
function createCollection() {
|
||||
const content = `<input id="mm-col-name" placeholder="Название папки" style="${FLD}" />`;
|
||||
const m = LS.modal({ title: 'Новая папка', content, size: 'sm', actions: [
|
||||
{ label: 'Отмена', onClick: () => m.close() },
|
||||
{ label: 'Создать', primary: true, onClick: async () => {
|
||||
const name = m.body.querySelector('#mm-col-name').value.trim();
|
||||
if (!name) { LS.toast('Введите название', 'warn'); return; }
|
||||
try { await LS.createMaterialCollection({ name }); m.close(); load(); }
|
||||
catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
|
||||
} },
|
||||
] });
|
||||
}
|
||||
window.createCollection = createCollection;
|
||||
|
||||
function editCollection(id) {
|
||||
const col = _cols.find(c => c.id === id);
|
||||
if (!col) return;
|
||||
const content = `<input id="mm-col-name" value="${esc(col.name)}" placeholder="Название папки" style="${FLD}" />`;
|
||||
const m = LS.modal({ title: 'Папка', content, size: 'sm', actions: [
|
||||
{ label: 'Удалить', onClick: async () => {
|
||||
if (!confirm('Удалить папку? Материалы останутся (станут «Без папки»).')) return;
|
||||
try { await LS.deleteMaterialCollection(id); m.close(); if (_filter.col === String(id)) _filter.col = 'all'; load(); }
|
||||
catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
|
||||
} },
|
||||
{ label: 'Отмена', onClick: () => m.close() },
|
||||
{ label: 'Сохранить', primary: true, onClick: async () => {
|
||||
const name = m.body.querySelector('#mm-col-name').value.trim();
|
||||
if (!name) { LS.toast('Введите название', 'warn'); return; }
|
||||
try { await LS.updateMaterialCollection(id, { name }); m.close(); load(); }
|
||||
catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
|
||||
} },
|
||||
] });
|
||||
}
|
||||
window.editCollection = editCollection;
|
||||
|
||||
load();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user