From 5cb2bad99261a44b315b78287687137ef66701df Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Thu, 21 Aug 2025 11:46:29 +0200
Subject: [PATCH] feat: add skill creation functionality and reload categories

- Introduced a new button to create skills within the SkillSelector component, allowing users to add missing skills directly.
- Implemented a dialog for skill creation, including a form to handle new skill submissions.
- Added a reloadSkillCategories function in the useEvaluation hook to refresh skill categories and migrate existing evaluations if necessary.
- Enhanced error handling for category reloading to improve robustness.
---
 components/create-skill-form.tsx | 214 +++++++++++++++++++++++++++++++
 components/skill-selector.tsx    |  38 +++++-
 hooks/use-evaluation.ts          |  19 +++
 3 files changed, 270 insertions(+), 1 deletion(-)
 create mode 100644 components/create-skill-form.tsx

diff --git a/components/create-skill-form.tsx b/components/create-skill-form.tsx
new file mode 100644
index 0000000..3af5bef
--- /dev/null
+++ b/components/create-skill-form.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Plus, X, Link as LinkIcon, Loader2 } from "lucide-react";
+import { apiClient } from "@/services/client";
+
+interface CreateSkillFormProps {
+  categoryName: string;
+  onSuccess: (skillId: string) => void;
+  onCancel: () => void;
+}
+
+export function CreateSkillForm({
+  categoryName,
+  onSuccess,
+  onCancel,
+}: CreateSkillFormProps) {
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    icon: "",
+    links: [""],
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const addLink = () => {
+    setFormData(prev => ({
+      ...prev,
+      links: [...prev.links, ""]
+    }));
+  };
+
+  const removeLink = (index: number) => {
+    setFormData(prev => ({
+      ...prev,
+      links: prev.links.filter((_, i) => i !== index)
+    }));
+  };
+
+  const updateLink = (index: number, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      links: prev.links.map((link, i) => i === index ? value : link)
+    }));
+  };
+
+  const generateSkillId = (name: string) => {
+    return name
+      .toLowerCase()
+      .replace(/[^a-z0-9\s]/g, '')
+      .replace(/\s+/g, '-')
+      .trim();
+  };
+
+  const getCategoryId = (categoryName: string) => {
+    // Convertir le nom de catégorie en ID (ex: "Cloud" -> "cloud")
+    return categoryName.toLowerCase();
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      // Validation
+      if (!formData.name.trim()) {
+        throw new Error("Le nom de la compétence est requis");
+      }
+      if (!formData.description.trim()) {
+        throw new Error("La description est requise");
+      }
+
+      const skillId = generateSkillId(formData.name);
+      const categoryId = getCategoryId(categoryName);
+
+      // Filtrer les liens vides
+      const validLinks = formData.links.filter(link => link.trim());
+
+      const skillData = {
+        id: skillId,
+        name: formData.name.trim(),
+        description: formData.description.trim(),
+        icon: formData.icon.trim() || "fas-cog",
+        links: validLinks,
+      };
+
+      const success = await apiClient.createSkill(categoryId, skillData);
+
+      if (success) {
+        onSuccess(skillId);
+      } else {
+        throw new Error("Erreur lors de la création de la compétence");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Une erreur est survenue");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {error && (
+        <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+          {error}
+        </div>
+      )}
+
+      <div className="space-y-2">
+        <Label htmlFor="skill-name">Nom de la compétence *</Label>
+        <Input
+          id="skill-name"
+          placeholder="ex: Next.js, Docker, Figma..."
+          value={formData.name}
+          onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+          disabled={isLoading}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="skill-description">Description *</Label>
+        <Textarea
+          id="skill-description"
+          placeholder="Décrivez brièvement cette compétence..."
+          value={formData.description}
+          onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+          disabled={isLoading}
+          rows={3}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="skill-icon">Icône (optionnel)</Label>
+        <Input
+          id="skill-icon"
+          placeholder="ex: fab-react, fas-database..."
+          value={formData.icon}
+          onChange={(e) => setFormData(prev => ({ ...prev, icon: e.target.value }))}
+          disabled={isLoading}
+        />
+        <p className="text-xs text-muted-foreground">
+          Utilisez les classes FontAwesome (fab-, fas-, far-) ou laissez vide pour l'icône par défaut
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label>Liens de référence (optionnel)</Label>
+        {formData.links.map((link, index) => (
+          <div key={index} className="flex gap-2">
+            <div className="relative flex-1">
+              <LinkIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="https://..."
+                value={link}
+                onChange={(e) => updateLink(index, e.target.value)}
+                disabled={isLoading}
+                className="pl-10"
+              />
+            </div>
+            {formData.links.length > 1 && (
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={() => removeLink(index)}
+                disabled={isLoading}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+        ))}
+        {formData.links.length < 5 && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={addLink}
+            disabled={isLoading}
+            className="gap-2"
+          >
+            <Plus className="h-3 w-3" />
+            Ajouter un lien
+          </Button>
+        )}
+      </div>
+
+      <div className="flex gap-3 pt-4">
+        <Button type="submit" disabled={isLoading} className="flex-1">
+          {isLoading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Création...
+            </>
+          ) : (
+            <>
+              <Plus className="mr-2 h-4 w-4" />
+              Créer la compétence
+            </>
+          )}
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel} disabled={isLoading}>
+          Annuler
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/components/skill-selector.tsx b/components/skill-selector.tsx
index 218fdfb..3eef341 100644
--- a/components/skill-selector.tsx
+++ b/components/skill-selector.tsx
@@ -11,9 +11,10 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { Plus, Search } from "lucide-react";
+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[];
@@ -31,6 +32,7 @@ export function SkillSelector({
   onRemoveSkill,
 }: SkillSelectorProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
 
   const currentCategory = categories.find(
@@ -97,6 +99,40 @@ export function SkillSelector({
                   />
                 </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">
diff --git a/hooks/use-evaluation.ts b/hooks/use-evaluation.ts
index 9bd229a..07e3d3c 100644
--- a/hooks/use-evaluation.ts
+++ b/hooks/use-evaluation.ts
@@ -129,6 +129,24 @@ export function useEvaluation() {
     }
   };
 
+  const reloadSkillCategories = async () => {
+    try {
+      const categories = await loadSkillCategories();
+      setSkillCategories(categories);
+      
+      // Si on a une évaluation en cours, la migrer avec les nouvelles catégories
+      if (userEvaluation) {
+        const migratedEvaluation = migrateEvaluation(userEvaluation, categories);
+        if (migratedEvaluation !== userEvaluation) {
+          setUserEvaluation(migratedEvaluation);
+          await saveUserEvaluation(migratedEvaluation);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to reload skill categories:", error);
+    }
+  };
+
   const updateProfile = async (profile: UserProfile) => {
     const evaluations =
       userEvaluation?.evaluations || createEmptyEvaluation(skillCategories);
@@ -379,5 +397,6 @@ export function useEvaluation() {
     removeSkillFromEvaluation,
     initializeEmptyEvaluation,
     clearUserProfile,
+    reloadSkillCategories,
   };
 }