feat: add team members functionality and modal
- Introduced `onViewMembers` prop in `TreeItemRow` to handle viewing team members. - Added `TeamMembersModal` to display members of a selected team. - Implemented state management for team members in `TeamsManagement`, including fetching and updating stats. - Enhanced `AdminManagementService` with methods to fetch and remove team members.
This commit is contained in:
Julien Froidefond
@@ -35,6 +35,7 @@ import {
|
||||
TreeSearchControls,
|
||||
TeamMetrics,
|
||||
} from "@/components/admin";
|
||||
import { TeamMembersModal } from "@/components/admin/management/team-members-modal";
|
||||
|
||||
interface TeamsManagementProps {
|
||||
teams: TeamType[];
|
||||
@@ -55,6 +56,8 @@ export function TeamsManagement({
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
||||
const [isMembersModalOpen, setIsMembersModalOpen] = useState(false);
|
||||
const [selectedTeam, setSelectedTeam] = useState<any>(null);
|
||||
const [editingTeam, setEditingTeam] = useState<any>(null);
|
||||
const [teamFormData, setTeamFormData] = useState<TeamFormData>({
|
||||
name: "",
|
||||
@@ -67,7 +70,8 @@ export function TeamsManagement({
|
||||
new Set()
|
||||
);
|
||||
|
||||
// État pour gérer la liste des équipes
|
||||
// État local pour les stats des équipes
|
||||
const [localTeamStats, setLocalTeamStats] = useState<TeamStats[]>(teamStats);
|
||||
|
||||
// Grouper les teams par direction et filtrer en fonction de la recherche
|
||||
const filteredTeamsByDirection = useMemo(() => {
|
||||
@@ -129,8 +133,8 @@ export function TeamsManagement({
|
||||
[]
|
||||
);
|
||||
|
||||
const getTeamStats = (teamId: string) => {
|
||||
return teamStats.find((stats) => stats.teamId === teamId);
|
||||
const getTeamStats = (teamId: string): TeamStats | undefined => {
|
||||
return localTeamStats.find((stats) => stats.teamId === teamId);
|
||||
};
|
||||
|
||||
// Charger les teams depuis l'API
|
||||
@@ -149,6 +153,18 @@ export function TeamsManagement({
|
||||
}
|
||||
};
|
||||
|
||||
// Rafraîchir les stats des équipes depuis l'API des équipes
|
||||
const refreshTeamStats = async () => {
|
||||
try {
|
||||
const teamsData = await AdminManagementService.getTeams();
|
||||
// Fusionner avec les stats existantes pour préserver les métriques
|
||||
const updatedStats = mergeTeamStats(localTeamStats, teamsData);
|
||||
setLocalTeamStats(updatedStats);
|
||||
} catch (error) {
|
||||
console.error("Error refreshing team stats:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Charger les teams au montage du composant
|
||||
useEffect(() => {
|
||||
fetchTeams();
|
||||
@@ -205,6 +221,41 @@ export function TeamsManagement({
|
||||
setIsEditDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleViewMembers = (team: any) => {
|
||||
setSelectedTeam(team);
|
||||
setIsMembersModalOpen(true);
|
||||
};
|
||||
|
||||
// Fonction pour mettre à jour les stats d'une équipe après suppression d'un membre
|
||||
const updateTeamStatsAfterMemberRemoval = (teamId: string) => {
|
||||
setLocalTeamStats((prev) =>
|
||||
prev.map((stats) =>
|
||||
stats.teamId === teamId
|
||||
? { ...stats, totalMembers: Math.max(0, stats.totalMembers - 1) }
|
||||
: stats
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
// Fonction pour fusionner les stats existantes avec les nouvelles données
|
||||
const mergeTeamStats = (existingStats: TeamStats[], newTeams: Team[]) => {
|
||||
return newTeams.map((team) => {
|
||||
const existingStat = existingStats.find(
|
||||
(stat) => stat.teamId === team.id
|
||||
);
|
||||
return {
|
||||
teamId: team.id,
|
||||
teamName: team.name,
|
||||
direction: team.direction,
|
||||
totalMembers: team.memberCount,
|
||||
averageSkillLevel: existingStat?.averageSkillLevel || 0,
|
||||
skillCoverage: existingStat?.skillCoverage || 0,
|
||||
topSkillsCount: existingStat?.topSkillsCount || 0,
|
||||
topSkills: existingStat?.topSkills || [],
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdateTeam = async () => {
|
||||
if (!editingTeam || !teamFormData.name || !teamFormData.direction) {
|
||||
toast({
|
||||
@@ -466,8 +517,10 @@ export function TeamsManagement({
|
||||
}
|
||||
onEdit={() => handleEditTeam(team)}
|
||||
onDelete={() => handleDeleteTeam(team.id)}
|
||||
onViewMembers={() => handleViewMembers(team)}
|
||||
canDelete={!stats || stats.totalMembers === 0}
|
||||
showSeparator={teamIndex > 0}
|
||||
hasMembers={stats ? stats.totalMembers > 0 : false}
|
||||
additionalInfo={
|
||||
stats ? (
|
||||
<TeamMetrics
|
||||
@@ -542,6 +595,27 @@ export function TeamsManagement({
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Modal des membres d'équipe */}
|
||||
{selectedTeam && (
|
||||
<TeamMembersModal
|
||||
teamId={selectedTeam.id}
|
||||
teamName={selectedTeam.name}
|
||||
isOpen={isMembersModalOpen}
|
||||
onClose={() => {
|
||||
setIsMembersModalOpen(false);
|
||||
setSelectedTeam(null);
|
||||
// Rafraîchir les stats depuis l'API pour s'assurer de la cohérence
|
||||
refreshTeamStats();
|
||||
}}
|
||||
onMemberRemoved={() => {
|
||||
// Mettre à jour les stats localement
|
||||
if (selectedTeam) {
|
||||
updateTeamStatsAfterMemberRemoval(selectedTeam.id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
207
components/admin/management/team-members-modal.tsx
Normal file
207
components/admin/management/team-members-modal.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Users, User, Calendar, X, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { TeamMember } from "@/services/admin-management-service";
|
||||
import { AdminManagementService } from "@/services/admin-management-service";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
interface TeamMembersModalProps {
|
||||
teamId: string;
|
||||
teamName: string;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onMemberRemoved?: () => void; // Callback pour notifier le parent qu'un membre a été supprimé
|
||||
}
|
||||
|
||||
export function TeamMembersModal({
|
||||
teamId,
|
||||
teamName,
|
||||
isOpen,
|
||||
onClose,
|
||||
onMemberRemoved,
|
||||
}: TeamMembersModalProps) {
|
||||
const [members, setMembers] = useState<TeamMember[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [deletingMemberId, setDeletingMemberId] = useState<string | null>(null);
|
||||
const { toast } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && teamId) {
|
||||
fetchMembers();
|
||||
}
|
||||
}, [isOpen, teamId]);
|
||||
|
||||
const fetchMembers = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const membersData = await AdminManagementService.getTeamMembers(teamId);
|
||||
setMembers(membersData);
|
||||
} catch (err: any) {
|
||||
setError(err.message || "Erreur lors du chargement des membres");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveMember = async (memberId: string, memberName: string) => {
|
||||
if (
|
||||
!confirm(`Êtes-vous sûr de vouloir retirer ${memberName} de l'équipe ?`)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDeletingMemberId(memberId);
|
||||
try {
|
||||
await AdminManagementService.removeTeamMember(teamId, memberId);
|
||||
|
||||
// Mettre à jour la liste locale
|
||||
setMembers((prev) => prev.filter((member) => member.id !== memberId));
|
||||
|
||||
// Notifier le parent qu'un membre a été supprimé
|
||||
onMemberRemoved?.();
|
||||
|
||||
toast({
|
||||
title: "Succès",
|
||||
description: `${memberName} a été retiré de l'équipe`,
|
||||
});
|
||||
} catch (err: any) {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: err.message || "Erreur lors de la suppression du membre",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setDeletingMemberId(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<Card className="w-full max-w-2xl max-h-[80vh] overflow-hidden">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Users className="w-6 h-6 text-blue-400" />
|
||||
<div>
|
||||
<CardTitle className="text-xl">Membres de l'équipe</CardTitle>
|
||||
<p className="text-sm text-slate-500 font-normal">{teamName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<Skeleton className="w-8 h-8 rounded-full" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-3 w-24" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="text-red-400 mb-2">
|
||||
<Users className="w-12 h-12 mx-auto" />
|
||||
</div>
|
||||
<p className="text-red-400 font-medium">{error}</p>
|
||||
<Button variant="outline" onClick={fetchMembers} className="mt-3">
|
||||
Réessayer
|
||||
</Button>
|
||||
</div>
|
||||
) : members.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="text-slate-400 mb-2">
|
||||
<Users className="w-12 h-12 mx-auto" />
|
||||
</div>
|
||||
<p className="text-slate-400 font-medium">
|
||||
Aucun membre dans cette équipe
|
||||
</p>
|
||||
<p className="text-slate-500 text-sm mt-1">
|
||||
Les membres apparaîtront ici une fois qu'ils seront assignés
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Badge variant="outline" className="text-sm">
|
||||
{members.length} membre{members.length > 1 ? "s" : ""}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={fetchMembers}
|
||||
className="text-xs"
|
||||
>
|
||||
Actualiser
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
{members.map((member) => (
|
||||
<div
|
||||
key={member.id}
|
||||
className="flex items-center gap-3 p-3 rounded-lg border border-slate-200/10 bg-slate-50/5 hover:bg-slate-50/10 transition-colors"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center">
|
||||
<User className="w-4 h-4 text-blue-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-white truncate">
|
||||
{member.fullName}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400">
|
||||
<Calendar className="w-3 h-3" />
|
||||
<span>
|
||||
Membre depuis{" "}
|
||||
{new Date(member.joinedAt).toLocaleDateString(
|
||||
"fr-FR",
|
||||
{
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handleRemoveMember(member.id, member.fullName)
|
||||
}
|
||||
disabled={deletingMemberId === member.id}
|
||||
className="text-red-400 hover:text-red-300 hover:bg-red-500/20 h-6 w-6 p-0 shrink-0"
|
||||
title="Retirer de l'équipe"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Edit, Trash2 } from "lucide-react";
|
||||
import { Edit, Trash2, Users } from "lucide-react";
|
||||
|
||||
interface TreeItemRowProps {
|
||||
icon?: React.ReactNode;
|
||||
@@ -15,9 +15,11 @@ interface TreeItemRowProps {
|
||||
}>;
|
||||
onEdit?: () => void;
|
||||
onDelete?: () => void;
|
||||
onViewMembers?: () => void;
|
||||
canDelete?: boolean;
|
||||
showSeparator?: boolean;
|
||||
additionalInfo?: React.ReactNode;
|
||||
hasMembers?: boolean;
|
||||
}
|
||||
|
||||
export function TreeItemRow({
|
||||
@@ -27,9 +29,11 @@ export function TreeItemRow({
|
||||
badges = [],
|
||||
onEdit,
|
||||
onDelete,
|
||||
onViewMembers,
|
||||
canDelete = true,
|
||||
showSeparator = false,
|
||||
additionalInfo,
|
||||
hasMembers = false,
|
||||
}: TreeItemRowProps) {
|
||||
return (
|
||||
<div>
|
||||
@@ -67,6 +71,17 @@ export function TreeItemRow({
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{onViewMembers && hasMembers && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onViewMembers}
|
||||
className="text-green-400 hover:text-green-300 hover:bg-green-500/20 h-6 w-6 p-0"
|
||||
title="Voir les membres"
|
||||
>
|
||||
<Users className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
{onEdit && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
||||
Reference in New Issue
Block a user