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 { DeadlineTask } from '@/services/analytics/deadline-analytics';
|
||||||
import { Card } from '@/components/ui/Card';
|
import { Card } from '@/components/ui/Card';
|
||||||
|
import { TaskCard } from '@/components/ui/TaskCard';
|
||||||
|
import { useTasksContext } from '@/contexts/TasksContext';
|
||||||
|
|
||||||
interface CriticalDeadlinesCardProps {
|
interface CriticalDeadlinesCardProps {
|
||||||
overdue: DeadlineTask[];
|
overdue: DeadlineTask[];
|
||||||
critical: DeadlineTask[];
|
critical: DeadlineTask[];
|
||||||
warning: 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
|
// Combiner toutes les tâches urgentes et trier par urgence
|
||||||
const urgentTasks = [...overdue, ...critical, ...warning]
|
const urgentTasks = [...overdue, ...critical, ...warning]
|
||||||
.sort((a, b) => {
|
.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) {
|
if (urgentTasks.length === 0) {
|
||||||
return (
|
return (
|
||||||
@@ -93,62 +79,37 @@ export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDe
|
|||||||
{urgentTasks.map((task) => {
|
{urgentTasks.map((task) => {
|
||||||
const urgencyStyle = getUrgencyStyle(task);
|
const urgencyStyle = getUrgencyStyle(task);
|
||||||
|
|
||||||
const getStyleClass = (urgencyLevel: string) => {
|
const getCardClassName = (urgencyLevel: string) => {
|
||||||
|
let baseClass = '';
|
||||||
if (urgencyLevel === 'overdue') {
|
if (urgencyLevel === 'overdue') {
|
||||||
return 'outline-card-red';
|
baseClass = 'border-[var(--destructive)]/60 shadow-[var(--destructive)]/20';
|
||||||
} else if (urgencyLevel === 'critical') {
|
} else if (urgencyLevel === 'critical') {
|
||||||
return 'outline-card-orange';
|
baseClass = 'border-[var(--accent)]/60 shadow-[var(--accent)]/20';
|
||||||
} else {
|
} 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 (
|
return (
|
||||||
<div
|
<TaskCard
|
||||||
key={task.id}
|
key={task.id}
|
||||||
className={getStyleClass(task.urgencyLevel)}
|
variant="detailed"
|
||||||
>
|
source={task.source as 'manual' | 'jira' | 'tfs' | 'reminders'}
|
||||||
<div className="flex items-start justify-between gap-2">
|
title={`${urgencyStyle.icon} ${task.title}`}
|
||||||
<div className="flex-1 min-w-0">
|
tags={task.tags}
|
||||||
<div className="flex items-center gap-2 mb-1">
|
priority={task.priority as 'low' | 'medium' | 'high' | 'urgent'}
|
||||||
<span className="text-sm">{urgencyStyle.icon}</span>
|
dueDate={task.dueDate}
|
||||||
<span className="text-sm">{getSourceIcon(task.source)}</span>
|
jiraKey={task.jiraKey}
|
||||||
<span className="text-sm">{getPriorityIcon(task.priority)}</span>
|
fontSize="small"
|
||||||
{task.jiraKey && (
|
availableTags={availableTags}
|
||||||
<span className="text-xs px-1.5 py-0.5 bg-[var(--border)] rounded font-mono">
|
className={getCardClassName(task.urgencyLevel)}
|
||||||
{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>
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -27,6 +27,7 @@ export function DeadlineOverview({ metrics }: DeadlineOverviewProps) {
|
|||||||
overdue={metrics.overdue}
|
overdue={metrics.overdue}
|
||||||
critical={metrics.critical}
|
critical={metrics.critical}
|
||||||
warning={metrics.warning}
|
warning={metrics.warning}
|
||||||
|
disableHover={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user