refactor: streamline TaskCard component and enhance UI integration
- Removed unused state and effects in `TaskCard`, simplifying the component structure. - Integrated `UITaskCard` for improved UI consistency and modularity. - Updated event handlers for editing and deleting tasks to enhance user interaction. - Enhanced props handling for better customization and flexibility in task display. - Improved emoji handling and title editing functionality for a smoother user experience.
This commit is contained in:
Julien Froidefond
@@ -1,15 +1,9 @@
|
|||||||
import { useState, useEffect, useRef, useTransition } from 'react';
|
import { useTransition } from 'react';
|
||||||
import { Task } from '@/lib/types';
|
import { Task } from '@/lib/types';
|
||||||
import { TfsConfig } from '@/services/integrations/tfs';
|
import { TaskCard as UITaskCard } from '@/components/ui/TaskCard';
|
||||||
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 { useTasksContext } from '@/contexts/TasksContext';
|
||||||
import { useUserPreferences } from '@/contexts/UserPreferencesContext';
|
import { useUserPreferences } from '@/contexts/UserPreferencesContext';
|
||||||
import { useDraggable } from '@dnd-kit/core';
|
import { useDraggable } from '@dnd-kit/core';
|
||||||
import { getPriorityConfig, getPriorityColorHex } from '@/lib/status-config';
|
|
||||||
import { updateTaskTitle, deleteTask } from '@/actions/tasks';
|
import { updateTaskTitle, deleteTask } from '@/actions/tasks';
|
||||||
|
|
||||||
interface TaskCardProps {
|
interface TaskCardProps {
|
||||||
@@ -19,146 +13,44 @@ interface TaskCardProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) {
|
export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) {
|
||||||
const [isEditingTitle, setIsEditingTitle] = useState(false);
|
|
||||||
const [editTitle, setEditTitle] = useState(task.title);
|
|
||||||
const [isPending, startTransition] = useTransition();
|
const [isPending, startTransition] = useTransition();
|
||||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
||||||
const { tags: availableTags, refreshTasks } = useTasksContext();
|
const { tags: availableTags, refreshTasks } = useTasksContext();
|
||||||
const { preferences } = useUserPreferences();
|
const { preferences } = useUserPreferences();
|
||||||
|
|
||||||
// Classes CSS pour les différentes tailles de police
|
|
||||||
const getFontSizeClasses = () => {
|
|
||||||
switch (preferences.viewPreferences.fontSize) {
|
|
||||||
case 'small':
|
|
||||||
return {
|
|
||||||
title: 'text-xs',
|
|
||||||
description: 'text-xs',
|
|
||||||
meta: 'text-xs',
|
|
||||||
};
|
|
||||||
case 'large':
|
|
||||||
return {
|
|
||||||
title: 'text-base',
|
|
||||||
description: 'text-sm',
|
|
||||||
meta: 'text-sm',
|
|
||||||
};
|
|
||||||
default: // medium
|
|
||||||
return {
|
|
||||||
title: 'text-sm',
|
|
||||||
description: 'text-xs',
|
|
||||||
meta: 'text-xs',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fontClasses = getFontSizeClasses();
|
|
||||||
|
|
||||||
// Helper pour construire l'URL Jira
|
|
||||||
const getJiraTicketUrl = (jiraKey: string): string => {
|
|
||||||
const baseUrl = preferences.jiraConfig.baseUrl;
|
|
||||||
if (!baseUrl || !jiraKey) return '';
|
|
||||||
return `${baseUrl}/browse/${jiraKey}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Helper pour construire l'URL TFS Pull Request
|
|
||||||
const getTfsPullRequestUrl = (
|
|
||||||
tfsPullRequestId: number,
|
|
||||||
tfsProject: string,
|
|
||||||
tfsRepository: string
|
|
||||||
): string => {
|
|
||||||
const tfsConfig = preferences.tfsConfig as TfsConfig;
|
|
||||||
const baseUrl = tfsConfig?.organizationUrl;
|
|
||||||
if (!baseUrl || !tfsPullRequestId || !tfsProject || !tfsRepository)
|
|
||||||
return '';
|
|
||||||
return `${baseUrl}/${encodeURIComponent(tfsProject)}/_git/${tfsRepository}/pullrequest/${tfsPullRequestId}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Configuration du draggable
|
// Configuration du draggable
|
||||||
const { attributes, listeners, setNodeRef, transform, isDragging } =
|
const { attributes, listeners, setNodeRef, transform, isDragging } =
|
||||||
useDraggable({
|
useDraggable({
|
||||||
id: task.id,
|
id: task.id,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Mettre à jour le titre local quand la tâche change
|
const handleDelete = async () => {
|
||||||
useEffect(() => {
|
|
||||||
setEditTitle(task.title);
|
|
||||||
}, [task.title]);
|
|
||||||
|
|
||||||
// Nettoyer le timeout au démontage
|
|
||||||
useEffect(() => {
|
|
||||||
const currentTimeout = timeoutRef.current;
|
|
||||||
return () => {
|
|
||||||
if (currentTimeout) {
|
|
||||||
clearTimeout(currentTimeout);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleDelete = async (e: React.MouseEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
if (window.confirm('Êtes-vous sûr de vouloir supprimer cette tâche ?')) {
|
if (window.confirm('Êtes-vous sûr de vouloir supprimer cette tâche ?')) {
|
||||||
startTransition(async () => {
|
startTransition(async () => {
|
||||||
const result = await deleteTask(task.id);
|
const result = await deleteTask(task.id);
|
||||||
if (!result.success) {
|
if (!result.success) {
|
||||||
console.error('Error deleting task:', result.error);
|
console.error('Error deleting task:', result.error);
|
||||||
// TODO: Afficher une notification d'erreur
|
|
||||||
} else {
|
} else {
|
||||||
// Rafraîchir les données après suppression réussie
|
|
||||||
await refreshTasks();
|
await refreshTasks();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEdit = (e: React.MouseEvent) => {
|
const handleEdit = () => {
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
if (onEdit) {
|
if (onEdit) {
|
||||||
onEdit(task);
|
onEdit(task);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleTitleClick = (e: React.MouseEvent) => {
|
const handleTitleSave = async (newTitle: string) => {
|
||||||
e.preventDefault();
|
startTransition(async () => {
|
||||||
e.stopPropagation();
|
const result = await updateTaskTitle(task.id, newTitle);
|
||||||
if (!isDragging && !isPending) {
|
if (!result.success) {
|
||||||
setIsEditingTitle(true);
|
console.error('Error updating task title:', result.error);
|
||||||
}
|
} else {
|
||||||
};
|
task.title = newTitle;
|
||||||
|
}
|
||||||
const handleTitleSave = async () => {
|
});
|
||||||
const trimmedTitle = editTitle.trim();
|
|
||||||
if (trimmedTitle && trimmedTitle !== task.title) {
|
|
||||||
startTransition(async () => {
|
|
||||||
const result = await updateTaskTitle(task.id, trimmedTitle);
|
|
||||||
if (!result.success) {
|
|
||||||
console.error('Error updating task title:', result.error);
|
|
||||||
// Remettre l'ancien titre en cas d'erreur
|
|
||||||
setEditTitle(task.title);
|
|
||||||
} else {
|
|
||||||
// Mettre à jour optimistiquement le titre local
|
|
||||||
// La Server Action a déjà mis à jour la DB, on synchronise juste l'affichage
|
|
||||||
task.title = 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
|
// Style de transformation pour le drag
|
||||||
@@ -168,389 +60,36 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) {
|
|||||||
}
|
}
|
||||||
: undefined;
|
: 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{1F900}-\u{1F9FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}])(?:[\u{200D}][\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F900}-\u{1F9FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{FE0F}])*/gu;
|
|
||||||
const titleEmojis = task.title.match(emojiRegex) || [];
|
|
||||||
const titleWithoutEmojis = task.title.replace(emojiRegex, '').trim();
|
|
||||||
|
|
||||||
// Composant titre avec tooltip
|
|
||||||
const TitleWithTooltip = () => (
|
|
||||||
<div className="relative flex-1">
|
|
||||||
<h4
|
|
||||||
className={`font-mono ${fontClasses.title} font-medium text-[var(--foreground)] leading-tight line-clamp-2 cursor-pointer hover:text-[var(--primary)] transition-colors`}
|
|
||||||
onClick={handleTitleClick}
|
|
||||||
title="Cliquer pour éditer"
|
|
||||||
>
|
|
||||||
{titleWithoutEmojis}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Si pas d'emoji dans le titre, utiliser l'emoji du premier tag
|
|
||||||
let displayEmojis: string[] = titleEmojis;
|
|
||||||
if (displayEmojis.length === 0 && task.tags && task.tags.length > 0) {
|
|
||||||
const firstTag = availableTags.find((tag) => tag.name === task.tags[0]);
|
|
||||||
if (firstTag) {
|
|
||||||
const tagEmojis = firstTag.name.match(emojiRegex);
|
|
||||||
if (tagEmojis && tagEmojis.length > 0) {
|
|
||||||
displayEmojis = [tagEmojis[0]]; // Prendre seulement le premier emoji du tag
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Styles spéciaux pour les tâches Jira
|
|
||||||
const isJiraTask = task.source === 'jira';
|
|
||||||
const jiraStyles = isJiraTask
|
|
||||||
? {
|
|
||||||
border: '1px solid rgba(0, 130, 201, 0.3)',
|
|
||||||
borderLeft: '3px solid #0082C9',
|
|
||||||
background:
|
|
||||||
'linear-gradient(135deg, rgba(0, 130, 201, 0.05) 0%, rgba(0, 130, 201, 0.02) 100%)',
|
|
||||||
}
|
|
||||||
: {};
|
|
||||||
|
|
||||||
// Styles spéciaux pour les tâches TFS
|
|
||||||
const isTfsTask = task.source === 'tfs';
|
|
||||||
const tfsStyles = isTfsTask
|
|
||||||
? {
|
|
||||||
border: '1px solid rgba(255, 165, 0, 0.3)',
|
|
||||||
borderLeft: '3px solid #FFA500',
|
|
||||||
background:
|
|
||||||
'linear-gradient(135deg, rgba(255, 165, 0, 0.05) 0%, rgba(255, 165, 0, 0.02) 100%)',
|
|
||||||
}
|
|
||||||
: {};
|
|
||||||
|
|
||||||
// Combiner les styles spéciaux
|
|
||||||
const specialStyles = { ...jiraStyles, ...tfsStyles };
|
|
||||||
|
|
||||||
// Vue compacte : seulement le titre
|
|
||||||
if (compactView) {
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
ref={setNodeRef}
|
|
||||||
style={{ ...style, ...specialStyles }}
|
|
||||||
className={`p-2 hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group ${
|
|
||||||
isDragging ? 'opacity-50 rotate-3 scale-105' : ''
|
|
||||||
} ${task.status === 'done' || task.status === 'archived' ? 'opacity-60' : ''} ${
|
|
||||||
task.status === 'freeze' ? 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]' : ''
|
|
||||||
} ${
|
|
||||||
isJiraTask ? 'jira-task' : ''
|
|
||||||
} ${
|
|
||||||
isTfsTask ? 'tfs-task' : ''
|
|
||||||
} ${isPending ? 'opacity-70 pointer-events-none' : ''}`}
|
|
||||||
{...attributes}
|
|
||||||
{...(isEditingTitle ? {} : listeners)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{displayEmojis.length > 0 && (
|
|
||||||
<div className="flex gap-1 flex-shrink-0">
|
|
||||||
{displayEmojis.slice(0, 1).map((emoji, index) => (
|
|
||||||
<span
|
|
||||||
key={index}
|
|
||||||
className="text-base opacity-90 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-[var(--foreground)] font-mono ${fontClasses.title} font-medium leading-tight`}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<TitleWithTooltip />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-center gap-1 flex-shrink-0">
|
|
||||||
{/* Boutons d'action compacts - masqués en mode édition */}
|
|
||||||
{!isEditingTitle && onEdit && (
|
|
||||||
<button
|
|
||||||
onClick={handleEdit}
|
|
||||||
disabled={isPending}
|
|
||||||
className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--primary)]/20 hover:bg-[var(--primary)]/30 border border-[var(--primary)]/30 hover:border-[var(--primary)]/50 flex items-center justify-center transition-all duration-200 text-[var(--primary)] hover:text-[var(--primary)] text-xs disabled:opacity-50"
|
|
||||||
title="Modifier la tâche"
|
|
||||||
>
|
|
||||||
✎
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!isEditingTitle && (
|
|
||||||
<button
|
|
||||||
onClick={handleDelete}
|
|
||||||
disabled={isPending}
|
|
||||||
className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] hover:text-[var(--destructive)] text-xs disabled:opacity-50"
|
|
||||||
title="Supprimer la tâche"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Indicateur de priorité compact */}
|
|
||||||
<div
|
|
||||||
className="w-1.5 h-1.5 rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor: getPriorityColorHex(
|
|
||||||
getPriorityConfig(task.priority).color
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vue détaillée : version complète
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<UITaskCard
|
||||||
ref={setNodeRef}
|
ref={setNodeRef}
|
||||||
style={{ ...style, ...specialStyles }}
|
style={style}
|
||||||
className={`p-3 hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group ${
|
variant={compactView ? 'compact' : 'detailed'}
|
||||||
isDragging ? 'opacity-50 rotate-3 scale-105' : ''
|
source={task.source || 'manual'}
|
||||||
} ${task.status === 'done' || task.status === 'archived' ? 'opacity-60' : ''} ${
|
title={task.title}
|
||||||
task.status === 'freeze' ? 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]' : ''
|
description={task.description}
|
||||||
} ${
|
tags={task.tags}
|
||||||
isJiraTask ? 'jira-task' : ''
|
priority={task.priority}
|
||||||
} ${
|
status={task.status}
|
||||||
isTfsTask ? 'tfs-task' : ''
|
dueDate={task.dueDate}
|
||||||
} ${isPending ? 'opacity-70 pointer-events-none' : ''}`}
|
completedAt={task.completedAt}
|
||||||
|
jiraKey={task.jiraKey}
|
||||||
|
jiraProject={task.jiraProject}
|
||||||
|
jiraType={task.jiraType}
|
||||||
|
tfsPullRequestId={task.tfsPullRequestId}
|
||||||
|
tfsProject={task.tfsProject}
|
||||||
|
tfsRepository={task.tfsRepository}
|
||||||
|
isDragging={isDragging}
|
||||||
|
isPending={isPending}
|
||||||
|
onEdit={handleEdit}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
onTitleSave={handleTitleSave}
|
||||||
|
fontSize={preferences.viewPreferences.fontSize}
|
||||||
|
availableTags={availableTags}
|
||||||
|
jiraConfig={preferences.jiraConfig}
|
||||||
|
tfsConfig={preferences.tfsConfig}
|
||||||
{...attributes}
|
{...attributes}
|
||||||
{...(isEditingTitle ? {} : listeners)}
|
{...listeners}
|
||||||
>
|
/>
|
||||||
{/* Header tech avec titre et status */}
|
|
||||||
<div className="flex items-start gap-2 mb-2">
|
|
||||||
{displayEmojis.length > 0 && (
|
|
||||||
<div className="flex gap-1 flex-shrink-0">
|
|
||||||
{displayEmojis.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-[var(--foreground)] font-mono text-sm font-medium leading-tight"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<TitleWithTooltip />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-center gap-1 flex-shrink-0">
|
|
||||||
{/* Bouton d'édition discret - masqué en mode édition */}
|
|
||||||
{!isEditingTitle && onEdit && (
|
|
||||||
<button
|
|
||||||
onClick={handleEdit}
|
|
||||||
disabled={isPending}
|
|
||||||
className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-[var(--primary)]/20 hover:bg-[var(--primary)]/30 border border-[var(--primary)]/30 hover:border-[var(--primary)]/50 flex items-center justify-center transition-all duration-200 text-[var(--primary)] hover:text-[var(--primary)] text-xs disabled:opacity-50"
|
|
||||||
title="Modifier la tâche"
|
|
||||||
>
|
|
||||||
✎
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Bouton de suppression discret - masqué en mode édition */}
|
|
||||||
{!isEditingTitle && (
|
|
||||||
<button
|
|
||||||
onClick={handleDelete}
|
|
||||||
disabled={isPending}
|
|
||||||
className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] hover:text-[var(--destructive)] text-xs disabled:opacity-50"
|
|
||||||
title="Supprimer la tâche"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Indicateur de priorité tech */}
|
|
||||||
<div
|
|
||||||
className="w-2 h-2 rounded-full animate-pulse shadow-sm"
|
|
||||||
style={{
|
|
||||||
backgroundColor: getPriorityColorHex(
|
|
||||||
getPriorityConfig(task.priority).color
|
|
||||||
),
|
|
||||||
boxShadow: `0 0 4px ${getPriorityColorHex(getPriorityConfig(task.priority).color)}50`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Description tech */}
|
|
||||||
{task.description && (
|
|
||||||
<p
|
|
||||||
className={`${fontClasses.description} text-[var(--muted-foreground)] 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-[var(--border)]/50">
|
|
||||||
<div
|
|
||||||
className={`flex items-center justify-between ${fontClasses.meta}`}
|
|
||||||
>
|
|
||||||
{task.dueDate ? (
|
|
||||||
<span className="flex items-center gap-1 text-[var(--muted-foreground)] font-mono">
|
|
||||||
<span className="text-[var(--primary)]">⏰</span>
|
|
||||||
{formatDistanceToNow(task.dueDate, {
|
|
||||||
addSuffix: true,
|
|
||||||
locale: fr,
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<div></div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{task.source !== 'manual' &&
|
|
||||||
task.source &&
|
|
||||||
(task.source === 'jira' && task.jiraKey ? (
|
|
||||||
preferences.jiraConfig.baseUrl ? (
|
|
||||||
<a
|
|
||||||
href={getJiraTicketUrl(task.jiraKey)}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
className="hover:scale-105 transition-transform"
|
|
||||||
>
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="hover:bg-blue-500/10 hover:border-blue-400/50 cursor-pointer"
|
|
||||||
>
|
|
||||||
{task.jiraKey}
|
|
||||||
</Badge>
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
<Badge variant="outline" size="sm">
|
|
||||||
{task.jiraKey}
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
) : task.source === 'tfs' && task.tfsPullRequestId ? (
|
|
||||||
preferences.tfsConfig &&
|
|
||||||
(preferences.tfsConfig as TfsConfig).organizationUrl ? (
|
|
||||||
<a
|
|
||||||
href={getTfsPullRequestUrl(
|
|
||||||
task.tfsPullRequestId,
|
|
||||||
task.tfsProject || '',
|
|
||||||
task.tfsRepository || ''
|
|
||||||
)}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
className="hover:scale-105 transition-transform"
|
|
||||||
>
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="hover:bg-orange-500/10 hover:border-orange-400/50 cursor-pointer"
|
|
||||||
>
|
|
||||||
PR-{task.tfsPullRequestId}
|
|
||||||
</Badge>
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
<Badge variant="outline" size="sm">
|
|
||||||
PR-{task.tfsPullRequestId}
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<Badge variant="outline" size="sm">
|
|
||||||
{task.source}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{/* Badges spécifiques TFS */}
|
|
||||||
{task.tfsRepository && (
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="text-orange-400 border-orange-400/30"
|
|
||||||
>
|
|
||||||
{task.tfsRepository}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{task.jiraProject && (
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="text-blue-400 border-blue-400/30"
|
|
||||||
>
|
|
||||||
{task.jiraProject}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{task.jiraType && (
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="text-purple-400 border-purple-400/30"
|
|
||||||
>
|
|
||||||
{task.jiraType}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{task.completedAt && (
|
|
||||||
<span className="text-emerald-400 font-mono font-bold">
|
|
||||||
✓ DONE
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,83 +1,544 @@
|
|||||||
import { ReactNode } from 'react';
|
import { HTMLAttributes, forwardRef, useState, useEffect, useRef } from 'react';
|
||||||
import { Badge } from './Badge';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Card } from './Card';
|
||||||
|
import { Badge } from './Badge';
|
||||||
|
|
||||||
interface TaskCardProps {
|
interface TaskCardProps extends HTMLAttributes<HTMLDivElement> {
|
||||||
|
// Variants
|
||||||
|
variant?: 'compact' | 'detailed';
|
||||||
|
source?: 'manual' | 'jira' | 'tfs' | 'reminders';
|
||||||
|
|
||||||
|
// Content
|
||||||
title: string;
|
title: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
status?: string;
|
tags?: string[];
|
||||||
priority?: string;
|
priority?: 'low' | 'medium' | 'high' | 'urgent';
|
||||||
tags?: ReactNode[];
|
|
||||||
metadata?: ReactNode;
|
// Status & metadata
|
||||||
actions?: ReactNode;
|
status?: 'todo' | 'in_progress' | 'review' | 'done' | 'archived' | 'freeze' | 'backlog' | 'cancelled';
|
||||||
|
dueDate?: Date;
|
||||||
|
completedAt?: Date;
|
||||||
|
|
||||||
|
// Source-specific data
|
||||||
|
jiraKey?: string;
|
||||||
|
jiraProject?: string;
|
||||||
|
jiraType?: string;
|
||||||
|
tfsPullRequestId?: number;
|
||||||
|
tfsProject?: string;
|
||||||
|
tfsRepository?: string;
|
||||||
|
|
||||||
|
// Interactive
|
||||||
|
isDragging?: boolean;
|
||||||
|
isPending?: boolean;
|
||||||
|
isEditing?: boolean;
|
||||||
|
onEdit?: (e?: React.MouseEvent) => void;
|
||||||
|
onDelete?: (e?: React.MouseEvent) => void;
|
||||||
|
onTitleClick?: (e?: React.MouseEvent) => void;
|
||||||
|
onTitleSave?: (title: string) => void;
|
||||||
|
|
||||||
|
// Styling & behavior
|
||||||
className?: string;
|
className?: string;
|
||||||
|
fontSize?: 'small' | 'medium' | 'large';
|
||||||
|
availableTags?: Array<{ id: string; name: string; color: string }>;
|
||||||
|
jiraConfig?: { baseUrl?: string };
|
||||||
|
tfsConfig?: { organizationUrl?: string };
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TaskCard({
|
const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
|
||||||
title,
|
({
|
||||||
description,
|
variant = 'detailed',
|
||||||
status,
|
source = 'manual',
|
||||||
priority,
|
title,
|
||||||
tags,
|
description,
|
||||||
metadata,
|
tags = [],
|
||||||
actions,
|
priority = 'medium',
|
||||||
className
|
status,
|
||||||
}: TaskCardProps) {
|
dueDate,
|
||||||
return (
|
completedAt,
|
||||||
<div
|
jiraKey,
|
||||||
className={cn(
|
jiraProject,
|
||||||
"p-3 border border-[var(--border)] rounded-lg hover:bg-[var(--card)]/50 transition-colors",
|
jiraType,
|
||||||
className
|
tfsPullRequestId,
|
||||||
)}
|
tfsProject,
|
||||||
>
|
tfsRepository,
|
||||||
<div className="flex items-start justify-between gap-3">
|
isDragging = false,
|
||||||
<div className="flex-1 min-w-0">
|
isPending = false,
|
||||||
<div className="flex items-center gap-2 mb-1">
|
onEdit,
|
||||||
<h4 className="font-medium text-sm truncate text-[var(--foreground)]">
|
onDelete,
|
||||||
{title}
|
onTitleClick,
|
||||||
</h4>
|
onTitleSave,
|
||||||
|
className,
|
||||||
|
fontSize = 'medium',
|
||||||
|
availableTags = [],
|
||||||
|
jiraConfig,
|
||||||
|
tfsConfig,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}, ref) => {
|
||||||
|
|
||||||
|
// État local pour l'édition du titre
|
||||||
|
const [isEditingTitle, setIsEditingTitle] = useState(false);
|
||||||
|
const [editTitle, setEditTitle] = useState(title);
|
||||||
|
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
|
|
||||||
|
// Mettre à jour le titre local quand la prop change
|
||||||
|
useEffect(() => {
|
||||||
|
setEditTitle(title);
|
||||||
|
}, [title]);
|
||||||
|
|
||||||
|
// Nettoyer le timeout au démontage
|
||||||
|
useEffect(() => {
|
||||||
|
const currentTimeout = timeoutRef.current;
|
||||||
|
return () => {
|
||||||
|
if (currentTimeout) {
|
||||||
|
clearTimeout(currentTimeout);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Gestionnaires d'événements avec preventDefault/stopPropagation
|
||||||
|
const handleEdit = (e?: React.MouseEvent) => {
|
||||||
|
e?.preventDefault();
|
||||||
|
e?.stopPropagation();
|
||||||
|
onEdit?.(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (e?: React.MouseEvent) => {
|
||||||
|
e?.preventDefault();
|
||||||
|
e?.stopPropagation();
|
||||||
|
onDelete?.(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTitleClick = (e?: React.MouseEvent) => {
|
||||||
|
e?.preventDefault();
|
||||||
|
e?.stopPropagation();
|
||||||
|
if (!isDragging && !isPending) {
|
||||||
|
setIsEditingTitle(true);
|
||||||
|
}
|
||||||
|
onTitleClick?.(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTitleSave = async () => {
|
||||||
|
const trimmedTitle = editTitle.trim();
|
||||||
|
if (trimmedTitle && trimmedTitle !== title) {
|
||||||
|
onTitleSave?.(trimmedTitle);
|
||||||
|
}
|
||||||
|
setIsEditingTitle(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTitleCancel = () => {
|
||||||
|
setEditTitle(title);
|
||||||
|
setIsEditingTitle(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTitleKeyPress = (e: React.KeyboardEvent) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
handleTitleSave();
|
||||||
|
} else if (e.key === 'Escape') {
|
||||||
|
e.preventDefault();
|
||||||
|
handleTitleCancel();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Classes CSS pour les différentes tailles de police
|
||||||
|
const getFontSizeClasses = () => {
|
||||||
|
switch (fontSize) {
|
||||||
|
case 'small':
|
||||||
|
return {
|
||||||
|
title: 'text-xs',
|
||||||
|
description: 'text-xs',
|
||||||
|
meta: 'text-xs',
|
||||||
|
};
|
||||||
|
case 'large':
|
||||||
|
return {
|
||||||
|
title: 'text-base',
|
||||||
|
description: 'text-sm',
|
||||||
|
meta: 'text-sm',
|
||||||
|
};
|
||||||
|
default: // medium
|
||||||
|
return {
|
||||||
|
title: 'text-sm',
|
||||||
|
description: 'text-xs',
|
||||||
|
meta: 'text-xs',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fontClasses = getFontSizeClasses();
|
||||||
|
|
||||||
|
// Styles spéciaux pour les sources
|
||||||
|
const getSourceStyles = () => {
|
||||||
|
if (source === 'jira') {
|
||||||
|
return {
|
||||||
|
border: '2px solid rgba(0, 130, 201, 0.8)',
|
||||||
|
borderLeft: '6px solid #0052CC',
|
||||||
|
background: 'linear-gradient(135deg, rgba(0, 130, 201, 0.3) 0%, rgba(0, 130, 201, 0.2) 100%)',
|
||||||
|
boxShadow: '0 4px 12px rgba(0, 130, 201, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (source === 'tfs') {
|
||||||
|
return {
|
||||||
|
border: '2px solid rgba(255, 165, 0, 0.8)',
|
||||||
|
borderLeft: '6px solid #FF8C00',
|
||||||
|
background: 'linear-gradient(135deg, rgba(255, 165, 0, 0.3) 0%, rgba(255, 165, 0, 0.2) 100%)',
|
||||||
|
boxShadow: '0 4px 12px rgba(255, 165, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Couleurs de priorité
|
||||||
|
const getPriorityColor = (priority: string) => {
|
||||||
|
const colors = {
|
||||||
|
low: '#10b981', // green
|
||||||
|
medium: '#f59e0b', // amber
|
||||||
|
high: '#ef4444', // red
|
||||||
|
urgent: '#dc2626', // red-600
|
||||||
|
};
|
||||||
|
return colors[priority as keyof typeof colors] || colors.medium;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Extraire les emojis du titre
|
||||||
|
const emojiRegex = /(?:[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F900}-\u{1F9FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}])(?:[\u{200D}][\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F900}-\u{1F9FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{FE0F}])*/gu;
|
||||||
|
const titleEmojis = title.match(emojiRegex) || [];
|
||||||
|
const titleWithoutEmojis = title.replace(emojiRegex, '').trim();
|
||||||
|
|
||||||
|
// Si pas d'emoji dans le titre, utiliser l'emoji du premier tag
|
||||||
|
let displayEmojis: string[] = titleEmojis;
|
||||||
|
if (displayEmojis.length === 0 && tags && tags.length > 0) {
|
||||||
|
const firstTag = availableTags.find((tag) => tag.name === tags[0]);
|
||||||
|
if (firstTag) {
|
||||||
|
const tagEmojis = firstTag.name.match(emojiRegex);
|
||||||
|
if (tagEmojis && tagEmojis.length > 0) {
|
||||||
|
displayEmojis = [tagEmojis[0]]; // Prendre seulement le premier emoji du tag
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const sourceStyles = getSourceStyles();
|
||||||
|
const priorityColor = getPriorityColor(priority);
|
||||||
|
|
||||||
|
// Vue compacte
|
||||||
|
if (variant === 'compact') {
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
ref={ref}
|
||||||
|
style={sourceStyles}
|
||||||
|
className={cn(
|
||||||
|
'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
|
||||||
|
isDragging && 'opacity-50 rotate-3 scale-105',
|
||||||
|
(status === 'done' || status === 'archived') && 'opacity-60',
|
||||||
|
status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',
|
||||||
|
source === 'jira' && 'bg-blue-50 dark:bg-blue-900/20',
|
||||||
|
source === 'tfs' && 'bg-orange-50 dark:bg-orange-900/20',
|
||||||
|
isPending && 'opacity-70 pointer-events-none',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className="p-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{/* Emojis */}
|
||||||
|
{displayEmojis.length > 0 && (
|
||||||
|
<div className="flex gap-1 flex-shrink-0">
|
||||||
|
{displayEmojis.slice(0, 1).map((emoji, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="text-base opacity-90 font-emoji"
|
||||||
|
style={{
|
||||||
|
fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif',
|
||||||
|
fontVariantEmoji: 'normal',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{emoji}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Titre ou input d'édition */}
|
||||||
|
{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-[var(--foreground)] font-mono ${fontClasses.title} font-medium leading-tight`}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<h4
|
||||||
|
className={`flex-1 font-mono ${fontClasses.title} font-medium text-[var(--foreground)] leading-tight line-clamp-2 cursor-pointer hover:text-[var(--primary)] transition-colors`}
|
||||||
|
onClick={handleTitleClick}
|
||||||
|
title="Cliquer pour éditer"
|
||||||
|
>
|
||||||
|
{titleWithoutEmojis}
|
||||||
|
</h4>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex items-center gap-1 flex-shrink-0">
|
||||||
|
{!isEditingTitle && onEdit && (
|
||||||
|
<button
|
||||||
|
onClick={handleEdit}
|
||||||
|
disabled={isPending}
|
||||||
|
className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--primary)]/20 hover:bg-[var(--primary)]/30 border border-[var(--primary)]/30 hover:border-[var(--primary)]/50 flex items-center justify-center transition-all duration-200 text-[var(--primary)] hover:text-[var(--primary)] text-xs disabled:opacity-50"
|
||||||
|
title="Modifier la tâche"
|
||||||
|
>
|
||||||
|
✎
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isEditingTitle && onDelete && (
|
||||||
|
<button
|
||||||
|
onClick={handleDelete}
|
||||||
|
disabled={isPending}
|
||||||
|
className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] hover:text-[var(--destructive)] text-xs disabled:opacity-50"
|
||||||
|
title="Supprimer la tâche"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Indicateur de priorité */}
|
||||||
|
<div
|
||||||
|
className="w-1.5 h-1.5 rounded-full"
|
||||||
|
style={{ backgroundColor: priorityColor }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vue détaillée
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
ref={ref}
|
||||||
|
style={sourceStyles}
|
||||||
|
className={cn(
|
||||||
|
'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
|
||||||
|
isDragging && 'opacity-50 rotate-3 scale-105',
|
||||||
|
(status === 'done' || status === 'archived') && 'opacity-60',
|
||||||
|
status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',
|
||||||
|
source === 'jira' && 'bg-blue-50 dark:bg-blue-900/20',
|
||||||
|
source === 'tfs' && 'bg-orange-50 dark:bg-orange-900/20',
|
||||||
|
isPending && 'opacity-70 pointer-events-none',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className={`px-3 pt-3 ${(dueDate || (source && source !== 'manual') || completedAt) ? 'pb-3' : 'pb-0'}`}>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start gap-2 mb-2">
|
||||||
|
{/* Emojis */}
|
||||||
|
{displayEmojis.length > 0 && (
|
||||||
|
<div className="flex gap-1 flex-shrink-0">
|
||||||
|
{displayEmojis.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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Titre ou input d'édition */}
|
||||||
|
{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-[var(--foreground)] font-mono text-sm font-medium leading-tight"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<h4
|
||||||
|
className={`flex-1 font-mono ${fontClasses.title} font-medium text-[var(--foreground)] leading-tight line-clamp-2 cursor-pointer hover:text-[var(--primary)] transition-colors`}
|
||||||
|
onClick={handleTitleClick}
|
||||||
|
title="Cliquer pour éditer"
|
||||||
|
>
|
||||||
|
{titleWithoutEmojis}
|
||||||
|
</h4>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex items-center gap-1 flex-shrink-0">
|
||||||
|
{!isEditingTitle && onEdit && (
|
||||||
|
<button
|
||||||
|
onClick={handleEdit}
|
||||||
|
disabled={isPending}
|
||||||
|
className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-[var(--primary)]/20 hover:bg-[var(--primary)]/30 border border-[var(--primary)]/30 hover:border-[var(--primary)]/50 flex items-center justify-center transition-all duration-200 text-[var(--primary)] hover:text-[var(--primary)] text-xs disabled:opacity-50"
|
||||||
|
title="Modifier la tâche"
|
||||||
|
>
|
||||||
|
✎
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isEditingTitle && onDelete && (
|
||||||
|
<button
|
||||||
|
onClick={handleDelete}
|
||||||
|
disabled={isPending}
|
||||||
|
className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] hover:text-[var(--destructive)] text-xs disabled:opacity-50"
|
||||||
|
title="Supprimer la tâche"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Indicateur de priorité */}
|
||||||
|
<div
|
||||||
|
className="w-2 h-2 rounded-full animate-pulse shadow-sm"
|
||||||
|
style={{
|
||||||
|
backgroundColor: priorityColor,
|
||||||
|
boxShadow: `0 0 4px ${priorityColor}50`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
{description && (
|
{description && (
|
||||||
<p className="text-xs text-[var(--muted-foreground)] mb-2 line-clamp-1">
|
<p className={`${fontClasses.description} text-[var(--muted-foreground)] mb-3 line-clamp-1 font-mono`}>
|
||||||
{description}
|
{description}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
{/* Tags avec couleurs personnalisées */}
|
||||||
{status && (
|
{tags.length > 0 && (
|
||||||
<Badge variant="outline" className="text-xs">
|
<div className="mb-3">
|
||||||
{status}
|
<div className="flex flex-wrap gap-1">
|
||||||
</Badge>
|
{tags.slice(0, 3).map((tag, index) => {
|
||||||
)}
|
const tagConfig = availableTags.find(t => t.name === tag);
|
||||||
|
return (
|
||||||
{priority && (
|
<Badge
|
||||||
<span className="text-xs font-medium text-[var(--muted-foreground)]">
|
key={index}
|
||||||
{priority}
|
variant="outline"
|
||||||
</span>
|
size="sm"
|
||||||
)}
|
style={tagConfig?.color ? {
|
||||||
|
borderColor: `${tagConfig.color}40`,
|
||||||
{tags && tags.length > 0 && (
|
color: tagConfig.color
|
||||||
<div className="flex gap-1">
|
} : undefined}
|
||||||
{tags}
|
>
|
||||||
|
{tag}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{tags.length > 3 && (
|
||||||
|
<Badge variant="outline" size="sm">
|
||||||
|
+{tags.length - 3}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{metadata && (
|
|
||||||
<div className="text-xs text-[var(--muted-foreground)] whitespace-nowrap">
|
|
||||||
{metadata}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{actions && (
|
|
||||||
<div className="flex items-center gap-1">
|
{/* Footer avec métadonnées */}
|
||||||
{actions}
|
{(dueDate || (source && source !== 'manual') || completedAt) && (
|
||||||
|
<div className="pt-2 border-t border-[var(--border)]/50">
|
||||||
|
<div className={`flex items-center justify-between ${fontClasses.meta}`}>
|
||||||
|
{/* Date d'échéance */}
|
||||||
|
{dueDate ? (
|
||||||
|
<span className="flex items-center gap-1 text-[var(--muted-foreground)] font-mono">
|
||||||
|
<span className="text-[var(--primary)]">⏰</span>
|
||||||
|
{dueDate.toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<div></div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Badges source */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{/* Jira */}
|
||||||
|
{source === 'jira' && jiraKey && (
|
||||||
|
jiraConfig?.baseUrl ? (
|
||||||
|
<a
|
||||||
|
href={`${jiraConfig.baseUrl}/browse/${jiraKey}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hover:scale-105 transition-transform"
|
||||||
|
>
|
||||||
|
<Badge variant="outline" size="sm" className="hover:bg-blue-500/10 hover:border-blue-400/50 cursor-pointer">
|
||||||
|
{jiraKey}
|
||||||
|
</Badge>
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<Badge variant="outline" size="sm">
|
||||||
|
{jiraKey}
|
||||||
|
</Badge>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* TFS */}
|
||||||
|
{source === 'tfs' && tfsPullRequestId && tfsProject && tfsRepository && (
|
||||||
|
tfsConfig?.organizationUrl ? (
|
||||||
|
<a
|
||||||
|
href={`${tfsConfig.organizationUrl}/${encodeURIComponent(tfsProject)}/_git/${tfsRepository}/pullrequest/${tfsPullRequestId}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hover:scale-105 transition-transform"
|
||||||
|
>
|
||||||
|
<Badge variant="outline" size="sm" className="hover:bg-orange-500/10 hover:border-orange-400/50 cursor-pointer">
|
||||||
|
PR-{tfsPullRequestId}
|
||||||
|
</Badge>
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<Badge variant="outline" size="sm">
|
||||||
|
PR-{tfsPullRequestId}
|
||||||
|
</Badge>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Projets */}
|
||||||
|
{jiraProject && (
|
||||||
|
<Badge variant="outline" size="sm" className="text-blue-400 border-blue-400/30">
|
||||||
|
{jiraProject}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tfsRepository && (
|
||||||
|
<Badge variant="outline" size="sm" className="text-orange-400 border-orange-400/30">
|
||||||
|
{tfsRepository}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Type Jira */}
|
||||||
|
{jiraType && (
|
||||||
|
<Badge variant="outline" size="sm" className="text-purple-400 border-purple-400/30">
|
||||||
|
{jiraType}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Statut terminé */}
|
||||||
|
{completedAt && (
|
||||||
|
<span className="text-emerald-400 font-mono font-bold">
|
||||||
|
✓ DONE
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Contenu personnalisé */}
|
||||||
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
</div>
|
);
|
||||||
);
|
}
|
||||||
}
|
);
|
||||||
|
|
||||||
|
TaskCard.displayName = 'TaskCard';
|
||||||
|
|
||||||
|
export { TaskCard };
|
||||||
Reference in New Issue
Block a user