refactor(admin): replace raw form elements with shared Input, Textarea, and Switch components in RoleEditPage
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Card, Button } from '@zen/core/shared/components';
|
||||
import { Card, Button, Input, Textarea, Switch } from '@zen/core/shared/components';
|
||||
import { useToast } from '@zen/core/toast';
|
||||
import { getPermissionGroups } from '@zen/core/users/constants';
|
||||
|
||||
@@ -41,7 +41,7 @@ const RoleEditPage = ({ roleId }) => {
|
||||
setColor(role.color || '#6b7280');
|
||||
setSelectedPerms(role.permission_keys || []);
|
||||
setIsSystem(role.is_system || false);
|
||||
} catch (err) {
|
||||
} catch {
|
||||
toast.error('Impossible de charger ce rôle');
|
||||
router.push('/admin/roles');
|
||||
} finally {
|
||||
@@ -81,9 +81,12 @@ const RoleEditPage = ({ 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 body = {
|
||||
name: name.trim(),
|
||||
description: description.trim() || null,
|
||||
color,
|
||||
permissionKeys: selectedPerms,
|
||||
};
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
@@ -99,14 +102,8 @@ const RoleEditPage = ({ roleId }) => {
|
||||
}
|
||||
|
||||
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) {
|
||||
router.push('/admin/roles');
|
||||
} catch {
|
||||
toast.error('Impossible de sauvegarder ce rôle');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
@@ -117,7 +114,7 @@ const RoleEditPage = ({ roleId }) => {
|
||||
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">
|
||||
<Card variant="default" padding="md">
|
||||
<div className="h-40 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
|
||||
</Card>
|
||||
</div>
|
||||
@@ -141,37 +138,26 @@ const RoleEditPage = ({ roleId }) => {
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-6">
|
||||
{/* Basic info */}
|
||||
<Card variant="default" padding="default">
|
||||
<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="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>
|
||||
<Input
|
||||
label="Nom du rôle"
|
||||
value={name}
|
||||
onChange={setName}
|
||||
disabled={isSystem}
|
||||
placeholder="Éditeur, Modérateur..."
|
||||
required
|
||||
/>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
@@ -188,75 +174,65 @@ const RoleEditPage = ({ roleId }) => {
|
||||
</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>
|
||||
<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]) => {
|
||||
const groupKeys = perms.map(p => p.key);
|
||||
const allSelected = groupKeys.every(k => selectedPerms.includes(k));
|
||||
const someSelected = groupKeys.some(k => selectedPerms.includes(k));
|
||||
{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"
|
||||
return (
|
||||
<div key={group} className="flex flex-col">
|
||||
<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 py-1"
|
||||
>
|
||||
<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'
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
{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 className="flex flex-col pl-5 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>
|
||||
</Card>
|
||||
)}
|
||||
</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}>
|
||||
<Button variant="primary" type="submit" loading={saving} disabled={saving}>
|
||||
{saving ? 'Sauvegarde...' : 'Sauvegarder'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user