Add mentor and learning status updates to skill evaluation

- Introduced `updateSkillMentorStatus` and `updateSkillLearningStatus` functions to manage mentor and learning preferences for skills.
- Updated `SkillEvaluationCard` to include buttons for toggling mentor and learning statuses with corresponding icons.
- Enhanced `SkillEvaluationGrid` and `SkillEvaluation` components to pass new status update handlers.
- Modified `SkillEvaluation` type to accommodate new properties for mentor and learning status.
This commit is contained in:
Julien Froidefond
2025-08-20 17:04:19 +02:00
parent ab9c35c276
commit 328a1b68a1
6 changed files with 186 additions and 8 deletions

View File

@@ -21,6 +21,8 @@ export default function EvaluationPage() {
loading, loading,
updateProfile, updateProfile,
updateSkillLevel, updateSkillLevel,
updateSkillMentorStatus,
updateSkillLearningStatus,
addSkillToEvaluation, addSkillToEvaluation,
removeSkillFromEvaluation, removeSkillFromEvaluation,
initializeEmptyEvaluation, initializeEmptyEvaluation,
@@ -93,6 +95,8 @@ export default function EvaluationPage() {
categories={skillCategories} categories={skillCategories}
evaluations={userEvaluation.evaluations} evaluations={userEvaluation.evaluations}
onUpdateSkill={updateSkillLevel} onUpdateSkill={updateSkillLevel}
onUpdateMentorStatus={updateSkillMentorStatus}
onUpdateLearningStatus={updateSkillLearningStatus}
onAddSkill={addSkillToEvaluation} onAddSkill={addSkillToEvaluation}
onRemoveSkill={removeSkillFromEvaluation} onRemoveSkill={removeSkillFromEvaluation}
/> />

View File

@@ -1,16 +1,18 @@
import { ExternalLink, Info, X } from "lucide-react"; import { ExternalLink, Info, X, UserCheck, GraduationCap } from "lucide-react";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { Skill, SkillLevel, SKILL_LEVELS } from "@/lib/types"; import { Skill, SkillLevel, SKILL_LEVELS, SkillEvaluation } from "@/lib/types";
import { TechIcon } from "@/components/icons/tech-icon"; import { TechIcon } from "@/components/icons/tech-icon";
interface SkillEvaluationCardProps { interface SkillEvaluationCardProps {
skill: Skill; skill: Skill;
currentLevel: SkillLevel; skillEvaluation: SkillEvaluation;
onUpdateSkill: (skillId: string, level: SkillLevel) => void; onUpdateSkill: (skillId: string, level: SkillLevel) => void;
onUpdateMentorStatus: (skillId: string, canMentor: boolean) => void;
onUpdateLearningStatus: (skillId: string, wantsToLearn: boolean) => void;
onRemoveSkill: (skillId: string) => void; onRemoveSkill: (skillId: string) => void;
} }
@@ -42,10 +44,13 @@ function getLevelColorBorder(level: Exclude<SkillLevel, null>) {
export function SkillEvaluationCard({ export function SkillEvaluationCard({
skill, skill,
currentLevel, skillEvaluation,
onUpdateSkill, onUpdateSkill,
onUpdateMentorStatus,
onUpdateLearningStatus,
onRemoveSkill, onRemoveSkill,
}: SkillEvaluationCardProps) { }: SkillEvaluationCardProps) {
const currentLevel = skillEvaluation.level;
return ( return (
<div className="group relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3 hover:bg-white/10 hover:border-white/20 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/10"> <div className="group relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3 hover:bg-white/10 hover:border-white/20 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/10">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -135,6 +140,62 @@ export function SkillEvaluationCard({
); );
})} })}
{/* Mentor and Learning Status Icons */}
<div className="flex items-center gap-1.5 ml-2 border-l border-white/10 pl-2">
{/* Mentor Icon */}
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() =>
onUpdateMentorStatus(skill.id, !skillEvaluation.canMentor)
}
className={`p-1 rounded-md transition-all hover:scale-110 ${
skillEvaluation.canMentor
? "bg-green-500/20 text-green-400 hover:bg-green-500/30"
: "text-slate-400 hover:text-green-400 hover:bg-green-500/10"
}`}
>
<UserCheck className="h-4 w-4" />
</button>
</TooltipTrigger>
<TooltipContent>
<p className="text-xs">
{skillEvaluation.canMentor
? "Peut mentorer"
: "Peut mentorer"}
</p>
</TooltipContent>
</Tooltip>
{/* Learning Icon */}
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() =>
onUpdateLearningStatus(
skill.id,
!skillEvaluation.wantsToLearn
)
}
className={`p-1 rounded-md transition-all hover:scale-110 ${
skillEvaluation.wantsToLearn
? "bg-blue-500/20 text-blue-400 hover:bg-blue-500/30"
: "text-slate-400 hover:text-blue-400 hover:bg-blue-500/10"
}`}
>
<GraduationCap className="h-4 w-4" />
</button>
</TooltipTrigger>
<TooltipContent>
<p className="text-xs">
{skillEvaluation.wantsToLearn
? "Veut apprendre"
: "J'aimerais apprendre"}
</p>
</TooltipContent>
</Tooltip>
</div>
{/* Remove button */} {/* Remove button */}
<div className="flex items-center ml-2 border-l border-white/10 pl-2"> <div className="flex items-center ml-2 border-l border-white/10 pl-2">
<Tooltip> <Tooltip>

