diff --git a/client/src/components/FormateurCombobox.tsx b/client/src/components/FormateurCombobox.tsx new file mode 100644 index 0000000..c28703d --- /dev/null +++ b/client/src/components/FormateurCombobox.tsx @@ -0,0 +1,166 @@ +import { useState, useEffect } from "react"; +import { Check, ChevronsUpDown, Plus } from "lucide-react"; +import { cn } from "@/lib/utils"; +import { Button } from "@/components/ui/button"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/components/ui/command"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { trpc } from "@/lib/trpc"; +import { toast } from "sonner"; + +interface FormateurComboboxProps { + value?: string | null; + onChange: (value: string) => void; + placeholder?: string; +} + +export default function FormateurCombobox({ + value, + onChange, + placeholder = "Sélectionner un formateur", +}: FormateurComboboxProps) { + const [open, setOpen] = useState(false); + const [isAddDialogOpen, setIsAddDialogOpen] = useState(false); + const [newFormateurNom, setNewFormateurNom] = useState(""); + + const { data: formateurs, refetch } = trpc.formateurs.list.useQuery(); + const createMutation = trpc.formateurs.create.useMutation({ + onSuccess: () => { + toast.success("Formateur ajouté avec succès"); + refetch(); + setIsAddDialogOpen(false); + setNewFormateurNom(""); + }, + onError: (error) => { + toast.error(`Erreur: ${error.message}`); + }, + }); + + const handleAddFormateur = () => { + if (!newFormateurNom.trim()) { + toast.error("Le nom du formateur est requis"); + return; + } + createMutation.mutate({ nom: newFormateurNom.trim() }); + }; + + const selectedFormateur = formateurs?.find((f) => f.nom === value); + + return ( + <> + + + + + + + + + Aucun formateur trouvé. + + {formateurs?.map((formateur) => ( + { + onChange(currentValue === value ? "" : currentValue); + setOpen(false); + }} + > + + {formateur.nom} + + ))} + + +
+ +
+
+
+
+ + + + + Ajouter un nouveau formateur + + Entrez le nom du formateur à ajouter à la liste. + + +
+
+ + setNewFormateurNom(e.target.value)} + placeholder="Ex: Jean Dupont" + /> +
+
+ + + + +
+
+ + ); +} diff --git a/client/src/pages/AdminSequences.tsx b/client/src/pages/AdminSequences.tsx index 42504b9..2384c3c 100644 --- a/client/src/pages/AdminSequences.tsx +++ b/client/src/pages/AdminSequences.tsx @@ -9,6 +9,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { trpc } from "@/lib/trpc"; import { Calendar, Edit, Eye, Plus, Trash2, X } from "lucide-react"; +import FormateurCombobox from "@/components/FormateurCombobox"; import { toast } from "sonner"; import { useLocation } from "wouter"; import { format } from "date-fns"; diff --git a/todo.md b/todo.md index a1a78c8..044a5bc 100644 --- a/todo.md +++ b/todo.md @@ -248,3 +248,9 @@ - [x] Ajouter les champs Public cible et Formateur dans le formulaire de modification - [x] Séparer Public cible et Formateur sur une ligne dédiée - [x] Tester la disposition sur différentes tailles d'écran + +## Correction bug FormateurCombobox + +- [x] Recréer le fichier FormateurCombobox.tsx manquant +- [x] Ajouter l'import de FormateurCombobox dans AdminSequences.tsx +- [x] Redémarrer le serveur pour détecter le nouveau fichier