Kanban: Design-Fix (padding/header wie andere Tools), Spaltenfarben, Verschieben-nach im Modal
This commit is contained in:
@@ -1,84 +1,126 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { api, S } from '../lib.js';
|
||||
|
||||
// ── Prioritäten ───────────────────────────────────────────────────────────────
|
||||
// ── Konstanten ────────────────────────────────────────────────────────────────
|
||||
const PRIORITIES = [
|
||||
{ id: 'none', label: 'Keine', color: '#888888' },
|
||||
{ id: 'none', label: 'Keine', color: '#666666' },
|
||||
{ id: 'low', label: 'Niedrig', color: '#4ecdc4' },
|
||||
{ id: 'medium', label: 'Mittel', color: '#ffe66d' },
|
||||
{ id: 'high', label: 'Hoch', color: '#ff6b9d' },
|
||||
];
|
||||
|
||||
const COL_COLORS = ['#4ecdc4','#60a5fa','#a78bfa','#ff6b9d','#ffe66d','#fb923c','#4ade80','#f472b6','#94a3b8'];
|
||||
const prioOf = id => PRIORITIES.find(p => p.id === id) || PRIORITIES[0];
|
||||
|
||||
// ── Karten-Modal (Erstellen + Bearbeiten) ─────────────────────────────────────
|
||||
// Absichtlich AUSSERHALB der Hauptkomponente definiert (Lesson Learned: kein Remount)
|
||||
function CardModal({ card, columnId, onSave, onClose }) {
|
||||
const [title, setTitle] = useState(card?.title || '');
|
||||
const [desc, setDesc] = useState(card?.description || '');
|
||||
const [prio, setPrio] = useState(card?.priority || 'none');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const titleRef = useRef(null);
|
||||
// ── Karten-Modal ──────────────────────────────────────────────────────────────
|
||||
function CardModal({ card, columnId, columns, onSave, onClose, toast }) {
|
||||
const [title, setTitle] = useState(card?.title || '');
|
||||
const [desc, setDesc] = useState(card?.description || '');
|
||||
const [prio, setPrio] = useState(card?.priority || 'none');
|
||||
const [moveToCol, setMoveToCol] = useState(card?.column_id || columnId);
|
||||
const [newColName, setNewColName] = useState('');
|
||||
const [showNewCol, setShowNewCol] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const titleRef = useRef(null);
|
||||
const newColRef = useRef(null);
|
||||
const isMob = window.innerWidth < 768;
|
||||
|
||||
useEffect(() => { titleRef.current?.focus(); }, []);
|
||||
useEffect(() => { if (showNewCol) newColRef.current?.focus(); }, [showNewCol]);
|
||||
|
||||
const save = async () => {
|
||||
if (!title.trim()) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
// Neue Spalte anlegen wenn gewünscht
|
||||
let targetCol = moveToCol;
|
||||
if (showNewCol && newColName.trim()) {
|
||||
const nc = await api('/tools/kanban/columns', { body: { title: newColName.trim() } });
|
||||
targetCol = nc.id;
|
||||
}
|
||||
if (card) {
|
||||
await api(`/tools/kanban/cards/${card.id}`, { method: 'PATCH', body: { title, description: desc, priority: prio } });
|
||||
await api(`/tools/kanban/cards/${card.id}`, {
|
||||
method: 'PATCH',
|
||||
body: { title, description: desc, priority: prio },
|
||||
});
|
||||
// Spalte gewechselt?
|
||||
if (targetCol && targetCol !== card.column_id) {
|
||||
await api(`/tools/kanban/cards/${card.id}/move`, { body: { column_id: targetCol } });
|
||||
}
|
||||
} else {
|
||||
await api('/tools/kanban/cards', { body: { column_id: columnId, title, description: desc, priority: prio } });
|
||||
await api('/tools/kanban/cards', { body: { column_id: targetCol || columnId, title, description: desc, priority: prio } });
|
||||
}
|
||||
onSave();
|
||||
} catch (e) { alert(e.message); }
|
||||
} catch (e) { toast(e.message, 'error'); }
|
||||
finally { setSaving(false); }
|
||||
};
|
||||
|
||||
const onKey = e => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) save(); if (e.key === 'Escape') onClose(); };
|
||||
const onKey = e => {
|
||||
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) save();
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div onClick={onClose} style={{ position:'fixed',inset:0,background:'rgba(0,0,0,0.6)',zIndex:1000,display:'flex',alignItems:'center',justifyContent:'center',padding:16 }}>
|
||||
<div onClick={e=>e.stopPropagation()} style={{ background:'#1a1a1e',border:'1px solid rgba(255,255,255,0.1)',borderRadius:14,padding:24,width:'100%',maxWidth:440 }}>
|
||||
<div style={{ color:'rgba(255,255,255,0.6)',fontSize:10,fontFamily:'monospace',letterSpacing:2,marginBottom:14 }}>
|
||||
{card ? 'KARTE BEARBEITEN' : 'NEUE KARTE'}
|
||||
<div onClick={e => e.target === e.currentTarget && onClose()}
|
||||
style={{ position:'fixed',inset:0,background:'rgba(0,0,0,0.7)',zIndex:1000,
|
||||
display:'flex',alignItems:isMob?'flex-end':'center',justifyContent:'center',padding:isMob?0:20 }}>
|
||||
<div style={{ background:'#1a1a1e',border:'1px solid rgba(255,255,255,0.12)',
|
||||
borderRadius:isMob?'16px 16px 0 0':14,padding:'22px 20px 28px',
|
||||
width:'100%',maxWidth:460 }}>
|
||||
{isMob && <div style={{ width:36,height:4,background:'rgba(255,255,255,0.15)',borderRadius:2,margin:'0 auto 16px' }}/>}
|
||||
|
||||
<div style={{ display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16 }}>
|
||||
<div style={{ ...S.head, marginBottom:0 }}>{card ? 'KARTE BEARBEITEN' : 'NEUE KARTE'}</div>
|
||||
<button onClick={onClose} style={{ background:'transparent',border:'none',color:'rgba(255,255,255,0.4)',cursor:'pointer',fontSize:18 }}>✕</button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={titleRef}
|
||||
value={title}
|
||||
onChange={e=>setTitle(e.target.value)}
|
||||
onKeyDown={onKey}
|
||||
placeholder="Titel"
|
||||
style={{ ...S.inp, marginBottom: 10 }}
|
||||
/>
|
||||
<input ref={titleRef} value={title} onChange={e=>setTitle(e.target.value)} onKeyDown={onKey}
|
||||
placeholder="Titel" style={{ ...S.inp, marginBottom:10 }} />
|
||||
|
||||
<textarea
|
||||
value={desc}
|
||||
onChange={e=>setDesc(e.target.value)}
|
||||
onKeyDown={onKey}
|
||||
placeholder="Beschreibung (optional)"
|
||||
rows={4}
|
||||
style={{ ...S.inp, resize:'vertical', marginBottom:12 }}
|
||||
/>
|
||||
<textarea value={desc} onChange={e=>setDesc(e.target.value)} onKeyDown={onKey}
|
||||
placeholder="Beschreibung (optional)" rows={3}
|
||||
style={{ ...S.inp, resize:'vertical', marginBottom:14 }} />
|
||||
|
||||
{/* Priorität */}
|
||||
<div style={{ marginBottom:16 }}>
|
||||
<div style={{ marginBottom:14 }}>
|
||||
<div style={{ ...S.head, marginBottom:8 }}>PRIORITÄT</div>
|
||||
<div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
|
||||
<div style={{ display:'flex', gap:6 }}>
|
||||
{PRIORITIES.map(p => (
|
||||
<button key={p.id} onClick={()=>setPrio(p.id)}
|
||||
style={{ ...S.btn(p.color, true),
|
||||
background: prio===p.id ? `${p.color}30` : `${p.color}10`,
|
||||
borderColor: prio===p.id ? p.color : `${p.color}40`,
|
||||
fontWeight: prio===p.id ? 700 : 400 }}>
|
||||
{p.label}
|
||||
</button>
|
||||
<button key={p.id} onClick={()=>setPrio(p.id)} style={{
|
||||
...S.btn(p.color, true),
|
||||
background: prio===p.id ? `${p.color}28` : `${p.color}0e`,
|
||||
borderColor: prio===p.id ? p.color : `${p.color}35`,
|
||||
fontWeight: prio===p.id ? 700 : 400,
|
||||
}}>{p.label}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Verschieben nach (nur bei Bearbeitung sinnvoll, aber auch bei Neu nützlich) */}
|
||||
<div style={{ marginBottom:18 }}>
|
||||
<div style={{ ...S.head, marginBottom:8 }}>{card ? 'VERSCHIEBEN NACH' : 'IN SPALTE'}</div>
|
||||
{!showNewCol ? (
|
||||
<div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
|
||||
{columns.map(c => (
|
||||
<button key={c.id} onClick={()=>setMoveToCol(c.id)} style={{
|
||||
...S.btn(c.color || '#4ecdc4', true),
|
||||
background: moveToCol===c.id ? `${c.color||'#4ecdc4'}28` : `${c.color||'#4ecdc4'}0e`,
|
||||
borderColor: moveToCol===c.id ? (c.color||'#4ecdc4') : `${c.color||'#4ecdc4'}35`,
|
||||
fontWeight: moveToCol===c.id ? 700 : 400,
|
||||
}}>{c.title}</button>
|
||||
))}
|
||||
<button onClick={()=>setShowNewCol(true)} style={S.btn('#888888', true)}>+ Neue Spalte</button>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display:'flex', gap:6 }}>
|
||||
<input ref={newColRef} value={newColName} onChange={e=>setNewColName(e.target.value)}
|
||||
onKeyDown={e=>{ if(e.key==='Escape'){setShowNewCol(false);setNewColName('');} }}
|
||||
placeholder="Name der neuen Spalte"
|
||||
style={{ ...S.inp, flex:1, fontSize:12 }} />
|
||||
<button onClick={()=>{setShowNewCol(false);setNewColName('');}} style={S.btn('#888888',true)}>✕</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display:'flex', gap:8, justifyContent:'flex-end' }}>
|
||||
<button onClick={onClose} style={S.btn('#888888', true)}>Abbrechen</button>
|
||||
<button onClick={save} disabled={!title.trim()||saving} style={S.btn('#4ecdc4', true)}>
|
||||
@@ -90,81 +132,116 @@ function CardModal({ card, columnId, onSave, onClose }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Spalten-Titel Inline-Edit ──────────────────────────────────────────────────
|
||||
// Ebenfalls außerhalb definiert
|
||||
function ColumnTitle({ col, onRename, onDelete }) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [val, setVal] = useState(col.title);
|
||||
// ── Spalten-Header ────────────────────────────────────────────────────────────
|
||||
function ColumnHeader({ col, onUpdate, onDelete, toast }) {
|
||||
const [editTitle, setEditTitle] = useState(false);
|
||||
const [titleVal, setTitleVal] = useState(col.title);
|
||||
const [showColor, setShowColor] = useState(false);
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useEffect(() => { if (editing) inputRef.current?.focus(); }, [editing]);
|
||||
useEffect(() => { if (editTitle) inputRef.current?.focus(); }, [editTitle]);
|
||||
|
||||
const commit = async () => {
|
||||
if (!val.trim()) { setVal(col.title); setEditing(false); return; }
|
||||
if (val.trim() !== col.title) await onRename(col.id, val.trim());
|
||||
setEditing(false);
|
||||
const commitTitle = async () => {
|
||||
setEditTitle(false);
|
||||
if (titleVal.trim() && titleVal.trim() !== col.title) {
|
||||
try { await onUpdate(col.id, { title: titleVal.trim() }); }
|
||||
catch (e) { toast(e.message, 'error'); setTitleVal(col.title); }
|
||||
} else { setTitleVal(col.title); }
|
||||
};
|
||||
|
||||
if (editing) return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={val}
|
||||
onChange={e=>setVal(e.target.value)}
|
||||
onBlur={commit}
|
||||
onKeyDown={e=>{ if(e.key==='Enter') commit(); if(e.key==='Escape'){setVal(col.title);setEditing(false);} }}
|
||||
style={{ ...S.inp, fontSize:13, fontWeight:700, padding:'4px 8px', flex:1 }}
|
||||
/>
|
||||
);
|
||||
const setColor = async (color) => {
|
||||
setShowColor(false);
|
||||
try { await onUpdate(col.id, { color }); }
|
||||
catch (e) { toast(e.message, 'error'); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display:'flex', alignItems:'center', gap:6, flex:1, minWidth:0 }}>
|
||||
<span
|
||||
onClick={()=>setEditing(true)}
|
||||
title="Doppelklick zum Umbenennen"
|
||||
onDoubleClick={()=>setEditing(true)}
|
||||
style={{ fontWeight:700, fontSize:13, fontFamily:'monospace', color:'#fff',
|
||||
cursor:'pointer', flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
|
||||
{col.title}
|
||||
</span>
|
||||
<span style={{ color:'rgba(255,255,255,0.3)', fontSize:11, fontFamily:'monospace', flexShrink:0 }}>
|
||||
{col.cards.length}
|
||||
</span>
|
||||
<button onClick={()=>onDelete(col.id)} title="Spalte löschen"
|
||||
style={{ background:'transparent', border:'none', color:'rgba(255,255,255,0.25)',
|
||||
cursor:'pointer', fontSize:14, padding:'0 2px', flexShrink:0, lineHeight:1 }}>
|
||||
✕
|
||||
</button>
|
||||
<div style={{ marginBottom:12 }}>
|
||||
{/* Farbstreifen oben */}
|
||||
<div style={{ height:3,borderRadius:'2px 2px 0 0',background:col.color||'#4ecdc4',margin:'-12px -12px 10px',marginTop:-12 }}/>
|
||||
|
||||
<div style={{ display:'flex', alignItems:'center', gap:6 }}>
|
||||
{/* Farbpicker-Button */}
|
||||
<div style={{ position:'relative' }}>
|
||||
<button onClick={()=>setShowColor(v=>!v)} title="Farbe ändern"
|
||||
style={{ width:16,height:16,borderRadius:'50%',background:col.color||'#4ecdc4',
|
||||
border:'2px solid rgba(255,255,255,0.2)',cursor:'pointer',flexShrink:0,padding:0 }}/>
|
||||
{showColor && (
|
||||
<div style={{ position:'absolute',top:22,left:0,zIndex:200,
|
||||
background:'#1a1a1e',border:'1px solid rgba(255,255,255,0.12)',
|
||||
borderRadius:10,padding:8,display:'flex',flexWrap:'wrap',gap:6,width:130 }}>
|
||||
{COL_COLORS.map(c => (
|
||||
<button key={c} onClick={()=>setColor(c)} style={{
|
||||
width:22,height:22,borderRadius:'50%',background:c,border:
|
||||
(col.color||'#4ecdc4')===c?'2px solid #fff':'2px solid transparent',
|
||||
cursor:'pointer',padding:0,transition:'border 0.1s',
|
||||
}}/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Titel */}
|
||||
{editTitle ? (
|
||||
<input ref={inputRef} value={titleVal} onChange={e=>setTitleVal(e.target.value)}
|
||||
onBlur={commitTitle}
|
||||
onKeyDown={e=>{ if(e.key==='Enter') commitTitle(); if(e.key==='Escape'){setTitleVal(col.title);setEditTitle(false);} }}
|
||||
style={{ ...S.inp, fontSize:12,fontWeight:700,padding:'3px 7px',flex:1 }} />
|
||||
) : (
|
||||
<span onDoubleClick={()=>setEditTitle(true)} title="Doppelklick zum Umbenennen"
|
||||
style={{ flex:1,fontSize:12,fontWeight:700,fontFamily:'monospace',color:'#fff',
|
||||
cursor:'pointer',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap' }}>
|
||||
{col.title}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span style={{ color:'rgba(255,255,255,0.3)',fontSize:11,fontFamily:'monospace',flexShrink:0 }}>
|
||||
{col.cards.length}
|
||||
</span>
|
||||
<button onClick={()=>onDelete(col.id)} title="Spalte löschen"
|
||||
style={{ background:'transparent',border:'none',color:'rgba(255,255,255,0.2)',
|
||||
cursor:'pointer',fontSize:13,padding:'0 2px',lineHeight:1,flexShrink:0 }}>✕</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Einzelne Karte ─────────────────────────────────────────────────────────────
|
||||
function KanbanCard({ card, col, allCols, onEdit, onDelete, onMove, onMoveCol, isDragging, dragHandlers }) {
|
||||
const prio = prioOf(card.priority);
|
||||
const colIdx = allCols.findIndex(c => c.id === col.id);
|
||||
const cardIdx = col.cards.findIndex(c => c.id === card.id);
|
||||
function KanbanCard({ card, col, allCols, onEdit, onDelete, onMove, isDragging, dragHandlers }) {
|
||||
const prio = prioOf(card.priority);
|
||||
const colIdx = allCols.findIndex(c => c.id === col.id);
|
||||
const cardIdx = col.cards.findIndex(c => c.id === card.id);
|
||||
const isFirst = cardIdx === 0;
|
||||
const isLast = cardIdx === col.cards.length - 1;
|
||||
const isFirstCol = colIdx === 0;
|
||||
const isLastCol = colIdx === allCols.length - 1;
|
||||
|
||||
const arrowBtn = (label, disabled, onClick) => (
|
||||
<button onClick={disabled ? undefined : onClick} disabled={disabled}
|
||||
style={{ background:'transparent',border:'none',padding:'1px 4px',lineHeight:1,fontSize:13,
|
||||
color: disabled ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.4)',
|
||||
cursor: disabled ? 'default' : 'pointer' }}>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
{...dragHandlers}
|
||||
style={{
|
||||
background: isDragging ? 'rgba(78,205,196,0.08)' : 'rgba(255,255,255,0.04)',
|
||||
border: `1px solid ${isDragging ? '#4ecdc4' : 'rgba(255,255,255,0.08)'}`,
|
||||
borderLeft: `3px solid ${prio.color}`,
|
||||
borderRadius: 8, padding: '10px 10px 8px', marginBottom: 6,
|
||||
cursor: 'grab', opacity: isDragging ? 0.5 : 1,
|
||||
transition: 'border-color 0.15s, opacity 0.15s',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
<div {...dragHandlers} style={{
|
||||
background: isDragging ? 'rgba(78,205,196,0.06)' : 'rgba(255,255,255,0.04)',
|
||||
border: `1px solid ${isDragging ? '#4ecdc4' : 'rgba(255,255,255,0.08)'}`,
|
||||
borderLeft: `3px solid ${prio.color}`,
|
||||
borderRadius:8, padding:'10px 10px 8px', marginBottom:6,
|
||||
cursor:'grab', opacity: isDragging ? 0.45 : 1,
|
||||
transition:'border-color 0.12s, opacity 0.12s', userSelect:'none',
|
||||
}}>
|
||||
{/* Titel-Zeile */}
|
||||
<div style={{ display:'flex', alignItems:'flex-start', gap:6, marginBottom: card.description ? 6 : 0 }}>
|
||||
<span style={{ flex:1, fontSize:13, fontFamily:'monospace', color:'#fff', wordBreak:'break-word', lineHeight:1.4 }}>
|
||||
<div style={{ display:'flex',alignItems:'flex-start',gap:6,marginBottom:card.description?6:8 }}>
|
||||
<span style={{ flex:1,fontSize:13,fontFamily:'monospace',color:'#fff',wordBreak:'break-word',lineHeight:1.4 }}>
|
||||
{card.title}
|
||||
</span>
|
||||
<div style={{ display:'flex', gap:4, flexShrink:0 }}>
|
||||
<div style={{ display:'flex',gap:3,flexShrink:0 }}>
|
||||
<button onClick={()=>onEdit(card)} title="Bearbeiten"
|
||||
style={{ background:'transparent',border:'none',color:'rgba(255,255,255,0.3)',
|
||||
style={{ background:'transparent',border:'none',color:'rgba(255,255,255,0.35)',
|
||||
cursor:'pointer',fontSize:12,padding:'1px 3px',lineHeight:1 }}>✎</button>
|
||||
<button onClick={()=>onDelete(card.id)} title="Löschen"
|
||||
style={{ background:'transparent',border:'none',color:'rgba(255,255,255,0.2)',
|
||||
@@ -174,50 +251,27 @@ function KanbanCard({ card, col, allCols, onEdit, onDelete, onMove, onMoveCol, i
|
||||
|
||||
{/* Beschreibung */}
|
||||
{card.description && (
|
||||
<div style={{ fontSize:11, color:'rgba(255,255,255,0.4)', fontFamily:'monospace',
|
||||
lineHeight:1.4, whiteSpace:'pre-wrap', wordBreak:'break-word', marginBottom:8 }}>
|
||||
<div style={{ fontSize:11,color:'rgba(255,255,255,0.4)',fontFamily:'monospace',
|
||||
lineHeight:1.4,whiteSpace:'pre-wrap',wordBreak:'break-word',marginBottom:8 }}>
|
||||
{card.description}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Steuerzeile: Priorität-Badge + Pfeile */}
|
||||
<div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:4 }}>
|
||||
<span style={{ fontSize:9, fontFamily:'monospace', letterSpacing:1,
|
||||
color: prio.color, background:`${prio.color}15`,
|
||||
border:`1px solid ${prio.color}30`, borderRadius:4, padding:'1px 5px' }}>
|
||||
{prio.label.toUpperCase()}
|
||||
</span>
|
||||
{/* Priorität + Pfeile */}
|
||||
<div style={{ display:'flex',alignItems:'center',justifyContent:'space-between',gap:4 }}>
|
||||
{prio.id !== 'none' ? (
|
||||
<span style={{ fontSize:9,fontFamily:'monospace',letterSpacing:1,
|
||||
color:prio.color, background:`${prio.color}15`,
|
||||
border:`1px solid ${prio.color}30`, borderRadius:4, padding:'1px 5px' }}>
|
||||
{prio.label.toUpperCase()}
|
||||
</span>
|
||||
) : <span/>}
|
||||
|
||||
{/* Positions- & Spalten-Navigation */}
|
||||
<div style={{ display:'flex', gap:3 }}>
|
||||
{/* Position hoch (innerhalb Spalte) */}
|
||||
<button onClick={()=>onMove(card.id, col.id, cardIdx-1)} disabled={cardIdx===0}
|
||||
title="Nach oben" style={{ background:'transparent',border:'none',
|
||||
color: cardIdx===0 ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.35)',
|
||||
cursor: cardIdx===0 ? 'default':'pointer', fontSize:13, padding:'1px 3px', lineHeight:1 }}>
|
||||
↑
|
||||
</button>
|
||||
{/* Position runter */}
|
||||
<button onClick={()=>onMove(card.id, col.id, cardIdx+1)} disabled={cardIdx===col.cards.length-1}
|
||||
title="Nach unten" style={{ background:'transparent',border:'none',
|
||||
color: cardIdx===col.cards.length-1 ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.35)',
|
||||
cursor: cardIdx===col.cards.length-1 ? 'default':'pointer', fontSize:13, padding:'1px 3px', lineHeight:1 }}>
|
||||
↓
|
||||
</button>
|
||||
{/* Spalte links */}
|
||||
<button onClick={()=>onMoveCol(card.id, allCols[colIdx-1]?.id)} disabled={colIdx===0}
|
||||
title="Spalte zurück" style={{ background:'transparent',border:'none',
|
||||
color: colIdx===0 ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.35)',
|
||||
cursor: colIdx===0 ? 'default':'pointer', fontSize:13, padding:'1px 3px', lineHeight:1 }}>
|
||||
←
|
||||
</button>
|
||||
{/* Spalte rechts */}
|
||||
<button onClick={()=>onMoveCol(card.id, allCols[colIdx+1]?.id)} disabled={colIdx===allCols.length-1}
|
||||
title="Nächste Spalte" style={{ background:'transparent',border:'none',
|
||||
color: colIdx===allCols.length-1 ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.35)',
|
||||
cursor: colIdx===allCols.length-1 ? 'default':'pointer', fontSize:13, padding:'1px 3px', lineHeight:1 }}>
|
||||
→
|
||||
</button>
|
||||
<div style={{ display:'flex',gap:0,flexShrink:0 }}>
|
||||
{arrowBtn('↑', isFirst, ()=>onMove(card.id, col.id, cardIdx-1))}
|
||||
{arrowBtn('↓', isLast, ()=>onMove(card.id, col.id, cardIdx+1))}
|
||||
{arrowBtn('←', isFirstCol, ()=>onMove(card.id, allCols[colIdx-1]?.id))}
|
||||
{arrowBtn('→', isLastCol, ()=>onMove(card.id, allCols[colIdx+1]?.id))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -225,7 +279,7 @@ function KanbanCard({ card, col, allCols, onEdit, onDelete, onMove, onMoveCol, i
|
||||
}
|
||||
|
||||
// ── Hauptkomponente ───────────────────────────────────────────────────────────
|
||||
export default function Kanban() {
|
||||
export default function Kanban({ toast, mobile }) {
|
||||
const [columns, setColumns] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [modal, setModal] = useState(null); // null | { card?, columnId }
|
||||
@@ -236,12 +290,11 @@ export default function Kanban() {
|
||||
const [dragOverPos, setDragOverPos] = useState(null);
|
||||
const newColRef = useRef(null);
|
||||
|
||||
// Hooks immer vor Early Returns (Lesson Learned)
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
api('/tools/kanban/board')
|
||||
.then(d => setColumns(d.columns || []))
|
||||
.catch(e => console.error('Kanban load error', e))
|
||||
.catch(() => toast('Fehler beim Laden', 'error'))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
@@ -254,12 +307,12 @@ export default function Kanban() {
|
||||
try {
|
||||
await api('/tools/kanban/columns', { body: { title: newColInput.trim() } });
|
||||
setNewColInput(''); setAddingCol(false); load();
|
||||
} catch (e) { alert(e.message); }
|
||||
} catch (e) { toast(e.message, 'error'); }
|
||||
};
|
||||
|
||||
const renameColumn = async (id, title) => {
|
||||
try { await api(`/tools/kanban/columns/${id}`, { method:'PATCH', body:{ title } }); load(); }
|
||||
catch (e) { alert(e.message); }
|
||||
const updateColumn = async (id, patch) => {
|
||||
await api(`/tools/kanban/columns/${id}`, { method:'PATCH', body: patch });
|
||||
load();
|
||||
};
|
||||
|
||||
const deleteColumn = async (id) => {
|
||||
@@ -269,27 +322,28 @@ export default function Kanban() {
|
||||
: `Spalte "${col?.title}" löschen?`;
|
||||
if (!confirm(msg)) return;
|
||||
try { await api(`/tools/kanban/columns/${id}`, { method:'DELETE' }); load(); }
|
||||
catch (e) { alert(e.message); }
|
||||
catch (e) { toast(e.message, 'error'); }
|
||||
};
|
||||
|
||||
// ── Karten-Aktionen ─────────────────────────────────────────────────────────
|
||||
const deleteCard = async (id) => {
|
||||
if (!confirm('Karte löschen?')) return;
|
||||
try { await api(`/tools/kanban/cards/${id}`, { method:'DELETE' }); load(); }
|
||||
catch (e) { alert(e.message); }
|
||||
catch (e) { toast(e.message, 'error'); }
|
||||
};
|
||||
|
||||
// Position innerhalb einer Spalte
|
||||
const moveCard = async (cardId, colId, newPos) => {
|
||||
try { await api(`/tools/kanban/cards/${cardId}/move`, { body:{ column_id:colId, position:newPos } }); load(); }
|
||||
catch (e) { alert(e.message); }
|
||||
};
|
||||
|
||||
// In andere Spalte verschieben (Pfeil-Buttons) — ans Ende der Zielspalte
|
||||
const moveCardToCol = async (cardId, targetColId) => {
|
||||
if (!targetColId) return;
|
||||
try { await api(`/tools/kanban/cards/${cardId}/move`, { body:{ column_id:targetColId } }); load(); }
|
||||
catch (e) { alert(e.message); }
|
||||
const moveCard = async (cardId, colIdOrPos, posOrUndef) => {
|
||||
// Aufruf-Varianten:
|
||||
// onMove(id, col.id, newPos) → Position innerhalb Spalte
|
||||
// onMove(id, targetColId) → Spalte wechseln, ans Ende
|
||||
try {
|
||||
if (posOrUndef !== undefined) {
|
||||
await api(`/tools/kanban/cards/${cardId}/move`, { body:{ column_id:colIdOrPos, position:posOrUndef } });
|
||||
} else {
|
||||
await api(`/tools/kanban/cards/${cardId}/move`, { body:{ column_id:colIdOrPos } });
|
||||
}
|
||||
load();
|
||||
} catch (e) { toast(e.message, 'error'); }
|
||||
};
|
||||
|
||||
// ── Drag & Drop ─────────────────────────────────────────────────────────────
|
||||
@@ -297,26 +351,19 @@ export default function Kanban() {
|
||||
setDragCardId(cardId);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
};
|
||||
|
||||
const onDragEnd = () => {
|
||||
setDragCardId(null); setDragOverCol(null); setDragOverPos(null);
|
||||
};
|
||||
const onDragEnd = () => { setDragCardId(null); setDragOverCol(null); setDragOverPos(null); };
|
||||
|
||||
const onDragOverCard = (e, colId, pos) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
setDragOverCol(colId); setDragOverPos(pos);
|
||||
};
|
||||
|
||||
const onDragOverCol = (e, colId) => {
|
||||
const onDragOverColBg = (e, colId) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
setDragOverCol(colId);
|
||||
// ans Ende, wenn über Spalten-Hintergrund (nicht über Karte)
|
||||
const col = columns.find(c => c.id === colId);
|
||||
setDragOverPos(col ? col.cards.length : 0);
|
||||
setDragOverCol(colId); setDragOverPos(col ? col.cards.length : 0);
|
||||
};
|
||||
|
||||
const onDrop = async (e, colId, pos) => {
|
||||
e.preventDefault();
|
||||
if (!dragCardId) return;
|
||||
@@ -325,32 +372,31 @@ export default function Kanban() {
|
||||
try {
|
||||
await api(`/tools/kanban/cards/${dragCardId}/move`, { body:{ column_id:colId, position:targetPos } });
|
||||
load();
|
||||
} catch (err) { alert(err.message); }
|
||||
} catch (err) { toast(err.message, 'error'); }
|
||||
};
|
||||
|
||||
// ── Render ───────────────────────────────────────────────────────────────────
|
||||
// ── Render ────────────────────────────────────────────────────────────────────
|
||||
if (loading) return (
|
||||
<div style={{ color:'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:12, padding:20 }}>
|
||||
Lädt…
|
||||
<div style={{ padding: mobile ? '14px 14px 90px' : '36px 44px' }}>
|
||||
<div style={{ color:'rgba(255,255,255,0.35)',fontFamily:'monospace',fontSize:12 }}>Lädt…</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ height:'100%', display:'flex', flexDirection:'column' }}>
|
||||
<div style={{ padding: mobile ? '14px 14px 90px' : '36px 44px', height:'100%', boxSizing:'border-box', display:'flex', flexDirection:'column' }}>
|
||||
|
||||
{/* ── Header ─────────────────────────────────────────────────────────── */}
|
||||
<div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:16, flexWrap:'wrap' }}>
|
||||
<div style={{ ...S.head, marginBottom:0, flex:1 }}>KANBAN BOARD</div>
|
||||
<div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:24, flexWrap:'wrap' }}>
|
||||
<h2 style={{ margin:0, fontSize:15, fontFamily:'monospace', color:'rgba(255,255,255,0.55)', letterSpacing:2, fontWeight:400 }}>
|
||||
KANBAN BOARD
|
||||
</h2>
|
||||
<div style={{ flex:1 }}/>
|
||||
{addingCol ? (
|
||||
<div style={{ display:'flex', gap:6 }}>
|
||||
<input
|
||||
ref={newColRef}
|
||||
value={newColInput}
|
||||
onChange={e=>setNewColInput(e.target.value)}
|
||||
<input ref={newColRef} value={newColInput} onChange={e=>setNewColInput(e.target.value)}
|
||||
onKeyDown={e=>{ if(e.key==='Enter') addColumn(); if(e.key==='Escape'){setAddingCol(false);setNewColInput('');} }}
|
||||
placeholder="Spaltenname"
|
||||
style={{ ...S.inp, width:160, fontSize:12 }}
|
||||
/>
|
||||
<button onClick={addColumn} style={S.btn('#4ecdc4', true)}>+ Hinzufügen</button>
|
||||
placeholder="Spaltenname" style={{ ...S.inp, width: mobile?140:180, fontSize:12 }} />
|
||||
<button onClick={addColumn} style={S.btn('#4ecdc4', true)}>Hinzufügen</button>
|
||||
<button onClick={()=>{setAddingCol(false);setNewColInput('');}} style={S.btn('#888888', true)}>✕</button>
|
||||
</div>
|
||||
) : (
|
||||
@@ -360,76 +406,59 @@ export default function Kanban() {
|
||||
|
||||
{/* ── Board ──────────────────────────────────────────────────────────── */}
|
||||
{columns.length === 0 ? (
|
||||
<div style={{ color:'rgba(255,255,255,0.25)', fontFamily:'monospace', fontSize:12, padding:'30px 0', textAlign:'center' }}>
|
||||
Noch keine Spalten. Erstelle eine Spalte um loszulegen.
|
||||
<div style={{ ...S.card, textAlign:'center', padding:40 }}>
|
||||
<div style={{ color:'rgba(255,255,255,0.25)',fontFamily:'monospace',fontSize:12 }}>
|
||||
Noch keine Spalten. Erstelle eine Spalte um loszulegen.
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{
|
||||
display:'flex', gap:12, overflowX:'auto', flex:1,
|
||||
paddingBottom:8,
|
||||
// Scrollbar-Styling
|
||||
scrollbarWidth:'thin', scrollbarColor:'rgba(255,255,255,0.1) transparent',
|
||||
}}>
|
||||
{columns.map((col, colIdx) => (
|
||||
<div
|
||||
key={col.id}
|
||||
onDragOver={e=>onDragOverCol(e, col.id)}
|
||||
<div style={{ display:'flex', gap:14, overflowX:'auto', flex:1,
|
||||
paddingBottom:12, scrollbarWidth:'thin', scrollbarColor:'rgba(255,255,255,0.08) transparent' }}>
|
||||
{columns.map(col => (
|
||||
<div key={col.id}
|
||||
onDragOver={e=>onDragOverColBg(e, col.id)}
|
||||
onDrop={e=>onDrop(e, col.id, col.cards.length)}
|
||||
style={{
|
||||
background: dragOverCol===col.id && dragCardId ? 'rgba(78,205,196,0.04)' : 'rgba(255,255,255,0.03)',
|
||||
border: `1px solid ${dragOverCol===col.id && dragCardId ? 'rgba(78,205,196,0.3)' : 'rgba(255,255,255,0.07)'}`,
|
||||
borderRadius:12, padding:12,
|
||||
minWidth:260, maxWidth:300, width:280,
|
||||
flexShrink:0, display:'flex', flexDirection:'column',
|
||||
transition:'border-color 0.15s, background 0.15s',
|
||||
}}
|
||||
>
|
||||
{/* Spalten-Header */}
|
||||
<div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:12 }}>
|
||||
<ColumnTitle col={col} onRename={renameColumn} onDelete={deleteColumn}/>
|
||||
</div>
|
||||
...S.card,
|
||||
minWidth: mobile ? 260 : 280,
|
||||
maxWidth: 320,
|
||||
width: mobile ? 260 : 280,
|
||||
flexShrink:0,
|
||||
display:'flex', flexDirection:'column',
|
||||
padding:12, overflow:'hidden',
|
||||
border:`1px solid ${dragOverCol===col.id && dragCardId ? (col.color||'#4ecdc4')+'66' : 'rgba(255,255,255,0.07)'}`,
|
||||
transition:'border-color 0.15s',
|
||||
}}>
|
||||
|
||||
{/* Karten */}
|
||||
<ColumnHeader col={col} onUpdate={updateColumn} onDelete={deleteColumn} toast={toast}/>
|
||||
|
||||
{/* Karten-Liste */}
|
||||
<div style={{ flex:1, overflowY:'auto', scrollbarWidth:'thin', scrollbarColor:'rgba(255,255,255,0.08) transparent' }}>
|
||||
{col.cards.map((card, cardIdx) => (
|
||||
<div
|
||||
key={card.id}
|
||||
onDragOver={e=>{ e.stopPropagation(); onDragOverCard(e, col.id, cardIdx); }}
|
||||
onDrop={e=>{ e.stopPropagation(); onDrop(e, col.id, cardIdx); }}
|
||||
style={{ position:'relative' }}
|
||||
>
|
||||
{/* Drop-Indikator oberhalb der Karte */}
|
||||
<div key={card.id}
|
||||
onDragOver={e=>onDragOverCard(e, col.id, cardIdx)}
|
||||
onDrop={e=>{ e.stopPropagation(); onDrop(e, col.id, cardIdx); }}>
|
||||
{dragCardId && dragOverCol===col.id && dragOverPos===cardIdx && (
|
||||
<div style={{ height:3, background:'#4ecdc4', borderRadius:2, marginBottom:4 }}/>
|
||||
<div style={{ height:3,background:col.color||'#4ecdc4',borderRadius:2,marginBottom:4,opacity:0.7 }}/>
|
||||
)}
|
||||
<KanbanCard
|
||||
card={card}
|
||||
col={col}
|
||||
allCols={columns}
|
||||
card={card} col={col} allCols={columns}
|
||||
onEdit={card=>setModal({ card, columnId:col.id })}
|
||||
onDelete={deleteCard}
|
||||
onMove={moveCard}
|
||||
onMoveCol={moveCardToCol}
|
||||
isDragging={dragCardId===card.id}
|
||||
dragHandlers={{
|
||||
draggable: true,
|
||||
onDragStart: e => onDragStart(e, card.id),
|
||||
onDragEnd,
|
||||
}}
|
||||
dragHandlers={{ draggable:true, onDragStart:e=>onDragStart(e,card.id), onDragEnd }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Drop-Zone ans Ende der Spalte */}
|
||||
{dragCardId && dragOverCol===col.id && dragOverPos===col.cards.length && (
|
||||
<div style={{ height:3, background:'#4ecdc4', borderRadius:2, marginTop:2 }}/>
|
||||
<div style={{ height:3,background:col.color||'#4ecdc4',borderRadius:2,marginTop:2,opacity:0.7 }}/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Karte hinzufügen */}
|
||||
<button
|
||||
onClick={()=>setModal({ card:null, columnId:col.id })}
|
||||
style={{ ...S.btn('#4ecdc4', true), width:'100%', marginTop:10, textAlign:'center' }}>
|
||||
<button onClick={()=>setModal({ card:null, columnId:col.id })}
|
||||
style={{ ...S.btn(col.color||'#4ecdc4', true), width:'100%', marginTop:10, textAlign:'center' }}>
|
||||
+ Karte
|
||||
</button>
|
||||
</div>
|
||||
@@ -442,8 +471,10 @@ export default function Kanban() {
|
||||
<CardModal
|
||||
card={modal.card}
|
||||
columnId={modal.columnId}
|
||||
columns={columns}
|
||||
onSave={()=>{ setModal(null); load(); }}
|
||||
onClose={()=>setModal(null)}
|
||||
toast={toast}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user