283 lines
11 KiB
TypeScript
283 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Plus, Search, Sparkles } from "lucide-react";
|
|
import { SkillCategory, CategoryEvaluation } from "@/lib/types";
|
|
import { TechIcon } from "./icons/tech-icon";
|
|
import { CreateSkillForm } from "./create-skill-form";
|
|
|
|
interface SkillSelectorProps {
|
|
categories: SkillCategory[];
|
|
evaluations: CategoryEvaluation[];
|
|
selectedCategory: string;
|
|
onAddSkill: (category: string, skillId: string) => void;
|
|
onAddMultipleSkills?: (category: string, skillIds: string[]) => void;
|
|
onRemoveSkill: (category: string, skillId: string) => void;
|
|
}
|
|
|
|
export function SkillSelector({
|
|
categories,
|
|
evaluations,
|
|
selectedCategory,
|
|
onAddSkill,
|
|
onAddMultipleSkills,
|
|
onRemoveSkill,
|
|
}: SkillSelectorProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [isAddingAll, setIsAddingAll] = useState(false);
|
|
const [addingSkillIds, setAddingSkillIds] = useState<Set<string>>(new Set());
|
|
|
|
const currentCategory = categories.find(
|
|
(cat) => cat.category === selectedCategory
|
|
);
|
|
|
|
// Utiliser les évaluations passées en props (qui viennent du contexte et sont mises à jour)
|
|
const currentEvaluation = evaluations.find(
|
|
(evaluation) => evaluation.category === selectedCategory
|
|
);
|
|
|
|
if (!currentCategory) return null;
|
|
|
|
// Si la catégorie n'existe pas dans l'évaluation, créer une évaluation vide pour cette catégorie
|
|
const effectiveEvaluation = currentEvaluation || {
|
|
category: selectedCategory,
|
|
skills: [],
|
|
selectedSkillIds: [],
|
|
};
|
|
|
|
const selectedSkillIds = effectiveEvaluation.selectedSkillIds || [];
|
|
|
|
const filteredSkills = currentCategory.skills.filter(
|
|
(skill) =>
|
|
skill.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
skill.description.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
const availableSkills = filteredSkills.filter(
|
|
(skill) => !selectedSkillIds.includes(skill.id)
|
|
);
|
|
|
|
const selectedSkills = currentCategory.skills.filter((skill) =>
|
|
selectedSkillIds.includes(skill.id)
|
|
);
|
|
|
|
const handleAddSkill = async (skillId: string) => {
|
|
setAddingSkillIds((prev) => new Set(prev).add(skillId));
|
|
try {
|
|
await onAddSkill(selectedCategory, skillId);
|
|
} catch (error) {
|
|
console.error("Failed to add skill:", error);
|
|
} finally {
|
|
setAddingSkillIds((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(skillId);
|
|
return next;
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleAddAllSkills = async () => {
|
|
setIsAddingAll(true);
|
|
try {
|
|
const skillIds = availableSkills.map((skill) => skill.id);
|
|
|
|
// Utiliser la fonction d'ajout multiple si disponible, sinon fallback sur l'ajout individuel
|
|
if (onAddMultipleSkills) {
|
|
await onAddMultipleSkills(selectedCategory, skillIds);
|
|
} else {
|
|
// Fallback: ajouter en séquentiel pour éviter les conflits d'état
|
|
for (const skill of availableSkills) {
|
|
await onAddSkill(selectedCategory, skill.id);
|
|
}
|
|
}
|
|
|
|
// Petit délai pour permettre à l'UI de se mettre à jour avant de fermer
|
|
setTimeout(() => {
|
|
setIsOpen(false);
|
|
}, 100);
|
|
} catch (error) {
|
|
console.error("Failed to add all skills:", error);
|
|
} finally {
|
|
setIsAddingAll(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Selected Skills */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<h4 className="text-lg font-medium">Mes compétences sélectionnées</h4>
|
|
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
size="sm"
|
|
className="gap-2 bg-blue-500 hover:bg-blue-600 text-white shadow-lg"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Ajouter une compétence
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
Ajouter des compétences - {selectedCategory}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Choisissez les compétences que vous souhaitez évaluer dans
|
|
cette catégorie.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
{/* Search and Add All */}
|
|
<div className="space-y-3">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Rechercher une compétence..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
|
|
{availableSkills.length > 1 && (
|
|
<Button
|
|
onClick={handleAddAllSkills}
|
|
disabled={isAddingAll}
|
|
className="w-full gap-2 bg-green-600 hover:bg-green-700 text-white disabled:opacity-50"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
{isAddingAll
|
|
? "Ajout en cours..."
|
|
: `Ajouter toutes les compétences (${availableSkills.length})`}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Create New Skill Button */}
|
|
<div className="border-t pt-4">
|
|
<Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full gap-2 border-dashed border-2 border-blue-300/50 text-blue-200 hover:border-blue-400 hover:bg-blue-500/10 hover:text-blue-100 transition-all duration-200"
|
|
>
|
|
<Sparkles className="h-4 w-4" />
|
|
Créer une nouvelle compétence dans {selectedCategory}
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Créer une nouvelle compétence</DialogTitle>
|
|
<DialogDescription>
|
|
Ajoutez une compétence manquante dans la catégorie{" "}
|
|
{selectedCategory}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<CreateSkillForm
|
|
categoryName={selectedCategory}
|
|
onSuccess={(skillId) => {
|
|
setIsCreateOpen(false);
|
|
setIsOpen(false);
|
|
// Ajouter automatiquement la skill créée à l'évaluation
|
|
onAddSkill(selectedCategory, skillId);
|
|
}}
|
|
onCancel={() => setIsCreateOpen(false)}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
{/* Available Skills Grid */}
|
|
<div className="max-h-96 overflow-y-auto">
|
|
<div className="grid gap-2">
|
|
{availableSkills.length > 0 ? (
|
|
availableSkills.map((skill) => (
|
|
<div
|
|
key={skill.id}
|
|
className="flex items-center justify-between p-3 border rounded-lg hover:bg-muted/30 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded bg-muted flex items-center justify-center">
|
|
<TechIcon
|
|
iconName={skill.icon}
|
|
className="w-5 h-5 text-foreground"
|
|
fallbackText={skill.name}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h5 className="font-medium">{skill.name}</h5>
|
|
<p className="text-sm text-muted-foreground line-clamp-1">
|
|
{skill.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => handleAddSkill(skill.id)}
|
|
disabled={
|
|
addingSkillIds.has(skill.id) || isAddingAll
|
|
}
|
|
className="gap-2 disabled:opacity-50"
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
{addingSkillIds.has(skill.id)
|
|
? "Ajout..."
|
|
: "Ajouter"}
|
|
</Button>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
{searchTerm
|
|
? "Aucune compétence trouvée"
|
|
: "Toutes les compétences ont été ajoutées"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
{selectedSkills.length > 0 ? (
|
|
<div className="bg-muted/30 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm text-muted-foreground">
|
|
{selectedSkills.length} compétence
|
|
{selectedSkills.length > 1 ? "s" : ""} sélectionnée
|
|
{selectedSkills.length > 1 ? "s" : ""}
|
|
</p>
|
|
<div className="text-xs text-muted-foreground">
|
|
Supprimez directement depuis les lignes ci-dessous
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-muted-foreground border-2 border-dashed border-muted rounded-lg">
|
|
<p className="mb-2">Aucune compétence sélectionnée</p>
|
|
<p className="text-sm">
|
|
Cliquez sur "Ajouter une compétence" pour commencer
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|