Checkpoint: V1.23 - Amélioration boîte de dialogue d'ajout manuel d'apprenant : tri alphabétique (nom puis prénom) et champ de recherche en temps réel sur nom/prénom/email

client/src/components/AddInscritForm.tsx

@@ -2,8 +2,10 @@ import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
 import { trpc } from "@/lib/trpc";
 import { toast } from "sonner";
+import { Search } from "lucide-react";
 
 interface AddInscritFormProps {
   sequenceId: number;
@@ -14,6 +16,7 @@ interface AddInscritFormProps {
 export function AddInscritForm({ sequenceId, onSuccess, onCancel }: AddInscritFormProps) {
   const [selectedApprenantId, setSelectedApprenantId] = useState<string>("");
   const [statut, setStatut] = useState<"confirme" | "liste_attente">("confirme");
+  const [searchQuery, setSearchQuery] = useState<string>("");
 
   // Récupérer tous les apprenants
   const { data: apprenants, isLoading: loadingApprenants } = trpc.apprenants.list.useQuery();
@@ -32,10 +35,28 @@ export function AddInscritForm({ sequenceId, onSuccess, onCancel }: AddInscritFo
   });
 
   // Filtrer les apprenants déjà inscrits
-  const apprenantsDisponibles = apprenants?.filter(
+  let apprenantsDisponibles = apprenants?.filter(
     (apprenant) => !inscriptions?.some((inscription) => inscription.apprenantId === apprenant.id)
   ) || [];
 
+  // Trier par ordre alphabétique (nom puis prénom)
+  apprenantsDisponibles = apprenantsDisponibles.sort((a, b) => {
+    const nomCompare = a.nom.localeCompare(b.nom, 'fr', { sensitivity: 'base' });
+    if (nomCompare !== 0) return nomCompare;
+    return a.prenom.localeCompare(b.prenom, 'fr', { sensitivity: 'base' });
+  });
+
+  // Filtrer par recherche
+  if (searchQuery.trim()) {
+    const query = searchQuery.toLowerCase();
+    apprenantsDisponibles = apprenantsDisponibles.filter(
+      (apprenant) =>
+        apprenant.nom.toLowerCase().includes(query) ||
+        apprenant.prenom.toLowerCase().includes(query) ||
+        apprenant.email.toLowerCase().includes(query)
+    );
+  }
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     
@@ -57,23 +78,41 @@ export function AddInscritForm({ sequenceId, onSuccess, onCancel }: AddInscritFo
         <Label htmlFor="apprenant">Apprenant *</Label>
         {loadingApprenants ? (
           <div className="text-sm text-muted-foreground">Chargement...</div>
-        ) : apprenantsDisponibles.length === 0 ? (
+        ) : apprenantsDisponibles.length === 0 && !searchQuery ? (
           <div className="text-sm text-muted-foreground">
             Tous les apprenants sont déjà inscrits à cette séquence
           </div>
         ) : (
-          <Select value={selectedApprenantId} onValueChange={setSelectedApprenantId}>
-            <SelectTrigger id="apprenant">
-              <SelectValue placeholder="Sélectionnez un apprenant" />
-            </SelectTrigger>
-            <SelectContent>
-              {apprenantsDisponibles.map((apprenant) => (
-                <SelectItem key={apprenant.id} value={apprenant.id.toString()}>
-                  {apprenant.prenom} {apprenant.nom} ({apprenant.email})
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <>
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder="Rechercher par nom, prénom ou email..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+            {apprenantsDisponibles.length === 0 ? (
+              <div className="text-sm text-muted-foreground">
+                Aucun apprenant trouvé
+              </div>
+            ) : (
+              <Select value={selectedApprenantId} onValueChange={setSelectedApprenantId}>
+                <SelectTrigger id="apprenant">
+                  <SelectValue placeholder="Sélectionnez un apprenant" />
+                </SelectTrigger>
+                <SelectContent>
+                  {apprenantsDisponibles.map((apprenant) => (
+                    <SelectItem key={apprenant.id} value={apprenant.id.toString()}>
+                      {apprenant.nom} {apprenant.prenom} ({apprenant.email})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </>
         )}
       </div>