feat: enhance ProfileForm with team search and dropdown functionality
- Added search functionality to filter teams by name or direction in the ProfileForm component. - Implemented a custom dropdown for team selection, including dynamic positioning based on available space. - Integrated click outside detection to close the dropdown when interacting outside of it. - Updated navigation component to use a Link for user info display, improving accessibility and interaction.
This commit is contained in:
Julien Froidefond
596
components/admin/skills-management.tsx
Normal file
596
components/admin/skills-management.tsx
Normal file
@@ -0,0 +1,596 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect, useMemo } from "react";
|
||||||
|
import {
|
||||||
|
Plus,
|
||||||
|
Edit,
|
||||||
|
Trash2,
|
||||||
|
Code2,
|
||||||
|
Search,
|
||||||
|
Folder,
|
||||||
|
FolderOpen,
|
||||||
|
ChevronRight,
|
||||||
|
ChevronDown,
|
||||||
|
Palette,
|
||||||
|
Database,
|
||||||
|
Cloud,
|
||||||
|
Shield,
|
||||||
|
Smartphone,
|
||||||
|
Layers,
|
||||||
|
} 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,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { useToast } from "@/hooks/use-toast";
|
||||||
|
import { SkillCategory, Team } from "@/lib/types";
|
||||||
|
import {
|
||||||
|
AdminManagementService,
|
||||||
|
Skill,
|
||||||
|
} from "@/services/admin-management-service";
|
||||||
|
import { TechIcon } from "@/components/icons/tech-icon";
|
||||||
|
import {
|
||||||
|
TreeViewContainer,
|
||||||
|
TreeCategoryHeader,
|
||||||
|
TreeItemRow,
|
||||||
|
TreeSearchControls,
|
||||||
|
} from "@/components/admin";
|
||||||
|
|
||||||
|
interface SkillsManagementProps {
|
||||||
|
skillCategories: SkillCategory[];
|
||||||
|
teams: Team[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SkillFormData {
|
||||||
|
name: string;
|
||||||
|
categoryId: string;
|
||||||
|
description: string;
|
||||||
|
icon: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SkillsManagement({
|
||||||
|
skillCategories,
|
||||||
|
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: "",
|
||||||
|
categoryId: "",
|
||||||
|
description: "",
|
||||||
|
icon: "",
|
||||||
|
});
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
// É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());
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Charger les skills depuis l'API
|
||||||
|
const fetchSkills = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
const skillsData = await AdminManagementService.getSkills();
|
||||||
|
setSkills(skillsData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching skills:", error);
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description: "Impossible de charger les skills",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Charger les skills au montage du composant
|
||||||
|
useEffect(() => {
|
||||||
|
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({
|
||||||
|
title: "Erreur",
|
||||||
|
description: "Veuillez remplir tous les champs obligatoires",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const categoryIndex = parseInt(skillFormData.categoryId);
|
||||||
|
const category = skillCategories[categoryIndex];
|
||||||
|
|
||||||
|
const skillData = {
|
||||||
|
...skillFormData,
|
||||||
|
category: category.category,
|
||||||
|
};
|
||||||
|
|
||||||
|
const newSkill = await AdminManagementService.createSkill(skillData);
|
||||||
|
setSkills([...skills, newSkill]);
|
||||||
|
setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
|
||||||
|
setIsCreateDialogOpen(false);
|
||||||
|
|
||||||
|
toast({
|
||||||
|
title: "Succès",
|
||||||
|
description: "Skill créée avec succès",
|
||||||
|
});
|
||||||
|
} catch (error: any) {
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description: error.message || "Erreur lors de la création de la skill",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditSkill = (skill: any) => {
|
||||||
|
setEditingSkill(skill);
|
||||||
|
const categoryIndex = skillCategories.findIndex(
|
||||||
|
(cat) => cat.category === skill.category
|
||||||
|
);
|
||||||
|
setSkillFormData({
|
||||||
|
name: skill.name,
|
||||||
|
categoryId: categoryIndex !== -1 ? categoryIndex.toString() : "",
|
||||||
|
description: skill.description,
|
||||||
|
icon: skill.icon,
|
||||||
|
});
|
||||||
|
setIsEditDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateSkill = async () => {
|
||||||
|
if (!editingSkill || !skillFormData.name || !skillFormData.categoryId) {
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description: "Veuillez remplir tous les champs obligatoires",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const categoryIndex = parseInt(skillFormData.categoryId);
|
||||||
|
const category = skillCategories[categoryIndex];
|
||||||
|
|
||||||
|
const skillData = {
|
||||||
|
id: editingSkill.id,
|
||||||
|
...skillFormData,
|
||||||
|
category: category.category,
|
||||||
|
usageCount: editingSkill.usageCount,
|
||||||
|
};
|
||||||
|
|
||||||
|
const updatedSkill = await AdminManagementService.updateSkill(skillData);
|
||||||
|
|
||||||
|
const updatedSkills = skills.map((skill) =>
|
||||||
|
skill.id === editingSkill.id ? updatedSkill : skill
|
||||||
|
);
|
||||||
|
|
||||||
|
setSkills(updatedSkills);
|
||||||
|
setIsEditDialogOpen(false);
|
||||||
|
setEditingSkill(null);
|
||||||
|
setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
|
||||||
|
|
||||||
|
toast({
|
||||||
|
title: "Succès",
|
||||||
|
description: "Skill mise à jour avec succès",
|
||||||
|
});
|
||||||
|
} catch (error: any) {
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description:
|
||||||
|
error.message || "Erreur lors de la mise à jour de la skill",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteSkill = async (skillId: string) => {
|
||||||
|
if (
|
||||||
|
confirm(
|
||||||
|
"Êtes-vous sûr de vouloir supprimer cette skill ? Cette action est irréversible."
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
await AdminManagementService.deleteSkill(skillId);
|
||||||
|
setSkills(skills.filter((s) => s.id !== skillId));
|
||||||
|
toast({
|
||||||
|
title: "Succès",
|
||||||
|
description: "Skill supprimée avec succès",
|
||||||
|
});
|
||||||
|
} catch (error: any) {
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description:
|
||||||
|
error.message || "Erreur lors de la suppression de la skill",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
|
||||||
|
};
|
||||||
|
|
||||||
|
// Fonction pour obtenir l'icône de la catégorie
|
||||||
|
const getCategoryIcon = (category: string) => {
|
||||||
|
const categoryName = category.toLowerCase();
|
||||||
|
if (categoryName.includes("frontend") || categoryName.includes("front"))
|
||||||
|
return Code2;
|
||||||
|
if (categoryName.includes("backend") || categoryName.includes("back"))
|
||||||
|
return Layers;
|
||||||
|
if (
|
||||||
|
categoryName.includes("design") ||
|
||||||
|
categoryName.includes("ui") ||
|
||||||
|
categoryName.includes("ux")
|
||||||
|
)
|
||||||
|
return Palette;
|
||||||
|
if (categoryName.includes("data") || categoryName.includes("database"))
|
||||||
|
return Database;
|
||||||
|
if (categoryName.includes("cloud") || categoryName.includes("devops"))
|
||||||
|
return Cloud;
|
||||||
|
if (categoryName.includes("security") || categoryName.includes("securité"))
|
||||||
|
return Shield;
|
||||||
|
if (
|
||||||
|
categoryName.includes("mobile") ||
|
||||||
|
categoryName.includes("android") ||
|
||||||
|
categoryName.includes("ios")
|
||||||
|
)
|
||||||
|
return Smartphone;
|
||||||
|
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
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* Filtres et contrôles */}
|
||||||
|
<TreeSearchControls
|
||||||
|
searchTerm={searchTerm}
|
||||||
|
onSearchChange={setSearchTerm}
|
||||||
|
onExpandAll={expandAll}
|
||||||
|
onCollapseAll={collapseAll}
|
||||||
|
placeholder="Rechercher une skill..."
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Vue arborescente des Skills */}
|
||||||
|
<TreeViewContainer
|
||||||
|
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>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{Object.entries(filteredSkillsByCategory).map(
|
||||||
|
([category, categorySkills], index) => (
|
||||||
|
<div key={category}>
|
||||||
|
<TreeCategoryHeader
|
||||||
|
category={category}
|
||||||
|
isExpanded={expandedCategories.has(category)}
|
||||||
|
onToggle={() => toggleCategory(category)}
|
||||||
|
icon={(() => {
|
||||||
|
const IconComponent = getCategoryIcon(category);
|
||||||
|
return <IconComponent className="w-5 h-5 text-blue-400" />;
|
||||||
|
})()}
|
||||||
|
itemCount={categorySkills.length}
|
||||||
|
itemLabel="skill"
|
||||||
|
showSeparator={index > 0}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Liste des skills de la catégorie */}
|
||||||
|
{expandedCategories.has(category) && (
|
||||||
|
<div className="bg-slate-950/30">
|
||||||
|
{categorySkills.map((skill, skillIndex) => (
|
||||||
|
<TreeItemRow
|
||||||
|
key={skill.id}
|
||||||
|
icon={
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<TechIcon
|
||||||
|
iconName={skill.icon}
|
||||||
|
className="w-5 h-5 text-green-400"
|
||||||
|
fallbackText={skill.name}
|
||||||
|
/>
|
||||||
|
<div className="p-1 bg-green-500/20 border border-green-500/30 rounded text-xs font-mono text-green-400 min-w-[3rem] text-center shrink-0">
|
||||||
|
{skill.icon || "?"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
title={skill.name}
|
||||||
|
subtitle={skill.description}
|
||||||
|
badges={[
|
||||||
|
{
|
||||||
|
text: `${skill.usageCount} util.`,
|
||||||
|
variant: "outline",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
onEdit={() => handleEditSkill(skill)}
|
||||||
|
onDelete={() => handleDeleteSkill(skill.id)}
|
||||||
|
canDelete={skill.usageCount === 0}
|
||||||
|
showSeparator={skillIndex > 0}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</TreeViewContainer>
|
||||||
|
|
||||||
|
{/* Dialog d'édition */}
|
||||||
|
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
||||||
|
<DialogContent className="sm:max-w-[500px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Modifier la skill</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="edit-skill-name">Nom de la skill *</Label>
|
||||||
|
<Input
|
||||||
|
id="edit-skill-name"
|
||||||
|
value={skillFormData.name}
|
||||||
|
onChange={(e) =>
|
||||||
|
setSkillFormData({ ...skillFormData, name: e.target.value })
|
||||||
|
}
|
||||||
|
placeholder="Ex: React, Node.js, PostgreSQL"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="edit-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="edit-skill-description">Description</Label>
|
||||||
|
<Textarea
|
||||||
|
id="edit-skill-description"
|
||||||
|
value={skillFormData.description}
|
||||||
|
onChange={(e) =>
|
||||||
|
setSkillFormData({
|
||||||
|
...skillFormData,
|
||||||
|
description: e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
placeholder="Description de la skill..."
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="edit-skill-icon">Icône</Label>
|
||||||
|
<Input
|
||||||
|
id="edit-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={() => setIsEditDialogOpen(false)}
|
||||||
|
>
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleUpdateSkill}>Mettre à jour</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
547
components/admin/teams-management.tsx
Normal file
547
components/admin/teams-management.tsx
Normal file
@@ -0,0 +1,547 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect, useMemo } from "react";
|
||||||
|
import { Plus, Edit, Trash2, Users, 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 { SkillCategory, Team as TeamType } from "@/lib/types";
|
||||||
|
import { TeamStats } from "@/services/admin-service";
|
||||||
|
import {
|
||||||
|
AdminManagementService,
|
||||||
|
Team,
|
||||||
|
} from "@/services/admin-management-service";
|
||||||
|
import {
|
||||||
|
TreeViewContainer,
|
||||||
|
TreeCategoryHeader,
|
||||||
|
TreeItemRow,
|
||||||
|
TreeSearchControls,
|
||||||
|
TeamMetrics,
|
||||||
|
} from "@/components/admin";
|
||||||
|
|
||||||
|
interface TeamsManagementProps {
|
||||||
|
teams: TeamType[];
|
||||||
|
teamStats: TeamStats[];
|
||||||
|
skillCategories: SkillCategory[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TeamFormData {
|
||||||
|
name: string;
|
||||||
|
direction: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TeamsManagement({
|
||||||
|
teams,
|
||||||
|
teamStats,
|
||||||
|
skillCategories,
|
||||||
|
}: TeamsManagementProps) {
|
||||||
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
|
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||||
|
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
||||||
|
const [editingTeam, setEditingTeam] = useState<any>(null);
|
||||||
|
const [teamFormData, setTeamFormData] = useState<TeamFormData>({
|
||||||
|
name: "",
|
||||||
|
direction: "",
|
||||||
|
});
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
// État pour les directions ouvertes/fermées
|
||||||
|
const [expandedDirections, setExpandedDirections] = useState<Set<string>>(
|
||||||
|
new Set()
|
||||||
|
);
|
||||||
|
|
||||||
|
// État pour gérer la liste des équipes
|
||||||
|
|
||||||
|
// Grouper les teams par direction et filtrer en fonction de la recherche
|
||||||
|
const filteredTeamsByDirection = useMemo(() => {
|
||||||
|
// Grouper les teams par direction
|
||||||
|
const teamsByDirection = teams.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[]>
|
||||||
|
);
|
||||||
|
}, [teams, 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());
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const getTeamStats = (teamId: string) => {
|
||||||
|
return teamStats.find((stats) => stats.teamId === teamId);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Charger les teams depuis l'API
|
||||||
|
const fetchTeams = async () => {
|
||||||
|
try {
|
||||||
|
const teamsData = await AdminManagementService.getTeams();
|
||||||
|
// Note: on garde les teams existantes pour la compatibilité
|
||||||
|
// Les nouvelles teams créées via l'API seront visibles après rafraîchissement
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching teams:", error);
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description: "Impossible de charger les teams",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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({
|
||||||
|
title: "Erreur",
|
||||||
|
description: "Veuillez remplir tous les champs obligatoires",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const newTeam = await AdminManagementService.createTeam(teamFormData);
|
||||||
|
toast({
|
||||||
|
title: "Succès",
|
||||||
|
description: "Équipe créée avec succès",
|
||||||
|
});
|
||||||
|
|
||||||
|
setTeamFormData({ name: "", direction: "" });
|
||||||
|
setIsCreateDialogOpen(false);
|
||||||
|
|
||||||
|
// Rafraîchir la page pour voir les changements
|
||||||
|
window.location.reload();
|
||||||
|
} catch (error: any) {
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description: error.message || "Erreur lors de la création de l'équipe",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditTeam = (team: any) => {
|
||||||
|
setEditingTeam(team);
|
||||||
|
setTeamFormData({
|
||||||
|
name: team.name,
|
||||||
|
direction: team.direction,
|
||||||
|
});
|
||||||
|
setIsEditDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateTeam = async () => {
|
||||||
|
if (!editingTeam || !teamFormData.name || !teamFormData.direction) {
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description: "Veuillez remplir tous les champs obligatoires",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await AdminManagementService.updateTeam({
|
||||||
|
id: editingTeam.id,
|
||||||
|
...teamFormData,
|
||||||
|
memberCount: editingTeam.memberCount || 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
toast({
|
||||||
|
title: "Succès",
|
||||||
|
description: "Équipe mise à jour avec succès",
|
||||||
|
});
|
||||||
|
|
||||||
|
setIsEditDialogOpen(false);
|
||||||
|
setEditingTeam(null);
|
||||||
|
setTeamFormData({ name: "", direction: "" });
|
||||||
|
|
||||||
|
// Rafraîchir la page pour voir les changements
|
||||||
|
window.location.reload();
|
||||||
|
} catch (error: any) {
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description:
|
||||||
|
error.message || "Erreur lors de la mise à jour de l'équipe",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteTeam = async (teamId: string) => {
|
||||||
|
const team = teams.find((t) => t.id === teamId);
|
||||||
|
const stats = getTeamStats(teamId);
|
||||||
|
|
||||||
|
if (stats && stats.totalMembers > 0) {
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description:
|
||||||
|
"Impossible de supprimer une équipe qui contient des membres",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
confirm(
|
||||||
|
`Êtes-vous sûr de vouloir supprimer l'équipe "${team?.name}" ? Cette action est irréversible.`
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
await AdminManagementService.deleteTeam(teamId);
|
||||||
|
toast({
|
||||||
|
title: "Succès",
|
||||||
|
description: "Équipe supprimée avec succès",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Rafraîchir la page pour voir les changements
|
||||||
|
window.location.reload();
|
||||||
|
} catch (error: any) {
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description:
|
||||||
|
error.message || "Erreur lors de la suppression de l'équipe",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteDirection = async (direction: string) => {
|
||||||
|
// Vérifier si des équipes de cette direction ont des membres
|
||||||
|
const teamsInDirection = teams.filter(
|
||||||
|
(team) => team.direction === direction
|
||||||
|
);
|
||||||
|
const hasMembers = teamsInDirection.some((team) => {
|
||||||
|
const stats = getTeamStats(team.id);
|
||||||
|
return stats && stats.totalMembers > 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (hasMembers) {
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description: `Impossible de supprimer la direction "${direction}" car certaines équipes ont des membres`,
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
confirm(
|
||||||
|
`Êtes-vous sûr de vouloir supprimer la direction "${direction}" et TOUTES ses équipes ?\n\n⚠️ Cette action est irréversible !\n\nÉquipes qui seront supprimées :\n${teamsInDirection
|
||||||
|
.map((t) => `• ${t.name}`)
|
||||||
|
.join("\n")}`
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
await AdminManagementService.deleteDirection(direction);
|
||||||
|
toast({
|
||||||
|
title: "Succès",
|
||||||
|
description: `Direction "${direction}" et toutes ses équipes supprimées avec succès`,
|
||||||
|
variant: "default",
|
||||||
|
});
|
||||||
|
// Rafraîchir la page pour voir les changements
|
||||||
|
window.location.reload();
|
||||||
|
} catch (error: any) {
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description:
|
||||||
|
error.message || "Erreur lors de la suppression de la direction",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
setTeamFormData({ name: "", direction: "" });
|
||||||
|
};
|
||||||
|
|
||||||
|
// Extraire les directions uniques pour les formulaires
|
||||||
|
const directions = Array.from(new Set(teams.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
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* Filtres et contrôles */}
|
||||||
|
<TreeSearchControls
|
||||||
|
searchTerm={searchTerm}
|
||||||
|
onSearchChange={setSearchTerm}
|
||||||
|
onExpandAll={expandAll}
|
||||||
|
onCollapseAll={collapseAll}
|
||||||
|
placeholder="Rechercher une équipe..."
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Vue arborescente des Teams */}
|
||||||
|
<TreeViewContainer
|
||||||
|
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>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{Object.entries(filteredTeamsByDirection).map(
|
||||||
|
([direction, directionTeams], index) => (
|
||||||
|
<div key={direction}>
|
||||||
|
<TreeCategoryHeader
|
||||||
|
category={direction}
|
||||||
|
isExpanded={expandedDirections.has(direction)}
|
||||||
|
onToggle={() => toggleDirection(direction)}
|
||||||
|
icon={<Building2 className="w-5 h-5 text-blue-400" />}
|
||||||
|
itemCount={directionTeams.length}
|
||||||
|
itemLabel="équipe"
|
||||||
|
showSeparator={index > 0}
|
||||||
|
onDelete={() => handleDeleteDirection(direction)}
|
||||||
|
canDelete={true}
|
||||||
|
isDirection={true}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Liste des teams de la direction */}
|
||||||
|
{expandedDirections.has(direction) && (
|
||||||
|
<div className="bg-slate-950/30">
|
||||||
|
{directionTeams.map((team, teamIndex) => {
|
||||||
|
const stats = getTeamStats(team.id);
|
||||||
|
return (
|
||||||
|
<TreeItemRow
|
||||||
|
key={team.id}
|
||||||
|
icon={<Users className="w-5 h-5 text-green-400" />}
|
||||||
|
title={team.name}
|
||||||
|
badges={
|
||||||
|
stats
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
text: `${stats.totalMembers} membres`,
|
||||||
|
variant: "outline",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []
|
||||||
|
}
|
||||||
|
onEdit={() => handleEditTeam(team)}
|
||||||
|
onDelete={() => handleDeleteTeam(team.id)}
|
||||||
|
canDelete={!stats || stats.totalMembers === 0}
|
||||||
|
showSeparator={teamIndex > 0}
|
||||||
|
additionalInfo={
|
||||||
|
stats ? (
|
||||||
|
<TeamMetrics
|
||||||
|
averageSkillLevel={stats.averageSkillLevel}
|
||||||
|
skillCoverage={stats.skillCoverage}
|
||||||
|
topSkillsCount={stats.topSkills.length}
|
||||||
|
totalMembers={stats.totalMembers}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<p className="text-slate-500 text-xs">
|
||||||
|
Aucune donnée disponible
|
||||||
|
</p>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</TreeViewContainer>
|
||||||
|
|
||||||
|
{/* Dialog d'édition */}
|
||||||
|
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
||||||
|
<DialogContent className="sm:max-w-[500px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Modifier l'équipe</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="edit-team-name">Nom de l'équipe *</Label>
|
||||||
|
<Input
|
||||||
|
id="edit-team-name"
|
||||||
|
value={teamFormData.name}
|
||||||
|
onChange={(e) =>
|
||||||
|
setTeamFormData({ ...teamFormData, name: e.target.value })
|
||||||
|
}
|
||||||
|
placeholder="Ex: Équipe Frontend, Équipe Backend"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="edit-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={() => setIsEditDialogOpen(false)}
|
||||||
|
>
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleUpdateTeam}>Mettre à jour</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -67,7 +67,10 @@ export function Navigation({ userInfo }: NavigationProps = {}) {
|
|||||||
|
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center space-x-4">
|
||||||
{userInfo && (
|
{userInfo && (
|
||||||
<div className="flex items-center gap-3 px-3 py-2 rounded-lg bg-muted/50">
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="flex items-center gap-3 px-3 py-2 rounded-lg bg-muted/50 hover:bg-muted/70 transition-colors cursor-pointer"
|
||||||
|
>
|
||||||
<div className="w-8 h-8 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center">
|
<div className="w-8 h-8 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center">
|
||||||
<User className="h-4 w-4 text-primary" />
|
<User className="h-4 w-4 text-primary" />
|
||||||
</div>
|
</div>
|
||||||
@@ -79,7 +82,7 @@ export function Navigation({ userInfo }: NavigationProps = {}) {
|
|||||||
{userInfo.teamName}
|
{userInfo.teamName}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Link>
|
||||||
)}
|
)}
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState, useMemo, useRef, useEffect } from "react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
@@ -11,14 +11,8 @@ import {
|
|||||||
} from "@/components/ui/card";
|
} from "@/components/ui/card";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import { UserProfile, Team } from "@/lib/types";
|
import { UserProfile, Team } from "@/lib/types";
|
||||||
|
import { Search, Building2, ChevronDown, Check } from "lucide-react";
|
||||||
|
|
||||||
interface ProfileFormProps {
|
interface ProfileFormProps {
|
||||||
teams: Team[];
|
teams: Team[];
|
||||||
@@ -34,6 +28,12 @@ export function ProfileForm({
|
|||||||
const [firstName, setFirstName] = useState(initialProfile?.firstName || "");
|
const [firstName, setFirstName] = useState(initialProfile?.firstName || "");
|
||||||
const [lastName, setLastName] = useState(initialProfile?.lastName || "");
|
const [lastName, setLastName] = useState(initialProfile?.lastName || "");
|
||||||
const [teamId, setTeamId] = useState(initialProfile?.teamId || "");
|
const [teamId, setTeamId] = useState(initialProfile?.teamId || "");
|
||||||
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
|
const [isTeamDropdownOpen, setIsTeamDropdownOpen] = useState(false);
|
||||||
|
const teamDropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [dropdownPosition, setDropdownPosition] = useState<"below" | "above">(
|
||||||
|
"below"
|
||||||
|
);
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -45,14 +45,57 @@ export function ProfileForm({
|
|||||||
const isValid =
|
const isValid =
|
||||||
firstName.length > 0 && lastName.length > 0 && teamId.length > 0;
|
firstName.length > 0 && lastName.length > 0 && teamId.length > 0;
|
||||||
|
|
||||||
// Group teams by direction
|
// Group teams by direction and filter by search term
|
||||||
const teamsByDirection = teams.reduce((acc, team) => {
|
const teamsByDirection = useMemo(() => {
|
||||||
|
const filteredTeams = teams.filter(
|
||||||
|
(team) =>
|
||||||
|
team.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
team.direction.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
return filteredTeams.reduce((acc, team) => {
|
||||||
if (!acc[team.direction]) {
|
if (!acc[team.direction]) {
|
||||||
acc[team.direction] = [];
|
acc[team.direction] = [];
|
||||||
}
|
}
|
||||||
acc[team.direction].push(team);
|
acc[team.direction].push(team);
|
||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, Team[]>);
|
}, {} as Record<string, Team[]>);
|
||||||
|
}, [teams, searchTerm]);
|
||||||
|
|
||||||
|
// Calculate dropdown position when opening
|
||||||
|
const handleDropdownToggle = () => {
|
||||||
|
if (!isTeamDropdownOpen && teamDropdownRef.current) {
|
||||||
|
const rect = teamDropdownRef.current.getBoundingClientRect();
|
||||||
|
const viewportHeight = window.innerHeight;
|
||||||
|
const spaceBelow = viewportHeight - rect.bottom;
|
||||||
|
const spaceAbove = rect.top;
|
||||||
|
const dropdownHeight = 300; // max-height of dropdown
|
||||||
|
|
||||||
|
setDropdownPosition(
|
||||||
|
spaceBelow >= dropdownHeight || spaceBelow > spaceAbove
|
||||||
|
? "below"
|
||||||
|
: "above"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
setIsTeamDropdownOpen(!isTeamDropdownOpen);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Close dropdown when clicking outside
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (
|
||||||
|
teamDropdownRef.current &&
|
||||||
|
!teamDropdownRef.current.contains(event.target as Node)
|
||||||
|
) {
|
||||||
|
setIsTeamDropdownOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener("mousedown", handleClickOutside);
|
||||||
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const selectedTeam = teams.find((team) => team.id === teamId);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="w-full max-w-md mx-auto">
|
<Card className="w-full max-w-md mx-auto">
|
||||||
@@ -88,27 +131,89 @@ export function ProfileForm({
|
|||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="team">Équipe</Label>
|
<Label htmlFor="team">Équipe</Label>
|
||||||
<Select value={teamId} onValueChange={setTeamId} required>
|
<div className="relative" ref={teamDropdownRef}>
|
||||||
<SelectTrigger>
|
<Button
|
||||||
<SelectValue placeholder="Sélectionnez votre équipe" />
|
type="button"
|
||||||
</SelectTrigger>
|
variant="outline"
|
||||||
<SelectContent>
|
className="w-full justify-between"
|
||||||
|
onClick={handleDropdownToggle}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
selectedTeam ? "text-foreground" : "text-muted-foreground"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{selectedTeam
|
||||||
|
? selectedTeam.name
|
||||||
|
: "Sélectionnez votre équipe"}
|
||||||
|
</span>
|
||||||
|
<ChevronDown className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{isTeamDropdownOpen && (
|
||||||
|
<div
|
||||||
|
className={`absolute left-0 right-0 bg-background border border-border rounded-md shadow-lg z-50 max-h-[300px] overflow-y-auto ${
|
||||||
|
dropdownPosition === "below"
|
||||||
|
? "top-full mt-1"
|
||||||
|
: "bottom-full mb-1"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* Barre de recherche */}
|
||||||
|
<div className="sticky top-0 bg-background border-b p-2">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
placeholder="Rechercher une équipe ou direction..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="pl-8 h-8 text-sm"
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Liste des équipes groupées par direction */}
|
||||||
{Object.entries(teamsByDirection).map(
|
{Object.entries(teamsByDirection).map(
|
||||||
([direction, directionTeams]) => (
|
([direction, directionTeams]) => (
|
||||||
<div key={direction}>
|
<div key={direction}>
|
||||||
<div className="px-2 py-1.5 text-sm font-semibold text-muted-foreground">
|
{/* En-tête de direction (non-cliquable) */}
|
||||||
|
<div className="px-3 py-2 text-sm font-semibold text-muted-foreground bg-muted/30 border-b border-border flex items-center gap-2">
|
||||||
|
<Building2 className="h-3 w-3" />
|
||||||
{direction}
|
{direction}
|
||||||
</div>
|
</div>
|
||||||
|
{/* Équipes de cette direction */}
|
||||||
{directionTeams.map((team) => (
|
{directionTeams.map((team) => (
|
||||||
<SelectItem key={team.id} value={team.id}>
|
<button
|
||||||
{team.name}
|
key={team.id}
|
||||||
</SelectItem>
|
type="button"
|
||||||
|
className={`w-full px-3 py-2 text-left hover:bg-muted/50 flex items-center justify-between ${
|
||||||
|
team.id === teamId ? "bg-muted" : ""
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
setTeamId(team.id);
|
||||||
|
setIsTeamDropdownOpen(false);
|
||||||
|
setSearchTerm("");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>{team.name}</span>
|
||||||
|
{team.id === teamId && (
|
||||||
|
<Check className="h-4 w-4 text-primary" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
{/* Message si aucune équipe trouvée */}
|
||||||
|
{Object.keys(teamsByDirection).length === 0 && (
|
||||||
|
<div className="px-3 py-4 text-center text-sm text-muted-foreground">
|
||||||
|
Aucune équipe trouvée pour "{searchTerm}"
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button type="submit" className="w-full" disabled={!isValid}>
|
<Button type="submit" className="w-full" disabled={!isValid}>
|
||||||
|
|||||||
Reference in New Issue
Block a user