From aa76772c61a6111956ba18d3f031ddcd1a800794 Mon Sep 17 00:00:00 2001 From: Alma Date: Wed, 9 Apr 2025 20:29:33 +0200 Subject: [PATCH] update api users and groups and users 2 --- components/users/users-table.tsx | 554 +++++++++++++++++++++---------- 1 file changed, 383 insertions(+), 171 deletions(-) diff --git a/components/users/users-table.tsx b/components/users/users-table.tsx index 7c5217a2..d1ef9b99 100644 --- a/components/users/users-table.tsx +++ b/components/users/users-table.tsx @@ -11,8 +11,6 @@ import { } from "@/components/ui/table"; import { Button } from "@/components/ui/button"; import { useSession } from "next-auth/react"; -import { AddUserButton } from "./add-user-button"; -import { SimplePagination } from "@/components/ui/pagination"; import { Input } from "@/components/ui/input"; import { MoreHorizontal, Trash, Edit, UserPlus } from "lucide-react"; import { @@ -24,6 +22,21 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { toast } from "@/components/ui/use-toast"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { Label } from "@/components/ui/label"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; interface User { id: string; @@ -54,6 +67,17 @@ export function UsersTable({ userRole = [] }: UsersTableProps) { const [loading, setLoading] = useState(true); const [currentPage, setCurrentPage] = useState(1); const [searchTerm, setSearchTerm] = useState(""); + const [newUserDialog, setNewUserDialog] = useState(false); + const [editUserDialog, setEditUserDialog] = useState(false); + const [selectedUser, setSelectedUser] = useState(null); + const [formData, setFormData] = useState({ + username: "", + firstName: "", + lastName: "", + email: "", + password: "", + roles: [] as string[], + }); useEffect(() => { fetchUsers(); @@ -69,6 +93,11 @@ export function UsersTable({ userRole = [] }: UsersTableProps) { setUsers(data); } catch (error) { console.error("Error fetching users:", error); + toast({ + title: "Erreur", + description: "Erreur lors de la récupération des utilisateurs", + variant: "destructive", + }); } finally { setLoading(false); } @@ -114,6 +143,155 @@ export function UsersTable({ userRole = [] }: UsersTableProps) { return false; }; + const handleAddUser = async (e: React.FormEvent) => { + e.preventDefault(); + try { + const response = await fetch("/api/users", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(formData), + }); + + const data = await response.json(); + + if (!response.ok) { + throw new Error(data.error || "Erreur lors de la création de l'utilisateur"); + } + + setUsers(prev => [...prev, data.user]); + setNewUserDialog(false); + setFormData({ + username: "", + firstName: "", + lastName: "", + email: "", + password: "", + roles: [], + }); + + toast({ + title: "Succès", + description: "L'utilisateur a été créé avec succès", + }); + } catch (error) { + toast({ + title: "Erreur", + description: error instanceof Error ? error.message : "Une erreur est survenue", + variant: "destructive", + }); + } + }; + + const handleEdit = async (userId: string) => { + const user = users.find(u => u.id === userId); + if (!user) return; + + setSelectedUser(user); + setFormData({ + username: user.username, + firstName: user.firstName || "", + lastName: user.lastName || "", + email: user.email || "", + password: "", + roles: user.roles || [], + }); + setEditUserDialog(true); + }; + + const handleUpdateUser = async (e: React.FormEvent) => { + e.preventDefault(); + if (!selectedUser) return; + + try { + const response = await fetch(`/api/users/${selectedUser.id}`, { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + firstName: formData.firstName, + lastName: formData.lastName, + email: formData.email, + }), + }); + + const data = await response.json(); + + if (!response.ok) { + throw new Error(data.error || "Erreur lors de la modification de l'utilisateur"); + } + + setUsers(prevUsers => prevUsers.map(u => + u.id === selectedUser.id ? { ...u, ...data } : u + )); + + setEditUserDialog(false); + setSelectedUser(null); + + toast({ + title: "Succès", + description: "L'utilisateur a été modifié avec succès", + }); + } catch (error) { + toast({ + title: "Erreur", + description: error instanceof Error ? error.message : "Une erreur est survenue", + variant: "destructive", + }); + } + }; + + const handleManageRoles = async (userId: string) => { + const user = users.find(u => u.id === userId); + if (!user) return; + + setSelectedUser(user); + setFormData(prev => ({ ...prev, roles: user.roles || [] })); + setEditUserDialog(true); + }; + + const handleUpdateRoles = async () => { + if (!selectedUser) return; + + try { + const response = await fetch(`/api/users/${selectedUser.id}/roles`, { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + roles: formData.roles, + }), + }); + + const data = await response.json(); + + if (!response.ok) { + throw new Error(data.error || "Erreur lors de la mise à jour des rôles"); + } + + setUsers(prevUsers => prevUsers.map(u => + u.id === selectedUser.id ? { ...u, roles: formData.roles } : u + )); + + setEditUserDialog(false); + setSelectedUser(null); + + toast({ + title: "Succès", + description: "Les rôles ont été mis à jour avec succès", + }); + } catch (error) { + toast({ + title: "Erreur", + description: error instanceof Error ? error.message : "Une erreur est survenue", + variant: "destructive", + }); + } + }; + const handleDelete = async (userId: string) => { try { const response = await fetch(`/api/users/${userId}`, { @@ -148,9 +326,9 @@ export function UsersTable({ userRole = [] }: UsersTableProps) { if (searchTerm) { filtered = filtered.filter(user => user.username.toLowerCase().includes(searchTerm.toLowerCase()) || - user.email.toLowerCase().includes(searchTerm.toLowerCase()) || - user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) || - user.lastName.toLowerCase().includes(searchTerm.toLowerCase()) + user.email?.toLowerCase().includes(searchTerm.toLowerCase()) || + user.firstName?.toLowerCase().includes(searchTerm.toLowerCase()) || + user.lastName?.toLowerCase().includes(searchTerm.toLowerCase()) ); } @@ -168,16 +346,6 @@ export function UsersTable({ userRole = [] }: UsersTableProps) { setCurrentPage(page); }; - const handleAddUser = (newUser: User) => { - setUsers(prev => { - const updated = [...prev, newUser]; - // Sort users by username - return updated.sort((a, b) => a.username.localeCompare(b.username)); - }); - // Reset to first page when adding new user - setCurrentPage(1); - }; - // First, let's debug the roles console.log("Current session:", { role: session?.user?.role, @@ -185,173 +353,217 @@ export function UsersTable({ userRole = [] }: UsersTableProps) { isTeacher: session?.user?.role?.includes("Teacher") }); - // Add this function for editing user - const handleEdit = async (userId: string) => { - try { - const user = users.find(u => u.id === userId); - if (!user) return; - - const response = await fetch(`/api/users/${userId}`, { - method: "PUT", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - firstName: user.firstName, - lastName: user.lastName, - email: user.email, - enabled: true, - }), - }); - - const data = await response.json(); - - if (!response.ok) { - throw new Error(data.error || "Erreur lors de la modification de l'utilisateur"); - } - - setUsers(prevUsers => prevUsers.map(u => - u.id === userId ? { ...u, ...data } : u - )); - - toast({ - title: "Succès", - description: "L'utilisateur a été modifié avec succès", - }); - } catch (error) { - toast({ - title: "Erreur", - description: error instanceof Error ? error.message : "Une erreur est survenue", - variant: "destructive", - }); - } - }; - - // Add this function for managing roles - const handleManageRoles = async (userId: string) => { - try { - const user = users.find(u => u.id === userId); - if (!user) return; - - const response = await fetch(`/api/users/${userId}/roles`, { - method: "PUT", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - roles: user.roles, - }), - }); - - const data = await response.json(); - - if (!response.ok) { - throw new Error(data.error || "Erreur lors de la mise à jour des rôles"); - } - - setUsers(prevUsers => prevUsers.map(u => - u.id === userId ? { ...u, roles: data.roles } : u - )); - - toast({ - title: "Succès", - description: "Les rôles ont été mis à jour avec succès", - }); - } catch (error) { - toast({ - title: "Erreur", - description: error instanceof Error ? error.message : "Une erreur est survenue", - variant: "destructive", - }); - } - }; - if (!session) return null; if (loading) return
Loading...
; return ( -
- {/* Search and Add User row */} -
- +
+ setSearchTerm(e.target.value)} + className="max-w-sm" /> - + + + + + + + Nouvel utilisateur + +
+
+ + setFormData(prev => ({ ...prev, username: e.target.value }))} + required + /> +
+
+ + setFormData(prev => ({ ...prev, firstName: e.target.value }))} + /> +
+
+ + setFormData(prev => ({ ...prev, lastName: e.target.value }))} + /> +
+
+ + setFormData(prev => ({ ...prev, email: e.target.value }))} + required + /> +
+
+ + setFormData(prev => ({ ...prev, password: e.target.value }))} + required + /> +
+
+ + +
+ +
+ +
- {/* Table content */} -
- - - - Nom d'utilisateur - Prénom - Nom - Email - Date d'inscription - Roles - Actions +
+ + + Nom d'utilisateur + Prénom + Nom + Email + Date d'inscription + Rôles + Actions + + + + {paginatedUsers.map((user) => ( + + {user.username} + {user.firstName || "-"} + {user.lastName || "-"} + {user.email || "-"} + + {new Date(user.createdTimestamp).toLocaleDateString()} + + {(user.roles || []).join(", ") || "-"} + + + + + + + Actions + handleEdit(user.id)}> + + Modifier + + handleManageRoles(user.id)}> + + Gérer les rôles + + + handleDelete(user.id)} + > + + Supprimer + + + + - - - {paginatedUsers.map((user) => ( - - {user.username} - {user.firstName} - {user.lastName} - {user.email} - - {new Date(user.createdTimestamp).toLocaleDateString()} - - {user.roles.join(", ")} - - - - - - - Actions - handleEdit(user.id)}> - - Modifier - - handleManageRoles(user.id)}> - - Gérer les rôles - - - handleDelete(user.id)} - > - - Supprimer - - - - - - ))} - -
+ ))} + + - - -
- Affichage de {Math.min(currentPage * ITEMS_PER_PAGE, filteredUsers.length)} sur {filteredUsers.length} utilisateurs -
-
+ + + + Modifier l'utilisateur + +
+
+ + setFormData(prev => ({ ...prev, firstName: e.target.value }))} + /> +
+
+ + setFormData(prev => ({ ...prev, lastName: e.target.value }))} + /> +
+
+ + setFormData(prev => ({ ...prev, email: e.target.value }))} + /> +
+
+ + +
+
+ + +
+
+ +
); }