amélioration recherche utilisateurs avec bouton de validation

- Ajout d'un système de recherche avec bouton "Rechercher" - Support de la validation par touche Entrée - Recherche côté serveur avec filtres MongoDB sur nom et email - Réinitialisation automatique de la page lors d'une nouvelle recherche - Suppression du debounce automatique pour un contrôle utilisateur total 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 15:20:19 +01:00
parent 1c7bca8e35
commit dde1c8ba93
3 changed files with 99 additions and 76 deletions
--- a/app/api/collections/[collection]/route.ts
+++ b/app/api/collections/[collection]/route.ts
@@ -55,6 +55,7 @@ export async function GET(
    if (collection === "users") {
      const email = searchParams.get("email");
      const id = searchParams.get("id");
+      const search = searchParams.get("search"); // ✅ AJOUTER cette ligne

      if (email) {
        filter.email = email.toLowerCase();
@@ -69,6 +70,13 @@ export async function GET(
            { status: 400 }
          );
        }
+      } else if (search) {
+        // ✅ AJOUTER ce bloc
+        // Recherche partielle sur nom et email
+        filter.$or = [
+          { name: { $regex: search, $options: "i" } },
+          { email: { $regex: search, $options: "i" } },
+        ];
      }
    }

--- a/components/collections/users-table.tsx
+++ b/components/collections/users-table.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { useCollection } from "@/hooks/useCollection";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
@@ -20,10 +20,15 @@ import { LibreChatUser, LibreChatBalance } from "@/lib/types";

 export function UsersTable() {
  const [page, setPage] = useState(1);
-  const [searchTerm, setSearchTerm] = useState("");
+  const [searchInput, setSearchInput] = useState(""); // Ce que l'utilisateur tape
+  const [activeSearch, setActiveSearch] = useState(""); // Ce qui est réellement recherché
  const limit = 20;

-  // Charger les utilisateurs
+  // Réinitialiser la page à 1 quand une nouvelle recherche est lancée
+  useEffect(() => {
+    setPage(1);
+  }, [activeSearch]);
+
  const {
    data: users = [],
    total = 0,
@@ -31,11 +36,24 @@ export function UsersTable() {
  } = useCollection<LibreChatUser>("users", {
    page,
    limit,
+    search: activeSearch,
  });

+  // Fonction pour lancer la recherche
+  const handleSearch = () => {
+    setActiveSearch(searchInput);
+  };
+
+  // Gérer la touche Entrée
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+
  // Charger tous les balances pour associer les crédits
  const { data: balances = [] } = useCollection<LibreChatBalance>("balances", {
-    limit: 1000, // Charger tous les balances
+    limit: 1000,
  });

  // Créer une map des crédits par utilisateur
@@ -47,20 +65,6 @@ export function UsersTable() {
    return map;
  }, [balances]);

-  // Filtrer les utilisateurs selon le terme de recherche
-  const filteredUsers = useMemo(() => {
-    if (!searchTerm.trim()) {
-      return users;
-    }
-
-    const searchLower = searchTerm.toLowerCase();
-    return users.filter(
-      (user) =>
-        user.name?.toLowerCase().includes(searchLower) ||
-        user.email?.toLowerCase().includes(searchLower)
-    );
-  }, [users, searchTerm]);
-
  const totalPages = Math.ceil(total / limit);

  const handlePrevPage = () => {
@@ -93,16 +97,22 @@ export function UsersTable() {
      <CardHeader>
        <div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
          <CardTitle>
-            Liste des utilisateurs ({searchTerm ? filteredUsers.length : total})
+            Liste des utilisateurs ({total})
          </CardTitle>
-          <div className="relative w-full sm:w-80">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              placeholder="Rechercher par nom ou email..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10"
-            />
+          <div className="flex gap-2 w-full sm:w-auto">
+            <div className="relative flex-1 sm:w-80">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                placeholder="Rechercher par nom ou email..."
+                value={searchInput}
+                onChange={(e) => setSearchInput(e.target.value)}
+                onKeyPress={handleKeyPress}
+                className="pl-10"
+              />
+            </div>
+            <Button onClick={handleSearch} variant="default">
+              Rechercher
+            </Button>
          </div>
        </div>
      </CardHeader>
@@ -121,12 +131,12 @@ export function UsersTable() {
              </TableRow>
            </TableHeader>
            <TableBody>
-              {filteredUsers.length > 0 ? (
-                filteredUsers.map((user) => {
+              {users.length > 0 ? (
+                users.map((user) => {
                  const userCredits = creditsMap.get(user._id) || 0;
                  const isActive =
                    new Date(user.updatedAt || user.createdAt) >
-                    new Date(Date.now() - 30 * 24 * 60 * 60 * 1000); // 30 jours en millisecondes
+                    new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);

                  return (
                    <TableRow key={user._id}>
@@ -176,8 +186,8 @@ export function UsersTable() {
                    colSpan={7}
                    className="text-center py-8 text-muted-foreground"
                  >
-                    {searchTerm
-                      ? `Aucun utilisateur trouvé pour "${searchTerm}"`
+                    {activeSearch
+                      ? `Aucun utilisateur trouvé pour "${activeSearch}"`
                      : "Aucun utilisateur trouvé"}
                  </TableCell>
                </TableRow>
@@ -186,42 +196,40 @@ export function UsersTable() {
          </Table>
        </div>

-        {/* Pagination - masquée lors de la recherche */}
-        {!searchTerm && (
-          <div className="flex items-center justify-between space-x-2 py-4">
-            <div className="text-sm text-muted-foreground">
-              Page {page} sur {totalPages} ({total} éléments au total)
-            </div>
-            <div className="flex space-x-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handlePrevPage}
-                disabled={page <= 1}
-              >
-                <ChevronLeft className="h-4 w-4" />
-                Précédent
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleNextPage}
-                disabled={page >= totalPages}
-              >
-                Suivant
-                <ChevronRight className="h-4 w-4" />
-              </Button>
-            </div>
+        {/* Pagination */}
+        <div className="flex items-center justify-between space-x-2 py-4">
+          <div className="text-sm text-muted-foreground">
+            {activeSearch ? (
+              <span>
+                {total} résultat(s) pour &quot;{activeSearch}&quot; - Page {page} sur {totalPages}
+              </span>
+            ) : (
+              <span>
+                Page {page} sur {totalPages} ({total} utilisateurs au total)
+              </span>
+            )}
          </div>
-        )}
-
-        {/* Info de recherche */}
-        {searchTerm && (
-          <div className="py-4 text-sm text-muted-foreground">
-            {filteredUsers.length} résultat(s) trouvé(s) pour &quot;{searchTerm}
-            &quot;
+          <div className="flex space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handlePrevPage}
+              disabled={page <= 1}
+            >
+              <ChevronLeft className="h-4 w-4" />
+              Précédent
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleNextPage}
+              disabled={page >= totalPages}
+            >
+              Suivant
+              <ChevronRight className="h-4 w-4" />
+            </Button>
          </div>
-        )}
+        </div>
      </CardContent>
    </Card>
  );
--- a/hooks/useCollection.ts
+++ b/hooks/useCollection.ts
@@ -1,11 +1,12 @@
 "use client";

-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo } from "react";

 interface UseCollectionOptions {
  page?: number;
  limit?: number;
  filter?: Record<string, unknown>;
+  search?: string;
 }

 interface CollectionResponse<T> {
@@ -17,7 +18,7 @@ interface CollectionResponse<T> {
 }

 export function useCollection<T = Record<string, unknown>>(
-  collectionName: string, 
+  collectionName: string,
  options: UseCollectionOptions = {}
 ) {
  const [data, setData] = useState<T[]>([]);
@@ -26,7 +27,7 @@ export function useCollection<T = Record<string, unknown>>(
  const [total, setTotal] = useState(0);
  const [totalPages, setTotalPages] = useState(0);

-  const { page = 1, limit = 20, filter = {} } = options;
+  const { page = 1, limit = 20, filter = {}, search } = options;

  // Mémoriser la chaîne JSON du filtre pour éviter les re-renders inutiles
  const filterString = useMemo(() => JSON.stringify(filter), [filter]);
@@ -37,22 +38,28 @@ export function useCollection<T = Record<string, unknown>>(
      const params = new URLSearchParams({
        page: page.toString(),
        limit: limit.toString(),
-        filter: filterString
+        filter: filterString,
      });
-      
-      const response = await fetch(`/api/collections/${collectionName}?${params}`);
-      if (!response.ok) throw new Error(`Erreur lors du chargement de ${collectionName}`);
-      
+      if (search) {
+        params.append("search", search);
+      }
+
+      const response = await fetch(
+        `/api/collections/${collectionName}?${params}`
+      );
+      if (!response.ok)
+        throw new Error(`Erreur lors du chargement de ${collectionName}`);
+
      const result: CollectionResponse<T> = await response.json();
      setData(result.data);
      setTotal(result.total);
      setTotalPages(result.totalPages);
    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Erreur inconnue');
+      setError(err instanceof Error ? err.message : "Erreur inconnue");
    } finally {
      setLoading(false);
    }
-  }, [collectionName, page, limit, filterString]);
+  }, [collectionName, page, limit, filterString, search]);

  useEffect(() => {
    fetchData();