73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useTransition } from 'react'
|
|
import { toast } from 'sonner'
|
|
import { Button } from '@/components/ui/button'
|
|
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
|
import { updateRolesAction } from '@/actions/settings'
|
|
import { debugProps } from '@/lib/debug'
|
|
|
|
const ALL_ROLES = [
|
|
{ value: 'PRODUCT_OWNER', label: 'Product Owner' },
|
|
{ value: 'SCRUM_MASTER', label: 'Scrum Master' },
|
|
{ value: 'DEVELOPER', label: 'Developer' },
|
|
]
|
|
|
|
interface RoleManagerProps {
|
|
currentRoles: string[]
|
|
isDemo: boolean
|
|
}
|
|
|
|
export function RoleManager({ currentRoles, isDemo }: RoleManagerProps) {
|
|
const [selected, setSelected] = useState<Set<string>>(new Set(currentRoles))
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [saved, setSaved] = useState(false)
|
|
const [, startTransition] = useTransition()
|
|
|
|
function toggle(role: string) {
|
|
setSelected(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(role)) { next.delete(role) } else { next.add(role) }
|
|
return next
|
|
})
|
|
setSaved(false)
|
|
setError(null)
|
|
}
|
|
|
|
function handleSave() {
|
|
if (selected.size === 0) {
|
|
setError('Minimaal één rol is verplicht')
|
|
return
|
|
}
|
|
startTransition(async () => {
|
|
const result = await updateRolesAction([...selected])
|
|
if (result.success) { setSaved(true); toast.success('Rollen opgeslagen') }
|
|
else { setError(result.error ?? 'Opslaan mislukt'); toast.error(result.error ?? 'Opslaan mislukt') }
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-4" {...debugProps('role-manager', 'RoleManager', 'components/settings/role-manager.tsx')}>
|
|
<h2 className="text-sm font-medium text-foreground">Mijn rollen</h2>
|
|
<div className="flex flex-wrap gap-3">
|
|
{ALL_ROLES.map(role => (
|
|
<label key={role.value} className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={selected.has(role.value)}
|
|
onChange={() => toggle(role.value)}
|
|
disabled={isDemo}
|
|
className="w-4 h-4 rounded accent-primary"
|
|
/>
|
|
<span className="text-sm">{role.label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
{error && <p className="text-xs text-error">{error}</p>}
|
|
{saved && <p className="text-xs text-success">Rollen opgeslagen.</p>}
|
|
<DemoTooltip show={isDemo}>
|
|
<Button size="sm" onClick={handleSave} disabled={isDemo}>Opslaan</Button>
|
|
</DemoTooltip>
|
|
</div>
|
|
)
|
|
}
|