Added roles support
This commit is contained in:
Valentino K
parent
2b00c8425d
commit
da9eedc94e
17 changed files with 390 additions and 250 deletions
|
|
@ -5,6 +5,7 @@ import { CogIcon, TrashIcon } from '@heroicons/react/outline';
|
|||
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';
|
||||
|
||||
export const Users: React.FC = () => {
|
||||
|
|
@ -13,6 +14,7 @@ export const Users: React.FC = () => {
|
|||
const [userId, setUserId] = useState(null);
|
||||
const [search, setSearch] = useState('');
|
||||
const { users, loadUsers, userTableLoading } = useUsers();
|
||||
const { isAdmin } = useAuth();
|
||||
|
||||
const handleSearch = (event: any) => {
|
||||
setSearch(event.target.value);
|
||||
|
|
@ -60,23 +62,27 @@ export const Users: React.FC = () => {
|
|||
Cell: (props: any) => {
|
||||
const { row } = props;
|
||||
|
||||
return (
|
||||
<div className="text-right lg:opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => configureModalOpen(row.original.id)}
|
||||
type="button"
|
||||
className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
||||
>
|
||||
<CogIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Configure
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
if (isAdmin) {
|
||||
return (
|
||||
<div className="text-right lg:opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => configureModalOpen(row.original.id)}
|
||||
type="button"
|
||||
className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
||||
>
|
||||
<CogIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Configure
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
width: 'auto',
|
||||
},
|
||||
],
|
||||
[],
|
||||
[isAdmin],
|
||||
);
|
||||
|
||||
const selectedRows = useCallback((rows: Record<string, boolean>) => {
|
||||
|
|
@ -88,16 +94,19 @@ export const Users: React.FC = () => {
|
|||
<div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
|
||||
<div className="pb-5 mt-6 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
|
||||
<h1 className="text-3xl leading-6 font-bold text-gray-900">Users</h1>
|
||||
<div className="mt-3 sm:mt-0 sm:ml-4">
|
||||
<button
|
||||
onClick={() => configureModalOpen(null)}
|
||||
type="button"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
|
||||
>
|
||||
<PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Add new user
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isAdmin && (
|
||||
<div className="mt-3 sm:mt-0 sm:ml-4">
|
||||
<button
|
||||
onClick={() => configureModalOpen(null)}
|
||||
type="button"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
|
||||
>
|
||||
<PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Add new user
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between w-100 my-3 items-center mb-5 ">
|
||||
|
|
@ -153,7 +162,7 @@ export const Users: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<UserModal open={configureModal} onClose={configureModalClose} userId={userId} />
|
||||
<UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,26 +1,27 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import _ from 'lodash';
|
||||
import { TrashIcon } from '@heroicons/react/outline';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { Modal, Banner, ConfirmationModal } from 'src/components';
|
||||
import { useFieldArray, useForm } from 'react-hook-form';
|
||||
import { Modal, ConfirmationModal } from 'src/components';
|
||||
import { Input, Select } from 'src/components/Form';
|
||||
import { User, UserRole, useUsers } from 'src/services/users';
|
||||
import { useAuth } from 'src/services/auth';
|
||||
import { appAccessList } from './consts';
|
||||
import { appAccessList, initialUserForm } from './consts';
|
||||
import { UserModalProps } from './types';
|
||||
|
||||
export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
|
||||
export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) => {
|
||||
const [deleteModal, setDeleteModal] = useState(false);
|
||||
const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById } = useUsers();
|
||||
const { currentUser } = useAuth();
|
||||
const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById, clearSelectedUser } =
|
||||
useUsers();
|
||||
const { currentUser, isAdmin } = useAuth();
|
||||
|
||||
const { control, reset, handleSubmit } = useForm<User>({
|
||||
defaultValues: {
|
||||
name: null,
|
||||
email: null,
|
||||
id: null,
|
||||
role_id: null,
|
||||
status: null,
|
||||
},
|
||||
defaultValues: initialUserForm,
|
||||
});
|
||||
|
||||
const { fields } = useFieldArray({
|
||||
control,
|
||||
name: 'app_roles',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -28,19 +29,19 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
|
|||
loadUser(userId);
|
||||
}
|
||||
|
||||
reset({ name: null, email: null, id: null, status: null });
|
||||
reset(initialUserForm);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [userId]);
|
||||
}, [userId, open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
if (!_.isEmpty(user)) {
|
||||
reset(user);
|
||||
}
|
||||
|
||||
return () => {
|
||||
reset({ name: null, email: null, id: null, status: null });
|
||||
reset(initialUserForm);
|
||||
};
|
||||
}, [user, reset]);
|
||||
}, [user, reset, open]);
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
|
|
@ -48,13 +49,14 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
|
|||
await handleSubmit((data) => editUserById(data))();
|
||||
} else {
|
||||
await handleSubmit((data) => createNewUser(data))();
|
||||
reset({ name: null, email: null, id: null, status: null });
|
||||
}
|
||||
|
||||
onClose();
|
||||
} catch (e: any) {
|
||||
// Continue
|
||||
}
|
||||
|
||||
onClose();
|
||||
clearSelectedUser();
|
||||
setUserId(null);
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: any) => {
|
||||
|
|
@ -65,6 +67,8 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
|
|||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
clearSelectedUser();
|
||||
setUserId(null);
|
||||
};
|
||||
|
||||
const deleteModalOpen = () => setDeleteModal(true);
|
||||
|
|
@ -74,6 +78,9 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
|
|||
if (userId) {
|
||||
deleteUserById(userId);
|
||||
}
|
||||
|
||||
clearSelectedUser();
|
||||
setUserId(null);
|
||||
handleClose();
|
||||
deleteModalClose();
|
||||
};
|
||||
|
|
@ -87,7 +94,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
|
|||
isLoading={userModalLoading}
|
||||
leftActions={
|
||||
userId &&
|
||||
user.email !== currentUser.email && (
|
||||
user.email !== currentUser?.email && (
|
||||
<button
|
||||
onClick={deleteModalOpen}
|
||||
type="button"
|
||||
|
|
@ -101,7 +108,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
|
|||
useCancelButton
|
||||
>
|
||||
<div className="bg-white px-4">
|
||||
<div className="space-y-4 divide-y divide-gray-200">
|
||||
<div className="space-y-10 divide-y divide-gray-200">
|
||||
<div>
|
||||
<div>
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">{userId ? 'Edit user' : 'Add new user'}</h3>
|
||||
|
|
@ -116,77 +123,91 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
|
|||
<Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-6">
|
||||
<Select
|
||||
control={control}
|
||||
name="role_id"
|
||||
label="Role"
|
||||
options={[
|
||||
{ value: UserRole.Admin, name: 'Admin' },
|
||||
{ value: UserRole.User, name: 'User' },
|
||||
]}
|
||||
/>
|
||||
<div className="sm:col-span-3">
|
||||
{fields
|
||||
.filter((field) => field.name === 'dashboard')
|
||||
.map((item, index) => (
|
||||
<Select
|
||||
key={item.name}
|
||||
control={control}
|
||||
name={`app_roles.${index}.role`}
|
||||
label="Role"
|
||||
options={[
|
||||
{ value: UserRole.User, name: 'User' },
|
||||
{ value: UserRole.Admin, name: 'Admin' },
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-6">
|
||||
<Banner title="Editing user status and app access coming soon." titleSm="Comming soon!" />
|
||||
{isAdmin && (
|
||||
<div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
|
||||
<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 className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
|
||||
{/* <Select control={control} name="status" label="Status" options={['Active', '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 className="flow-root mt-6">
|
||||
<ul className="-my-5 divide-y divide-gray-200 ">
|
||||
{fields.map((item, index) => {
|
||||
if (item.name === 'dashboard') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<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.User, name: 'User' },
|
||||
{ value: UserRole.Admin, name: 'Admin' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opacity-40 cursor-default pointer-events-none select-none">
|
||||
<div className="mt-4">
|
||||
<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 ">
|
||||
{appAccessList.map((app: any) => {
|
||||
return (
|
||||
<li className="py-4" key={app.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={app.image} alt={app.name} />
|
||||
<h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
id={app.name}
|
||||
name={app.name}
|
||||
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
>
|
||||
<option>User</option>
|
||||
<option>Admin</option>
|
||||
<option>Super Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,55 @@
|
|||
import { UserRole } from 'src/services/users';
|
||||
|
||||
export const appAccessList = [
|
||||
{
|
||||
name: 'wekan',
|
||||
image: '/assets/wekan.svg',
|
||||
name: 'Wekan',
|
||||
label: 'Wekan',
|
||||
},
|
||||
{
|
||||
name: 'wordpress',
|
||||
image: '/assets/wordpress.svg',
|
||||
name: 'Wordpress',
|
||||
label: 'Wordpress',
|
||||
},
|
||||
{
|
||||
name: 'next-cloud',
|
||||
image: '/assets/nextcloud.svg',
|
||||
name: 'NextCloud',
|
||||
label: 'NextCloud',
|
||||
},
|
||||
{
|
||||
name: 'zulip',
|
||||
image: '/assets/zulip.svg',
|
||||
name: 'Zulip',
|
||||
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 = {
|
||||
name: '',
|
||||
email: '',
|
||||
id: '',
|
||||
app_roles: initialAppRoles,
|
||||
status: '',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@ export type UserModalProps = {
|
|||
open: boolean;
|
||||
onClose: () => void;
|
||||
userId: string | null;
|
||||
setUserId: any;
|
||||
};
|
||||
|
|
|
|||
Reference in a new issue