Newer
Older
import React, { useEffect, useState } from 'react';
import { TrashIcon } from '@heroicons/react/outline';
import { useForm } from 'react-hook-form';
import { Modal, Banner, ConfirmationModal } from 'src/components';
import { Input } from 'src/components/Form';
import { useUsers } from 'src/services/users';
import { CurrentUserState } from 'src/services/users/redux';
import { appAccessList } from './consts';
import { UserModalProps } from './types';
export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
const [deleteModal, setDeleteModal] = useState(false);
const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById } = useUsers();
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
const { control, reset, handleSubmit } = useForm<CurrentUserState>({
defaultValues: {
name: null,
email: null,
id: null,
status: null,
},
});
useEffect(() => {
if (userId) {
loadUser(userId);
}
reset({ name: null, email: null, id: null, status: null });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userId]);
useEffect(() => {
if (user) {
reset(user);
}
return () => {
reset({ name: null, email: null, id: null, status: null });
};
}, [user, reset]);
const handleSave = async () => {
try {
if (userId) {
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
}
};
const handleKeyPress = (e: any) => {
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
handleSave();
}
};
const handleClose = () => {
onClose();
};
const deleteModalOpen = () => setDeleteModal(true);
const deleteModalClose = () => setDeleteModal(false);
const handleDelete = () => {
if (userId) {
deleteUserById(userId);
}
handleClose();
<>
<Modal
onClose={handleClose}
open={open}
onSave={handleSave}
isLoading={userModalLoading}
leftActions={
userId &&
user.email !== currentUser.email && (
<button
onClick={deleteModalOpen}
type="button"
className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
>
<TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Delete
</button>
)
}
useCancelButton
>
<div className="bg-white px-4">
<div className="space-y-4 divide-y divide-gray-200">
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">{userId ? 'Edit user' : 'Add new user'}</h3>
<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>
<div className="sm:col-span-6">
<Banner title="Editing user status, roles and app access coming soon." titleSm="Comming soon!" />
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<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>
<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">
Role
</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>User</option>
<option>Admin</option>
<option>Super Admin</option>
</select>
</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>
</li>
);
})}
</ul>
</div>
</Modal>
<ConfirmationModal
onDeleteAction={handleDelete}
open={deleteModal}
onClose={deleteModalClose}
title="Delete user"
body="Are you sure you want to delete this user? All of the user data will be permanently removed. This action cannot be undone."
/>
</>