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.
2025-08-20 17:04:19 +02:00
parent ab9c35c276
commit 328a1b68a1
6 changed files with 186 additions and 8 deletions
--- a/app/evaluation/page.tsx
+++ b/app/evaluation/page.tsx
@@ -21,6 +21,8 @@ export default function EvaluationPage() {
    loading,
    updateProfile,
    updateSkillLevel,
+    updateSkillMentorStatus,
+    updateSkillLearningStatus,
    addSkillToEvaluation,
    removeSkillFromEvaluation,
    initializeEmptyEvaluation,
@@ -93,6 +95,8 @@ export default function EvaluationPage() {
          categories={skillCategories}
          evaluations={userEvaluation.evaluations}
          onUpdateSkill={updateSkillLevel}
+          onUpdateMentorStatus={updateSkillMentorStatus}
+          onUpdateLearningStatus={updateSkillLearningStatus}
          onAddSkill={addSkillToEvaluation}
          onRemoveSkill={removeSkillFromEvaluation}
        />
--- a/components/evaluation/skill-evaluation-card.tsx
+++ b/components/evaluation/skill-evaluation-card.tsx
@@ -1,16 +1,18 @@
-import { ExternalLink, Info, X } from "lucide-react";
+import { ExternalLink, Info, X, UserCheck, GraduationCap } from "lucide-react";
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
 } 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";

 interface SkillEvaluationCardProps {
  skill: Skill;
-  currentLevel: SkillLevel;
+  skillEvaluation: SkillEvaluation;
  onUpdateSkill: (skillId: string, level: SkillLevel) => void;
+  onUpdateMentorStatus: (skillId: string, canMentor: boolean) => void;
+  onUpdateLearningStatus: (skillId: string, wantsToLearn: boolean) => void;
  onRemoveSkill: (skillId: string) => void;
 }

@@ -42,10 +44,13 @@ function getLevelColorBorder(level: Exclude<SkillLevel, null>) {

 export function SkillEvaluationCard({
  skill,
-  currentLevel,
+  skillEvaluation,
  onUpdateSkill,
+  onUpdateMentorStatus,
+  onUpdateLearningStatus,
  onRemoveSkill,
 }: SkillEvaluationCardProps) {
+  const currentLevel = skillEvaluation.level;
  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="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 */}
          <div className="flex items-center ml-2 border-l border-white/10 pl-2">
            <Tooltip>
--- a/components/evaluation/skill-evaluation-grid.tsx
+++ b/components/evaluation/skill-evaluation-grid.tsx
@@ -5,6 +5,16 @@ interface SkillEvaluationGridProps {
  currentCategory: SkillCategory;
  currentEvaluation: CategoryEvaluation;
  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;
 }

@@ -12,13 +22,22 @@ export function SkillEvaluationGrid({
  currentCategory,
  currentEvaluation,
  onUpdateSkill,
+  onUpdateMentorStatus,
+  onUpdateLearningStatus,
  onRemoveSkill,
 }: SkillEvaluationGridProps) {
-  const getSkillLevel = (skillId: string): SkillLevel => {
+  const getSkillEvaluation = (skillId: string) => {
    const skillEval = currentEvaluation?.skills.find(
      (s) => s.skillId === skillId
    );
-    return skillEval?.level || null;
+    return (
+      skillEval || {
+        skillId,
+        level: null,
+        canMentor: false,
+        wantsToLearn: false,
+      }
+    );
  };

  if (!currentEvaluation.selectedSkillIds.length) {
@@ -44,16 +63,30 @@ export function SkillEvaluationGrid({
          const skill = currentCategory.skills.find((s) => s.id === skillId);
          if (!skill) return null;

-          const currentLevel = getSkillLevel(skill.id);
+          const skillEvaluation = getSkillEvaluation(skill.id);

          return (
            <SkillEvaluationCard
              key={skill.id}
              skill={skill}
-              currentLevel={currentLevel}
+              skillEvaluation={skillEvaluation}
              onUpdateSkill={(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(currentCategory.category, skillId)
              }
--- a/components/skill-evaluation.tsx
+++ b/components/skill-evaluation.tsx
@@ -16,6 +16,16 @@ interface SkillEvaluationProps {
  categories: SkillCategory[];
  evaluations: CategoryEvaluation[];
  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;
  onRemoveSkill: (category: string, skillId: string) => void;
 }
@@ -24,6 +34,8 @@ export function SkillEvaluation({
  categories,
  evaluations,
  onUpdateSkill,
+  onUpdateMentorStatus,
+  onUpdateLearningStatus,
  onAddSkill,
  onRemoveSkill,
 }: SkillEvaluationProps) {
@@ -94,6 +106,8 @@ export function SkillEvaluation({
                currentCategory={currentCategory}
                currentEvaluation={currentEvaluation}
                onUpdateSkill={onUpdateSkill}
+                onUpdateMentorStatus={onUpdateMentorStatus}
+                onUpdateLearningStatus={onUpdateLearningStatus}
                onRemoveSkill={onRemoveSkill}
              />
            )}
--- a/hooks/use-evaluation.ts
+++ b/hooks/use-evaluation.ts
@@ -135,6 +135,68 @@ export function useEvaluation() {
    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) => {
    if (!userEvaluation) return;

@@ -206,6 +268,8 @@ export function useEvaluation() {
    loading,
    updateProfile,
    updateSkillLevel,
+    updateSkillMentorStatus,
+    updateSkillLearningStatus,
    addSkillToEvaluation,
    removeSkillFromEvaluation,
    initializeEmptyEvaluation,
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -48,6 +48,8 @@ export interface UserProfile {
 export interface SkillEvaluation {
  skillId: string;
  level: SkillLevel;
+  canMentor?: boolean;
+  wantsToLearn?: boolean;
 }

 export interface CategoryEvaluation {