feat(categories): CRUD панель тем внутри карточки категории
CategoryTopicsPanel (новый компонент):
- GET/POST/PATCH/DELETE topics через /admin/api/blog-topics/* proxy
- inline-добавление темы (text + priority p1-p10)
- toggle is_used (вернуть в банк / пометить использованной)
- редактирование через hover edit-кнопку, Enter сохраняет, Esc отменяет
- AI-генерация N тем кнопкой 'Сгенерировать через AI' (5-50 шт)
- tabs 'свободные / все' с счётчиками
Categories page:
- кнопка 'Темы' раскрывает категорию на всю ширину сетки
- клик по '{N} тем' счётчику тоже раскрывает
- onTopicsChange прокидывает refresh списка категорий (counts обновляются)
Proxy: /admin/api/blog-topics/[...path] — catch-all к engine, передаёт
x-user-id=1 для совместимости с dev2 (где есть users.is_admin).
This commit is contained in:
Aleksei Pavlov
@@ -0,0 +1,236 @@
|
||||
'use client';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
Loader2, Plus, Trash2, Edit3, Save, X, Sparkles, RefreshCw,
|
||||
CheckCircle, Circle, ListChecks,
|
||||
} from 'lucide-react';
|
||||
|
||||
/**
|
||||
* Панель CRUD тем для одной категории.
|
||||
* Рендерится в развёрнутом виде под/в карточке категории.
|
||||
*
|
||||
* Раскрытие лениво подгружает темы и держит их в локальном стейте.
|
||||
*/
|
||||
export default function CategoryTopicsPanel({ category, onChange }) {
|
||||
const [topics, setTopics] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [includeUsed, setIncludeUsed] = useState(false);
|
||||
const [newTopic, setNewTopic] = useState('');
|
||||
const [newPriority, setNewPriority] = useState(5);
|
||||
const [adding, setAdding] = useState(false);
|
||||
const [editId, setEditId] = useState(null);
|
||||
const [editText, setEditText] = useState('');
|
||||
const [editPriority, setEditPriority] = useState(5);
|
||||
const [genCount, setGenCount] = useState(10);
|
||||
const [generating, setGenerating] = useState(false);
|
||||
const [toast, setToast] = useState(null);
|
||||
|
||||
const flash = (msg, type='success') => { setToast({ msg, type }); setTimeout(() => setToast(null), 3500); };
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const r = await fetch(`/admin/api/blog-topics?category=${encodeURIComponent(category.slug)}&includeUsed=${includeUsed}&limit=200`);
|
||||
const d = await r.json();
|
||||
setTopics(d.topics || []);
|
||||
} catch (e) { flash('Ошибка загрузки: ' + e.message, 'error'); }
|
||||
setLoading(false);
|
||||
}, [category.slug, includeUsed]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
async function addTopic() {
|
||||
if (!newTopic.trim()) return;
|
||||
setAdding(true);
|
||||
try {
|
||||
const r = await fetch('/admin/api/blog-topics', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ category: category.slug, topic: newTopic.trim(), priority: newPriority }),
|
||||
});
|
||||
const d = await r.json();
|
||||
if (!r.ok || d.error) throw new Error(d.error || 'fail');
|
||||
flash('Тема добавлена');
|
||||
setNewTopic('');
|
||||
await load();
|
||||
onChange?.();
|
||||
} catch (e) { flash(e.message, 'error'); }
|
||||
setAdding(false);
|
||||
}
|
||||
|
||||
async function saveEdit() {
|
||||
if (!editText.trim()) return;
|
||||
try {
|
||||
const r = await fetch(`/admin/api/blog-topics/${editId}`, {
|
||||
method: 'PATCH', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ topic: editText.trim(), priority: editPriority }),
|
||||
});
|
||||
const d = await r.json();
|
||||
if (!r.ok) throw new Error(d.error || 'fail');
|
||||
flash('Сохранено');
|
||||
setEditId(null);
|
||||
await load();
|
||||
} catch (e) { flash(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function toggleUsed(t) {
|
||||
const r = await fetch(`/admin/api/blog-topics/${t.id}`, {
|
||||
method: 'PATCH', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ is_used: !t.is_used }),
|
||||
});
|
||||
if (r.ok) { flash(t.is_used ? 'Тема вернулась в банк' : 'Помечена использованной'); load(); onChange?.(); }
|
||||
}
|
||||
|
||||
async function del(t) {
|
||||
if (!confirm(`Удалить тему: «${t.topic.slice(0, 60)}»?`)) return;
|
||||
const r = await fetch(`/admin/api/blog-topics/${t.id}`, { method: 'DELETE' });
|
||||
if (r.ok) { flash('Тема удалена'); load(); onChange?.(); }
|
||||
}
|
||||
|
||||
async function generateAI() {
|
||||
if (!confirm(`Сгенерировать ${genCount} новых тем через AI для «${category.name}»? Существующие останутся.`)) return;
|
||||
setGenerating(true);
|
||||
try {
|
||||
const r = await fetch('/admin/api/blog-topics/generate', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ category: category.slug, count: genCount }),
|
||||
});
|
||||
const d = await r.json();
|
||||
if (!r.ok) throw new Error(d.error || 'fail');
|
||||
flash(`AI генерирует ~${genCount} тем, появятся через 10-20 сек`);
|
||||
// Подождём и обновим
|
||||
setTimeout(() => { load(); onChange?.(); }, 12000);
|
||||
} catch (e) { flash(e.message, 'error'); }
|
||||
setGenerating(false);
|
||||
}
|
||||
|
||||
const unusedCount = topics.filter(t => !t.is_used).length;
|
||||
const usedCount = topics.filter(t => t.is_used).length;
|
||||
|
||||
return (
|
||||
<div className="mt-3 pt-3 border-t border-current/20 relative">
|
||||
{toast && (
|
||||
<div className={`absolute -top-12 right-0 z-10 px-3 py-2 rounded-lg text-xs font-medium shadow ${
|
||||
toast.type === 'error' ? 'bg-red-500 text-white' : 'bg-emerald-500 text-white'
|
||||
}`}>{toast.msg}</div>
|
||||
)}
|
||||
|
||||
{/* HEADER */}
|
||||
<div className="flex items-center justify-between mb-2 text-xs">
|
||||
<div className="flex items-center gap-2 opacity-80">
|
||||
<ListChecks className="w-3.5 h-3.5" />
|
||||
<span className="font-medium">Темы для автогенерации</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 opacity-70">
|
||||
<button onClick={() => setIncludeUsed(v => !v)}
|
||||
className="hover:opacity-100 transition-opacity">
|
||||
{includeUsed ? `все: ${topics.length}` : `свободные: ${unusedCount}`}
|
||||
{usedCount > 0 && !includeUsed && <span className="opacity-50"> · +{usedCount} использованных</span>}
|
||||
</button>
|
||||
<button onClick={load}>
|
||||
<RefreshCw className={`w-3 h-3 ${loading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ADD FORM */}
|
||||
<div className="flex gap-1.5 mb-2">
|
||||
<input type="text" value={newTopic}
|
||||
onChange={e => setNewTopic(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && addTopic()}
|
||||
placeholder="Новая тема статьи..."
|
||||
className="flex-1 px-3 py-1.5 rounded-lg border border-current/20 bg-white/70 dark:bg-black/30 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500" />
|
||||
<select value={newPriority} onChange={e => setNewPriority(parseInt(e.target.value, 10))}
|
||||
className="px-2 py-1.5 rounded-lg border border-current/20 bg-white/70 dark:bg-black/30 text-xs font-mono"
|
||||
title="приоритет (выше = раньше)">
|
||||
{[1,3,5,7,10].map(p => <option key={p} value={p}>p{p}</option>)}
|
||||
</select>
|
||||
<button onClick={addTopic} disabled={adding || !newTopic.trim()}
|
||||
className="px-3 py-1.5 rounded-lg bg-emerald-500 hover:bg-emerald-600 disabled:opacity-50 text-white text-xs font-medium transition-colors">
|
||||
{adding ? <Loader2 className="w-3 h-3 animate-spin" /> : <Plus className="w-3 h-3" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* AI GENERATE */}
|
||||
<div className="flex gap-1.5 mb-3">
|
||||
<button onClick={generateAI} disabled={generating}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg border border-current/30 hover:bg-white/40 dark:hover:bg-black/20 text-xs font-medium transition-colors disabled:opacity-50">
|
||||
{generating ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3" />}
|
||||
{generating ? 'Генерация AI…' : `Сгенерировать ${genCount} тем через AI`}
|
||||
</button>
|
||||
<select value={genCount} onChange={e => setGenCount(parseInt(e.target.value, 10))}
|
||||
className="px-2 py-1.5 rounded-lg border border-current/20 bg-white/70 dark:bg-black/30 text-xs font-mono">
|
||||
{[5,10,20,30,50].map(n => <option key={n} value={n}>{n} тем</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* LIST */}
|
||||
{loading && topics.length === 0 && (
|
||||
<div className="py-4 text-center"><Loader2 className="w-4 h-4 animate-spin mx-auto opacity-50" /></div>
|
||||
)}
|
||||
{!loading && topics.length === 0 && (
|
||||
<div className="py-4 text-center text-xs opacity-60">
|
||||
{includeUsed ? 'Тем пока нет — добавь или сгенерируй' : 'Свободных тем нет — посмотри использованные или добавь новые'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-1 max-h-80 overflow-y-auto">
|
||||
{topics.map(t => (
|
||||
<TopicRow key={t.id}
|
||||
t={t}
|
||||
isEditing={editId === t.id}
|
||||
editText={editText} editPriority={editPriority}
|
||||
onEditStart={() => { setEditId(t.id); setEditText(t.topic); setEditPriority(t.priority || 5); }}
|
||||
onEditCancel={() => setEditId(null)}
|
||||
onEditChange={setEditText}
|
||||
onPriorityChange={setEditPriority}
|
||||
onSaveEdit={saveEdit}
|
||||
onToggleUsed={() => toggleUsed(t)}
|
||||
onDelete={() => del(t)} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TopicRow({ t, isEditing, editText, editPriority, onEditStart, onEditCancel, onEditChange, onPriorityChange, onSaveEdit, onToggleUsed, onDelete }) {
|
||||
if (isEditing) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 py-1">
|
||||
<input value={editText} onChange={e => onEditChange(e.target.value)} autoFocus
|
||||
onKeyDown={e => { if (e.key === 'Enter') onSaveEdit(); if (e.key === 'Escape') onEditCancel(); }}
|
||||
className="flex-1 px-2 py-1 rounded border border-current/30 bg-white dark:bg-neutral-900 text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500" />
|
||||
<select value={editPriority} onChange={e => onPriorityChange(parseInt(e.target.value, 10))}
|
||||
className="px-1.5 py-1 rounded border border-current/30 bg-white dark:bg-neutral-900 text-xs font-mono">
|
||||
{[1,3,5,7,10].map(p => <option key={p} value={p}>p{p}</option>)}
|
||||
</select>
|
||||
<button onClick={onSaveEdit} className="p-1 rounded text-emerald-600 hover:bg-emerald-100 dark:hover:bg-emerald-950">
|
||||
<Save className="w-3 h-3" />
|
||||
</button>
|
||||
<button onClick={onEditCancel} className="p-1 rounded opacity-60 hover:opacity-100">
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`group flex items-center gap-1.5 py-1 text-xs ${t.is_used ? 'opacity-50' : ''}`}>
|
||||
<button onClick={onToggleUsed} className="shrink-0" title={t.is_used ? 'Вернуть в банк' : 'Пометить использованной'}>
|
||||
{t.is_used
|
||||
? <CheckCircle className="w-3.5 h-3.5 text-emerald-600" />
|
||||
: <Circle className="w-3.5 h-3.5 opacity-40" />}
|
||||
</button>
|
||||
<span className="flex-1 truncate" title={t.topic}>{t.topic}</span>
|
||||
<span className="text-[10px] opacity-50 font-mono shrink-0">
|
||||
p{t.priority || 5}
|
||||
{t.source === 'ai' && ' · ai'}
|
||||
</span>
|
||||
<button onClick={onEditStart} className="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-white/40 dark:hover:bg-black/20 transition-opacity">
|
||||
<Edit3 className="w-3 h-3" />
|
||||
</button>
|
||||
<button onClick={onDelete} className="opacity-0 group-hover:opacity-100 p-1 rounded text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 transition-opacity">
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user