refactor: bad old components and structure
This commit is contained in:
Julien Froidefond
451
components/admin/management/pages/users-management.tsx
Normal file
451
components/admin/management/pages/users-management.tsx
Normal file
@@ -0,0 +1,451 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { Users, User, Trash2, Search, Building2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
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";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import {
|
||||
AdminManagementService,
|
||||
Team,
|
||||
} from "@/services/admin-management-service";
|
||||
import {
|
||||
TreeViewContainer,
|
||||
TreeCategoryHeader,
|
||||
TreeItemRow,
|
||||
TreeSearchControls,
|
||||
} from "@/components/admin";
|
||||
|
||||
interface User {
|
||||
uuid: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
teamName?: string;
|
||||
hasEvaluations: boolean;
|
||||
}
|
||||
|
||||
interface UserFormData {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
teamId: string;
|
||||
}
|
||||
|
||||
export function UsersManagement() {
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [teams, setTeams] = useState<Team[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
const [userFormData, setUserFormData] = useState<UserFormData>({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
teamId: "",
|
||||
});
|
||||
const { toast } = useToast();
|
||||
|
||||
// État pour les équipes ouvertes/fermées
|
||||
const [expandedTeams, setExpandedTeams] = useState<Set<string>>(new Set());
|
||||
|
||||
// Grouper les utilisateurs par équipe et filtrer en fonction de la recherche
|
||||
const filteredUsersByTeam = useMemo(() => {
|
||||
// Grouper les utilisateurs par équipe
|
||||
const usersByTeam = users.reduce((acc, user) => {
|
||||
const teamKey = user.teamName || "Sans équipe";
|
||||
if (!acc[teamKey]) {
|
||||
acc[teamKey] = [];
|
||||
}
|
||||
acc[teamKey].push(user);
|
||||
return acc;
|
||||
}, {} as Record<string, User[]>);
|
||||
|
||||
// Filtrer les utilisateurs en fonction de la recherche
|
||||
return Object.entries(usersByTeam).reduce((acc, [teamName, teamUsers]) => {
|
||||
const filteredUsers = teamUsers.filter((user) => {
|
||||
const matchesSearch =
|
||||
user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
user.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(user.teamName &&
|
||||
user.teamName.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
return matchesSearch;
|
||||
});
|
||||
|
||||
if (filteredUsers.length > 0) {
|
||||
acc[teamName] = filteredUsers;
|
||||
}
|
||||
return acc;
|
||||
}, {} as Record<string, User[]>);
|
||||
}, [users, searchTerm]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
fetchTeams();
|
||||
}, []);
|
||||
|
||||
const fetchUsers = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch("/api/admin/users");
|
||||
if (!response.ok) {
|
||||
throw new Error("Erreur lors de la récupération des utilisateurs");
|
||||
}
|
||||
const usersData = await response.json();
|
||||
setUsers(usersData);
|
||||
} catch (err: any) {
|
||||
setError(err.message || "Erreur lors du chargement des utilisateurs");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTeams = async () => {
|
||||
try {
|
||||
const teamsData = await AdminManagementService.getTeams();
|
||||
setTeams(teamsData);
|
||||
} catch (error) {
|
||||
console.error("Error fetching teams:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Fonctions pour gérer l'expansion des équipes
|
||||
const toggleTeam = useMemo(
|
||||
() => (teamName: string) => {
|
||||
setExpandedTeams((prev) => {
|
||||
const newExpanded = new Set(prev);
|
||||
if (newExpanded.has(teamName)) {
|
||||
newExpanded.delete(teamName);
|
||||
} else {
|
||||
newExpanded.add(teamName);
|
||||
}
|
||||
return newExpanded;
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const expandAll = useMemo(
|
||||
() => () => {
|
||||
setExpandedTeams(new Set(Object.keys(filteredUsersByTeam)));
|
||||
},
|
||||
[filteredUsersByTeam]
|
||||
);
|
||||
|
||||
const collapseAll = useMemo(
|
||||
() => () => {
|
||||
setExpandedTeams(new Set());
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// Ouvrir automatiquement les équipes qui contiennent des résultats lors de la recherche
|
||||
useEffect(() => {
|
||||
if (searchTerm.trim()) {
|
||||
const teamsWithResults = Object.keys(filteredUsersByTeam);
|
||||
setExpandedTeams(new Set(teamsWithResults));
|
||||
}
|
||||
// Ne pas fermer automatiquement les équipes si pas de recherche
|
||||
// Cela évite que les équipes se ferment lors de la suppression d'utilisateurs
|
||||
}, [searchTerm]); // Retiré filteredUsersByTeam de la dépendance
|
||||
|
||||
const handleCreateUser = async () => {
|
||||
if (!userFormData.firstName || !userFormData.lastName) {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: "Veuillez remplir tous les champs obligatoires",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// TODO: Implémenter la création d'utilisateur
|
||||
toast({
|
||||
title: "Succès",
|
||||
description: "Utilisateur créé avec succès",
|
||||
});
|
||||
|
||||
setUserFormData({ firstName: "", lastName: "", teamId: "" });
|
||||
setIsCreateDialogOpen(false);
|
||||
|
||||
// Rafraîchir la liste
|
||||
fetchUsers();
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description:
|
||||
error.message || "Erreur lors de la création de l'utilisateur",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteUser = async (user: User) => {
|
||||
if (user.teamName) {
|
||||
toast({
|
||||
title: "Action impossible",
|
||||
description:
|
||||
"Retirez d'abord l'utilisateur de son équipe avant de le supprimer",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
!confirm(
|
||||
`Êtes-vous sûr de vouloir supprimer définitivement ${user.firstName} ${user.lastName} ?\n\nCette action supprimera aussi toutes ses évaluations par skills et est irréversible.`
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDeletingUserId(user.uuid);
|
||||
try {
|
||||
await AdminManagementService.deleteUser(user.uuid);
|
||||
|
||||
// Mettre à jour la liste locale
|
||||
setUsers((prev) => prev.filter((u) => u.uuid !== user.uuid));
|
||||
|
||||
toast({
|
||||
title: "Succès",
|
||||
description: `${user.firstName} ${user.lastName} a été supprimé avec succès`,
|
||||
});
|
||||
} catch (err: any) {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description:
|
||||
err.message || "Erreur lors de la suppression de l'utilisateur",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setDeletingUserId(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
Gestion des utilisateurs
|
||||
</h2>
|
||||
<Button disabled>
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Créer un utilisateur
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex items-center gap-3 p-3">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-700 animate-pulse" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-4 bg-slate-700 rounded animate-pulse w-32" />
|
||||
<div className="h-3 bg-slate-700 rounded animate-pulse w-24" />
|
||||
</div>
|
||||
<div className="w-20 h-8 bg-slate-700 rounded animate-pulse" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
Gestion des utilisateurs
|
||||
</h2>
|
||||
</div>
|
||||
<div className="text-center py-8">
|
||||
<div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center mx-auto mb-4">
|
||||
<Users className="w-6 h-6 text-red-400" />
|
||||
</div>
|
||||
<p className="text-red-400 mb-4">{error}</p>
|
||||
<Button onClick={fetchUsers} variant="outline">
|
||||
Réessayer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* En-tête avec bouton de création */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
Gestion des utilisateurs
|
||||
</h2>
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Créer un utilisateur
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Créer un nouvel utilisateur</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="user-first-name">Prénom *</Label>
|
||||
<Input
|
||||
id="user-first-name"
|
||||
value={userFormData.firstName}
|
||||
onChange={(e) =>
|
||||
setUserFormData({
|
||||
...userFormData,
|
||||
firstName: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="Prénom de l'utilisateur"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="user-last-name">Nom *</Label>
|
||||
<Input
|
||||
id="user-last-name"
|
||||
value={userFormData.lastName}
|
||||
onChange={(e) =>
|
||||
setUserFormData({
|
||||
...userFormData,
|
||||
lastName: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="Nom de l'utilisateur"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="user-team">Équipe</Label>
|
||||
<Select
|
||||
value={userFormData.teamId}
|
||||
onValueChange={(value) =>
|
||||
setUserFormData({ ...userFormData, teamId: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner une équipe (optionnel)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">Aucune équipe</SelectItem>
|
||||
{teams.map((team) => (
|
||||
<SelectItem key={team.id} value={team.id}>
|
||||
{team.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsCreateDialogOpen(false)}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleCreateUser}>Créer</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{/* Filtres et contrôles */}
|
||||
<TreeSearchControls
|
||||
searchTerm={searchTerm}
|
||||
onSearchChange={setSearchTerm}
|
||||
onExpandAll={expandAll}
|
||||
onCollapseAll={collapseAll}
|
||||
placeholder="Rechercher un utilisateur..."
|
||||
/>
|
||||
|
||||
{/* Vue arborescente des utilisateurs */}
|
||||
<TreeViewContainer
|
||||
hasContent={Object.keys(filteredUsersByTeam).length > 0}
|
||||
emptyState={
|
||||
<div className="text-center py-8">
|
||||
<Users className="w-10 h-10 text-slate-500 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-slate-400 mb-1">
|
||||
{searchTerm ? "Aucun utilisateur trouvé" : "Aucun utilisateur"}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500">
|
||||
{searchTerm
|
||||
? "Essayez de modifier vos critères de recherche"
|
||||
: "Commencez par créer votre premier utilisateur"}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{Object.entries(filteredUsersByTeam).map(
|
||||
([teamName, teamUsers], index) => (
|
||||
<div key={teamName}>
|
||||
<TreeCategoryHeader
|
||||
category={teamName}
|
||||
isExpanded={expandedTeams.has(teamName)}
|
||||
onToggle={() => toggleTeam(teamName)}
|
||||
icon={<Building2 className="w-5 h-5 text-blue-400" />}
|
||||
itemCount={teamUsers.length}
|
||||
itemLabel="utilisateur"
|
||||
showSeparator={index > 0}
|
||||
canDelete={false}
|
||||
isDirection={false}
|
||||
/>
|
||||
|
||||
{/* Liste des utilisateurs de l'équipe */}
|
||||
{expandedTeams.has(teamName) && (
|
||||
<div className="bg-slate-950/30">
|
||||
{teamUsers.map((user, userIndex) => (
|
||||
<TreeItemRow
|
||||
key={user.uuid}
|
||||
icon={<User className="w-5 h-5 text-green-400" />}
|
||||
title={`${user.firstName} ${user.lastName}`}
|
||||
badges={[
|
||||
{
|
||||
text: user.hasEvaluations
|
||||
? "A des évaluations"
|
||||
: "Aucune évaluation",
|
||||
variant: user.hasEvaluations ? "default" : "outline",
|
||||
},
|
||||
]}
|
||||
onDelete={() => handleDeleteUser(user)}
|
||||
canDelete={!user.teamName}
|
||||
showSeparator={userIndex > 0}
|
||||
additionalInfo={
|
||||
<p className="text-slate-500 text-xs">
|
||||
{user.teamName
|
||||
? `Équipe: ${user.teamName}`
|
||||
: "Aucune équipe"}
|
||||
</p>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</TreeViewContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user