371 lines
17 KiB
TypeScript
371 lines
17 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Idea, IdeaStatus, IdeaCategory } from '../types';
|
|
import { Plus, X, GripVertical, CheckCircle, Circle, Clock, Lightbulb, Search, Trash2, Edit3, Save } from 'lucide-react';
|
|
|
|
interface IdeaBoardProps {
|
|
ideas: Idea[];
|
|
onUpdate: (ideas: Idea[]) => void;
|
|
}
|
|
|
|
const CATEGORIES: Record<IdeaCategory, { label: string, color: string, icon: any }> = {
|
|
plot: { label: 'Intrigue', color: 'bg-rose-100 text-rose-800 border-rose-200', icon: Lightbulb },
|
|
character: { label: 'Personnage', color: 'bg-blue-100 text-blue-800 border-blue-200', icon: Search },
|
|
research: { label: 'Recherche', color: 'bg-amber-100 text-amber-800 border-amber-200', icon: Search },
|
|
todo: { label: 'À faire', color: 'bg-slate-100 text-slate-800 border-slate-200', icon: CheckCircle },
|
|
};
|
|
|
|
const STATUS_LABELS: Record<IdeaStatus, string> = {
|
|
todo: 'Idées / À faire',
|
|
progress: 'En cours',
|
|
done: 'Terminé / Validé'
|
|
};
|
|
|
|
const MAX_DESCRIPTION_LENGTH = 500;
|
|
|
|
const IdeaBoard: React.FC<IdeaBoardProps> = ({ ideas, onUpdate }) => {
|
|
const [newIdeaTitle, setNewIdeaTitle] = useState('');
|
|
const [newIdeaCategory, setNewIdeaCategory] = useState<IdeaCategory>('plot');
|
|
|
|
// Drag and Drop State
|
|
const [draggedIdeaId, setDraggedIdeaId] = useState<string | null>(null);
|
|
|
|
// Modal State for Edit/Quick Add
|
|
const [editingItem, setEditingItem] = useState<Partial<Idea> | null>(null);
|
|
|
|
// --- ACTIONS ---
|
|
|
|
const handleAddIdea = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!newIdeaTitle.trim()) return;
|
|
|
|
const newIdea: Idea = {
|
|
id: `idea-${Date.now()}`,
|
|
title: newIdeaTitle,
|
|
description: '',
|
|
category: newIdeaCategory,
|
|
status: 'todo',
|
|
createdAt: Date.now()
|
|
};
|
|
|
|
onUpdate([...ideas, newIdea]);
|
|
setNewIdeaTitle('');
|
|
};
|
|
|
|
const handleDelete = (id: string) => {
|
|
if(confirm("Supprimer cette carte ?")) {
|
|
onUpdate(ideas.filter(i => i.id !== id));
|
|
if (editingItem?.id === id) setEditingItem(null);
|
|
}
|
|
};
|
|
|
|
const handleSaveEdit = () => {
|
|
if (!editingItem || !editingItem.title?.trim()) return;
|
|
|
|
if (editingItem.id) {
|
|
// Update existing
|
|
onUpdate(ideas.map(i => i.id === editingItem.id ? { ...i, ...editingItem } as Idea : i));
|
|
} else {
|
|
// Create new from modal
|
|
const newIdea: Idea = {
|
|
id: `idea-${Date.now()}`,
|
|
title: editingItem.title || '',
|
|
description: editingItem.description || '',
|
|
category: editingItem.category || 'plot',
|
|
status: editingItem.status || 'todo',
|
|
createdAt: Date.now()
|
|
};
|
|
onUpdate([...ideas, newIdea]);
|
|
}
|
|
setEditingItem(null);
|
|
};
|
|
|
|
const openQuickAdd = (status: IdeaStatus) => {
|
|
setEditingItem({
|
|
title: '',
|
|
description: '',
|
|
category: 'plot',
|
|
status: status
|
|
});
|
|
};
|
|
|
|
const openEdit = (idea: Idea) => {
|
|
setEditingItem({ ...idea });
|
|
};
|
|
|
|
// --- DRAG HANDLERS ---
|
|
|
|
const handleDragStart = (e: React.DragEvent, id: string) => {
|
|
setDraggedIdeaId(id);
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent, status: IdeaStatus) => {
|
|
e.preventDefault();
|
|
if (draggedIdeaId) {
|
|
const updatedIdeas = ideas.map(idea =>
|
|
idea.id === draggedIdeaId ? { ...idea, status } : idea
|
|
);
|
|
onUpdate(updatedIdeas);
|
|
setDraggedIdeaId(null);
|
|
}
|
|
};
|
|
|
|
const handleDragOver = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = 'move';
|
|
};
|
|
|
|
// --- RENDERERS ---
|
|
|
|
const Column = ({ title, status, icon: Icon }: { title: string, status: IdeaStatus, icon: any }) => {
|
|
const columnIdeas = ideas.filter(i => i.status === status);
|
|
|
|
return (
|
|
<div
|
|
className="flex-1 bg-[#eef2ff] rounded-xl border border-indigo-100 flex flex-col h-full overflow-hidden transition-colors hover:border-blue-200"
|
|
onDragOver={handleDragOver}
|
|
onDrop={(e) => handleDrop(e, status)}
|
|
onDoubleClick={() => openQuickAdd(status)}
|
|
title="Double-cliquez dans le vide pour ajouter une carte ici"
|
|
>
|
|
{/* Column Header */}
|
|
<div className={`p-4 border-b border-indigo-200 flex justify-between items-center ${
|
|
status === 'todo' ? 'bg-[#eef2ff]' :
|
|
status === 'progress' ? 'bg-indigo-50' :
|
|
'bg-green-50'
|
|
}`}>
|
|
<div className="flex items-center gap-2 font-bold text-slate-700">
|
|
<Icon size={18} />
|
|
{title}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); openQuickAdd(status); }}
|
|
className="p-1 hover:bg-white rounded-full text-slate-400 hover:text-blue-600 transition-colors"
|
|
>
|
|
<Plus size={16} />
|
|
</button>
|
|
<span className="text-xs font-semibold bg-white px-2 py-1 rounded-full border border-indigo-100 text-slate-500">
|
|
{columnIdeas.length}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column Body */}
|
|
<div className="flex-1 overflow-y-auto p-3 space-y-3 custom-scrollbar">
|
|
{columnIdeas.map(idea => {
|
|
const truncatedDesc = idea.description.length > 300
|
|
? idea.description.substring(0, 300) + '...'
|
|
: idea.description;
|
|
|
|
return (
|
|
<div
|
|
key={idea.id}
|
|
draggable
|
|
onDragStart={(e) => handleDragStart(e, idea.id)}
|
|
onDoubleClick={(e) => {
|
|
e.stopPropagation(); // Prevent column double-click
|
|
openEdit(idea);
|
|
}}
|
|
className="bg-white p-3 rounded-lg shadow-sm border border-slate-200 cursor-grab active:cursor-grabbing hover:shadow-md hover:border-blue-300 transition-all group relative animate-in zoom-in-95 duration-200"
|
|
>
|
|
<div className="flex justify-between items-start mb-2">
|
|
<span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded-full flex items-center gap-1 ${CATEGORIES[idea.category].color}`}>
|
|
{CATEGORIES[idea.category].label}
|
|
</span>
|
|
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); openEdit(idea); }}
|
|
className="text-slate-300 hover:text-blue-500"
|
|
>
|
|
<Edit3 size={14} />
|
|
</button>
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); handleDelete(idea.id); }}
|
|
className="text-slate-300 hover:text-red-500"
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CARD CONTENT */}
|
|
<div className="mb-2">
|
|
<h4 className="font-bold text-slate-800 text-sm mb-1 leading-tight">{idea.title}</h4>
|
|
{idea.description && (
|
|
<p className="text-xs text-slate-500 line-clamp-3 leading-relaxed" title={idea.description.length > 300 ? "Description tronquée (voir détail)" : undefined}>
|
|
{truncatedDesc}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center text-xs text-slate-400 border-t border-slate-50 pt-2 mt-2">
|
|
<span className="flex items-center gap-1">
|
|
<Clock size={10} /> {new Date(idea.createdAt).toLocaleDateString()}
|
|
</span>
|
|
<GripVertical size={14} className="opacity-20" />
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
{columnIdeas.length === 0 && (
|
|
<div className="h-full flex flex-col items-center justify-center text-slate-300 text-sm italic border-2 border-dashed border-indigo-200 rounded-lg m-1">
|
|
<span className="mb-2">Vide</span>
|
|
<span className="text-xs opacity-70">Double-cliquez pour ajouter</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-white p-6 gap-6 relative">
|
|
|
|
{/* Header & Add Form (Top Bar) */}
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-white p-4 rounded-xl border border-slate-200 shadow-sm shrink-0">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
|
|
<Lightbulb className="text-yellow-500" /> Boîte à Idées
|
|
</h2>
|
|
<p className="text-slate-500 text-sm">Organisez vos tâches, idées de scènes et recherches.</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleAddIdea} className="flex-1 w-full md:w-auto max-w-2xl flex gap-2">
|
|
<select
|
|
value={newIdeaCategory}
|
|
onChange={(e) => setNewIdeaCategory(e.target.value as IdeaCategory)}
|
|
className="bg-[#eef2ff] border border-indigo-200 text-slate-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 outline-none"
|
|
>
|
|
{Object.entries(CATEGORIES).map(([key, val]) => (
|
|
<option key={key} value={key}>{val.label}</option>
|
|
))}
|
|
</select>
|
|
<input
|
|
type="text"
|
|
value={newIdeaTitle}
|
|
onChange={(e) => setNewIdeaTitle(e.target.value)}
|
|
placeholder="Titre de la nouvelle idée..."
|
|
className="flex-1 bg-[#eef2ff] border border-indigo-200 text-slate-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 outline-none font-medium"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={!newIdeaTitle.trim()}
|
|
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 disabled:opacity-50 transition-colors flex items-center gap-2"
|
|
>
|
|
<Plus size={18} />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Kanban Board */}
|
|
<div className="flex-1 grid grid-cols-1 md:grid-cols-3 gap-6 min-h-0">
|
|
<Column title="Idées / À faire" status="todo" icon={Circle} />
|
|
<Column title="En cours" status="progress" icon={Clock} />
|
|
<Column title="Terminé" status="done" icon={CheckCircle} />
|
|
</div>
|
|
|
|
{/* EDIT / QUICK ADD MODAL */}
|
|
{editingItem && (
|
|
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4 animate-in fade-in duration-200">
|
|
<div className="bg-white rounded-xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col max-h-[90%]">
|
|
<div className="bg-[#eef2ff] border-b border-indigo-100 p-4 flex justify-between items-center">
|
|
<h3 className="font-bold text-slate-700 flex items-center gap-2">
|
|
{editingItem.id ? <Edit3 size={18}/> : <Plus size={18}/>}
|
|
{editingItem.id ? 'Éditer la carte' : 'Ajouter une carte'}
|
|
</h3>
|
|
<button onClick={() => setEditingItem(null)} className="text-slate-400 hover:text-slate-600">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-4 overflow-y-auto">
|
|
<div>
|
|
<label className="block text-xs font-bold text-slate-500 uppercase mb-1">Titre</label>
|
|
<input
|
|
type="text"
|
|
value={editingItem.title}
|
|
onChange={(e) => setEditingItem({...editingItem, title: e.target.value})}
|
|
className="w-full p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none font-bold text-slate-800"
|
|
placeholder="Titre de la tâche ou de l'idée..."
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-slate-500 uppercase mb-1">Description</label>
|
|
<textarea
|
|
value={editingItem.description}
|
|
onChange={(e) => setEditingItem({...editingItem, description: e.target.value})}
|
|
maxLength={MAX_DESCRIPTION_LENGTH}
|
|
className="w-full p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none min-h-[120px] text-sm text-slate-600 leading-relaxed resize-none"
|
|
placeholder="Détails, notes, liens..."
|
|
/>
|
|
<div className={`text-right text-xs mt-1 transition-colors ${
|
|
(editingItem.description?.length || 0) >= MAX_DESCRIPTION_LENGTH ? 'text-red-500 font-bold' :
|
|
(editingItem.description?.length || 0) > MAX_DESCRIPTION_LENGTH * 0.9 ? 'text-orange-500' : 'text-slate-400'
|
|
}`}>
|
|
{editingItem.description?.length || 0} / {MAX_DESCRIPTION_LENGTH} caractères
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-bold text-slate-500 uppercase mb-1">Catégorie</label>
|
|
<select
|
|
value={editingItem.category}
|
|
onChange={(e) => setEditingItem({...editingItem, category: e.target.value as IdeaCategory})}
|
|
className="w-full p-2 bg-white border border-slate-300 rounded-lg text-sm outline-none focus:border-blue-500"
|
|
>
|
|
{Object.entries(CATEGORIES).map(([key, val]) => (
|
|
<option key={key} value={key}>{val.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-bold text-slate-500 uppercase mb-1">Statut</label>
|
|
<select
|
|
value={editingItem.status}
|
|
onChange={(e) => setEditingItem({...editingItem, status: e.target.value as IdeaStatus})}
|
|
className="w-full p-2 bg-white border border-slate-300 rounded-lg text-sm outline-none focus:border-blue-500"
|
|
>
|
|
{Object.entries(STATUS_LABELS).map(([key, val]) => (
|
|
<option key={key} value={key}>{val}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 border-t border-slate-200 bg-[#eef2ff] flex justify-end gap-2 shrink-0">
|
|
{editingItem.id && (
|
|
<button
|
|
onClick={() => handleDelete(editingItem.id!)}
|
|
className="mr-auto text-red-500 hover:text-red-700 text-sm font-medium px-3 py-2"
|
|
>
|
|
Supprimer
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => setEditingItem(null)}
|
|
className="px-4 py-2 text-slate-600 hover:bg-slate-200 rounded-lg text-sm font-medium"
|
|
>
|
|
Annuler
|
|
</button>
|
|
<button
|
|
onClick={handleSaveEdit}
|
|
disabled={!editingItem.title?.trim()}
|
|
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium shadow-sm disabled:opacity-50 flex items-center gap-2"
|
|
>
|
|
<Save size={16} /> Enregistrer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default IdeaBoard; |