refactor(admin): replace parameterized routes with modal-based editing for users and roles
This commit is contained in:
@@ -0,0 +1,180 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Input, Textarea, Switch, Modal } from '@zen/core/shared/components';
|
||||
import { useToast } from '@zen/core/toast';
|
||||
import { getPermissionGroups } from '@zen/core/users/constants';
|
||||
|
||||
const PERMISSION_GROUPS = getPermissionGroups();
|
||||
|
||||
const RoleEditModal = ({ roleId, isOpen, onClose, onSaved }) => {
|
||||
const toast = useToast();
|
||||
const isNew = !roleId || roleId === 'new';
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
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 (!isOpen) return;
|
||||
if (isNew) {
|
||||
setName('');
|
||||
setDescription('');
|
||||
setColor('#6b7280');
|
||||
setSelectedPerms([]);
|
||||
setIsSystem(false);
|
||||
return;
|
||||
}
|
||||
fetchRole();
|
||||
}, [isOpen, roleId]);
|
||||
|
||||
const fetchRole = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch(`/zen/api/roles/${roleId}`, { credentials: 'include' });
|
||||
if (!response.ok) {
|
||||
toast.error('Rôle introuvable');
|
||||
onClose();
|
||||
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 {
|
||||
toast.error('Impossible de charger ce rôle');
|
||||
onClose();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const togglePerm = (key) => {
|
||||
setSelectedPerms(prev =>
|
||||
prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
|
||||
);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!name.trim()) {
|
||||
toast.error('Le nom du rôle est requis');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setSaving(true);
|
||||
const url = isNew ? '/zen/api/roles' : `/zen/api/roles/${roleId}`;
|
||||
const method = isNew ? 'POST' : 'PUT';
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: name.trim(),
|
||||
description: description.trim() || null,
|
||||
color,
|
||||
permissionKeys: selectedPerms,
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
toast.error(data.message || 'Impossible de sauvegarder ce rôle');
|
||||
return;
|
||||
}
|
||||
toast.success(isNew ? 'Rôle créé' : 'Rôle mis à jour');
|
||||
onSaved?.();
|
||||
onClose();
|
||||
} catch {
|
||||
toast.error('Impossible de sauvegarder ce rôle');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const title = isNew ? 'Nouveau rôle' : `Modifier "${name}"`;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={title}
|
||||
onSubmit={handleSubmit}
|
||||
submitLabel={isNew ? 'Créer le rôle' : 'Sauvegarder'}
|
||||
loading={saving}
|
||||
disabled={loading}
|
||||
size="lg"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex flex-col gap-4 animate-pulse">
|
||||
<div className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
|
||||
<div className="h-20 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
|
||||
<div className="h-40 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Input
|
||||
label="Nom du rôle"
|
||||
value={name}
|
||||
onChange={setName}
|
||||
disabled={isSystem}
|
||||
placeholder="Éditeur, Modérateur..."
|
||||
required
|
||||
/>
|
||||
<Textarea
|
||||
label="Description"
|
||||
value={description}
|
||||
onChange={setDescription}
|
||||
rows={2}
|
||||
placeholder="Description optionnelle..."
|
||||
/>
|
||||
<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>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="text-xs font-semibold text-neutral-900 dark:text-white">Permissions</p>
|
||||
{Object.entries(PERMISSION_GROUPS).map(([group, perms]) => (
|
||||
<div key={group} className="flex flex-col">
|
||||
<p className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide py-1">
|
||||
{group}
|
||||
</p>
|
||||
<div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-700/50">
|
||||
{perms.map((perm) => (
|
||||
<Switch
|
||||
key={perm.key}
|
||||
checked={selectedPerms.includes(perm.key)}
|
||||
onChange={() => togglePerm(perm.key)}
|
||||
label={perm.name}
|
||||
description={perm.key}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default RoleEditModal;
|
||||
@@ -0,0 +1,194 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Input, Select, TagInput, Modal } from '@zen/core/shared/components';
|
||||
import { useToast } from '@zen/core/toast';
|
||||
|
||||
const UserEditModal = ({ userId, isOpen, onClose, onSaved }) => {
|
||||
const toast = useToast();
|
||||
|
||||
const [userData, setUserData] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({ name: '', email_verified: 'false' });
|
||||
const [errors, setErrors] = useState({});
|
||||
|
||||
const [allRoles, setAllRoles] = useState([]);
|
||||
const [selectedRoleIds, setSelectedRoleIds] = useState([]);
|
||||
const [initialRoleIds, setInitialRoleIds] = useState([]);
|
||||
|
||||
const emailVerifiedOptions = [
|
||||
{ value: 'false', label: 'Non vérifié' },
|
||||
{ value: 'true', label: 'Vérifié' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !userId) return;
|
||||
loadAll();
|
||||
}, [isOpen, userId]);
|
||||
|
||||
const loadAll = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setErrors({});
|
||||
const [userRes, rolesRes, userRolesRes] = await Promise.all([
|
||||
fetch(`/zen/api/users/${userId}`, { credentials: 'include' }),
|
||||
fetch('/zen/api/roles', { credentials: 'include' }),
|
||||
fetch(`/zen/api/users/${userId}/roles`, { credentials: 'include' }),
|
||||
]);
|
||||
const [userJson, rolesJson, userRolesJson] = await Promise.all([
|
||||
userRes.json(),
|
||||
rolesRes.json(),
|
||||
userRolesRes.json(),
|
||||
]);
|
||||
|
||||
if (userJson.user) {
|
||||
setUserData(userJson.user);
|
||||
setFormData({
|
||||
name: userJson.user.name || '',
|
||||
email_verified: userJson.user.email_verified ? 'true' : 'false',
|
||||
});
|
||||
} else {
|
||||
toast.error(userJson.message || 'Utilisateur introuvable');
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
|
||||
setAllRoles(rolesJson.roles || []);
|
||||
|
||||
const ids = (userRolesJson.roles || []).map(r => r.id);
|
||||
setSelectedRoleIds(ids);
|
||||
setInitialRoleIds(ids);
|
||||
} catch {
|
||||
toast.error("Impossible de charger l'utilisateur");
|
||||
onClose();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (field, value) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
if (errors[field]) setErrors(prev => ({ ...prev, [field]: null }));
|
||||
};
|
||||
|
||||
const validate = () => {
|
||||
const newErrors = {};
|
||||
if (!formData.name?.trim()) newErrors.name = 'Le nom est requis';
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!validate()) return;
|
||||
try {
|
||||
setSaving(true);
|
||||
|
||||
const userRes = await fetch(`/zen/api/users/${userId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({
|
||||
name: formData.name.trim(),
|
||||
email_verified: formData.email_verified === 'true',
|
||||
}),
|
||||
});
|
||||
const userResData = await userRes.json();
|
||||
if (!userRes.ok) {
|
||||
toast.error(userResData.message || userResData.error || "Impossible de mettre à jour l'utilisateur");
|
||||
return;
|
||||
}
|
||||
|
||||
const toAdd = selectedRoleIds.filter(id => !initialRoleIds.includes(id));
|
||||
const toRemove = initialRoleIds.filter(id => !selectedRoleIds.includes(id));
|
||||
|
||||
await Promise.all([
|
||||
...toAdd.map(roleId =>
|
||||
fetch(`/zen/api/users/${userId}/roles`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ roleId }),
|
||||
})
|
||||
),
|
||||
...toRemove.map(roleId =>
|
||||
fetch(`/zen/api/users/${userId}/roles/${roleId}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include',
|
||||
})
|
||||
),
|
||||
]);
|
||||
|
||||
toast.success('Utilisateur mis à jour');
|
||||
onSaved?.();
|
||||
onClose();
|
||||
} catch {
|
||||
toast.error("Impossible de mettre à jour l'utilisateur");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const roleOptions = allRoles.map(r => ({
|
||||
value: r.id,
|
||||
label: r.name,
|
||||
color: r.color || '#6b7280',
|
||||
description: r.description || undefined,
|
||||
}));
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title="Modifier l'utilisateur"
|
||||
onSubmit={handleSubmit}
|
||||
submitLabel="Mettre à jour"
|
||||
loading={saving}
|
||||
disabled={loading}
|
||||
size="md"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex flex-col gap-4 animate-pulse">
|
||||
<div className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
|
||||
<div className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
|
||||
<div className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Nom *"
|
||||
value={formData.name}
|
||||
onChange={(value) => handleInputChange('name', value)}
|
||||
placeholder="Nom de l'utilisateur"
|
||||
error={errors.name}
|
||||
/>
|
||||
<Input
|
||||
label="Email"
|
||||
value={userData?.email || ''}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
label="Email vérifié"
|
||||
value={formData.email_verified}
|
||||
onChange={(value) => handleInputChange('email_verified', value)}
|
||||
options={emailVerifiedOptions}
|
||||
/>
|
||||
|
||||
<TagInput
|
||||
label="Rôles attribués"
|
||||
options={roleOptions}
|
||||
value={selectedRoleIds}
|
||||
onChange={setSelectedRoleIds}
|
||||
placeholder="Rechercher un rôle..."
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserEditModal;
|
||||
@@ -5,3 +5,5 @@ export { default as AdminSidebar } from './AdminSidebar.js';
|
||||
export { default as AdminTop } from './AdminTop.js';
|
||||
export { default as AdminHeader } from './AdminHeader.js';
|
||||
export { default as ThemeToggle } from './ThemeToggle.js';
|
||||
export { default as UserEditModal } from './UserEditModal.client.js';
|
||||
export { default as RoleEditModal } from './RoleEditModal.client.js';
|
||||
|
||||
Reference in New Issue
Block a user