manus-admin/formation-manager-itinova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Checkpoint: Refonte majeure du système de rappels : sélection granulaire au niveau des dates de formation individuelles (dateFormationId) au lieu des séquences. Permet de choisir précisément quelles dates d'une séquence recevront un rappel. Interface hiérarchique avec séquences dépliables et checkboxes par date. Scheduler adapté pour traiter date par date.

Browse Source
This commit is contained in:
Manus
2026-01-08 08:53:41 -05:00
parent 6ee87f9b22
commit f331f9bb5f
8 changed files with 363 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
client/src/components/DateFormationMultiSelect.tsx Normal file
View File

@@ -0,0 +1,199 @@
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Check, ChevronDown, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
interface DateFormation {
id: number;
date: string;
heureDebut: string;
heureFin: string;
}
interface Sequence {
id: number;
nom: string;
formationNom: string;
dates: DateFormation[];
}
interface DateFormationMultiSelectProps {
sequences: Sequence[];
selectedDateIds: number[];
onSelectionChange: (dateIds: number[]) => void;
}
export function DateFormationMultiSelect({
sequences,
selectedDateIds,
onSelectionChange,
}: DateFormationMultiSelectProps) {
const [open, setOpen] = useState(false);
const [expandedSequences, setExpandedSequences] = useState<Set<number>>(new Set());
const toggleSequence = (sequenceId: number) => {
const newExpanded = new Set(expandedSequences);
if (newExpanded.has(sequenceId)) {
newExpanded.delete(sequenceId);
} else {
newExpanded.add(sequenceId);
}
setExpandedSequences(newExpanded);
};
const toggleDate = (dateId: number) => {
const newSelection = selectedDateIds.includes(dateId)
? selectedDateIds.filter((id) => id !== dateId)
: [...selectedDateIds, dateId];
onSelectionChange(newSelection);
};
const toggleAllDatesInSequence = (sequence: Sequence) => {
const sequenceDateIds = sequence.dates.map((d) => d.id);
const allSelected = sequenceDateIds.every((id) => selectedDateIds.includes(id));
if (allSelected) {
// Désélectionner toutes les dates de cette séquence
onSelectionChange(selectedDateIds.filter((id) => !sequenceDateIds.includes(id)));
} else {
// Sélectionner toutes les dates de cette séquence
const newSelection = [...new Set([...selectedDateIds, ...sequenceDateIds])];
onSelectionChange(newSelection);
}
};
const formatDate = (dateStr: string) => {
const date = new Date(dateStr);
return date.toLocaleDateString("fr-FR", {
day: "2-digit",
month: "2-digit",
year: "numeric",
});
};
const getSelectedCount = () => {
return selectedDateIds.length;
};
const getSelectedLabel = () => {
const count = getSelectedCount();
if (count === 0) {
return "Toutes les dates (par défaut)";
}
return `${count} date(s) sélectionnée(s)`;
};
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="w-full justify-between"
>
{getSelectedLabel()}
<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0" align="start">
<div className="max-h-[400px] overflow-y-auto p-2">
{sequences.length === 0 ? (
<div className="py-6 text-center text-sm text-muted-foreground">
Aucune séquence disponible
</div>
) : (
<div className="space-y-1">
{sequences.map((sequence) => {
const sequenceDateIds = sequence.dates.map((d) => d.id);
const allSelected = sequenceDateIds.length > 0 &&
sequenceDateIds.every((id) => selectedDateIds.includes(id));
const someSelected = sequenceDateIds.some((id) => selectedDateIds.includes(id));
const isExpanded = expandedSequences.has(sequence.id);
return (
<div key={sequence.id} className="space-y-1">
{/* En-tête de séquence */}
<div className="flex items-center gap-2 rounded-sm hover:bg-accent p-2">
<button
onClick={() => toggleSequence(sequence.id)}
className="flex items-center gap-1 flex-1 text-left"
>
{isExpanded ? (
<ChevronDown className="h-4 w-4 shrink-0" />
) : (
<ChevronRight className="h-4 w-4 shrink-0" />
)}
<div className="flex-1 min-w-0">
<div className="font-medium text-sm truncate">
{sequence.nom}
</div>
<div className="text-xs text-muted-foreground truncate">
{sequence.formationNom} • {sequence.dates.length} date(s)
</div>
</div>
</button>
<button
onClick={() => toggleAllDatesInSequence(sequence)}
className={cn(
"h-4 w-4 shrink-0 rounded-sm border border-primary",
allSelected
? "bg-primary text-primary-foreground"
: someSelected
? "bg-primary/50 text-primary-foreground"
: "opacity-50 hover:opacity-100"
)}
>
{(allSelected || someSelected) && (
<Check className="h-3 w-3" />
)}
</button>
</div>
{/* Liste des dates */}
{isExpanded && (
<div className="ml-6 space-y-1">
{sequence.dates.map((date) => {
const isSelected = selectedDateIds.includes(date.id);
return (
<button
key={date.id}
onClick={() => toggleDate(date.id)}
className="flex items-center gap-2 w-full rounded-sm hover:bg-accent p-2 text-left"
>
<div
className={cn(
"h-4 w-4 shrink-0 rounded-sm border border-primary",
isSelected
? "bg-primary text-primary-foreground"
: "opacity-50 hover:opacity-100"
)}
>
{isSelected && <Check className="h-3 w-3" />}
</div>
<div className="flex-1 text-sm">
{formatDate(date.date)} • {date.heureDebut} - {date.heureFin}
</div>
</button>
);
})}
</div>
)}
</div>
);
})}
</div>
)}
</div>
<div className="border-t p-2 text-xs text-muted-foreground">
Si aucune date n'est sélectionnée, le rappel s'appliquera à toutes les dates
</div>
</PopoverContent>
</Popover>
);
}