zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

refactor(admin): remove group toggle feature and simplify permissions UI in RoleEditPage

Browse Source
This commit is contained in:
Hyko
2026-04-19 17:04:29 -04:00
parent d855485ef1
commit f387511c40
4 changed files with 202 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/components/pages/RoleEditPage.js
+17 -56
View File
@@ -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>