Ce groupe n'a pas de membres.
- {groupMembers.map((member) => (
-
-
-
{member.username}
-
{member.firstName} {member.lastName} ({member.email})
-
-
+
+
+ Gérer les membres - {selectedGroup?.name}
+
+
+
+
+
Membres actuels
+ {groupMembers.length === 0 ? (
+
Ce groupe n'a pas de membres.
+ ) : (
+
+ {groupMembers.map((member) => (
+
+
+
{member.username}
+
{member.firstName} {member.lastName} ({member.email})
- ))}
-
- )}
-
-
-
-
Ajouter des membres
-
setSearchTerm(e.target.value)}
- className="mb-2 bg-white text-gray-900 border-gray-300"
- />
-
- {availableUsers
- .filter(user =>
- !groupMembers.some(member => member.id === user.id) &&
- (user.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
- user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
- user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
- user.lastName.toLowerCase().includes(searchTerm.toLowerCase()))
- )
- .map((user) => (
-
-
-
{user.username}
-
{user.firstName} {user.lastName} ({user.email})
-
-
-
- ))}
+
+
+ ))}
+ )}
+
+
+
+
Ajouter des membres
+
setSearchTerm(e.target.value)}
+ className="mb-2 bg-white text-gray-900 border-gray-300"
+ />
+
+ {availableUsers
+ .filter(user =>
+ !groupMembers.some(member => member.id === user.id) &&
+ (user.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ user.lastName.toLowerCase().includes(searchTerm.toLowerCase()))
+ )
+ .map((user) => (
+
+
+
{user.username}
+
{user.firstName} {user.lastName} ({user.email})
+
+
+
+ ))}
-
-
+
+
);
}
\ No newline at end of file
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 176109e6..f2ebb362 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -41,9 +41,17 @@ const DialogContent = React.forwardRef<
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
+ onPointerDownOutside={(e) => {
+ // Allow clicks outside to propagate normally
+ e.preventDefault();
+ }}
{...props}
>
{children}
+
+
+ Close
+
))
diff --git a/components/users/users-table.tsx b/components/users/users-table.tsx
index eaf79079..2cd562c4 100644
--- a/components/users/users-table.tsx
+++ b/components/users/users-table.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useCallback } from "react";
import {
Table,
TableBody,
@@ -65,6 +65,41 @@ interface UsersTableProps {
const ITEMS_PER_PAGE = 10;
+// DialogWrapper component to better handle dialog state
+function DialogWrapper({
+ open,
+ onOpenChange,
+ onAfterClose,
+ triggerComponent,
+ children,
+ className
+}: {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ onAfterClose?: () => void;
+ triggerComponent?: React.ReactNode;
+ children: React.ReactNode;
+ className?: string;
+}) {
+ const handleOpenChange = useCallback((open: boolean) => {
+ onOpenChange(open);
+
+ if (!open && onAfterClose) {
+ // Use a longer timeout to ensure all animations are complete
+ setTimeout(onAfterClose, 300);
+ }
+ }, [onOpenChange, onAfterClose]);
+
+ return (
+
+ );
+}
+
export function UsersTable({ userRole = [] }: UsersTableProps) {
const { data: session, status } = useSession();
const [users, setUsers] = useState
([]);
@@ -403,6 +438,37 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
currentPage * ITEMS_PER_PAGE
);
+ // Define reset function callbacks
+ const resetNewUserForm = useCallback(() => {
+ setFormData({
+ username: "",
+ lastName: "",
+ firstName: "",
+ email: "",
+ password: "",
+ roles: [],
+ enabled: true,
+ });
+ }, []);
+
+ const resetEditForm = useCallback(() => {
+ setFormData({
+ username: "",
+ lastName: "",
+ firstName: "",
+ email: "",
+ password: "",
+ roles: [],
+ enabled: true,
+ });
+ setSelectedUser(null);
+ }, []);
+
+ const resetRolesForm = useCallback(() => {
+ setFormData(prev => ({ ...prev, roles: [] }));
+ setSelectedUser(null);
+ }, []);
+
if (!session) return null;
if (loading) return Loading...
;
@@ -416,115 +482,103 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
onChange={(e) => setSearchTerm(e.target.value)}
className="max-w-sm bg-white text-gray-900 border-gray-300"
/>
-