519 lines
16 KiB
TypeScript
519 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
Plus,
|
|
Edit,
|
|
Trash2,
|
|
Code2,
|
|
Palette,
|
|
Database,
|
|
Cloud,
|
|
Shield,
|
|
Smartphone,
|
|
Layers,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
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 {
|
|
AdminManagementService,
|
|
Skill,
|
|
} from "@/services/admin-management-service";
|
|
import { TechIcon } from "@/components/icons/tech-icon";
|
|
import {
|
|
TreeCategoryHeader,
|
|
TreeItemRow,
|
|
} 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[];
|
|
teams: Team[];
|
|
}
|
|
|
|
interface SkillFormData {
|
|
name: string;
|
|
categoryId: string;
|
|
description: string;
|
|
icon: string;
|
|
}
|
|
|
|
export function SkillsManagement({
|
|
skillCategories,
|
|
teams,
|
|
}: SkillsManagementProps) {
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [editingSkill, setEditingSkill] = useState<any>(null);
|
|
const [skillFormData, setSkillFormData] = useState<SkillFormData>({
|
|
name: "",
|
|
categoryId: "",
|
|
description: "",
|
|
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);
|
|
|
|
// 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 () => {
|
|
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();
|
|
}, []);
|
|
|
|
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: "" });
|
|
closeCreateDialog();
|
|
|
|
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,
|
|
});
|
|
openEditDialog();
|
|
};
|
|
|
|
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);
|
|
closeEditDialog();
|
|
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
|
|
};
|
|
|
|
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>
|
|
<Button onClick={handleCreateSkill}>Créer</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
|
|
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}
|
|
searchPlaceholder="Rechercher une skill..."
|
|
hasContent={Object.keys(filteredSkillsByCategory).length > 0}
|
|
isLoading={isLoading}
|
|
loadingMessage="Chargement des skills..."
|
|
emptyState={emptyState}
|
|
headerActions={headerActions}
|
|
>
|
|
{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>
|
|
)
|
|
)}
|
|
</TreeViewPage>
|
|
|
|
{/* Dialog d'édition */}
|
|
<Dialog open={isEditDialogOpen} onOpenChange={closeEditDialog}>
|
|
<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={closeEditDialog}
|
|
>
|
|
Annuler
|
|
</Button>
|
|
<Button onClick={handleUpdateSkill}>Mettre à jour</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|