20e53f69ea
- Updated emoji display in TaskCard to use a specific font family for better visual consistency. - Added `font-emoji` class and inline styles to ensure proper rendering of emojis across different platforms.
312 lines
11 KiB
TypeScript
312 lines
11 KiB
TypeScript
import { useState, useEffect } from 'react';
|
||
import { Task } from '@/lib/types';
|
||
import { formatDistanceToNow } from 'date-fns';
|
||
import { fr } from 'date-fns/locale';
|
||
import { Card } from '@/components/ui/Card';
|
||
import { Badge } from '@/components/ui/Badge';
|
||
import { TagDisplay } from '@/components/ui/TagDisplay';
|
||
import { useTasksContext } from '@/contexts/TasksContext';
|
||
import { useDraggable } from '@dnd-kit/core';
|
||
import { getPriorityConfig } from '@/lib/status-config';
|
||
|
||
interface TaskCardProps {
|
||
task: Task;
|
||
onDelete?: (taskId: string) => Promise<void>;
|
||
onEdit?: (task: Task) => void;
|
||
onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
|
||
compactView?: boolean;
|
||
}
|
||
|
||
export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView = false }: TaskCardProps) {
|
||
const [isEditingTitle, setIsEditingTitle] = useState(false);
|
||
const [editTitle, setEditTitle] = useState(task.title);
|
||
const { tags: availableTags } = useTasksContext();
|
||
|
||
// Configuration du draggable
|
||
const {
|
||
attributes,
|
||
listeners,
|
||
setNodeRef,
|
||
transform,
|
||
isDragging,
|
||
} = useDraggable({
|
||
id: task.id,
|
||
});
|
||
|
||
// Mettre à jour le titre local quand la tâche change
|
||
useEffect(() => {
|
||
setEditTitle(task.title);
|
||
}, [task.title]);
|
||
const handleDelete = async (e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
if (onDelete) {
|
||
await onDelete(task.id);
|
||
}
|
||
};
|
||
|
||
const handleEdit = (e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
if (onEdit) {
|
||
onEdit(task);
|
||
}
|
||
};
|
||
|
||
const handleTitleClick = (e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
if (onUpdateTitle && !isDragging) {
|
||
setIsEditingTitle(true);
|
||
}
|
||
};
|
||
|
||
const handleTitleSave = async () => {
|
||
const trimmedTitle = editTitle.trim();
|
||
if (trimmedTitle && trimmedTitle !== task.title && onUpdateTitle) {
|
||
await onUpdateTitle(task.id, trimmedTitle);
|
||
}
|
||
setIsEditingTitle(false);
|
||
};
|
||
|
||
const handleTitleCancel = () => {
|
||
setEditTitle(task.title);
|
||
setIsEditingTitle(false);
|
||
};
|
||
|
||
const handleTitleKeyPress = (e: React.KeyboardEvent) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
handleTitleSave();
|
||
} else if (e.key === 'Escape') {
|
||
e.preventDefault();
|
||
handleTitleCancel();
|
||
}
|
||
};
|
||
// Style de transformation pour le drag
|
||
const style = transform ? {
|
||
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
|
||
} : undefined;
|
||
|
||
// Extraire les emojis du titre pour les afficher comme tags visuels
|
||
const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu;
|
||
const emojis = task.title.match(emojiRegex) || [];
|
||
const titleWithoutEmojis = task.title.replace(emojiRegex, '').trim();
|
||
|
||
|
||
// Vue compacte : seulement le titre
|
||
if (compactView) {
|
||
return (
|
||
<Card
|
||
ref={setNodeRef}
|
||
style={style}
|
||
className={`p-2 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group ${
|
||
isDragging ? 'opacity-50 rotate-3 scale-105' : ''
|
||
}`}
|
||
{...attributes}
|
||
{...(isEditingTitle ? {} : listeners)}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
{emojis.length > 0 && (
|
||
<div className="flex gap-1 flex-shrink-0">
|
||
{emojis.slice(0, 1).map((emoji, index) => (
|
||
<span
|
||
key={index}
|
||
className="text-sm opacity-80 font-emoji"
|
||
style={{
|
||
fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif',
|
||
fontVariantEmoji: 'normal'
|
||
}}
|
||
>
|
||
{emoji}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{isEditingTitle ? (
|
||
<input
|
||
type="text"
|
||
value={editTitle}
|
||
onChange={(e) => setEditTitle(e.target.value)}
|
||
onKeyDown={handleTitleKeyPress}
|
||
onBlur={handleTitleSave}
|
||
autoFocus
|
||
className="flex-1 bg-transparent border-none outline-none text-slate-100 font-mono text-sm font-medium leading-tight"
|
||
/>
|
||
) : (
|
||
<h4
|
||
className="font-mono text-xs font-medium text-slate-100 leading-tight line-clamp-2 flex-1 cursor-pointer hover:text-cyan-300 transition-colors"
|
||
onClick={handleTitleClick}
|
||
title={onUpdateTitle ? "Cliquer pour éditer" : undefined}
|
||
>
|
||
{titleWithoutEmojis}
|
||
</h4>
|
||
)}
|
||
|
||
<div className="flex items-center gap-1 flex-shrink-0">
|
||
{/* Boutons d'action compacts */}
|
||
{onEdit && (
|
||
<button
|
||
onClick={handleEdit}
|
||
className="opacity-0 group-hover:opacity-100 w-3 h-3 rounded-full bg-blue-900/50 hover:bg-blue-800/80 border border-blue-500/30 hover:border-blue-400/50 flex items-center justify-center transition-all duration-200 text-blue-400 hover:text-blue-300 text-xs"
|
||
title="Modifier la tâche"
|
||
>
|
||
✎
|
||
</button>
|
||
)}
|
||
|
||
{onDelete && (
|
||
<button
|
||
onClick={handleDelete}
|
||
className="opacity-0 group-hover:opacity-100 w-3 h-3 rounded-full bg-red-900/50 hover:bg-red-800/80 border border-red-500/30 hover:border-red-400/50 flex items-center justify-center transition-all duration-200 text-red-400 hover:text-red-300 text-xs"
|
||
title="Supprimer la tâche"
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
|
||
{/* Indicateur de priorité compact */}
|
||
<div className={`w-1.5 h-1.5 rounded-full bg-${getPriorityConfig(task.priority).color}-400`} />
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
// Vue détaillée : version complète
|
||
return (
|
||
<Card
|
||
ref={setNodeRef}
|
||
style={style}
|
||
className={`p-3 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group ${
|
||
isDragging ? 'opacity-50 rotate-3 scale-105' : ''
|
||
}`}
|
||
{...attributes}
|
||
{...(isEditingTitle ? {} : listeners)}
|
||
>
|
||
{/* Header tech avec titre et status */}
|
||
<div className="flex items-start gap-2 mb-2">
|
||
{emojis.length > 0 && (
|
||
<div className="flex gap-1 flex-shrink-0">
|
||
{emojis.slice(0, 2).map((emoji, index) => (
|
||
<span
|
||
key={index}
|
||
className="text-sm opacity-80 font-emoji"
|
||
style={{
|
||
fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif',
|
||
fontVariantEmoji: 'normal'
|
||
}}
|
||
>
|
||
{emoji}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{isEditingTitle ? (
|
||
<input
|
||
type="text"
|
||
value={editTitle}
|
||
onChange={(e) => setEditTitle(e.target.value)}
|
||
onKeyDown={handleTitleKeyPress}
|
||
onBlur={handleTitleSave}
|
||
autoFocus
|
||
className="flex-1 bg-transparent border-none outline-none text-slate-100 font-mono text-sm font-medium leading-tight"
|
||
/>
|
||
) : (
|
||
<h4
|
||
className="font-mono text-sm font-medium text-slate-100 leading-tight line-clamp-2 flex-1 cursor-pointer hover:text-cyan-300 transition-colors"
|
||
onClick={handleTitleClick}
|
||
title={onUpdateTitle ? "Cliquer pour éditer" : undefined}
|
||
>
|
||
{titleWithoutEmojis}
|
||
</h4>
|
||
)}
|
||
|
||
<div className="flex items-center gap-1 flex-shrink-0">
|
||
{/* Bouton d'édition discret */}
|
||
{onEdit && (
|
||
<button
|
||
onClick={handleEdit}
|
||
className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-blue-900/50 hover:bg-blue-800/80 border border-blue-500/30 hover:border-blue-400/50 flex items-center justify-center transition-all duration-200 text-blue-400 hover:text-blue-300 text-xs"
|
||
title="Modifier la tâche"
|
||
>
|
||
✎
|
||
</button>
|
||
)}
|
||
|
||
{/* Bouton de suppression discret */}
|
||
{onDelete && (
|
||
<button
|
||
onClick={handleDelete}
|
||
className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-red-900/50 hover:bg-red-800/80 border border-red-500/30 hover:border-red-400/50 flex items-center justify-center transition-all duration-200 text-red-400 hover:text-red-300 text-xs"
|
||
title="Supprimer la tâche"
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
|
||
{/* Indicateur de priorité tech */}
|
||
<div className={`w-2 h-2 rounded-full animate-pulse bg-${getPriorityConfig(task.priority).color}-400 shadow-${getPriorityConfig(task.priority).color}-400/50 shadow-sm`} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Description tech */}
|
||
{task.description && (
|
||
<p className="text-xs text-slate-400 mb-3 line-clamp-1 font-mono">
|
||
{task.description}
|
||
</p>
|
||
)}
|
||
|
||
{/* Tags avec couleurs */}
|
||
{task.tags && task.tags.length > 0 && (
|
||
<div className={
|
||
(task.dueDate || (task.source && task.source !== 'manual') || task.completedAt)
|
||
? "mb-3"
|
||
: "mb-0"
|
||
}>
|
||
<TagDisplay
|
||
tags={task.tags}
|
||
availableTags={availableTags}
|
||
size="sm"
|
||
maxTags={3}
|
||
showColors={true}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Footer tech avec séparateur néon - seulement si des données à afficher */}
|
||
{(task.dueDate || (task.source && task.source !== 'manual') || task.completedAt) && (
|
||
<div className="pt-2 border-t border-slate-700/50">
|
||
<div className="flex items-center justify-between text-xs">
|
||
{task.dueDate ? (
|
||
<span className="flex items-center gap-1 text-slate-400 font-mono">
|
||
<span className="text-cyan-400">⏰</span>
|
||
{formatDistanceToNow(new Date(task.dueDate), {
|
||
addSuffix: true,
|
||
locale: fr
|
||
})}
|
||
</span>
|
||
) : (
|
||
<div></div>
|
||
)}
|
||
|
||
<div className="flex items-center gap-2">
|
||
{task.source !== 'manual' && task.source && (
|
||
<Badge variant="outline" size="sm">
|
||
{task.source}
|
||
</Badge>
|
||
)}
|
||
|
||
{task.completedAt && (
|
||
<span className="text-emerald-400 font-mono font-bold">✓ DONE</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
);
|
||
}
|