View File

@@ -5,6 +5,16 @@ interface SkillEvaluationGridProps {
currentCategory: SkillCategory; currentCategory: SkillCategory;
currentEvaluation: CategoryEvaluation; currentEvaluation: CategoryEvaluation;
onUpdateSkill: (category: string, skillId: string, level: SkillLevel) => void; onUpdateSkill: (category: string, skillId: string, level: SkillLevel) => void;
onUpdateMentorStatus: (
category: string,
skillId: string,
canMentor: boolean
) => void;
onUpdateLearningStatus: (
category: string,
skillId: string,
wantsToLearn: boolean
) => void;
onRemoveSkill: (category: string, skillId: string) => void; onRemoveSkill: (category: string, skillId: string) => void;
} }
@@ -12,13 +22,22 @@ export function SkillEvaluationGrid({
currentCategory, currentCategory,
currentEvaluation, currentEvaluation,
onUpdateSkill, onUpdateSkill,
onUpdateMentorStatus,
onUpdateLearningStatus,
onRemoveSkill, onRemoveSkill,
}: SkillEvaluationGridProps) { }: SkillEvaluationGridProps) {
const getSkillLevel = (skillId: string): SkillLevel => { const getSkillEvaluation = (skillId: string) => {
const skillEval = currentEvaluation?.skills.find( const skillEval = currentEvaluation?.skills.find(
(s) => s.skillId === skillId (s) => s.skillId === skillId
); );
return skillEval?.level || null; return (
skillEval || {
skillId,
level: null,
canMentor: false,
wantsToLearn: false,
}
);
}; };
if (!currentEvaluation.selectedSkillIds.length) { if (!currentEvaluation.selectedSkillIds.length) {
@@ -44,16 +63,30 @@ export function SkillEvaluationGrid({
const skill = currentCategory.skills.find((s) => s.id === skillId); const skill = currentCategory.skills.find((s) => s.id === skillId);
if (!skill) return null; if (!skill) return null;
const currentLevel = getSkillLevel(skill.id); const skillEvaluation = getSkillEvaluation(skill.id);
return ( return (
<SkillEvaluationCard <SkillEvaluationCard
key={skill.id} key={skill.id}
skill={skill} skill={skill}
currentLevel={currentLevel} skillEvaluation={skillEvaluation}
onUpdateSkill={(skillId, level) => onUpdateSkill={(skillId, level) =>
onUpdateSkill(currentCategory.category, skillId, level) onUpdateSkill(currentCategory.category, skillId, level)
} }
onUpdateMentorStatus={(skillId, canMentor) =>
onUpdateMentorStatus(
currentCategory.category,
skillId,
canMentor
)
}
onUpdateLearningStatus={(skillId, wantsToLearn) =>
onUpdateLearningStatus(
currentCategory.category,
skillId,
wantsToLearn
)
}
onRemoveSkill={(skillId) => onRemoveSkill={(skillId) =>
onRemoveSkill(currentCategory.category, skillId) onRemoveSkill(currentCategory.category, skillId)
} }

View File

@@ -16,6 +16,16 @@ interface SkillEvaluationProps {
categories: SkillCategory[]; categories: SkillCategory[];
evaluations: CategoryEvaluation[]; evaluations: CategoryEvaluation[];
onUpdateSkill: (category: string, skillId: string, level: SkillLevel) => void; onUpdateSkill: (category: string, skillId: string, level: SkillLevel) => void;
onUpdateMentorStatus: (
category: string,
skillId: string,
canMentor: boolean
) => void;
onUpdateLearningStatus: (
category: string,
skillId: string,
wantsToLearn: boolean
) => void;
onAddSkill: (category: string, skillId: string) => void; onAddSkill: (category: string, skillId: string) => void;
onRemoveSkill: (category: string, skillId: string) => void; onRemoveSkill: (category: string, skillId: string) => void;
} }
@@ -24,6 +34,8 @@ export function SkillEvaluation({
categories, categories,
evaluations, evaluations,
onUpdateSkill, onUpdateSkill,
onUpdateMentorStatus,
onUpdateLearningStatus,
onAddSkill, onAddSkill,
onRemoveSkill, onRemoveSkill,
}: SkillEvaluationProps) { }: SkillEvaluationProps) {
@@ -94,6 +106,8 @@ export function SkillEvaluation({
currentCategory={currentCategory} currentCategory={currentCategory}
currentEvaluation={currentEvaluation} currentEvaluation={currentEvaluation}
onUpdateSkill={onUpdateSkill} onUpdateSkill={onUpdateSkill}
onUpdateMentorStatus={onUpdateMentorStatus}
onUpdateLearningStatus={onUpdateLearningStatus}
onRemoveSkill={onRemoveSkill} onRemoveSkill={onRemoveSkill}
/> />
)} )}

View File

@@ -135,6 +135,68 @@ export function useEvaluation() {
saveUserEvaluation(newEvaluation); saveUserEvaluation(newEvaluation);
}; };
const updateSkillMentorStatus = (
category: string,
skillId: string,
canMentor: boolean
) => {
if (!userEvaluation) return;
const updatedEvaluations = userEvaluation.evaluations.map((catEval) => {
if (catEval.category === category) {
const updatedSkills = catEval.skills.map((skill) =>
skill.skillId === skillId ? { ...skill, canMentor } : skill
);
return {
...catEval,
skills: updatedSkills,
};
}
return catEval;
});
const newEvaluation: UserEvaluation = {
...userEvaluation,
evaluations: updatedEvaluations,
lastUpdated: new Date().toISOString(),
};
setUserEvaluation(newEvaluation);
saveUserEvaluation(newEvaluation);
};
const updateSkillLearningStatus = (
category: string,
skillId: string,
wantsToLearn: boolean
) => {
if (!userEvaluation) return;
const updatedEvaluations = userEvaluation.evaluations.map((catEval) => {
if (catEval.category === category) {
const updatedSkills = catEval.skills.map((skill) =>
skill.skillId === skillId ? { ...skill, wantsToLearn } : skill
);
return {
...catEval,
skills: updatedSkills,
};
}
return catEval;
});
const newEvaluation: UserEvaluation = {
...userEvaluation,
evaluations: updatedEvaluations,
lastUpdated: new Date().toISOString(),
};
setUserEvaluation(newEvaluation);
saveUserEvaluation(newEvaluation);
};
const addSkillToEvaluation = (category: string, skillId: string) => { const addSkillToEvaluation = (category: string, skillId: string) => {
if (!userEvaluation) return; if (!userEvaluation) return;
@@ -206,6 +268,8 @@ export function useEvaluation() {
loading, loading,
updateProfile, updateProfile,
updateSkillLevel, updateSkillLevel,
updateSkillMentorStatus,
updateSkillLearningStatus,
addSkillToEvaluation, addSkillToEvaluation,
removeSkillFromEvaluation, removeSkillFromEvaluation,
initializeEmptyEvaluation, initializeEmptyEvaluation,

View File

@@ -48,6 +48,8 @@ export interface UserProfile {
export interface SkillEvaluation { export interface SkillEvaluation {
skillId: string; skillId: string;
level: SkillLevel; level: SkillLevel;
canMentor?: boolean;
wantsToLearn?: boolean;
} }
export interface CategoryEvaluation { export interface CategoryEvaluation {