feat(users): refactor users system
This commit is contained in:
@@ -0,0 +1,268 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Card, Button } from '@zen/core/shared/components';
|
||||
import { useToast } from '@zen/core/toast';
|
||||
import { getPermissionGroups } from '@zen/core/users/constants';
|
||||
|
||||
const PERMISSION_GROUPS = getPermissionGroups();
|
||||
|
||||
const isNewRole = (roleId) => roleId === 'new';
|
||||
|
||||
const RoleEditPage = ({ roleId }) => {
|
||||
const router = useRouter();
|
||||
const toast = useToast();
|
||||
|
||||
const [loading, setLoading] = useState(!isNewRole(roleId));
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [isSystem, setIsSystem] = useState(false);
|
||||
|
||||
const [name, setName] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [color, setColor] = useState('#6b7280');
|
||||
const [selectedPerms, setSelectedPerms] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isNewRole(roleId)) return;
|
||||
|
||||
const fetchRole = async () => {
|
||||
try {
|
||||
const response = await fetch(`/zen/api/roles/${roleId}`, { credentials: 'include' });
|
||||
if (!response.ok) {
|
||||
toast.error('Rôle introuvable');
|
||||
router.push('/admin/roles');
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
const role = data.role;
|
||||
setName(role.name || '');
|
||||
setDescription(role.description || '');
|
||||
setColor(role.color || '#6b7280');
|
||||
setSelectedPerms(role.permission_keys || []);
|
||||
setIsSystem(role.is_system || false);
|
||||
} catch (err) {
|
||||
toast.error('Impossible de charger ce rôle');
|
||||
router.push('/admin/roles');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchRole();
|
||||
}, [roleId]);
|
||||
|
||||
const togglePerm = (key) => {
|
||||
setSelectedPerms(prev =>
|
||||
prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
|
||||
);
|
||||
};
|
||||
|
||||
const toggleGroup = (group) => {
|
||||
const groupKeys = PERMISSION_GROUPS[group].map(p => p.key);
|
||||
const allSelected = groupKeys.every(k => selectedPerms.includes(k));
|
||||
if (allSelected) {
|
||||
setSelectedPerms(prev => prev.filter(k => !groupKeys.includes(k)));
|
||||
} else {
|
||||
setSelectedPerms(prev => [...new Set([...prev, ...groupKeys])]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!name.trim()) {
|
||||
toast.error('Le nom du rôle est requis');
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const isCreating = isNewRole(roleId);
|
||||
const url = isCreating ? '/zen/api/roles' : `/zen/api/roles/${roleId}`;
|
||||
const method = isCreating ? 'POST' : 'PUT';
|
||||
|
||||
const body = isCreating
|
||||
? { name: name.trim(), description: description.trim() || null, color }
|
||||
: { name: name.trim(), description: description.trim() || null, color, permissionKeys: selectedPerms };
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
toast.error(data.message || 'Impossible de sauvegarder ce rôle');
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(isCreating ? 'Rôle créé' : 'Rôle mis à jour');
|
||||
|
||||
// After creating, redirect to edit page so permissions can be set
|
||||
if (isCreating && data.role?.id) {
|
||||
router.push(`/admin/roles/edit/${data.role.id}`);
|
||||
} else {
|
||||
router.push('/admin/roles');
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error('Impossible de sauvegarder ce rôle');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="h-6 w-48 bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse" />
|
||||
<Card variant="default" padding="default">
|
||||
<div className="h-40 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const title = isNewRole(roleId) ? 'Nouveau rôle' : `Modifier "${name}"`;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="secondary" size="sm" onClick={() => router.push('/admin/roles')}>
|
||||
← Retour
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">{title}</h1>
|
||||
{isSystem && (
|
||||
<p className="mt-1 text-xs text-neutral-400">Rôle système — le nom ne peut pas être modifié</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-6">
|
||||
{/* Basic info */}
|
||||
<Card variant="default" padding="default">
|
||||
<div className="flex flex-col gap-4">
|
||||
<h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Informations</h2>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
|
||||
Nom du rôle
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
disabled={isSystem}
|
||||
placeholder="Éditeur, Modérateur..."
|
||||
className="w-full px-3 py-2 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={2}
|
||||
placeholder="Description optionnelle..."
|
||||
className="w-full px-3 py-2 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
|
||||
Couleur
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
value={color}
|
||||
onChange={(e) => setColor(e.target.value)}
|
||||
className="w-8 h-8 rounded cursor-pointer border border-neutral-200 dark:border-neutral-700"
|
||||
/>
|
||||
<span className="text-xs text-neutral-500">{color}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Permissions — only shown when editing, not when creating */}
|
||||
{!isNewRole(roleId) && (
|
||||
<Card variant="default" padding="default">
|
||||
<div className="flex flex-col gap-4">
|
||||
<h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Permissions</h2>
|
||||
|
||||
{Object.entries(PERMISSION_GROUPS).map(([group, perms]) => {
|
||||
const groupKeys = perms.map(p => p.key);
|
||||
const allSelected = groupKeys.every(k => selectedPerms.includes(k));
|
||||
const someSelected = groupKeys.some(k => selectedPerms.includes(k));
|
||||
|
||||
return (
|
||||
<div key={group} className="flex flex-col gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleGroup(group)}
|
||||
className="flex items-center gap-2 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide hover:text-neutral-700 dark:hover:text-neutral-200 text-left"
|
||||
>
|
||||
<span
|
||||
className={`w-3.5 h-3.5 rounded border flex items-center justify-center flex-shrink-0 ${
|
||||
allSelected
|
||||
? 'bg-blue-600 border-blue-600'
|
||||
: someSelected
|
||||
? 'bg-blue-200 border-blue-400 dark:bg-blue-900 dark:border-blue-500'
|
||||
: 'border-neutral-300 dark:border-neutral-600'
|
||||
}`}
|
||||
>
|
||||
{allSelected && (
|
||||
<svg className="w-2 h-2 text-white" viewBox="0 0 10 8" fill="none">
|
||||
<path d="M1 4l3 3 5-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
{someSelected && !allSelected && (
|
||||
<span className="w-1.5 h-0.5 bg-blue-600 dark:bg-blue-400 rounded" />
|
||||
)}
|
||||
</span>
|
||||
{group}
|
||||
</button>
|
||||
|
||||
<div className="flex flex-col gap-1 pl-5">
|
||||
{perms.map((perm) => (
|
||||
<label
|
||||
key={perm.key}
|
||||
className="flex items-center gap-2.5 cursor-pointer group"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedPerms.includes(perm.key)}
|
||||
onChange={() => togglePerm(perm.key)}
|
||||
className="w-3.5 h-3.5 rounded border-neutral-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-900 dark:group-hover:text-white">
|
||||
{perm.name}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button variant="secondary" type="button" onClick={() => router.push('/admin/roles')}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button variant="primary" type="submit" disabled={saving}>
|
||||
{saving ? 'Sauvegarde...' : 'Sauvegarder'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RoleEditPage;
|
||||
Reference in New Issue
Block a user