81 lines
2.9 KiB
React
81 lines
2.9 KiB
React
import { useState } from 'react'
|
|
import { SkillLevelSelect } from '@/components/SkillLevelBadge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Save } from 'lucide-react'
|
|
|
|
export function SkillMemberForm({ member, categories, skills, levels, isAdmin, currentUserId, onSave }) {
|
|
const canEdit = isAdmin || currentUserId === member.id
|
|
const initial = {}
|
|
skills.forEach((s) => {
|
|
const key = `${member.id}-${s.id}`
|
|
initial[s.id] = levels[key]?.level || 0
|
|
})
|
|
const [editedLevels, setEditedLevels] = useState(initial)
|
|
|
|
const hasChanges = skills.some((s) => {
|
|
const key = `${member.id}-${s.id}`
|
|
return (editedLevels[s.id] || 0) !== (levels[key]?.level || 0)
|
|
})
|
|
|
|
function handleSave() {
|
|
const changes = []
|
|
skills.forEach((s) => {
|
|
const key = `${member.id}-${s.id}`
|
|
const current = levels[key]?.level || 0
|
|
const edited = editedLevels[s.id] || 0
|
|
if (edited !== current) {
|
|
changes.push({ skillId: s.id, oldLevel: current || null, newLevel: edited })
|
|
}
|
|
})
|
|
if (changes.length > 0) onSave(member.id, changes)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
Modification des compétences de <span className="font-medium text-gray-700 dark:text-gray-200">{member.full_name || member.email}</span>
|
|
</p>
|
|
|
|
{categories.map((cat) => {
|
|
const catSkills = skills.filter((s) => s.category_id === cat.id)
|
|
if (catSkills.length === 0) return null
|
|
return (
|
|
<Card key={cat.id}>
|
|
<CardContent className="p-4 space-y-3">
|
|
<h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: cat.color }} />
|
|
{cat.name}
|
|
</h3>
|
|
{catSkills.map((s) => (
|
|
<div key={s.id} className="flex items-center justify-between py-1.5 border-b dark:border-gray-800 last:border-0">
|
|
<span className="text-sm">{s.name}</span>
|
|
{canEdit ? (
|
|
<SkillLevelSelect
|
|
value={editedLevels[s.id] || 1}
|
|
onChange={(v) => setEditedLevels((prev) => ({ ...prev, [s.id]: v }))}
|
|
/>
|
|
) : (
|
|
<span className="text-sm font-medium">
|
|
{levels[`${member.id}-${s.id}`]?.level || '—'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
|
|
{canEdit && (
|
|
<div className="flex justify-end">
|
|
<Button onClick={handleSave} disabled={!hasChanges}>
|
|
<Save className="h-4 w-4 mr-2" />
|
|
Enregistrer
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|