986f1732ea
- Modified the condition in `PendingTasksSection` to reload tasks if `refreshTrigger` changes, ensuring data is refreshed after toggle/delete actions. This improves the accuracy of displayed pending tasks when filters are applied.
285 lines
11 KiB
TypeScript
285 lines
11 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect, useCallback, useTransition } from 'react';
|
||
import Link from 'next/link';
|
||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||
import { Button } from '@/components/ui/Button';
|
||
import { DailyCheckbox, DailyCheckboxType } from '@/lib/types';
|
||
import { dailyClient } from '@/clients/daily-client';
|
||
import { formatDateShort, getDaysAgo } from '@/lib/date-utils';
|
||
import { moveCheckboxToToday } from '@/actions/daily';
|
||
|
||
interface PendingTasksSectionProps {
|
||
onToggleCheckbox: (checkboxId: string) => Promise<void>;
|
||
onDeleteCheckbox: (checkboxId: string) => Promise<void>;
|
||
onRefreshDaily?: () => Promise<void>; // Pour rafraîchir la vue daily principale
|
||
refreshTrigger?: number; // Pour forcer le refresh depuis le parent
|
||
initialPendingTasks?: DailyCheckbox[]; // Données SSR
|
||
}
|
||
|
||
export function PendingTasksSection({
|
||
onToggleCheckbox,
|
||
onDeleteCheckbox,
|
||
onRefreshDaily,
|
||
refreshTrigger,
|
||
initialPendingTasks = []
|
||
}: PendingTasksSectionProps) {
|
||
const [isCollapsed, setIsCollapsed] = useState(false); // Open by default
|
||
const [pendingTasks, setPendingTasks] = useState<DailyCheckbox[]>(initialPendingTasks);
|
||
const [loading, setLoading] = useState(false);
|
||
const [isPending, startTransition] = useTransition();
|
||
const [filters, setFilters] = useState({
|
||
maxDays: 7,
|
||
type: 'all' as 'all' | DailyCheckboxType,
|
||
limit: 50
|
||
});
|
||
|
||
// Charger les tâches en attente
|
||
const loadPendingTasks = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const tasks = await dailyClient.getPendingCheckboxes({
|
||
maxDays: filters.maxDays,
|
||
excludeToday: true,
|
||
type: filters.type === 'all' ? undefined : filters.type,
|
||
limit: filters.limit
|
||
});
|
||
setPendingTasks(tasks);
|
||
} catch (error) {
|
||
console.error('Erreur lors du chargement des tâches en attente:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [filters]);
|
||
|
||
// Charger au montage et quand les filtres changent
|
||
useEffect(() => {
|
||
if (!isCollapsed) {
|
||
// Si on a des données initiales et qu'on utilise les filtres par défaut, ne pas recharger
|
||
// SAUF si refreshTrigger a changé (pour recharger après toggle/delete)
|
||
const hasInitialData = initialPendingTasks.length > 0;
|
||
const usingDefaultFilters = filters.maxDays === 7 && filters.type === 'all' && filters.limit === 50;
|
||
|
||
if (!hasInitialData || !usingDefaultFilters || (refreshTrigger && refreshTrigger > 0)) {
|
||
loadPendingTasks();
|
||
}
|
||
}
|
||
}, [isCollapsed, filters, refreshTrigger, loadPendingTasks, initialPendingTasks.length]);
|
||
|
||
// Gérer l'archivage d'une tâche
|
||
const handleArchiveTask = async (checkboxId: string) => {
|
||
try {
|
||
await dailyClient.archiveCheckbox(checkboxId);
|
||
await loadPendingTasks(); // Recharger la liste
|
||
} catch (error) {
|
||
console.error('Erreur lors de l\'archivage:', error);
|
||
}
|
||
};
|
||
|
||
// Gérer le cochage d'une tâche
|
||
const handleToggleTask = async (checkboxId: string) => {
|
||
await onToggleCheckbox(checkboxId);
|
||
await loadPendingTasks(); // Recharger la liste
|
||
};
|
||
|
||
// Gérer la suppression d'une tâche
|
||
const handleDeleteTask = async (checkboxId: string) => {
|
||
await onDeleteCheckbox(checkboxId);
|
||
await loadPendingTasks(); // Recharger la liste
|
||
};
|
||
|
||
// Gérer le déplacement d'une tâche à aujourd'hui
|
||
const handleMoveToToday = (checkboxId: string) => {
|
||
startTransition(async () => {
|
||
const result = await moveCheckboxToToday(checkboxId);
|
||
|
||
if (result.success) {
|
||
await loadPendingTasks(); // Recharger la liste des tâches en attente
|
||
if (onRefreshDaily) {
|
||
await onRefreshDaily(); // Rafraîchir la vue daily principale
|
||
}
|
||
} else {
|
||
console.error('Erreur lors du déplacement vers aujourd\'hui:', result.error);
|
||
}
|
||
});
|
||
};
|
||
|
||
// Obtenir la couleur selon l'ancienneté
|
||
const getAgeColor = (date: Date) => {
|
||
const days = getDaysAgo(date);
|
||
if (days <= 1) return 'text-green-600';
|
||
if (days <= 3) return 'text-yellow-600';
|
||
if (days <= 7) return 'text-orange-600';
|
||
return 'text-red-600';
|
||
};
|
||
|
||
// Obtenir l'icône selon le type
|
||
const getTypeIcon = (type: DailyCheckboxType) => {
|
||
return type === 'meeting' ? '🤝' : '📋';
|
||
};
|
||
|
||
const pendingCount = pendingTasks.length;
|
||
|
||
return (
|
||
<Card className="mt-6">
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<button
|
||
onClick={() => setIsCollapsed(!isCollapsed)}
|
||
className="flex items-center gap-2 text-lg font-semibold hover:text-[var(--primary)] transition-colors"
|
||
>
|
||
<span className={`transform transition-transform ${isCollapsed ? 'rotate-0' : 'rotate-90'}`}>
|
||
▶️
|
||
</span>
|
||
📋 Tâches en attente
|
||
{pendingCount > 0 && (
|
||
<span className="bg-[var(--warning)] text-[var(--warning-foreground)] px-2 py-1 rounded-full text-xs font-medium">
|
||
{pendingCount}
|
||
</span>
|
||
)}
|
||
</button>
|
||
|
||
{!isCollapsed && (
|
||
<div className="flex items-center gap-2">
|
||
{/* Filtres rapides */}
|
||
<select
|
||
value={filters.maxDays}
|
||
onChange={(e) => setFilters(prev => ({ ...prev, maxDays: parseInt(e.target.value) }))}
|
||
className="text-xs px-2 py-1 border border-[var(--border)] rounded bg-[var(--background)]"
|
||
>
|
||
<option value={7}>7 derniers jours</option>
|
||
<option value={14}>14 derniers jours</option>
|
||
<option value={30}>30 derniers jours</option>
|
||
</select>
|
||
|
||
<select
|
||
value={filters.type}
|
||
onChange={(e) => setFilters(prev => ({ ...prev, type: e.target.value as 'all' | DailyCheckboxType }))}
|
||
className="text-xs px-2 py-1 border border-[var(--border)] rounded bg-[var(--background)]"
|
||
>
|
||
<option value="all">Tous types</option>
|
||
<option value="task">Tâches</option>
|
||
<option value="meeting">Réunions</option>
|
||
</select>
|
||
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={loadPendingTasks}
|
||
disabled={loading}
|
||
>
|
||
{loading ? '🔄' : '↻'}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
|
||
{!isCollapsed && (
|
||
<CardContent>
|
||
{loading ? (
|
||
<div className="text-center py-4 text-[var(--muted-foreground)]">
|
||
Chargement des tâches en attente...
|
||
</div>
|
||
) : pendingTasks.length === 0 ? (
|
||
<div className="text-center py-4 text-[var(--muted-foreground)]">
|
||
🎉 Aucune tâche en attente ! Excellent travail.
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{pendingTasks.map((task) => {
|
||
const daysAgo = getDaysAgo(task.date);
|
||
const isArchived = task.text.includes('[ARCHIVÉ]');
|
||
|
||
return (
|
||
<div
|
||
key={task.id}
|
||
className={`flex items-center gap-3 p-3 rounded-lg border border-[var(--border)] ${
|
||
isArchived ? 'opacity-60 bg-[var(--muted)]/20' : 'bg-[var(--card)]'
|
||
}`}
|
||
>
|
||
{/* Checkbox */}
|
||
<button
|
||
onClick={() => handleToggleTask(task.id)}
|
||
disabled={isArchived}
|
||
className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
|
||
isArchived
|
||
? 'border-[var(--muted)] cursor-not-allowed'
|
||
: 'border-[var(--border)] hover:border-[var(--primary)]'
|
||
}`}
|
||
>
|
||
{task.isChecked && <span className="text-[var(--primary)]">✓</span>}
|
||
</button>
|
||
|
||
{/* Contenu */}
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<span>{getTypeIcon(task.type)}</span>
|
||
<span className={`text-sm font-medium ${isArchived ? 'line-through' : ''}`}>
|
||
{task.text}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-3 text-xs text-[var(--muted-foreground)]">
|
||
<span>{formatDateShort(task.date)}</span>
|
||
<span className={getAgeColor(task.date)}>
|
||
{daysAgo === 0 ? 'Aujourd\'hui' :
|
||
daysAgo === 1 ? 'Hier' :
|
||
`Il y a ${daysAgo} jours`}
|
||
</span>
|
||
{task.task && (
|
||
<Link
|
||
href={`/kanban?taskId=${task.task.id}`}
|
||
className="text-[var(--primary)] hover:text-[var(--primary)]/80 font-mono"
|
||
>
|
||
🔗 {task.task.title}
|
||
</Link>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="flex items-center gap-1">
|
||
{!isArchived && (
|
||
<>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleMoveToToday(task.id)}
|
||
disabled={isPending}
|
||
title="Déplacer à aujourd'hui"
|
||
className="text-xs px-2 py-1 text-[var(--primary)] hover:text-[var(--primary)] disabled:opacity-50"
|
||
>
|
||
📅
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleArchiveTask(task.id)}
|
||
title="Archiver cette tâche"
|
||
className="text-xs px-2 py-1"
|
||
>
|
||
📦
|
||
</Button>
|
||
</>
|
||
)}
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleDeleteTask(task.id)}
|
||
title="Supprimer cette tâche"
|
||
className="text-xs px-2 py-1 text-[var(--destructive)] hover:text-[var(--destructive)]"
|
||
>
|
||
🗑️
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
)}
|
||
</Card>
|
||
);
|
||
}
|