local-it/dashboard
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

hide app access when selected dashboard role is admin

Browse source
This commit is contained in:
Davor 2022-07-13 12:05:20 +02:00
parent 4e25903847
commit d4c4c6104f
1 changed files with 46 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/components/UserModal/UserModal.tsx
View file

@ -11,6 +11,7 @@ import { UserModalProps } from './types';
export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) => { export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) => {
const [deleteModal, setDeleteModal] = useState(false); const [deleteModal, setDeleteModal] = useState(false);
const [isAdminRoleSelected, setAdminRoleSelected] = useState(true);
const [isPersonalModal, setPersonalModal] = useState(false); const [isPersonalModal, setPersonalModal] = useState(false);
const { const {
user, user,
@ -63,7 +64,9 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
}); });
useEffect(() => { useEffect(() => {
if (dashboardRole === UserRole.Admin) { const isAdminDashboardRoleSelected = dashboardRole === UserRole.Admin;
setAdminRoleSelected(isAdminDashboardRoleSelected);
if (isAdminDashboardRoleSelected) {
fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.Admin })); fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.Admin }));
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@ -197,13 +200,13 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
</div> </div>
</div> </div>
{isAdmin && ( {isAdmin && !userModalLoading && (
<div> <div>
<div className="mt-8"> <div className="mt-8">
<h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3> <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
</div> </div>
{dashboardRole === UserRole.Admin && ( {isAdminRoleSelected && (
<div className="sm:col-span-6"> <div className="sm:col-span-6">
<Banner <Banner
title="Admin users automatically have admin-level access to all apps." title="Admin users automatically have admin-level access to all apps."
@ -212,47 +215,49 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
</div> </div>
)} )}
<div> {!isAdminRoleSelected && (
<div className={`flow-root mt-6 ${dashboardRole === UserRole.Admin ? 'opacity-70' : ''}`}> <div>
<ul className="-my-5 divide-y divide-gray-200"> <div className="flow-root mt-6">
{fields.map((item, index) => { <ul className="-my-5 divide-y divide-gray-200">
if (item.name === 'dashboard') { {fields.map((item, index) => {
return null; if (item.name === 'dashboard') {
} return null;
}
return ( return (
<li className="py-4" key={item.name}> <li className="py-4" key={item.name}>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className="flex-shrink-0 flex-1 flex items-center"> <div className="flex-shrink-0 flex-1 flex items-center">
<img <img
className="h-10 w-10 rounded-md overflow-hidden" className="h-10 w-10 rounded-md overflow-hidden"
src={_.find(appAccessList, ['name', item.name!])?.image} src={_.find(appAccessList, ['name', item.name!])?.image}
alt={item.name ?? 'Image'} alt={item.name ?? 'Image'}
/> />
<h3 className="ml-4 text-md leading-6 font-medium text-gray-900"> <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
{_.find(appAccessList, ['name', item.name!])?.label} {_.find(appAccessList, ['name', item.name!])?.label}
</h3> </h3>
</div>
<div>
<Select
key={item.id}
control={control}
name={`app_roles.${index}.role`}
disabled={isAdminRoleSelected}
options={[
{ value: UserRole.NoAccess, name: 'No Access' },
{ value: UserRole.User, name: 'User' },
{ value: UserRole.Admin, name: 'Admin' },
]}
/>
</div>
</div> </div>
<div> </li>
<Select );
key={item.id} })}
control={control} </ul>
name={`app_roles.${index}.role`} </div>
disabled={dashboardRole === UserRole.Admin}
options={[
{ value: UserRole.NoAccess, name: 'No Access' },
{ value: UserRole.User, name: 'User' },
{ value: UserRole.Admin, name: 'Admin' },
]}
/>
</div>
</div>
</li>
);
})}
</ul>
</div> </div>
</div> )}
</div> </div>
)} )}
</div> </div>