refactor(admin): replace parameterized routes with modal-based editing for users and roles
This commit is contained in:
@@ -8,21 +8,6 @@ export default function AdminPageClient({ params, user, widgetData }) {
|
||||
const parts = params?.admin || [];
|
||||
const [first, second, third] = parts;
|
||||
|
||||
// Routes paramétrées — le registre stocke le composant sous un slug
|
||||
// "namespace:form", le client y attache les bons props.
|
||||
if (first === 'users' && second === 'edit' && third) {
|
||||
const page = getPage('users:edit');
|
||||
if (page) return <page.Component userId={third} user={user} />;
|
||||
}
|
||||
if (first === 'roles' && second === 'edit' && third) {
|
||||
const page = getPage('roles:edit');
|
||||
if (page) return <page.Component roleId={third} user={user} />;
|
||||
}
|
||||
if (first === 'roles' && second === 'new') {
|
||||
const page = getPage('roles:edit');
|
||||
if (page) return <page.Component roleId="new" user={user} />;
|
||||
}
|
||||
|
||||
const slug = first || 'dashboard';
|
||||
const page = getPage(slug) || getPage('dashboard');
|
||||
if (!page) return null;
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -1,200 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Card, Button, Input, Textarea, Switch } from '@zen/core/shared/components';
|
||||
import { useToast } from '@zen/core/toast';
|
||||
import { getPermissionGroups } from '@zen/core/users/constants';
|
||||
import AdminHeader from '../components/AdminHeader.js';
|
||||
|
||||
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 {
|
||||
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 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 = {
|
||||
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');
|
||||
router.push('/admin/roles');
|
||||
} catch {
|
||||
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="md">
|
||||
<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">
|
||||
<AdminHeader
|
||||
title={title}
|
||||
description={isSystem ? 'Rôle système — le nom ne peut pas être modifié' : undefined}
|
||||
backHref="/admin/roles"
|
||||
/>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-6">
|
||||
<Card variant="default" padding="md">
|
||||
<div className="flex flex-col gap-4">
|
||||
<h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Informations</h2>
|
||||
|
||||
<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>
|
||||
</Card>
|
||||
|
||||
<Card variant="default" padding="md">
|
||||
<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]) => (
|
||||
<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>
|
||||
</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" loading={saving} disabled={saving}>
|
||||
{saving ? 'Sauvegarde...' : 'Sauvegarder'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RoleEditPage;
|
||||
@@ -1,17 +1,28 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Card, Table, Button, Badge } from '@zen/core/shared/components';
|
||||
import { PencilEdit01Icon, Cancel01Icon } from '@zen/core/shared/icons';
|
||||
import { useToast } from '@zen/core/toast';
|
||||
import AdminHeader from '../components/AdminHeader.js';
|
||||
import RoleEditModal from '../components/RoleEditModal.client.js';
|
||||
|
||||
const RolesPageClient = () => {
|
||||
const router = useRouter();
|
||||
const toast = useToast();
|
||||
const [roles, setRoles] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editingRoleId, setEditingRoleId] = useState(null);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const openEdit = (roleId) => {
|
||||
setEditingRoleId(roleId);
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setModalOpen(false);
|
||||
setEditingRoleId(null);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
@@ -34,7 +45,7 @@ const RolesPageClient = () => {
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
skeleton: { height: 'h-4', width: '60%' }
|
||||
skeleton: { height: 'h-4', width: '60%' },
|
||||
},
|
||||
{
|
||||
key: 'permission_count',
|
||||
@@ -43,7 +54,7 @@ const RolesPageClient = () => {
|
||||
render: (role) => (
|
||||
<span className="text-sm text-neutral-600 dark:text-gray-300">{role.permission_count}</span>
|
||||
),
|
||||
skeleton: { height: 'h-4', width: '40px' }
|
||||
skeleton: { height: 'h-4', width: '40px' },
|
||||
},
|
||||
{
|
||||
key: 'user_count',
|
||||
@@ -52,14 +63,14 @@ const RolesPageClient = () => {
|
||||
render: (role) => (
|
||||
<span className="text-sm text-neutral-600 dark:text-gray-300">{role.user_count}</span>
|
||||
),
|
||||
skeleton: { height: 'h-4', width: '40px' }
|
||||
skeleton: { height: 'h-4', width: '40px' },
|
||||
},
|
||||
{
|
||||
key: 'is_system',
|
||||
label: 'Système',
|
||||
sortable: false,
|
||||
render: (role) => role.is_system ? <Badge variant="default" size="sm">système</Badge> : null,
|
||||
skeleton: { height: 'h-4', width: '60px' }
|
||||
skeleton: { height: 'h-4', width: '60px' },
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
@@ -71,7 +82,7 @@ const RolesPageClient = () => {
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => router.push(`/admin/roles/edit/${role.id}`)}
|
||||
onClick={() => openEdit(role.id)}
|
||||
icon={<PencilEdit01Icon className="w-4 h-4" />}
|
||||
>
|
||||
Modifier
|
||||
@@ -88,8 +99,8 @@ const RolesPageClient = () => {
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
skeleton: { height: 'h-8', width: '80px', className: 'rounded-lg' }
|
||||
}
|
||||
skeleton: { height: 'h-8', width: '80px', className: 'rounded-lg' },
|
||||
},
|
||||
];
|
||||
|
||||
const fetchRoles = async () => {
|
||||
@@ -111,7 +122,7 @@ const RolesPageClient = () => {
|
||||
try {
|
||||
const response = await fetch(`/zen/api/roles/${role.id}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include'
|
||||
credentials: 'include',
|
||||
});
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
@@ -120,7 +131,7 @@ const RolesPageClient = () => {
|
||||
}
|
||||
toast.success('Rôle supprimé');
|
||||
fetchRoles();
|
||||
} catch (err) {
|
||||
} catch {
|
||||
toast.error('Impossible de supprimer ce rôle');
|
||||
}
|
||||
};
|
||||
@@ -130,6 +141,7 @@ const RolesPageClient = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card variant="default" padding="none">
|
||||
<Table
|
||||
columns={columns}
|
||||
@@ -139,25 +151,44 @@ const RolesPageClient = () => {
|
||||
emptyDescription="Créez un rôle pour commencer"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<RoleEditModal
|
||||
roleId={editingRoleId}
|
||||
isOpen={modalOpen}
|
||||
onClose={closeModal}
|
||||
onSaved={fetchRoles}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const RolesPage = () => {
|
||||
const router = useRouter();
|
||||
const RolesPage = () => (
|
||||
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
|
||||
<RolesPageHeader />
|
||||
<RolesPageClient />
|
||||
</div>
|
||||
);
|
||||
|
||||
const RolesPageHeader = () => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
|
||||
<>
|
||||
<AdminHeader
|
||||
title="Rôles"
|
||||
description="Gérez les rôles et leurs permissions"
|
||||
action={
|
||||
<Button variant="primary" size="sm" onClick={() => router.push('/admin/roles/new')}>
|
||||
<Button variant="primary" size="sm" onClick={() => setModalOpen(true)}>
|
||||
Nouveau rôle
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<RolesPageClient />
|
||||
</div>
|
||||
<RoleEditModal
|
||||
roleId="new"
|
||||
isOpen={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,244 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Button, Card, Input, Select, Loading, TagInput } from '@zen/core/shared/components';
|
||||
import { useToast } from '@zen/core/toast';
|
||||
import AdminHeader from '../components/AdminHeader.js';
|
||||
|
||||
const UserEditPage = ({ userId }) => {
|
||||
const router = useRouter();
|
||||
const toast = useToast();
|
||||
|
||||
const [userData, setUserData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
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(() => {
|
||||
loadAll();
|
||||
}, [userId]);
|
||||
|
||||
const loadAll = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
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 [userData, rolesData, userRolesData] = await Promise.all([
|
||||
userRes.json(),
|
||||
rolesRes.json(),
|
||||
userRolesRes.json(),
|
||||
]);
|
||||
|
||||
if (userData.user) {
|
||||
setUserData(userData.user);
|
||||
setFormData({
|
||||
name: userData.user.name || '',
|
||||
email_verified: userData.user.email_verified ? 'true' : 'false',
|
||||
});
|
||||
} else {
|
||||
toast.error(userData.message || 'Utilisateur introuvable');
|
||||
}
|
||||
|
||||
if (rolesData.roles) {
|
||||
setAllRoles(rolesData.roles);
|
||||
}
|
||||
|
||||
if (userRolesData.roles) {
|
||||
const ids = userRolesData.roles.map(r => r.id);
|
||||
setSelectedRoleIds(ids);
|
||||
setInitialRoleIds(ids);
|
||||
}
|
||||
} catch {
|
||||
toast.error("Impossible de charger l'utilisateur");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (field, value) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: null }));
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors = {};
|
||||
if (!formData.name || !formData.name.trim()) {
|
||||
newErrors.name = 'Le nom est requis';
|
||||
}
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!validateForm()) 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 avec succès');
|
||||
router.push('/admin/users');
|
||||
} 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,
|
||||
}));
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-64 flex items-center justify-center">
|
||||
<Loading />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!userData) {
|
||||
return (
|
||||
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
|
||||
<AdminHeader
|
||||
title="Modifier l'utilisateur"
|
||||
description="Utilisateur introuvable"
|
||||
backHref="/admin/users"
|
||||
backLabel="← Retour aux utilisateurs"
|
||||
/>
|
||||
<Card>
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-lg">
|
||||
<p className="font-medium">Utilisateur introuvable</p>
|
||||
<p className="text-sm mt-1">L'utilisateur que vous recherchez n'existe pas ou a été supprimé.</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
|
||||
<AdminHeader
|
||||
title="Modifier l'utilisateur"
|
||||
description={userData.email}
|
||||
backHref="/admin/users"
|
||||
backLabel="← Retour aux utilisateurs"
|
||||
/>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-6">
|
||||
<Card variant="default" padding="md">
|
||||
<div className="flex flex-col gap-4">
|
||||
<h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Informations</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md: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
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Email vérifié"
|
||||
value={formData.email_verified}
|
||||
onChange={(value) => handleInputChange('email_verified', value)}
|
||||
options={emailVerifiedOptions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant="default" padding="md">
|
||||
<div className="flex flex-col gap-4">
|
||||
<h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Rôles</h2>
|
||||
|
||||
<TagInput
|
||||
label="Rôles attribués"
|
||||
options={roleOptions}
|
||||
value={selectedRoleIds}
|
||||
onChange={setSelectedRoleIds}
|
||||
placeholder="Rechercher un rôle..."
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<Button type="button" variant="secondary" onClick={() => router.push('/admin/users')} disabled={saving}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button type="submit" variant="success" loading={saving} disabled={saving}>
|
||||
{saving ? 'Enregistrement...' : 'Mettre à jour'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserEditPage;
|
||||
@@ -1,32 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Card, Table, Badge, StatusBadge, Button, UserAvatar } from '@zen/core/shared/components';
|
||||
import { PencilEdit01Icon } from '@zen/core/shared/icons';
|
||||
import { useToast } from '@zen/core/toast';
|
||||
import AdminHeader from '../components/AdminHeader.js';
|
||||
import UserEditModal from '../components/UserEditModal.client.js';
|
||||
|
||||
const UsersPageClient = () => {
|
||||
const router = useRouter();
|
||||
const toast = useToast();
|
||||
const [users, setUsers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [roleColorMap, setRoleColorMap] = useState({});
|
||||
const [editingUserId, setEditingUserId] = useState(null);
|
||||
|
||||
// Pagination state
|
||||
const [pagination, setPagination] = useState({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
total: 0,
|
||||
totalPages: 0
|
||||
totalPages: 0,
|
||||
});
|
||||
|
||||
// Sort state
|
||||
const [sortBy, setSortBy] = useState('created_at');
|
||||
const [sortOrder, setSortOrder] = useState('desc');
|
||||
|
||||
// Table columns configuration
|
||||
const columns = [
|
||||
{
|
||||
key: 'name',
|
||||
@@ -43,8 +40,8 @@ const UsersPageClient = () => {
|
||||
),
|
||||
skeleton: {
|
||||
height: 'h-4', width: '60%',
|
||||
secondary: { height: 'h-3', width: '40%' }
|
||||
}
|
||||
secondary: { height: 'h-3', width: '40%' },
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'role',
|
||||
@@ -55,14 +52,14 @@ const UsersPageClient = () => {
|
||||
{user.role}
|
||||
</Badge>
|
||||
),
|
||||
skeleton: { height: 'h-6', width: '80px', className: 'rounded-full' }
|
||||
skeleton: { height: 'h-6', width: '80px', className: 'rounded-full' },
|
||||
},
|
||||
{
|
||||
key: 'email_verified',
|
||||
label: 'Statut',
|
||||
sortable: true,
|
||||
render: (user) => <StatusBadge status={user.email_verified ? 'verified' : 'unverified'} />,
|
||||
skeleton: { height: 'h-6', width: '90px', className: 'rounded-full' }
|
||||
skeleton: { height: 'h-6', width: '90px', className: 'rounded-full' },
|
||||
},
|
||||
{
|
||||
key: 'created_at',
|
||||
@@ -73,7 +70,7 @@ const UsersPageClient = () => {
|
||||
{formatDate(user.created_at)}
|
||||
</span>
|
||||
),
|
||||
skeleton: { height: 'h-4', width: '70%' }
|
||||
skeleton: { height: 'h-4', width: '70%' },
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
@@ -84,35 +81,28 @@ const UsersPageClient = () => {
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => router.push(`/admin/users/edit/${user.id}`)}
|
||||
onClick={() => setEditingUserId(user.id)}
|
||||
icon={<PencilEdit01Icon className="w-4 h-4" />}
|
||||
>
|
||||
Modifier
|
||||
</Button>
|
||||
),
|
||||
skeleton: { height: 'h-8', width: '80px', className: 'rounded-lg' }
|
||||
}
|
||||
skeleton: { height: 'h-8', width: '80px', className: 'rounded-lg' },
|
||||
},
|
||||
];
|
||||
|
||||
// Fetch users function
|
||||
const fetchUsers = async () => {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const searchParams = new URLSearchParams({
|
||||
page: pagination.page.toString(),
|
||||
limit: pagination.limit.toString(),
|
||||
sortBy,
|
||||
sortOrder
|
||||
sortOrder,
|
||||
});
|
||||
|
||||
const response = await fetch(`/zen/api/users?${searchParams}`, {
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error: ${response.status}`);
|
||||
}
|
||||
const response = await fetch(`/zen/api/users?${searchParams}`, { credentials: 'include' });
|
||||
if (!response.ok) throw new Error(`Error: ${response.status}`);
|
||||
|
||||
const data = await response.json();
|
||||
setUsers(data.users);
|
||||
@@ -120,11 +110,10 @@ const UsersPageClient = () => {
|
||||
...prev,
|
||||
total: data.pagination.total,
|
||||
totalPages: data.pagination.totalPages,
|
||||
page: data.pagination.page
|
||||
page: data.pagination.page,
|
||||
}));
|
||||
} catch (err) {
|
||||
toast.error(err.message || 'Impossible de charger les utilisateurs');
|
||||
console.error('Error fetching users:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -143,32 +132,18 @@ const UsersPageClient = () => {
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
// Effect to fetch users when sort or pagination change
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, [sortBy, sortOrder, pagination.page, pagination.limit]);
|
||||
|
||||
// Handle pagination
|
||||
const handlePageChange = (newPage) => {
|
||||
setPagination(prev => ({ ...prev, page: newPage }));
|
||||
};
|
||||
|
||||
const handleLimitChange = (newLimit) => {
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
limit: newLimit,
|
||||
page: 1 // Reset to first page when changing limit
|
||||
}));
|
||||
};
|
||||
|
||||
// Handle sorting
|
||||
const handlePageChange = (newPage) => setPagination(prev => ({ ...prev, page: newPage }));
|
||||
const handleLimitChange = (newLimit) => setPagination(prev => ({ ...prev, limit: newLimit, page: 1 }));
|
||||
const handleSort = (newSortBy) => {
|
||||
const newSortOrder = sortBy === newSortBy && sortOrder === 'asc' ? 'desc' : 'asc';
|
||||
setSortBy(newSortBy);
|
||||
setSortOrder(newSortOrder);
|
||||
};
|
||||
|
||||
// Format date helper
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return 'N/A';
|
||||
try {
|
||||
@@ -177,7 +152,7 @@ const UsersPageClient = () => {
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
minute: '2-digit',
|
||||
});
|
||||
} catch {
|
||||
return 'Date invalide';
|
||||
@@ -185,8 +160,7 @@ const UsersPageClient = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Users Table */}
|
||||
<>
|
||||
<Card variant="default" padding="none">
|
||||
<Table
|
||||
columns={columns}
|
||||
@@ -205,17 +179,22 @@ const UsersPageClient = () => {
|
||||
total={pagination.total}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<UserEditModal
|
||||
userId={editingUserId}
|
||||
isOpen={!!editingUserId}
|
||||
onClose={() => setEditingUserId(null)}
|
||||
onSaved={fetchUsers}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const UsersPage = () => {
|
||||
return (
|
||||
const UsersPage = () => (
|
||||
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
|
||||
<AdminHeader title="Utilisateurs" description="Gérez les comptes utilisateurs" />
|
||||
<UsersPageClient />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default UsersPage;
|
||||
|
||||
@@ -3,17 +3,10 @@
|
||||
import { registerPage } from '../registry.js';
|
||||
import DashboardPage from './DashboardPage.client.js';
|
||||
import UsersPage from './UsersPage.client.js';
|
||||
import UserEditPage from './UserEditPage.client.js';
|
||||
import RolesPage from './RolesPage.client.js';
|
||||
import RoleEditPage from './RoleEditPage.client.js';
|
||||
import ProfilePage from './ProfilePage.client.js';
|
||||
|
||||
// Pages core — le slug correspond au premier segment après /admin/. Les
|
||||
// routes paramétrées (users/edit/:id, roles/edit/:id, roles/new) sont
|
||||
// résolues dans AdminPage.client.js via le slug "namespace:form".
|
||||
registerPage({ slug: 'dashboard', Component: DashboardPage, title: 'Tableau de bord' });
|
||||
registerPage({ slug: 'users', Component: UsersPage, title: 'Utilisateurs' });
|
||||
registerPage({ slug: 'roles', Component: RolesPage, title: 'Rôles' });
|
||||
registerPage({ slug: 'profile', Component: ProfilePage, title: 'Profil' });
|
||||
registerPage({ slug: 'users:edit', Component: UserEditPage, title: 'Modifier utilisateur', breadcrumbLabel: 'Modifier' });
|
||||
registerPage({ slug: 'roles:edit', Component: RoleEditPage, title: 'Modifier rôle', breadcrumbLabel: 'Modifier' });
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Dialog } from '@headlessui/react';
|
||||
import { Cancel01Icon } from '../icons/index.js';
|
||||
import Button from './Button';
|
||||
import Button from './Button.js';
|
||||
|
||||
const FORM_ID = 'modal-form-inner';
|
||||
|
||||
const Modal = ({
|
||||
isOpen = true,
|
||||
@@ -10,16 +12,53 @@ const Modal = ({
|
||||
children,
|
||||
footer,
|
||||
size = 'lg',
|
||||
closable = true
|
||||
closable = true,
|
||||
// Form props — when provided, wraps children in a <form> and shows a standard footer
|
||||
onSubmit,
|
||||
submitLabel = 'Enregistrer',
|
||||
cancelLabel = 'Annuler',
|
||||
submitVariant = 'primary',
|
||||
loading = false,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const sizeClasses = {
|
||||
sm: 'max-w-md',
|
||||
md: 'max-w-lg',
|
||||
lg: 'max-w-2xl',
|
||||
xl: 'max-w-4xl',
|
||||
full: 'max-w-7xl'
|
||||
full: 'max-w-7xl',
|
||||
};
|
||||
|
||||
const isForm = typeof onSubmit === 'function';
|
||||
|
||||
const handleFormSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
onSubmit(e);
|
||||
};
|
||||
|
||||
const resolvedFooter = footer ?? (isForm ? (
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
{cancelLabel}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
form={FORM_ID}
|
||||
variant={submitVariant}
|
||||
size="sm"
|
||||
loading={loading}
|
||||
disabled={disabled || loading}
|
||||
>
|
||||
{submitLabel}
|
||||
</Button>
|
||||
</div>
|
||||
) : null);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
@@ -61,13 +100,17 @@ const Modal = ({
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{isForm ? (
|
||||
<form id={FORM_ID} onSubmit={handleFormSubmit} noValidate>
|
||||
{children}
|
||||
</form>
|
||||
) : children}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{footer && (
|
||||
{resolvedFooter && (
|
||||
<div className="px-4 py-3 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/30">
|
||||
{footer}
|
||||
{resolvedFooter}
|
||||
</div>
|
||||
)}
|
||||
</Dialog.Panel>
|
||||
|
||||
Reference in New Issue
Block a user