reafctor: pages for management and split components
This commit is contained in:
Julien Froidefond
3
components/admin/skills/index.ts
Normal file
3
components/admin/skills/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { SkillsManagementPage } from "./skills-management-page";
|
||||
export { SkillFormDialog } from "./skill-form-dialog";
|
||||
export { SkillsList } from "./skills-list";
|
||||
123
components/admin/skills/skill-form-dialog.tsx
Normal file
123
components/admin/skills/skill-form-dialog.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { SkillCategory } from "@/lib/types";
|
||||
|
||||
interface SkillFormData {
|
||||
name: string;
|
||||
categoryId: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
interface SkillFormDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: () => void;
|
||||
title: string;
|
||||
formData: SkillFormData;
|
||||
onFormDataChange: (data: SkillFormData) => void;
|
||||
skillCategories: SkillCategory[];
|
||||
isSubmitting?: boolean;
|
||||
}
|
||||
|
||||
export function SkillFormDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSubmit,
|
||||
title,
|
||||
formData,
|
||||
onFormDataChange,
|
||||
skillCategories,
|
||||
isSubmitting = false,
|
||||
}: SkillFormDialogProps) {
|
||||
const handleInputChange = (field: keyof SkillFormData, value: string) => {
|
||||
onFormDataChange({ ...formData, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="skill-name">Nom de la skill *</Label>
|
||||
<Input
|
||||
id="skill-name"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleInputChange("name", e.target.value)}
|
||||
placeholder="Ex: React, Node.js, PostgreSQL"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="skill-category">Catégorie *</Label>
|
||||
<Select
|
||||
value={formData.categoryId}
|
||||
onValueChange={(value) => handleInputChange("categoryId", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner une catégorie" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{skillCategories.map((category, index) => (
|
||||
<SelectItem key={index} value={index.toString()}>
|
||||
{category.category}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="skill-description">Description</Label>
|
||||
<Textarea
|
||||
id="skill-description"
|
||||
value={formData.description}
|
||||
onChange={(e) => handleInputChange("description", e.target.value)}
|
||||
placeholder="Description de la skill..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="skill-icon">Icône</Label>
|
||||
<Input
|
||||
id="skill-icon"
|
||||
value={formData.icon}
|
||||
onChange={(e) => handleInputChange("icon", e.target.value)}
|
||||
placeholder="Ex: react, nodejs, postgresql"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button variant="outline" onClick={onClose} disabled={isSubmitting}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={onSubmit} disabled={isSubmitting}>
|
||||
{isSubmitting
|
||||
? "En cours..."
|
||||
: title.includes("Créer")
|
||||
? "Créer"
|
||||
: "Mettre à jour"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
116
components/admin/skills/skills-list.tsx
Normal file
116
components/admin/skills/skills-list.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Code2,
|
||||
Palette,
|
||||
Database,
|
||||
Cloud,
|
||||
Shield,
|
||||
Smartphone,
|
||||
Layers,
|
||||
} from "lucide-react";
|
||||
import { TreeCategoryHeader, TreeItemRow } from "@/components/admin";
|
||||
import { TechIcon } from "@/components/icons/tech-icon";
|
||||
import { Skill } from "@/services/admin-management-service";
|
||||
|
||||
interface SkillsListProps {
|
||||
filteredSkillsByCategory: Record<string, Skill[]>;
|
||||
expandedCategories: Set<string>;
|
||||
onToggleCategory: (category: string) => void;
|
||||
onEditSkill: (skill: Skill) => void;
|
||||
onDeleteSkill: (skillId: string) => void;
|
||||
}
|
||||
|
||||
export function SkillsList({
|
||||
filteredSkillsByCategory,
|
||||
expandedCategories,
|
||||
onToggleCategory,
|
||||
onEditSkill,
|
||||
onDeleteSkill,
|
||||
}: SkillsListProps) {
|
||||
// Fonction pour obtenir l'icône de la catégorie
|
||||
const getCategoryIcon = (category: string) => {
|
||||
const categoryName = category.toLowerCase();
|
||||
if (categoryName.includes("frontend") || categoryName.includes("front"))
|
||||
return Code2;
|
||||
if (categoryName.includes("backend") || categoryName.includes("back"))
|
||||
return Layers;
|
||||
if (
|
||||
categoryName.includes("design") ||
|
||||
categoryName.includes("ui") ||
|
||||
categoryName.includes("ux")
|
||||
)
|
||||
return Palette;
|
||||
if (categoryName.includes("data") || categoryName.includes("database"))
|
||||
return Database;
|
||||
if (categoryName.includes("cloud") || categoryName.includes("devops"))
|
||||
return Cloud;
|
||||
if (categoryName.includes("security") || categoryName.includes("securité"))
|
||||
return Shield;
|
||||
if (
|
||||
categoryName.includes("mobile") ||
|
||||
categoryName.includes("android") ||
|
||||
categoryName.includes("ios")
|
||||
)
|
||||
return Smartphone;
|
||||
return Code2; // Par défaut
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.entries(filteredSkillsByCategory).map(
|
||||
([category, categorySkills], index) => (
|
||||
<div key={category}>
|
||||
<TreeCategoryHeader
|
||||
category={category}
|
||||
isExpanded={expandedCategories.has(category)}
|
||||
onToggle={() => onToggleCategory(category)}
|
||||
icon={(() => {
|
||||
const IconComponent = getCategoryIcon(category);
|
||||
return <IconComponent className="w-5 h-5 text-blue-400" />;
|
||||
})()}
|
||||
itemCount={categorySkills.length}
|
||||
itemLabel="skill"
|
||||
showSeparator={index > 0}
|
||||
/>
|
||||
|
||||
{/* Liste des skills de la catégorie */}
|
||||
{expandedCategories.has(category) && (
|
||||
<div className="bg-slate-950/30">
|
||||
{categorySkills.map((skill, skillIndex) => (
|
||||
<TreeItemRow
|
||||
key={skill.id}
|
||||
icon={
|
||||
<div className="flex items-center gap-3">
|
||||
<TechIcon
|
||||
iconName={skill.icon}
|
||||
className="w-5 h-5 text-green-400"
|
||||
fallbackText={skill.name}
|
||||
/>
|
||||
<div className="p-1 bg-green-500/20 border border-green-500/30 rounded text-xs font-mono text-green-400 min-w-[3rem] text-center shrink-0">
|
||||
{skill.icon || "?"}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
title={skill.name}
|
||||
subtitle={skill.description}
|
||||
badges={[
|
||||
{
|
||||
text: `${skill.usageCount} util.`,
|
||||
variant: "outline",
|
||||
},
|
||||
]}
|
||||
onEdit={() => onEditSkill(skill)}
|
||||
onDelete={() => onDeleteSkill(skill.id)}
|
||||
canDelete={skill.usageCount === 0}
|
||||
showSeparator={skillIndex > 0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
158
components/admin/skills/skills-management-page.tsx
Normal file
158
components/admin/skills/skills-management-page.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Plus, Code2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DialogTrigger } from "@/components/ui/dialog";
|
||||
import { SkillCategory, Team } from "@/lib/types";
|
||||
import { TreeViewPage } from "../management/tree-view-page";
|
||||
import { useTreeView } from "@/hooks/use-tree-view";
|
||||
import { useFormDialog } from "@/hooks/use-form-dialog";
|
||||
import { useSkillsManagement } from "@/hooks/use-skills-management";
|
||||
import { SkillFormDialog } from "./skill-form-dialog";
|
||||
import { SkillsList } from "./skills-list";
|
||||
|
||||
interface SkillsManagementPageProps {
|
||||
skillCategories: SkillCategory[];
|
||||
teams: Team[];
|
||||
}
|
||||
|
||||
export function SkillsManagementPage({
|
||||
skillCategories,
|
||||
teams,
|
||||
}: SkillsManagementPageProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const {
|
||||
isCreateDialogOpen,
|
||||
isEditDialogOpen,
|
||||
openCreateDialog,
|
||||
closeCreateDialog,
|
||||
openEditDialog,
|
||||
closeEditDialog,
|
||||
} = useFormDialog();
|
||||
|
||||
const {
|
||||
skills,
|
||||
isLoading,
|
||||
editingSkill,
|
||||
skillFormData,
|
||||
isSubmitting,
|
||||
setSkillFormData,
|
||||
resetForm,
|
||||
handleCreateSkill,
|
||||
handleEditSkill,
|
||||
handleUpdateSkill,
|
||||
handleDeleteSkill,
|
||||
} = useSkillsManagement(skillCategories);
|
||||
|
||||
// Utilisation du hook factorisé pour la vue arborescente
|
||||
const {
|
||||
filteredDataByCategory: filteredSkillsByCategory,
|
||||
expandedCategories,
|
||||
toggleCategory,
|
||||
expandAll,
|
||||
collapseAll,
|
||||
} = useTreeView({
|
||||
data: skills,
|
||||
searchFields: ["name", "description"],
|
||||
groupBy: (skill) => skill.category,
|
||||
searchTerm,
|
||||
onSearchChange: setSearchTerm,
|
||||
});
|
||||
|
||||
const handleCreateSubmit = async () => {
|
||||
const success = await handleCreateSkill();
|
||||
if (success) {
|
||||
closeCreateDialog();
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditSubmit = async () => {
|
||||
const success = await handleUpdateSkill();
|
||||
if (success) {
|
||||
closeEditDialog();
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenCreateDialog = () => {
|
||||
resetForm();
|
||||
openCreateDialog();
|
||||
};
|
||||
|
||||
const handleOpenEditDialog = (skill: any) => {
|
||||
handleEditSkill(skill);
|
||||
openEditDialog();
|
||||
};
|
||||
|
||||
const headerActions = (
|
||||
<Button onClick={handleOpenCreateDialog}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Nouvelle Skill
|
||||
</Button>
|
||||
);
|
||||
|
||||
const emptyState = (
|
||||
<div className="text-center py-8">
|
||||
<Code2 className="w-10 h-10 text-slate-500 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-slate-400 mb-1">
|
||||
{searchTerm ? "Aucune skill trouvée" : "Aucune skill"}
|
||||
</h3>
|
||||
<p className="text-slate-500 text-sm">
|
||||
{searchTerm
|
||||
? "Essayez de modifier vos critères de recherche"
|
||||
: "Commencez par créer votre première skill"}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<TreeViewPage
|
||||
title="Gestion des Skills"
|
||||
description="Créez, modifiez et supprimez les skills de votre organisation"
|
||||
searchTerm={searchTerm}
|
||||
onSearchChange={setSearchTerm}
|
||||
onExpandAll={expandAll}
|
||||
onCollapseAll={collapseAll}
|
||||
searchPlaceholder="Rechercher une skill..."
|
||||
hasContent={Object.keys(filteredSkillsByCategory).length > 0}
|
||||
isLoading={isLoading}
|
||||
loadingMessage="Chargement des skills..."
|
||||
emptyState={emptyState}
|
||||
headerActions={headerActions}
|
||||
>
|
||||
<SkillsList
|
||||
filteredSkillsByCategory={filteredSkillsByCategory}
|
||||
expandedCategories={expandedCategories}
|
||||
onToggleCategory={toggleCategory}
|
||||
onEditSkill={handleOpenEditDialog}
|
||||
onDeleteSkill={handleDeleteSkill}
|
||||
/>
|
||||
</TreeViewPage>
|
||||
|
||||
{/* Dialog de création */}
|
||||
<SkillFormDialog
|
||||
isOpen={isCreateDialogOpen}
|
||||
onClose={closeCreateDialog}
|
||||
onSubmit={handleCreateSubmit}
|
||||
title="Créer une nouvelle skill"
|
||||
formData={skillFormData}
|
||||
onFormDataChange={setSkillFormData}
|
||||
skillCategories={skillCategories}
|
||||
isSubmitting={isSubmitting}
|
||||
/>
|
||||
|
||||
{/* Dialog d'édition */}
|
||||
<SkillFormDialog
|
||||
isOpen={isEditDialogOpen}
|
||||
onClose={closeEditDialog}
|
||||
onSubmit={handleEditSubmit}
|
||||
title="Modifier la skill"
|
||||
formData={skillFormData}
|
||||
onFormDataChange={setSkillFormData}
|
||||
skillCategories={skillCategories}
|
||||
isSubmitting={isSubmitting}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user