feat: update CriticalDeadlinesCard to use TaskCard and add disableHover prop
- Replaced custom task rendering with TaskCard component for better consistency and maintainability. - Introduced disableHover prop to control hover effects on task cards. - Updated DeadlineOverview to pass disableHover prop as true.
This commit is contained in:
@@ -2,14 +2,18 @@
|
||||
|
||||
import { DeadlineTask } from '@/services/analytics/deadline-analytics';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { TaskCard } from '@/components/ui/TaskCard';
|
||||
import { useTasksContext } from '@/contexts/TasksContext';
|
||||
|
||||
interface CriticalDeadlinesCardProps {
|
||||
overdue: DeadlineTask[];
|
||||
critical: DeadlineTask[];
|
||||
warning: DeadlineTask[];
|
||||
disableHover?: boolean;
|
||||
}
|
||||
|
||||
export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDeadlinesCardProps) {
|
||||
export function CriticalDeadlinesCard({ overdue, critical, warning, disableHover = false }: CriticalDeadlinesCardProps) {
|
||||
const { tags: availableTags } = useTasksContext();
|
||||
// Combiner toutes les tâches urgentes et trier par urgence
|
||||
const urgentTasks = [...overdue, ...critical, ...warning]
|
||||
.sort((a, b) => {
|
||||
@@ -46,24 +50,6 @@ export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDe
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityIcon = (priority: string) => {
|
||||
switch (priority) {
|
||||
case 'urgent': return '🔥';
|
||||
case 'high': return '⬆️';
|
||||
case 'medium': return '➡️';
|
||||
case 'low': return '⬇️';
|
||||
default: return '❓';
|
||||
}
|
||||
};
|
||||
|
||||
const getSourceIcon = (source: string) => {
|
||||
switch (source.toLowerCase()) {
|
||||
case 'jira': return '🔵';
|
||||
case 'tfs': return '🟣';
|
||||
case 'manual': return '✏️';
|
||||
default: return '📋';
|
||||
}
|
||||
};
|
||||
|
||||
if (urgentTasks.length === 0) {
|
||||
return (
|
||||
@@ -93,62 +79,37 @@ export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDe
|
||||
{urgentTasks.map((task) => {
|
||||
const urgencyStyle = getUrgencyStyle(task);
|
||||
|
||||
const getStyleClass = (urgencyLevel: string) => {
|
||||
const getCardClassName = (urgencyLevel: string) => {
|
||||
let baseClass = '';
|
||||
if (urgencyLevel === 'overdue') {
|
||||
return 'outline-card-red';
|
||||
baseClass = 'border-[var(--destructive)]/60 shadow-[var(--destructive)]/20';
|
||||
} else if (urgencyLevel === 'critical') {
|
||||
return 'outline-card-orange';
|
||||
baseClass = 'border-[var(--accent)]/60 shadow-[var(--accent)]/20';
|
||||
} else {
|
||||
return 'outline-card-yellow';
|
||||
baseClass = 'border-[var(--yellow)]/60 shadow-[var(--yellow)]/20';
|
||||
}
|
||||
|
||||
if (disableHover) {
|
||||
baseClass += ' hover:scale-100 hover:shadow-none hover:border-current hover:-translate-y-0';
|
||||
}
|
||||
|
||||
return baseClass;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
className={getStyleClass(task.urgencyLevel)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-sm">{urgencyStyle.icon}</span>
|
||||
<span className="text-sm">{getSourceIcon(task.source)}</span>
|
||||
<span className="text-sm">{getPriorityIcon(task.priority)}</span>
|
||||
{task.jiraKey && (
|
||||
<span className="text-xs px-1.5 py-0.5 bg-[var(--border)] rounded font-mono">
|
||||
{task.jiraKey}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h4 className="font-medium text-sm leading-tight mb-0.5 truncate" title={task.title}>
|
||||
{task.title}
|
||||
</h4>
|
||||
|
||||
<div className="text-xs opacity-75">
|
||||
{urgencyStyle.text}
|
||||
</div>
|
||||
|
||||
{task.tags.length > 0 && (
|
||||
<div className="flex gap-1 mt-1.5 flex-wrap">
|
||||
{task.tags.slice(0, 2).map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="text-xs px-1.5 py-0.5 bg-[var(--accent)]/60 text-[var(--accent-foreground)] rounded"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{task.tags.length > 2 && (
|
||||
<span className="text-xs text-[var(--muted-foreground)] opacity-70">
|
||||
+{task.tags.length - 2}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
variant="detailed"
|
||||
source={task.source as 'manual' | 'jira' | 'tfs' | 'reminders'}
|
||||
title={`${urgencyStyle.icon} ${task.title}`}
|
||||
tags={task.tags}
|
||||
priority={task.priority as 'low' | 'medium' | 'high' | 'urgent'}
|
||||
dueDate={task.dueDate}
|
||||
jiraKey={task.jiraKey}
|
||||
fontSize="small"
|
||||
availableTags={availableTags}
|
||||
className={getCardClassName(task.urgencyLevel)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
@@ -27,6 +27,7 @@ export function DeadlineOverview({ metrics }: DeadlineOverviewProps) {
|
||||
overdue={metrics.overdue}
|
||||
critical={metrics.critical}
|
||||
warning={metrics.warning}
|
||||
disableHover={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user