feat: status dropdowns, difficulty badges, published=violet
- STATUS_COLORS: published → violet, draft → gray - StatusSelect: shared dropdown component with status colors - Top bar: picture status dropdown (uploaded/published/blocked) - ObjectListPanel: per-object status dropdown, changeable inline - PairsPanel collapsed: difficulty badge (Leicht/Mittel) + status badge - EditPairForm: status dropdown at top of edit form Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -276,9 +276,9 @@ export const TABLES = {
|
||||
};
|
||||
|
||||
export const STATUS_COLORS = {
|
||||
published: 'bg-green-100 text-green-800',
|
||||
published: 'bg-violet-100 text-violet-800',
|
||||
blocked: 'bg-red-100 text-red-800',
|
||||
draft: 'bg-gray-100 text-gray-700',
|
||||
draft: 'bg-gray-100 text-gray-600',
|
||||
uploaded: 'bg-blue-100 text-blue-800',
|
||||
requested: 'bg-yellow-100 text-yellow-800',
|
||||
translated: 'bg-indigo-100 text-indigo-800',
|
||||
|
||||
@@ -181,6 +181,27 @@ function WordTag({ word, onRemove }) {
|
||||
|
||||
// ─── PairForm ─────────────────────────────────────────────────────────────────
|
||||
|
||||
// ─── Shared status helpers ────────────────────────────────────────────────────
|
||||
|
||||
const LEVEL_LABELS = { 1: 'Leicht', 2: 'Mittel' };
|
||||
const LEVEL_COLORS = { 1: 'bg-sky-50 text-sky-700', 2: 'bg-amber-50 text-amber-700' };
|
||||
|
||||
function StatusSelect({ value, options, onChange, saving, size = 'sm' }) {
|
||||
const cls = STATUS_COLORS[value] || 'bg-gray-100 text-gray-600';
|
||||
const pad = size === 'xs' ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-1 text-xs';
|
||||
return (
|
||||
<select
|
||||
value={value || ''}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
disabled={saving}
|
||||
onClick={e => e.stopPropagation()}
|
||||
className={`${cls} ${pad} rounded-full font-medium border-0 cursor-pointer focus:outline-none focus:ring-1 focus:ring-slate-300 appearance-none disabled:opacity-50`}
|
||||
>
|
||||
{options.map(o => <option key={o} value={o}>{o}</option>)}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
const PAIR_TYPES = [
|
||||
{ value: 'text', label: 'Text', hint: 'Nur positives Statement' },
|
||||
{ value: 'yes_no', label: 'Ja / Nein', hint: 'Frage + Ja/Nein Antwort' },
|
||||
@@ -448,6 +469,7 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [type, setType] = useState(pair.answer_type || '');
|
||||
const [pairStatus, setPairStatus] = useState(pair.status || 'draft');
|
||||
const [question, setQuestion] = useState('');
|
||||
const [positive, setPositive] = useState('');
|
||||
const [negative, setNegative] = useState('');
|
||||
@@ -597,6 +619,7 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
|
||||
patchPair.negative_statement_id = s.id;
|
||||
}
|
||||
if (pair.answer_type !== type) patchPair.answer_type = type;
|
||||
if (pair.status !== pairStatus) patchPair.status = pairStatus;
|
||||
if (Object.keys(patchPair).length) await apiPatch('/pairs', pair.id, patchPair);
|
||||
onSaved();
|
||||
} catch (e) { alert('Fehler: ' + e.message); }
|
||||
@@ -609,6 +632,10 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
|
||||
|
||||
return (
|
||||
<div className="border border-amber-200 rounded-xl p-3 bg-amber-50/20 space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide shrink-0">Status</label>
|
||||
<StatusSelect value={pairStatus} options={['draft','published','blocked']} onChange={setPairStatus} saving={saving} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Typ</label>
|
||||
<select value={type} onChange={e => setType(e.target.value)}
|
||||
@@ -744,7 +771,7 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
|
||||
|
||||
// ─── Left panel: Object list ──────────────────────────────────────────────────
|
||||
|
||||
function ObjectListPanel({ objects, loadingObjects, mode, selectedObjectId, onAddObject, onSelectObject, currentPicture }) {
|
||||
function ObjectListPanel({ objects, loadingObjects, mode, selectedObjectId, onAddObject, onSelectObject, currentPicture, onObjectStatusChange }) {
|
||||
return (
|
||||
<aside className="w-1/5 min-w-[180px] border-r border-slate-200 bg-white flex flex-col overflow-hidden">
|
||||
<div className="px-3 py-2.5 border-b border-slate-100 bg-slate-50 flex-shrink-0 space-y-1.5">
|
||||
@@ -769,19 +796,22 @@ function ObjectListPanel({ objects, loadingObjects, mode, selectedObjectId, onAd
|
||||
<p className="text-xs text-slate-400 text-center mt-6">Noch keine Objekte.<br />Klicke oben um eines zu zeichnen.</p>
|
||||
)}
|
||||
{objects.map((obj, i) => (
|
||||
<button
|
||||
<div
|
||||
key={obj.id}
|
||||
onClick={() => onSelectObject(obj.id === selectedObjectId ? null : obj.id)}
|
||||
className={`w-full text-left rounded-lg border p-2.5 transition-all
|
||||
className={`w-full text-left rounded-lg border p-2.5 transition-all cursor-pointer
|
||||
${obj.id === selectedObjectId && mode !== 'add'
|
||||
? 'border-indigo-400 bg-indigo-50 ring-1 ring-indigo-300'
|
||||
: 'border-slate-200 bg-slate-50 hover:border-indigo-200 hover:bg-indigo-50/40'}`}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<span className="text-xs font-bold text-slate-400">#{i + 1}</span>
|
||||
<span className={`text-xs px-1.5 py-0.5 rounded-full font-medium ${STATUS_COLORS[obj.status] || 'bg-slate-100 text-slate-600'}`}>
|
||||
{obj.status}
|
||||
</span>
|
||||
<span className="text-xs font-bold text-slate-400 shrink-0">#{i + 1}</span>
|
||||
<StatusSelect
|
||||
value={obj.status}
|
||||
options={['draft', 'published', 'blocked']}
|
||||
onChange={s => onObjectStatusChange(obj.id, s)}
|
||||
size="xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{(obj._words || []).slice(0, 4).map(w => (
|
||||
@@ -793,7 +823,7 @@ function ObjectListPanel({ objects, loadingObjects, mode, selectedObjectId, onAd
|
||||
<span className="text-xs text-slate-400">Keine Wörter</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
@@ -1090,10 +1120,15 @@ function PairsPanel({ selectedObject, allObjects, objectPairs, loadingPairs, onP
|
||||
onDeleted={id => { setEditingId(null); onPairsReload(); }} />
|
||||
) : (
|
||||
<div className="rounded-lg border border-slate-200 p-3 bg-slate-50 space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-bold text-slate-400">#{i + 1}</span>
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
<span className="text-xs font-bold text-slate-400 shrink-0">#{i + 1}</span>
|
||||
<span className={`text-xs px-1.5 py-0.5 rounded-full font-medium ${STATUS_COLORS[pair.status] || 'bg-slate-100 text-slate-600'}`}>{pair.status}</span>
|
||||
<span className="text-xs bg-slate-200 text-slate-600 rounded px-1.5 py-0.5">{pair.answer_type}</span>
|
||||
{pair.difficulty_level && (
|
||||
<span className={`text-xs px-1.5 py-0.5 rounded font-medium ${LEVEL_COLORS[pair.difficulty_level] || 'bg-slate-100 text-slate-500'}`}>
|
||||
{LEVEL_LABELS[pair.difficulty_level] || pair.difficulty_level}
|
||||
</span>
|
||||
)}
|
||||
<button onClick={() => setEditingId(pair.id)}
|
||||
className="ml-auto text-xs text-slate-400 hover:text-indigo-600 px-1.5 py-0.5 rounded hover:bg-indigo-50 transition-colors" title="Bearbeiten">✏️</button>
|
||||
</div>
|
||||
@@ -1378,6 +1413,21 @@ export default function ContentCreation() {
|
||||
finally { setMarkingDone(false); }
|
||||
}
|
||||
|
||||
async function handlePictureStatusChange(newStatus) {
|
||||
if (!currentPicture) return;
|
||||
try {
|
||||
await apiPatch('/pictures', currentPicture.id, { status: newStatus });
|
||||
setPictures(prev => prev.map((p, i) => i === pictureIndex ? { ...p, status: newStatus } : p));
|
||||
} catch (e) { alert('Fehler: ' + e.message); }
|
||||
}
|
||||
|
||||
async function handleObjectStatusChange(objectId, newStatus) {
|
||||
try {
|
||||
await apiPatch('/objects', objectId, { status: newStatus });
|
||||
setObjects(prev => prev.map(o => o.id === objectId ? { ...o, status: newStatus } : o));
|
||||
} catch (e) { alert('Fehler: ' + e.message); }
|
||||
}
|
||||
|
||||
function reloadPairs() {
|
||||
if (!selectedObjectId) return;
|
||||
setLoadingPairs(true);
|
||||
@@ -1412,8 +1462,13 @@ export default function ContentCreation() {
|
||||
<>
|
||||
<span className="font-mono opacity-60">{currentPicture.id?.slice(0, 8)}…</span>
|
||||
{currentPicture.design && <span>{currentPicture.design}</span>}
|
||||
<StatusSelect
|
||||
value={currentPicture.status}
|
||||
options={['uploaded', 'published', 'blocked']}
|
||||
onChange={handlePictureStatusChange}
|
||||
/>
|
||||
{currentPicture.objects_created && (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">✓ Objekte erstellt</span>
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">✓ Objekte</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@@ -1435,6 +1490,7 @@ export default function ContentCreation() {
|
||||
onAddObject={handleAddObject}
|
||||
onSelectObject={handleSelectObject}
|
||||
currentPicture={currentPicture}
|
||||
onObjectStatusChange={handleObjectStatusChange}
|
||||
/>
|
||||
|
||||
<ImageCanvas
|
||||
|
||||
Reference in New Issue
Block a user