refactor(admin): remove group toggle feature and simplify permissions UI in RoleEditPage
This commit is contained in:
@@ -58,16 +58,6 @@ const RoleEditPage = ({ roleId }) => {
|
||||
);
|
||||
};
|
||||
|
||||
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()) {
|
||||
@@ -178,53 +168,24 @@ const RoleEditPage = ({ roleId }) => {
|
||||
<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">
|
||||
<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'
|
||||
}`}
|
||||
>
|
||||
{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 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>
|
||||
{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>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Button, Card, Input, Select, Loading, Switch } from '@zen/core/shared/components';
|
||||
import { Button, Card, Input, Select, Loading, TagInput } from '@zen/core/shared/components';
|
||||
import { useToast } from '@zen/core/toast';
|
||||
|
||||
const UserEditPage = ({ userId }) => {
|
||||
@@ -80,12 +80,6 @@ const UserEditPage = ({ userId }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const toggleRole = (roleId) => {
|
||||
setSelectedRoleIds(prev =>
|
||||
prev.includes(roleId) ? prev.filter(id => id !== roleId) : [...prev, roleId]
|
||||
);
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors = {};
|
||||
if (!formData.name || !formData.name.trim()) {
|
||||
@@ -146,6 +140,13 @@ const UserEditPage = ({ userId }) => {
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
@@ -219,33 +220,16 @@ const UserEditPage = ({ userId }) => {
|
||||
</Card>
|
||||
|
||||
<Card variant="default" padding="md">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-4">
|
||||
<h2 className="text-sm font-semibold text-neutral-900 dark:text-white">Rôles</h2>
|
||||
<p className="text-xs text-neutral-400 mb-2">Activez les rôles à attribuer à cet utilisateur.</p>
|
||||
|
||||
{allRoles.length === 0 ? (
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400">Aucun rôle disponible</p>
|
||||
) : (
|
||||
<div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-700/50">
|
||||
{allRoles.map((role) => (
|
||||
<Switch
|
||||
key={role.id}
|
||||
checked={selectedRoleIds.includes(role.id)}
|
||||
onChange={() => toggleRole(role.id)}
|
||||
label={
|
||||
<span className="flex items-center gap-2">
|
||||
<span
|
||||
className="inline-block w-2.5 h-2.5 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: role.color || '#6b7280' }}
|
||||
/>
|
||||
{role.name}
|
||||
</span>
|
||||
}
|
||||
description={role.description || undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<TagInput
|
||||
label="Rôles attribués"
|
||||
options={roleOptions}
|
||||
value={selectedRoleIds}
|
||||
onChange={setSelectedRoleIds}
|
||||
placeholder="Rechercher un rôle..."
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user