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:
@@ -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}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user