parent
02969d5426
commit
4809257816
@ -0,0 +1,97 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { hasPermission } from '../../../server/lib/permissions';
|
||||||
|
import { Permission, User } from '../../hooks/useUser';
|
||||||
|
|
||||||
|
export interface PermissionItem {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
permission: Permission;
|
||||||
|
children?: PermissionItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PermissionOptionProps {
|
||||||
|
option: PermissionItem;
|
||||||
|
currentPermission: number;
|
||||||
|
user?: User;
|
||||||
|
parent?: PermissionItem;
|
||||||
|
onUpdate: (newPermissions: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const PermissionOption: React.FC<PermissionOptionProps> = ({
|
||||||
|
option,
|
||||||
|
currentPermission,
|
||||||
|
onUpdate,
|
||||||
|
user,
|
||||||
|
parent,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={`relative flex items-start first:mt-0 mt-4 ${
|
||||||
|
(option.permission !== Permission.ADMIN &&
|
||||||
|
hasPermission(Permission.ADMIN, currentPermission)) ||
|
||||||
|
(!!parent?.permission &&
|
||||||
|
hasPermission(parent.permission, currentPermission)) ||
|
||||||
|
(user && user.id !== 1 && option.permission === Permission.ADMIN) ||
|
||||||
|
(user &&
|
||||||
|
!hasPermission(Permission.MANAGE_SETTINGS, user.permissions) &&
|
||||||
|
option.permission === Permission.MANAGE_SETTINGS)
|
||||||
|
? 'opacity-50'
|
||||||
|
: ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id={option.id}
|
||||||
|
name="permissions"
|
||||||
|
type="checkbox"
|
||||||
|
className="w-4 h-4 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
|
||||||
|
disabled={
|
||||||
|
(option.permission !== Permission.ADMIN &&
|
||||||
|
hasPermission(Permission.ADMIN, currentPermission)) ||
|
||||||
|
(!!parent?.permission &&
|
||||||
|
hasPermission(parent.permission, currentPermission)) ||
|
||||||
|
(user &&
|
||||||
|
user.id !== 1 &&
|
||||||
|
option.permission === Permission.ADMIN) ||
|
||||||
|
(user &&
|
||||||
|
!hasPermission(Permission.MANAGE_SETTINGS, user.permissions) &&
|
||||||
|
option.permission === Permission.MANAGE_SETTINGS)
|
||||||
|
}
|
||||||
|
onClick={() => {
|
||||||
|
onUpdate(
|
||||||
|
hasPermission(option.permission, currentPermission)
|
||||||
|
? currentPermission - option.permission
|
||||||
|
: currentPermission + option.permission
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
checked={
|
||||||
|
hasPermission(option.permission, currentPermission) ||
|
||||||
|
(!!parent?.permission &&
|
||||||
|
hasPermission(parent.permission, currentPermission))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="ml-3 text-sm leading-5">
|
||||||
|
<label htmlFor={option.id} className="font-medium">
|
||||||
|
{option.name}
|
||||||
|
</label>
|
||||||
|
<p className="text-gray-500">{option.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{(option.children ?? []).map((child) => (
|
||||||
|
<div key={`permission-child-${child.id}`} className="pl-6 mt-4">
|
||||||
|
<PermissionOption
|
||||||
|
option={child}
|
||||||
|
currentPermission={currentPermission}
|
||||||
|
onUpdate={(newPermission) => onUpdate(newPermission)}
|
||||||
|
parent={option}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PermissionOption;
|
Loading…
Reference in new issue