refactor UserModal and CurrentUserModal
This commit is contained in:
Davor
parent
bc8db8d248
commit
a033188b03
13 changed files with 17 additions and 240 deletions
|
|
@ -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 },
|
||||
|
|
@ -29,14 +31,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);
|
||||
|
||||
|
|
@ -106,7 +114,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',
|
||||
|
|
@ -119,7 +127,7 @@ const Header: React.FC<HeaderProps> = () => {
|
|||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
onClick={() => logOut()}
|
||||
onClick={logOut}
|
||||
className={classNames(
|
||||
active ? 'bg-gray-100 cursor-pointer' : '',
|
||||
'block px-4 py-2 text-sm text-gray-700 cursor-pointer',
|
||||
|
|
@ -160,7 +168,7 @@ const Header: React.FC<HeaderProps> = () => {
|
|||
)}
|
||||
</Disclosure>
|
||||
|
||||
<CurrentUserModal open={currentUserModal} onClose={currentUserModalClose} user={currentUser} />
|
||||
<UserModal open={currentUserModal} onClose={currentUserModalClose} userId={currentUserId} setUserId={_.noop} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,168 +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.NoAccess, name: 'No access' },
|
||||
{ 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.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.NoAccess, name: 'No access' },
|
||||
{ value: UserRole.Admin, name: 'Admin' },
|
||||
{ value: UserRole.User, name: 'User' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { CurrentUserModal } from './CurrentUserModal';
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import { User } from 'src/services/users';
|
||||
|
||||
export type UserModalProps = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
user: User | null;
|
||||
};
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { CurrentUserModal } from './CurrentUserModal';
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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,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: 'nextcloud',
|
||||
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.NoAccess,
|
||||
},
|
||||
{
|
||||
name: 'wordpress',
|
||||
role: UserRole.NoAccess,
|
||||
},
|
||||
{
|
||||
name: 'nextcloud',
|
||||
role: UserRole.NoAccess,
|
||||
},
|
||||
{
|
||||
name: 'zulip',
|
||||
role: UserRole.NoAccess,
|
||||
},
|
||||
];
|
||||
|
||||
export const initialUserForm = {
|
||||
id: '',
|
||||
name: '',
|
||||
email: '',
|
||||
app_roles: initialAppRoles,
|
||||
status: '',
|
||||
};
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { UserModal } from './UserModal';
|
||||
Loading…
Reference in a new issue