equipe ui
This commit is contained in:
parent
7c3239996c
commit
bc02fdfb98
@ -497,17 +497,16 @@ export default function EmailSidebar({
|
||||
type="button"
|
||||
className="ml-1 text-gray-400 hover:text-gray-600 cursor-pointer flex items-center justify-center h-5 w-5"
|
||||
tabIndex={-1}
|
||||
onClick={e => e.stopPropagation()}
|
||||
aria-label="Account options"
|
||||
>
|
||||
<span style={{ fontSize: '18px', lineHeight: 1 }}>⋮</span>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={e => { e.stopPropagation(); onEditAccount(account); }}>
|
||||
<DropdownMenuItem onClick={() => onEditAccount(account)}>
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={e => { e.stopPropagation(); onDeleteAccount(account); }}>
|
||||
<DropdownMenuItem onClick={() => onDeleteAccount(account)}>
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@ -53,6 +53,41 @@ interface GroupsTableProps {
|
||||
userRole?: string[];
|
||||
}
|
||||
|
||||
// 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 (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
{triggerComponent && <DialogTrigger asChild>{triggerComponent}</DialogTrigger>}
|
||||
<DialogContent className={className}>
|
||||
{children}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export function GroupsTable({ userRole = [] }: GroupsTableProps) {
|
||||
const [groups, setGroups] = useState<Group[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@ -340,6 +375,22 @@ export function GroupsTable({ userRole = [] }: GroupsTableProps) {
|
||||
}
|
||||
};
|
||||
|
||||
// Reset callbacks
|
||||
const resetNewGroupForm = useCallback(() => {
|
||||
setNewGroupName("");
|
||||
}, []);
|
||||
|
||||
const resetModifyGroupForm = useCallback(() => {
|
||||
setSelectedGroup(null);
|
||||
setModifiedGroupName("");
|
||||
}, []);
|
||||
|
||||
const resetMembersForm = useCallback(() => {
|
||||
setSelectedGroup(null);
|
||||
setGroupMembers([]);
|
||||
setAvailableUsers([]);
|
||||
}, []);
|
||||
|
||||
if (loading) return <div className="text-center p-4">Loading...</div>;
|
||||
|
||||
return (
|
||||
@ -352,44 +403,39 @@ export function GroupsTable({ userRole = [] }: GroupsTableProps) {
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="max-w-xs bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
<Dialog open={newGroupDialog} onOpenChange={(open) => {
|
||||
setNewGroupDialog(open);
|
||||
if (!open) {
|
||||
// Reset state when dialog closes
|
||||
setTimeout(() => {
|
||||
setNewGroupName("");
|
||||
}, 100);
|
||||
}
|
||||
}}>
|
||||
<DialogTrigger asChild>
|
||||
<DialogWrapper
|
||||
open={newGroupDialog}
|
||||
onOpenChange={setNewGroupDialog}
|
||||
onAfterClose={resetNewGroupForm}
|
||||
triggerComponent={
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Plus className="mr-2 h-4 w-4" /> Ajouter un groupe
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="bg-white text-black border border-gray-300">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">Nouveau Groupe</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="groupName" className="text-gray-900">Nom du groupe</Label>
|
||||
<Input
|
||||
id="groupName"
|
||||
value={newGroupName}
|
||||
onChange={(e) => setNewGroupName(e.target.value)}
|
||||
placeholder="Entrez le nom du groupe"
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleCreateGroup}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
Créer le groupe
|
||||
</Button>
|
||||
}
|
||||
className="bg-white text-black border border-gray-300"
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">Nouveau Groupe</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="groupName" className="text-gray-900">Nom du groupe</Label>
|
||||
<Input
|
||||
id="groupName"
|
||||
value={newGroupName}
|
||||
onChange={(e) => setNewGroupName(e.target.value)}
|
||||
placeholder="Entrez le nom du groupe"
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Button
|
||||
onClick={handleCreateGroup}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
Créer le groupe
|
||||
</Button>
|
||||
</div>
|
||||
</DialogWrapper>
|
||||
</div>
|
||||
|
||||
<Table className="bg-white border border-gray-300 rounded-md">
|
||||
@ -455,130 +501,111 @@ export function GroupsTable({ userRole = [] }: GroupsTableProps) {
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<Dialog
|
||||
open={modifyGroupDialog}
|
||||
onOpenChange={(open) => {
|
||||
setModifyGroupDialog(open);
|
||||
if (!open) {
|
||||
// Reset state when dialog closes
|
||||
setTimeout(() => {
|
||||
setSelectedGroup(null);
|
||||
setModifiedGroupName("");
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
<DialogWrapper
|
||||
open={modifyGroupDialog}
|
||||
onOpenChange={setModifyGroupDialog}
|
||||
onAfterClose={resetModifyGroupForm}
|
||||
className="bg-white text-black border border-gray-300"
|
||||
>
|
||||
<DialogContent className="bg-white text-black border border-gray-300">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">Modifier le groupe</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="modifiedGroupName" className="text-gray-900">Nom du groupe</Label>
|
||||
<Input
|
||||
id="modifiedGroupName"
|
||||
value={modifiedGroupName}
|
||||
onChange={(e) => setModifiedGroupName(e.target.value)}
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleUpdateGroup}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
Mettre à jour
|
||||
</Button>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">Modifier le groupe</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="modifiedGroupName" className="text-gray-900">Nom du groupe</Label>
|
||||
<Input
|
||||
id="modifiedGroupName"
|
||||
value={modifiedGroupName}
|
||||
onChange={(e) => setModifiedGroupName(e.target.value)}
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Button
|
||||
onClick={handleUpdateGroup}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
Mettre à jour
|
||||
</Button>
|
||||
</div>
|
||||
</DialogWrapper>
|
||||
|
||||
<Dialog
|
||||
open={manageMembersDialog}
|
||||
onOpenChange={(open) => {
|
||||
setManageMembersDialog(open);
|
||||
if (!open) {
|
||||
// Reset state when dialog closes
|
||||
setTimeout(() => {
|
||||
setSelectedGroup(null);
|
||||
setGroupMembers([]);
|
||||
setAvailableUsers([]);
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
<DialogWrapper
|
||||
open={manageMembersDialog}
|
||||
onOpenChange={setManageMembersDialog}
|
||||
onAfterClose={resetMembersForm}
|
||||
className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto bg-white text-black border border-gray-300"
|
||||
>
|
||||
<DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto bg-white text-black border border-gray-300">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">
|
||||
Gérer les membres - {selectedGroup?.name}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-2 text-gray-900">Membres actuels</h3>
|
||||
{groupMembers.length === 0 ? (
|
||||
<p className="text-gray-600">Ce groupe n'a pas de membres.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{groupMembers.map((member) => (
|
||||
<div key={member.id} className="flex items-center justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
|
||||
<div className="text-gray-900">
|
||||
<div className="font-medium">{member.username}</div>
|
||||
<div className="text-sm text-gray-600">{member.firstName} {member.lastName} ({member.email})</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveMember(member.id)}
|
||||
className="text-red-600 hover:bg-red-50 hover:text-red-700 border-red-200"
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">
|
||||
Gérer les membres - {selectedGroup?.name}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-2 text-gray-900">Membres actuels</h3>
|
||||
{groupMembers.length === 0 ? (
|
||||
<p className="text-gray-600">Ce groupe n'a pas de membres.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{groupMembers.map((member) => (
|
||||
<div key={member.id} className="flex items-center justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
|
||||
<div className="text-gray-900">
|
||||
<div className="font-medium">{member.username}</div>
|
||||
<div className="text-sm text-gray-600">{member.firstName} {member.lastName} ({member.email})</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-2 text-gray-900">Ajouter des membres</h3>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Rechercher un utilisateur..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="mb-2 bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
<div className="space-y-2 max-h-[250px] overflow-y-auto">
|
||||
{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) => (
|
||||
<div key={user.id} className="flex items-center justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
|
||||
<div className="text-gray-900">
|
||||
<div className="font-medium">{user.username}</div>
|
||||
<div className="text-sm text-gray-600">{user.firstName} {user.lastName} ({user.email})</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleAddMember(user.id)}
|
||||
className="text-green-600 hover:bg-green-50 hover:text-green-700 border-green-200"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveMember(member.id)}
|
||||
className="text-red-600 hover:bg-red-50 hover:text-red-700 border-red-200"
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-2 text-gray-900">Ajouter des membres</h3>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Rechercher un utilisateur..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="mb-2 bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
<div className="space-y-2 max-h-[250px] overflow-y-auto">
|
||||
{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) => (
|
||||
<div key={user.id} className="flex items-center justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
|
||||
<div className="text-gray-900">
|
||||
<div className="font-medium">{user.username}</div>
|
||||
<div className="text-sm text-gray-600">{user.firstName} {user.lastName} ({user.email})</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleAddMember(user.id)}
|
||||
className="text-green-600 hover:bg-green-50 hover:text-green-700 border-green-200"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</DialogWrapper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -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}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
))
|
||||
|
||||
@ -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 (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
{triggerComponent && <DialogTrigger asChild>{triggerComponent}</DialogTrigger>}
|
||||
<DialogContent className={className}>
|
||||
{children}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
const { data: session, status } = useSession();
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
@ -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 <div className="text-center p-4">Loading...</div>;
|
||||
|
||||
@ -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"
|
||||
/>
|
||||
<Dialog open={newUserDialog} onOpenChange={(open) => {
|
||||
setNewUserDialog(open);
|
||||
if (!open) {
|
||||
setTimeout(() => {
|
||||
setFormData({
|
||||
username: "",
|
||||
lastName: "",
|
||||
firstName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
roles: [],
|
||||
enabled: true,
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}}>
|
||||
<DialogTrigger asChild>
|
||||
<DialogWrapper
|
||||
open={newUserDialog}
|
||||
onOpenChange={setNewUserDialog}
|
||||
onAfterClose={resetNewUserForm}
|
||||
triggerComponent={
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Ajouter un utilisateur
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-h-[85vh] overflow-y-auto bg-white text-black border border-gray-300">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">Nouvel Utilisateur</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleAddUser} className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="username" className="text-gray-900">Nom d'utilisateur</Label>
|
||||
<Input
|
||||
id="username"
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email" className="text-gray-900">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="firstName" className="text-gray-900">Prénom</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastName" className="text-gray-900">Nom</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
className="max-h-[85vh] overflow-y-auto bg-white text-black border border-gray-300"
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">Nouvel Utilisateur</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleAddUser} className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" className="text-gray-900">Mot de passe</Label>
|
||||
<Label htmlFor="username" className="text-gray-900">Nom d'utilisateur</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
|
||||
id="username"
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-gray-900">Rôles</Label>
|
||||
<div className="grid grid-cols-2 gap-2 max-h-[120px] overflow-y-auto border border-gray-300 rounded-md p-2 bg-white">
|
||||
{roles.map((role) => (
|
||||
<div key={role.id} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={`role-${role.id}`}
|
||||
checked={formData.roles.includes(role.name)}
|
||||
onCheckedChange={(checked) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
roles: checked
|
||||
? [...prev.roles, role.name]
|
||||
: prev.roles.filter(r => r !== role.name)
|
||||
}));
|
||||
}}
|
||||
className="border-gray-500"
|
||||
/>
|
||||
<Label htmlFor={`role-${role.id}`} className="text-sm text-gray-900">{role.name}</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Label htmlFor="email" className="text-gray-900">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white">Créer Utilisateur</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="firstName" className="text-gray-900">Prénom</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastName" className="text-gray-900">Nom</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" className="text-gray-900">Mot de passe</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-gray-900">Rôles</Label>
|
||||
<div className="grid grid-cols-2 gap-2 max-h-[120px] overflow-y-auto border border-gray-300 rounded-md p-2 bg-white">
|
||||
{roles.map((role) => (
|
||||
<div key={role.id} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={`role-${role.id}`}
|
||||
checked={formData.roles.includes(role.name)}
|
||||
onCheckedChange={(checked) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
roles: checked
|
||||
? [...prev.roles, role.name]
|
||||
: prev.roles.filter(r => r !== role.name)
|
||||
}));
|
||||
}}
|
||||
className="border-gray-500"
|
||||
/>
|
||||
<Label htmlFor={`role-${role.id}`} className="text-sm text-gray-900">{role.name}</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white">Créer Utilisateur</Button>
|
||||
</form>
|
||||
</DialogWrapper>
|
||||
</div>
|
||||
|
||||
<Table className="bg-white border border-gray-300 rounded-md">
|
||||
@ -564,10 +618,6 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-8 w-8 p-0"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<span className="sr-only">Open menu</span>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
@ -628,147 +678,129 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<Dialog open={editUserDialog} onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setTimeout(() => {
|
||||
setFormData({
|
||||
username: "",
|
||||
lastName: "",
|
||||
firstName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
roles: [],
|
||||
enabled: true,
|
||||
});
|
||||
setSelectedUser(null);
|
||||
}, 100);
|
||||
}
|
||||
setEditUserDialog(open);
|
||||
}}>
|
||||
<DialogContent className="bg-white text-black border border-gray-300">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">Modifier l'utilisateur</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleUpdateUser} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-firstName" className="text-gray-900">Prénom</Label>
|
||||
<Input
|
||||
id="edit-firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value }))}
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-lastName" className="text-gray-900">Nom</Label>
|
||||
<Input
|
||||
id="edit-lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value }))}
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-email" className="text-gray-900">Email</Label>
|
||||
<Input
|
||||
id="edit-email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setEditUserDialog(false);
|
||||
setSelectedUser(null);
|
||||
setFormData({
|
||||
username: "",
|
||||
lastName: "",
|
||||
firstName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
roles: [],
|
||||
enabled: true,
|
||||
});
|
||||
}}
|
||||
className="border-gray-300 text-gray-800 hover:bg-gray-100"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Modifier
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<DialogWrapper
|
||||
open={editUserDialog}
|
||||
onOpenChange={setEditUserDialog}
|
||||
onAfterClose={resetEditForm}
|
||||
className="bg-white text-black border border-gray-300"
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">Modifier l'utilisateur</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleUpdateUser} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-firstName" className="text-gray-900">Prénom</Label>
|
||||
<Input
|
||||
id="edit-firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value }))}
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-lastName" className="text-gray-900">Nom</Label>
|
||||
<Input
|
||||
id="edit-lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value }))}
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-email" className="text-gray-900">Email</Label>
|
||||
<Input
|
||||
id="edit-email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setEditUserDialog(false);
|
||||
setSelectedUser(null);
|
||||
setFormData({
|
||||
username: "",
|
||||
lastName: "",
|
||||
firstName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
roles: [],
|
||||
enabled: true,
|
||||
});
|
||||
}}
|
||||
className="border-gray-300 text-gray-800 hover:bg-gray-100"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Modifier
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogWrapper>
|
||||
|
||||
<Dialog open={manageRolesDialog} onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setTimeout(() => {
|
||||
setFormData(prev => ({ ...prev, roles: [] }));
|
||||
setSelectedUser(null);
|
||||
}, 100);
|
||||
}
|
||||
setManageRolesDialog(open);
|
||||
}}>
|
||||
<DialogContent className="bg-white text-black border border-gray-300">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">Gérer les rôles pour {selectedUser?.username}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-gray-900">Rôles disponibles</Label>
|
||||
<div className="grid grid-cols-2 gap-2 max-h-[200px] overflow-y-auto border border-gray-300 rounded-md p-2 bg-white">
|
||||
{roles.map((role) => (
|
||||
<div key={role.id} className="flex items-center space-x-2 p-2 rounded-md hover:bg-gray-100">
|
||||
<Checkbox
|
||||
id={`manage-role-${role.id}`}
|
||||
checked={formData.roles.includes(role.name)}
|
||||
onCheckedChange={(checked) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
roles: checked
|
||||
? [...prev.roles, role.name]
|
||||
: prev.roles.filter(r => r !== role.name)
|
||||
}));
|
||||
}}
|
||||
className="border-gray-500"
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`manage-role-${role.id}`}
|
||||
className="text-sm text-gray-900"
|
||||
>
|
||||
{role.name}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setManageRolesDialog(false);
|
||||
setSelectedUser(null);
|
||||
setFormData(prev => ({ ...prev, roles: [] }));
|
||||
}}
|
||||
className="border-gray-300 text-gray-800 hover:bg-gray-100"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleUpdateRoles} className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Mettre à jour les rôles
|
||||
</Button>
|
||||
<DialogWrapper
|
||||
open={manageRolesDialog}
|
||||
onOpenChange={setManageRolesDialog}
|
||||
onAfterClose={resetRolesForm}
|
||||
className="bg-white text-black border border-gray-300"
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-900">Gérer les rôles pour {selectedUser?.username}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-gray-900">Rôles disponibles</Label>
|
||||
<div className="grid grid-cols-2 gap-2 max-h-[200px] overflow-y-auto border border-gray-300 rounded-md p-2 bg-white">
|
||||
{roles.map((role) => (
|
||||
<div key={role.id} className="flex items-center space-x-2 p-2 rounded-md hover:bg-gray-100">
|
||||
<Checkbox
|
||||
id={`manage-role-${role.id}`}
|
||||
checked={formData.roles.includes(role.name)}
|
||||
onCheckedChange={(checked) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
roles: checked
|
||||
? [...prev.roles, role.name]
|
||||
: prev.roles.filter(r => r !== role.name)
|
||||
}));
|
||||
}}
|
||||
className="border-gray-500"
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`manage-role-${role.id}`}
|
||||
className="text-sm text-gray-900"
|
||||
>
|
||||
{role.name}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setManageRolesDialog(false);
|
||||
setSelectedUser(null);
|
||||
setFormData(prev => ({ ...prev, roles: [] }));
|
||||
}}
|
||||
className="border-gray-300 text-gray-800 hover:bg-gray-100"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleUpdateRoles} className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Mettre à jour les rôles
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogWrapper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user