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

Added roles support

Browse source
This commit is contained in:
Valentino K 2022-05-17 11:52:08 +02:00
parent 2b00c8425d
commit da9eedc94e
17 changed files with 390 additions and 250 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,31 +1,39 @@
import _ from 'lodash';
import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { Modal, Banner } from 'src/components';
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 } 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: {
name: null,
email: null,
id: null,
role_id: null,
status: null,
name: '',
email: '',
id: '',
app_roles: [],
status: '',
},
});
const { fields } = useFieldArray({
control,
name: 'app_roles',
});
useEffect(() => {
if (user) {
reset(user);
}
return () => {
reset({ name: null, email: null, id: null });
reset({ name: '', email: '', id: '' });
};
}, [user, reset]);
@ -54,7 +62,7 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
return (
<Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={userModalLoading} 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">Profile</h3>
@ -69,77 +77,90 @@ export const CurrentUserModal = ({ open, onClose, user }: 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' },
]}
/>
{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 className="sm:col-span-6">
<Banner title="Editing user status and app access coming soon." titleSm="Comming soon!" />
</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 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 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>

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

@ -1,18 +1,22 @@
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',
},
];

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

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