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

Merge branch 'feat/role-management-fixes' into 'main'

Browse source 
Modify FE for No access role

See merge request stackspin/dashboard!31
This commit is contained in:
Maarten de Waard 2022-06-15 12:18:40 +00:00
commit bca39f1091
15 changed files with 53 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/Header/Header.tsx
View file

@ -5,7 +5,9 @@ import { useAuth } from 'src/services/auth';
import Gravatar from 'react-gravatar';
import { Link, useLocation } from 'react-router-dom';
import clsx from 'clsx';
import { CurrentUserModal } from './components/CurrentUserModal';
import _ from 'lodash';
import { UserModal } from '../UserModal';
const navigation = [
{ name: 'Dashboard', to: '/dashboard', requiresAdmin: false },
@ -31,14 +33,20 @@ interface HeaderProps {}
const Header: React.FC<HeaderProps> = () => {
const [currentUserModal, setCurrentUserModal] = useState(false);
const [currentUserId, setCurrentUserId] = useState(null);
const { logOut, currentUser, isAdmin } = useAuth();
const { pathname } = useLocation();
const currentUserModalOpen = () => {
const currentUserModalOpen = (id: any) => {
setCurrentUserId(id);
setCurrentUserModal(true);
};
const currentUserModalClose = () => setCurrentUserModal(false);
const currentUserModalClose = () => {
setCurrentUserModal(false);
setCurrentUserId(null);
};
const navigationItems = filterNavigationByDashboardRole(isAdmin);
@ -110,7 +118,7 @@ const Header: React.FC<HeaderProps> = () => {
<Menu.Item>
{({ active }) => (
<a
onClick={() => currentUserModalOpen()}
onClick={() => currentUserModalOpen(currentUser?.id)}
className={classNames(
active ? 'bg-gray-100 cursor-pointer' : '',
'block px-4 py-2 text-sm text-gray-700 cursor-pointer',
@ -165,7 +173,7 @@ const Header: React.FC<HeaderProps> = () => {
)}
</Disclosure>
<CurrentUserModal open={currentUserModal} onClose={currentUserModalClose} user={currentUser} />
<UserModal open={currentUserModal} onClose={currentUserModalClose} userId={currentUserId} setUserId={_.noop} />
</>
);
};

162
src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx
View file

@ -1,162 +0,0 @@
import _ from 'lodash';
import React, { useEffect } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import { Modal } from 'src/components';
import { Input, Select } from 'src/components/Form';
import { useAuth } from 'src/services/auth';
import { User, UserRole, useUsers } from 'src/services/users';
import { appAccessList, initialUserForm } from './consts';
import { UserModalProps } from './types';
export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
const { editUserById, userModalLoading } = useUsers();
const { isAdmin } = useAuth();
const { control, reset, handleSubmit } = useForm<User>({
defaultValues: initialUserForm,
});
const { fields } = useFieldArray({
control,
name: 'app_roles',
});
useEffect(() => {
if (user && !_.isEmpty(user)) {
reset(user);
}
return () => {
reset(initialUserForm);
};
}, [user, reset]);
const handleSave = async () => {
try {
if (user) {
await handleSubmit((data) => editUserById(data))();
}
onClose();
} catch (e: any) {
// Continue
}
};
const handleKeyPress = (e: any) => {
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
handleSave();
}
};
const handleClose = () => {
onClose();
};
return (
<Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={userModalLoading} useCancelButton>
<div className="bg-white px-4">
<div className="space-y-10 divide-y divide-gray-200">
<div>
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Profile</h3>
</div>
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div className="sm:col-span-3">
<Input control={control} name="name" label="Name" onKeyPress={handleKeyPress} />
</div>
<div className="sm:col-span-3">
<Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
</div>
{isAdmin && (
<>
<div className="sm:col-span-3">
{fields
.filter((field) => field.name === 'dashboard')
.map((item, index) => (
<Select
key={item.id}
control={control}
name={`app_roles.${index}.role`}
label="Role"
options={[
{ value: UserRole.Admin, name: 'Admin' },
{ value: UserRole.User, name: 'User' },
]}
/>
))}
</div>
<div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
{/* <Select control={control} name="status" label="Status" options={['Admin', 'Inactive']} /> */}
<label htmlFor="status" className="block text-sm font-medium text-gray-700">
Status
</label>
<div className="mt-1">
<select
id="status"
name="status"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
>
<option>Active</option>
<option>Inactive</option>
<option>Banned</option>
</select>
</div>
</div>
</>
)}
</div>
</div>
{isAdmin && (
<div>
<div className="mt-8">
<h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
</div>
<div>
<div className="flow-root mt-6">
<ul className="-my-5 divide-y divide-gray-200 ">
{fields
.filter((field) => field.name !== 'dashboard')
.map((item, index) => (
<li className="py-4" key={item.name}>
<div className="flex items-center space-x-4">
<div className="flex-shrink-0 flex-1 flex items-center">
<img
className="h-10 w-10 rounded-md overflow-hidden"
src={_.find(appAccessList, ['name', item.name!])?.image}
alt={item.name ?? 'Image'}
/>
<h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
{_.find(appAccessList, ['name', item.name!])?.label}
</h3>
</div>
<div>
<Select
key={item.id}
control={control}
name={`app_roles.${index}.role`}
options={[
{ value: UserRole.Admin, name: 'Admin' },
{ value: UserRole.User, name: 'User' },
]}
/>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
)}
</div>
</div>
</Modal>
);
};

55
src/components/Header/components/CurrentUserModal/consts.ts
View file

@ -1,55 +0,0 @@
import { UserRole } from 'src/services/users';
export const appAccessList = [
{
name: 'wekan',
image: '/assets/wekan.svg',
label: 'Wekan',
},
{
name: 'wordpress',
image: '/assets/wordpress.svg',
label: 'Wordpress',
},
{
name: 'next-cloud',
image: '/assets/nextcloud.svg',
label: 'NextCloud',
},
{
name: 'zulip',
image: '/assets/zulip.svg',
label: 'Zulip',
},
];
const initialAppRoles = [
{
name: 'dashboard',
role: UserRole.User,
},
{
name: 'wekan',
role: UserRole.User,
},
{
name: 'wordpress',
role: UserRole.User,
},
{
name: 'next-cloud',
role: UserRole.User,
},
{
name: 'zulip',
role: UserRole.User,
},
];
export const initialUserForm = {
id: '',
name: '',
email: '',
app_roles: initialAppRoles,
status: '',
};

1
src/components/Header/components/CurrentUserModal/index.ts
View file

@ -1 +0,0 @@
export { CurrentUserModal } from './CurrentUserModal';

7
src/components/Header/components/CurrentUserModal/types.ts
View file

@ -1,7 +0,0 @@
import { User } from 'src/services/users';
export type UserModalProps = {
open: boolean;
onClose: () => void;
user: User | null;
};

1
src/components/Header/components/index.ts
View file

@ -1 +0,0 @@
export { CurrentUserModal } from './CurrentUserModal';

2
src/modules/users/components/UserModal/UserModal.tsx → src/components/UserModal/UserModal.tsx
View file

@ -133,6 +133,7 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
name={`app_roles.${index}.role`}
label="Role"
options={[
{ value: UserRole.NoAccess, name: 'No access' },
{ value: UserRole.User, name: 'User' },
{ value: UserRole.Admin, name: 'Admin' },
]}
@ -194,6 +195,7 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
control={control}
name={`app_roles.${index}.role`}
options={[
{ value: UserRole.NoAccess, name: 'No Access' },
{ value: UserRole.User, name: 'User' },
{ value: UserRole.Admin, name: 'Admin' },
]}

10
src/modules/users/components/UserModal/consts.ts → src/components/UserModal/consts.ts
View file

@ -14,7 +14,7 @@ export const appAccessList = [
{
name: 'nextcloud',
image: '/assets/nextcloud.svg',
label: 'NextCloud',
label: 'Nextcloud',
},
{
name: 'zulip',
@ -30,19 +30,19 @@ const initialAppRoles = [
},
{
name: 'wekan',
role: UserRole.User,
role: UserRole.NoAccess,
},
{
name: 'wordpress',
role: UserRole.User,
role: UserRole.NoAccess,
},
{
name: 'nextcloud',
role: UserRole.User,
role: UserRole.NoAccess,
},
{
name: 'zulip',
role: UserRole.User,
role: UserRole.NoAccess,
},
];

0
src/modules/users/components/UserModal/index.ts → src/components/UserModal/index.ts
View file

0
src/modules/users/components/UserModal/types.ts → src/components/UserModal/types.ts
View file

1
src/components/index.ts
View file

@ -4,3 +4,4 @@ export { Table } from './Table';
export { Banner } from './Banner';
export { Tabs } from './Tabs';
export { Modal, ConfirmationModal } from './Modal';
export { UserModal } from './UserModal';

3
src/modules/users/Users.tsx
View file

@ -6,7 +6,8 @@ import { useUsers } from 'src/services/users';
import { Table } from 'src/components';
import { debounce } from 'lodash';
import { useAuth } from 'src/services/auth';
import { UserModal } from './components/UserModal';
import { UserModal } from '../../components/UserModal';
export const Users: React.FC = () => {
const [selectedRowsIds, setSelectedRowsIds] = useState({});

1
src/modules/users/components/index.ts
View file

@ -1 +0,0 @@
export { UserModal } from './UserModal';

32
src/services/users/transformations.ts
View file

@ -1,16 +1,42 @@
import { AppRoles, User, UserRole } from './types';
const transformRoleById = (roleId: any): UserRole => {
switch (roleId) {
case 1:
return UserRole.Admin;
case 2:
return UserRole.User;
case 3:
return UserRole.NoAccess;
default:
return UserRole.NoAccess;
}
};
const transformRoleIdByRole = (role: UserRole | null): number | null => {
switch (role) {
case UserRole.Admin:
return 1;
case UserRole.User:
return 2;
case UserRole.NoAccess:
return 3;
default:
return null;
}
};
export const transformAppRoles = (data: any): AppRoles => {
const resolvedAdminRole = data.role_id === 1 ? UserRole.Admin : UserRole.User;
const userRole = transformRoleById(data.role_id);
return {
name: data.name ?? '',
role: resolvedAdminRole ?? UserRole.User,
role: userRole,
};
};
export const transformRequestAppRoles = (data: AppRoles): any => {
const resolvedRequestRole = data.role === UserRole.Admin ? 1 : null;
const resolvedRequestRole = transformRoleIdByRole(data.role) ?? null;
return {
name: data.name ?? '',

1
src/services/users/types.ts
View file

@ -13,6 +13,7 @@ export interface FormUser extends User {
}
export enum UserRole {
NoAccess = 'no_access',
Admin = 'admin',
User = 'user',
}