refactor: managements pages simplification
This commit is contained in:
Julien Froidefond
@@ -4,3 +4,6 @@ export { TreeCategoryHeader } from "./tree-category-header";
|
||||
export { TreeItemRow } from "./tree-item-row";
|
||||
export { TreeSearchControls } from "./tree-search-controls";
|
||||
export { TeamMetrics } from "./team-metrics";
|
||||
|
||||
// Composant de base pour les pages de gestion
|
||||
export { TreeViewPage } from "./tree-view-page";
|
||||
|
||||
@@ -1,16 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Plus,
|
||||
Edit,
|
||||
Trash2,
|
||||
Code2,
|
||||
Search,
|
||||
Folder,
|
||||
FolderOpen,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Palette,
|
||||
Database,
|
||||
Cloud,
|
||||
@@ -20,15 +15,6 @@ import {
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent, CardHeader, CardTitle } 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,
|
||||
@@ -38,6 +24,13 @@ import {
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { SkillCategory, Team } from "@/lib/types";
|
||||
import {
|
||||
@@ -46,11 +39,12 @@ import {
|
||||
} from "@/services/admin-management-service";
|
||||
import { TechIcon } from "@/components/icons/tech-icon";
|
||||
import {
|
||||
TreeViewContainer,
|
||||
TreeCategoryHeader,
|
||||
TreeItemRow,
|
||||
TreeSearchControls,
|
||||
} from "@/components/admin";
|
||||
import { TreeViewPage } from "../tree-view-page";
|
||||
import { useTreeView } from "@/hooks/use-tree-view";
|
||||
import { useFormDialog } from "@/hooks/use-form-dialog";
|
||||
|
||||
interface SkillsManagementProps {
|
||||
skillCategories: SkillCategory[];
|
||||
@@ -69,8 +63,6 @@ export function SkillsManagement({
|
||||
teams,
|
||||
}: SkillsManagementProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
||||
const [editingSkill, setEditingSkill] = useState<any>(null);
|
||||
const [skillFormData, setSkillFormData] = useState<SkillFormData>({
|
||||
name: "",
|
||||
@@ -79,78 +71,26 @@ export function SkillsManagement({
|
||||
icon: "",
|
||||
});
|
||||
const { toast } = useToast();
|
||||
const { isCreateDialogOpen, isEditDialogOpen, openCreateDialog, closeCreateDialog, openEditDialog, closeEditDialog } = useFormDialog();
|
||||
|
||||
// État des skills
|
||||
const [skills, setSkills] = useState<Skill[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// État pour les catégories ouvertes/fermées
|
||||
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
|
||||
// Grouper les skills par catégorie et filtrer en fonction de la recherche
|
||||
const filteredSkillsByCategory = useMemo(() => {
|
||||
// Grouper les skills par catégorie
|
||||
const skillsByCategory = skills.reduce((acc, skill) => {
|
||||
if (!acc[skill.category]) {
|
||||
acc[skill.category] = [];
|
||||
}
|
||||
acc[skill.category].push(skill);
|
||||
return acc;
|
||||
}, {} as Record<string, Skill[]>);
|
||||
|
||||
// Filtrer les skills en fonction de la recherche
|
||||
return Object.entries(skillsByCategory).reduce(
|
||||
(acc, [category, categorySkills]) => {
|
||||
const filteredSkills = categorySkills.filter((skill) => {
|
||||
const matchesSearch =
|
||||
skill.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(skill.description &&
|
||||
skill.description
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase()));
|
||||
return matchesSearch;
|
||||
});
|
||||
|
||||
if (filteredSkills.length > 0) {
|
||||
acc[category] = filteredSkills;
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, Skill[]>
|
||||
);
|
||||
}, [skills, searchTerm]);
|
||||
|
||||
// Fonctions pour gérer l'expansion des catégories
|
||||
const toggleCategory = useMemo(
|
||||
() => (category: string) => {
|
||||
setExpandedCategories((prev) => {
|
||||
const newExpanded = new Set(prev);
|
||||
if (newExpanded.has(category)) {
|
||||
newExpanded.delete(category);
|
||||
} else {
|
||||
newExpanded.add(category);
|
||||
}
|
||||
return newExpanded;
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const expandAll = useMemo(
|
||||
() => () => {
|
||||
setExpandedCategories(new Set(Object.keys(filteredSkillsByCategory)));
|
||||
},
|
||||
[filteredSkillsByCategory]
|
||||
);
|
||||
|
||||
const collapseAll = useMemo(
|
||||
() => () => {
|
||||
setExpandedCategories(new Set());
|
||||
},
|
||||
[]
|
||||
);
|
||||
// Utilisation du hook factorisé
|
||||
const {
|
||||
filteredDataByCategory: filteredSkillsByCategory,
|
||||
expandedCategories,
|
||||
toggleCategory,
|
||||
expandAll,
|
||||
collapseAll,
|
||||
} = useTreeView({
|
||||
data: skills,
|
||||
searchFields: ['name', 'description'],
|
||||
groupBy: (skill) => skill.category,
|
||||
searchTerm,
|
||||
onSearchChange: setSearchTerm,
|
||||
});
|
||||
|
||||
// Charger les skills depuis l'API
|
||||
const fetchSkills = async () => {
|
||||
@@ -175,17 +115,6 @@ export function SkillsManagement({
|
||||
fetchSkills();
|
||||
}, []);
|
||||
|
||||
// Ouvrir automatiquement les catégories qui contiennent des résultats lors de la recherche
|
||||
useEffect(() => {
|
||||
if (searchTerm.trim()) {
|
||||
const categoriesWithResults = Object.keys(filteredSkillsByCategory);
|
||||
setExpandedCategories(new Set(categoriesWithResults));
|
||||
} else {
|
||||
// Si pas de recherche, fermer toutes les catégories
|
||||
setExpandedCategories(new Set());
|
||||
}
|
||||
}, [searchTerm, filteredSkillsByCategory]);
|
||||
|
||||
const handleCreateSkill = async () => {
|
||||
if (!skillFormData.name || !skillFormData.categoryId) {
|
||||
toast({
|
||||
@@ -208,7 +137,7 @@ export function SkillsManagement({
|
||||
const newSkill = await AdminManagementService.createSkill(skillData);
|
||||
setSkills([...skills, newSkill]);
|
||||
setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
|
||||
setIsCreateDialogOpen(false);
|
||||
closeCreateDialog();
|
||||
|
||||
toast({
|
||||
title: "Succès",
|
||||
@@ -234,7 +163,7 @@ export function SkillsManagement({
|
||||
description: skill.description,
|
||||
icon: skill.icon,
|
||||
});
|
||||
setIsEditDialogOpen(true);
|
||||
openEditDialog();
|
||||
};
|
||||
|
||||
const handleUpdateSkill = async () => {
|
||||
@@ -265,7 +194,7 @@ export function SkillsManagement({
|
||||
);
|
||||
|
||||
setSkills(updatedSkills);
|
||||
setIsEditDialogOpen(false);
|
||||
closeEditDialog();
|
||||
setEditingSkill(null);
|
||||
setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
|
||||
|
||||
@@ -339,126 +268,119 @@ export function SkillsManagement({
|
||||
return Code2; // Par défaut
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white">Gestion des Skills</h2>
|
||||
<p className="text-slate-400">
|
||||
Créez, modifiez et supprimez les skills de votre organisation
|
||||
</p>
|
||||
</div>
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button onClick={resetForm}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Nouvelle Skill
|
||||
const headerActions = (
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button onClick={() => { resetForm(); openCreateDialog(); }}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Nouvelle Skill
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Créer une nouvelle skill</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="skill-name">Nom de la skill *</Label>
|
||||
<Input
|
||||
id="skill-name"
|
||||
value={skillFormData.name}
|
||||
onChange={(e) =>
|
||||
setSkillFormData({ ...skillFormData, name: e.target.value })
|
||||
}
|
||||
placeholder="Ex: React, Node.js, PostgreSQL"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="skill-category">Catégorie *</Label>
|
||||
<Select
|
||||
value={skillFormData.categoryId}
|
||||
onValueChange={(value) =>
|
||||
setSkillFormData({ ...skillFormData, categoryId: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner une catégorie" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{skillCategories.map((category, index) => (
|
||||
<SelectItem key={index} value={index.toString()}>
|
||||
{category.category}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="skill-description">Description</Label>
|
||||
<Textarea
|
||||
id="skill-description"
|
||||
value={skillFormData.description}
|
||||
onChange={(e) =>
|
||||
setSkillFormData({
|
||||
...skillFormData,
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="Description de la skill..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="skill-icon">Icône</Label>
|
||||
<Input
|
||||
id="skill-icon"
|
||||
value={skillFormData.icon}
|
||||
onChange={(e) =>
|
||||
setSkillFormData({ ...skillFormData, icon: e.target.value })
|
||||
}
|
||||
placeholder="Ex: react, nodejs, postgresql"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={closeCreateDialog}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Créer une nouvelle skill</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="skill-name">Nom de la skill *</Label>
|
||||
<Input
|
||||
id="skill-name"
|
||||
value={skillFormData.name}
|
||||
onChange={(e) =>
|
||||
setSkillFormData({ ...skillFormData, name: e.target.value })
|
||||
}
|
||||
placeholder="Ex: React, Node.js, PostgreSQL"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="skill-category">Catégorie *</Label>
|
||||
<Select
|
||||
value={skillFormData.categoryId}
|
||||
onValueChange={(value) =>
|
||||
setSkillFormData({ ...skillFormData, categoryId: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner une catégorie" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{skillCategories.map((category, index) => (
|
||||
<SelectItem key={index} value={index.toString()}>
|
||||
{category.category}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="skill-description">Description</Label>
|
||||
<Textarea
|
||||
id="skill-description"
|
||||
value={skillFormData.description}
|
||||
onChange={(e) =>
|
||||
setSkillFormData({
|
||||
...skillFormData,
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="Description de la skill..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="skill-icon">Icône</Label>
|
||||
<Input
|
||||
id="skill-icon"
|
||||
value={skillFormData.icon}
|
||||
onChange={(e) =>
|
||||
setSkillFormData({ ...skillFormData, icon: e.target.value })
|
||||
}
|
||||
placeholder="Ex: react, nodejs, postgresql"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsCreateDialogOpen(false)}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleCreateSkill}>Créer</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<Button onClick={handleCreateSkill}>Créer</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
{/* Filtres et contrôles */}
|
||||
<TreeSearchControls
|
||||
const emptyState = (
|
||||
<div className="text-center py-8">
|
||||
<Code2 className="w-10 h-10 text-slate-500 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-slate-400 mb-1">
|
||||
{searchTerm ? "Aucune skill trouvée" : "Aucune skill"}
|
||||
</h3>
|
||||
<p className="text-slate-500 text-sm">
|
||||
{searchTerm
|
||||
? "Essayez de modifier vos critères de recherche"
|
||||
: "Commencez par créer votre première skill"}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<TreeViewPage
|
||||
title="Gestion des Skills"
|
||||
description="Créez, modifiez et supprimez les skills de votre organisation"
|
||||
searchTerm={searchTerm}
|
||||
onSearchChange={setSearchTerm}
|
||||
onExpandAll={expandAll}
|
||||
onCollapseAll={collapseAll}
|
||||
placeholder="Rechercher une skill..."
|
||||
/>
|
||||
|
||||
{/* Vue arborescente des Skills */}
|
||||
<TreeViewContainer
|
||||
searchPlaceholder="Rechercher une skill..."
|
||||
hasContent={Object.keys(filteredSkillsByCategory).length > 0}
|
||||
isLoading={isLoading}
|
||||
loadingMessage="Chargement des skills..."
|
||||
hasContent={Object.keys(filteredSkillsByCategory).length > 0}
|
||||
emptyState={
|
||||
<div className="text-center py-8">
|
||||
<Code2 className="w-10 h-10 text-slate-500 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-slate-400 mb-1">
|
||||
{searchTerm ? "Aucune skill trouvée" : "Aucune skill"}
|
||||
</h3>
|
||||
<p className="text-slate-500 text-sm">
|
||||
{searchTerm
|
||||
? "Essayez de modifier vos critères de recherche"
|
||||
: "Commencez par créer votre première skill"}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
emptyState={emptyState}
|
||||
headerActions={headerActions}
|
||||
>
|
||||
{Object.entries(filteredSkillsByCategory).map(
|
||||
([category, categorySkills], index) => (
|
||||
@@ -513,10 +435,10 @@ export function SkillsManagement({
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</TreeViewContainer>
|
||||
</TreeViewPage>
|
||||
|
||||
{/* Dialog d'édition */}
|
||||
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
||||
<Dialog open={isEditDialogOpen} onOpenChange={closeEditDialog}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Modifier la skill</DialogTitle>
|
||||
@@ -582,7 +504,7 @@ export function SkillsManagement({
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsEditDialogOpen(false)}
|
||||
onClick={closeEditDialog}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
@@ -591,6 +513,6 @@ export function SkillsManagement({
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,18 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { Plus, Edit, Trash2, Users, Search, Building2 } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Plus, Edit, Trash2, Users, 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,
|
||||
@@ -21,6 +12,13 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { SkillCategory, Team as TeamType } from "@/lib/types";
|
||||
import { TeamStats } from "@/services/admin-service";
|
||||
@@ -29,13 +27,14 @@ import {
|
||||
Team,
|
||||
} from "@/services/admin-management-service";
|
||||
import {
|
||||
TreeViewContainer,
|
||||
TreeCategoryHeader,
|
||||
TreeItemRow,
|
||||
TreeSearchControls,
|
||||
TeamMetrics,
|
||||
} from "@/components/admin";
|
||||
import { TeamMembersModal } from "@/components/admin/management/team-members-modal";
|
||||
import { TreeViewPage } from "../tree-view-page";
|
||||
import { useTreeView } from "@/hooks/use-tree-view";
|
||||
import { useFormDialog } from "@/hooks/use-form-dialog";
|
||||
|
||||
interface TeamsManagementProps {
|
||||
teams: TeamType[];
|
||||
@@ -54,8 +53,6 @@ export function TeamsManagement({
|
||||
skillCategories,
|
||||
}: TeamsManagementProps) {
|
||||
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);
|
||||
@@ -64,75 +61,26 @@ export function TeamsManagement({
|
||||
direction: "",
|
||||
});
|
||||
const { toast } = useToast();
|
||||
|
||||
// État pour les directions ouvertes/fermées
|
||||
const [expandedDirections, setExpandedDirections] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
const { isCreateDialogOpen, isEditDialogOpen, openCreateDialog, closeCreateDialog, openEditDialog, closeEditDialog } = useFormDialog();
|
||||
|
||||
// État local pour les équipes et leurs stats
|
||||
const [localTeams, setLocalTeams] = useState<TeamType[]>(teams);
|
||||
const [localTeamStats, setLocalTeamStats] = useState<TeamStats[]>(teamStats);
|
||||
|
||||
// Grouper les teams par direction et filtrer en fonction de la recherche
|
||||
const filteredTeamsByDirection = useMemo(() => {
|
||||
// Grouper les teams par direction
|
||||
const teamsByDirection = localTeams.reduce((acc, team) => {
|
||||
if (!acc[team.direction]) {
|
||||
acc[team.direction] = [];
|
||||
}
|
||||
acc[team.direction].push(team);
|
||||
return acc;
|
||||
}, {} as Record<string, TeamType[]>);
|
||||
|
||||
// Filtrer les teams en fonction de la recherche
|
||||
return Object.entries(teamsByDirection).reduce(
|
||||
(acc, [direction, directionTeams]) => {
|
||||
const filteredTeams = directionTeams.filter((team) => {
|
||||
const matchesSearch = team.name
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase());
|
||||
return matchesSearch;
|
||||
});
|
||||
|
||||
if (filteredTeams.length > 0) {
|
||||
acc[direction] = filteredTeams;
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, TeamType[]>
|
||||
);
|
||||
}, [localTeams, searchTerm]);
|
||||
|
||||
// Fonctions pour gérer l'expansion des directions
|
||||
const toggleDirection = useMemo(
|
||||
() => (direction: string) => {
|
||||
setExpandedDirections((prev) => {
|
||||
const newExpanded = new Set(prev);
|
||||
if (newExpanded.has(direction)) {
|
||||
newExpanded.delete(direction);
|
||||
} else {
|
||||
newExpanded.add(direction);
|
||||
}
|
||||
return newExpanded;
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const expandAll = useMemo(
|
||||
() => () => {
|
||||
setExpandedDirections(new Set(Object.keys(filteredTeamsByDirection)));
|
||||
},
|
||||
[filteredTeamsByDirection]
|
||||
);
|
||||
|
||||
const collapseAll = useMemo(
|
||||
() => () => {
|
||||
setExpandedDirections(new Set());
|
||||
},
|
||||
[]
|
||||
);
|
||||
// Utilisation du hook factorisé
|
||||
const {
|
||||
filteredDataByCategory: filteredTeamsByDirection,
|
||||
expandedCategories: expandedDirections,
|
||||
toggleCategory: toggleDirection,
|
||||
expandAll,
|
||||
collapseAll,
|
||||
} = useTreeView({
|
||||
data: localTeams,
|
||||
searchFields: ['name'],
|
||||
groupBy: (team) => team.direction,
|
||||
searchTerm,
|
||||
onSearchChange: setSearchTerm,
|
||||
});
|
||||
|
||||
const getTeamStats = (teamId: string): TeamStats | undefined => {
|
||||
return localTeamStats.find((stats) => stats.teamId === teamId);
|
||||
@@ -159,33 +107,11 @@ export function TeamsManagement({
|
||||
}
|
||||
};
|
||||
|
||||
// Rafraîchir les stats des équipes depuis l'API des équipes
|
||||
const refreshTeamStats = async () => {
|
||||
try {
|
||||
const teamsData = await AdminManagementService.getTeams();
|
||||
// Pour l'instant, on ne rafraîchit pas automatiquement
|
||||
// Les stats locales sont mises à jour manuellement lors des actions
|
||||
} catch (error) {
|
||||
console.error("Error refreshing team stats:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Charger les teams au montage du composant
|
||||
useEffect(() => {
|
||||
fetchTeams();
|
||||
}, []);
|
||||
|
||||
// Ouvrir automatiquement les directions qui contiennent des résultats lors de la recherche
|
||||
useEffect(() => {
|
||||
if (searchTerm.trim()) {
|
||||
const directionsWithResults = Object.keys(filteredTeamsByDirection);
|
||||
setExpandedDirections(new Set(directionsWithResults));
|
||||
} else {
|
||||
// Si pas de recherche, fermer toutes les directions
|
||||
setExpandedDirections(new Set());
|
||||
}
|
||||
}, [searchTerm, filteredTeamsByDirection]);
|
||||
|
||||
const handleCreateTeam = async () => {
|
||||
if (!teamFormData.name || !teamFormData.direction) {
|
||||
toast({
|
||||
@@ -204,7 +130,7 @@ export function TeamsManagement({
|
||||
});
|
||||
|
||||
setTeamFormData({ name: "", direction: "" });
|
||||
setIsCreateDialogOpen(false);
|
||||
closeCreateDialog();
|
||||
|
||||
// Mettre à jour l'état local avec la nouvelle équipe
|
||||
const newLocalTeam: TeamType = {
|
||||
@@ -241,7 +167,7 @@ export function TeamsManagement({
|
||||
name: team.name,
|
||||
direction: team.direction,
|
||||
});
|
||||
setIsEditDialogOpen(true);
|
||||
openEditDialog();
|
||||
};
|
||||
|
||||
const handleViewMembers = (team: any) => {
|
||||
@@ -283,7 +209,7 @@ export function TeamsManagement({
|
||||
description: "Équipe mise à jour avec succès",
|
||||
});
|
||||
|
||||
setIsEditDialogOpen(false);
|
||||
closeEditDialog();
|
||||
setEditingTeam(null);
|
||||
setTeamFormData({ name: "", direction: "" });
|
||||
|
||||
@@ -406,98 +332,91 @@ export function TeamsManagement({
|
||||
new Set(localTeams.map((team) => team.direction))
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white">Gestion des Teams</h2>
|
||||
<p className="text-slate-400">
|
||||
Créez, modifiez et supprimez les équipes de votre organisation
|
||||
</p>
|
||||
</div>
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button onClick={resetForm}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Nouvelle Équipe
|
||||
const headerActions = (
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button onClick={() => { resetForm(); openCreateDialog(); }}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Nouvelle Équipe
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Créer une nouvelle équipe</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="team-name">Nom de l'équipe *</Label>
|
||||
<Input
|
||||
id="team-name"
|
||||
value={teamFormData.name}
|
||||
onChange={(e) =>
|
||||
setTeamFormData({ ...teamFormData, name: e.target.value })
|
||||
}
|
||||
placeholder="Ex: Équipe Frontend, Équipe Backend"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="team-direction">Direction *</Label>
|
||||
<Select
|
||||
value={teamFormData.direction}
|
||||
onValueChange={(value) =>
|
||||
setTeamFormData({ ...teamFormData, direction: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner une direction" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{directions.map((direction) => (
|
||||
<SelectItem key={direction} value={direction}>
|
||||
{direction}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={closeCreateDialog}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Créer une nouvelle équipe</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="team-name">Nom de l'équipe *</Label>
|
||||
<Input
|
||||
id="team-name"
|
||||
value={teamFormData.name}
|
||||
onChange={(e) =>
|
||||
setTeamFormData({ ...teamFormData, name: e.target.value })
|
||||
}
|
||||
placeholder="Ex: Équipe Frontend, Équipe Backend"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="team-direction">Direction *</Label>
|
||||
<Select
|
||||
value={teamFormData.direction}
|
||||
onValueChange={(value) =>
|
||||
setTeamFormData({ ...teamFormData, direction: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner une direction" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{directions.map((direction) => (
|
||||
<SelectItem key={direction} value={direction}>
|
||||
{direction}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsCreateDialogOpen(false)}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleCreateTeam}>Créer</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<Button onClick={handleCreateTeam}>Créer</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
{/* Filtres et contrôles */}
|
||||
<TreeSearchControls
|
||||
const emptyState = (
|
||||
<div className="text-center py-8">
|
||||
<Building2 className="w-10 h-10 text-slate-500 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-slate-400 mb-1">
|
||||
{searchTerm ? "Aucune équipe trouvée" : "Aucune équipe"}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500">
|
||||
{searchTerm
|
||||
? "Essayez de modifier vos critères de recherche"
|
||||
: "Commencez par créer votre première équipe"}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<TreeViewPage
|
||||
title="Gestion des Teams"
|
||||
description="Créez, modifiez et supprimez les équipes de votre organisation"
|
||||
searchTerm={searchTerm}
|
||||
onSearchChange={setSearchTerm}
|
||||
onExpandAll={expandAll}
|
||||
onCollapseAll={collapseAll}
|
||||
placeholder="Rechercher une équipe..."
|
||||
/>
|
||||
|
||||
{/* Vue arborescente des Teams */}
|
||||
<TreeViewContainer
|
||||
searchPlaceholder="Rechercher une équipe..."
|
||||
hasContent={Object.keys(filteredTeamsByDirection).length > 0}
|
||||
emptyState={
|
||||
<div className="text-center py-8">
|
||||
<Building2 className="w-10 h-10 text-slate-500 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-slate-400 mb-1">
|
||||
{searchTerm ? "Aucune équipe trouvée" : "Aucune équipe"}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500">
|
||||
{searchTerm
|
||||
? "Essayez de modifier vos critères de recherche"
|
||||
: "Commencez par créer votre première équipe"}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
emptyState={emptyState}
|
||||
headerActions={headerActions}
|
||||
>
|
||||
{Object.entries(filteredTeamsByDirection).map(
|
||||
([direction, directionTeams], index) => (
|
||||
@@ -563,10 +482,10 @@ export function TeamsManagement({
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</TreeViewContainer>
|
||||
</TreeViewPage>
|
||||
|
||||
{/* Dialog d'édition */}
|
||||
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
||||
<Dialog open={isEditDialogOpen} onOpenChange={closeEditDialog}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Modifier l'équipe</DialogTitle>
|
||||
@@ -606,7 +525,7 @@ export function TeamsManagement({
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsEditDialogOpen(false)}
|
||||
onClick={closeEditDialog}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
@@ -635,6 +554,6 @@ export function TeamsManagement({
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,18 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { Users, User, Trash2, Search, Building2 } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Users, User, Trash2, 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,
|
||||
@@ -21,17 +12,25 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import {
|
||||
AdminManagementService,
|
||||
Team,
|
||||
} from "@/services/admin-management-service";
|
||||
import {
|
||||
TreeViewContainer,
|
||||
TreeCategoryHeader,
|
||||
TreeItemRow,
|
||||
TreeSearchControls,
|
||||
} from "@/components/admin";
|
||||
import { TreeViewPage } from "../tree-view-page";
|
||||
import { useTreeView } from "@/hooks/use-tree-view";
|
||||
import { useFormDialog } from "@/hooks/use-form-dialog";
|
||||
|
||||
interface User {
|
||||
uuid: string;
|
||||
@@ -54,46 +53,28 @@ export function UsersManagement() {
|
||||
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();
|
||||
const { isCreateDialogOpen, openCreateDialog, closeCreateDialog } = useFormDialog();
|
||||
|
||||
// É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]);
|
||||
// Utilisation du hook factorisé
|
||||
const {
|
||||
filteredDataByCategory: filteredUsersByTeam,
|
||||
expandedCategories: expandedTeams,
|
||||
toggleCategory: toggleTeam,
|
||||
expandAll,
|
||||
collapseAll,
|
||||
} = useTreeView({
|
||||
data: users,
|
||||
searchFields: ['firstName', 'lastName'],
|
||||
groupBy: (user) => user.teamName || "Sans équipe",
|
||||
searchTerm,
|
||||
onSearchChange: setSearchTerm,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
@@ -126,46 +107,6 @@ export function UsersManagement() {
|
||||
}
|
||||
};
|
||||
|
||||
// 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({
|
||||
@@ -184,7 +125,7 @@ export function UsersManagement() {
|
||||
});
|
||||
|
||||
setUserFormData({ firstName: "", lastName: "", teamId: "" });
|
||||
setIsCreateDialogOpen(false);
|
||||
closeCreateDialog();
|
||||
|
||||
// Rafraîchir la liste
|
||||
fetchUsers();
|
||||
@@ -289,163 +230,157 @@ export function UsersManagement() {
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
const headerActions = (
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button onClick={openCreateDialog}>
|
||||
<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>
|
||||
}
|
||||
>
|
||||
{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}
|
||||
/>
|
||||
<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={closeCreateDialog}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleCreateUser}>Créer</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
{/* 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>
|
||||
const 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>
|
||||
);
|
||||
|
||||
return (
|
||||
<TreeViewPage
|
||||
title="Gestion des utilisateurs"
|
||||
description="Gérez les utilisateurs de votre organisation"
|
||||
searchTerm={searchTerm}
|
||||
onSearchChange={setSearchTerm}
|
||||
onExpandAll={expandAll}
|
||||
onCollapseAll={collapseAll}
|
||||
searchPlaceholder="Rechercher un utilisateur..."
|
||||
hasContent={Object.keys(filteredUsersByTeam).length > 0}
|
||||
emptyState={emptyState}
|
||||
headerActions={headerActions}
|
||||
>
|
||||
{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>
|
||||
)
|
||||
)}
|
||||
</TreeViewPage>
|
||||
);
|
||||
}
|
||||
|
||||
68
components/admin/management/tree-view-page.tsx
Normal file
68
components/admin/management/tree-view-page.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import { ReactNode } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { TreeSearchControls } from "@/components/admin";
|
||||
import { TreeViewContainer } from "@/components/admin";
|
||||
|
||||
interface TreeViewPageProps {
|
||||
title: string;
|
||||
description: string;
|
||||
searchTerm: string;
|
||||
onSearchChange: (term: string) => void;
|
||||
onExpandAll: () => void;
|
||||
onCollapseAll: () => void;
|
||||
searchPlaceholder: string;
|
||||
hasContent: boolean;
|
||||
isLoading?: boolean;
|
||||
loadingMessage?: string;
|
||||
emptyState: ReactNode;
|
||||
headerActions?: ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function TreeViewPage({
|
||||
title,
|
||||
description,
|
||||
searchTerm,
|
||||
onSearchChange,
|
||||
onExpandAll,
|
||||
onCollapseAll,
|
||||
searchPlaceholder,
|
||||
hasContent,
|
||||
isLoading = false,
|
||||
loadingMessage = "Chargement...",
|
||||
emptyState,
|
||||
headerActions,
|
||||
children,
|
||||
}: TreeViewPageProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white">{title}</h2>
|
||||
<p className="text-slate-400">{description}</p>
|
||||
</div>
|
||||
{headerActions}
|
||||
</div>
|
||||
|
||||
{/* Filtres et contrôles */}
|
||||
<TreeSearchControls
|
||||
searchTerm={searchTerm}
|
||||
onSearchChange={onSearchChange}
|
||||
onExpandAll={onExpandAll}
|
||||
onCollapseAll={onCollapseAll}
|
||||
placeholder={searchPlaceholder}
|
||||
/>
|
||||
|
||||
{/* Vue arborescente */}
|
||||
<TreeViewContainer
|
||||
isLoading={isLoading}
|
||||
loadingMessage={loadingMessage}
|
||||
hasContent={hasContent}
|
||||
emptyState={emptyState}
|
||||
>
|
||||
{children}
|
||||
</TreeViewContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user