103 lines
4.5 KiB
TypeScript
103 lines
4.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import http from '@/api/http';
|
|
import { User } from '@/api/admin/user';
|
|
import { AdminTransformers } from '@/api/admin/transformers';
|
|
import { Dropdown } from '@/components/elements/dropdown';
|
|
import {
|
|
DotsVerticalIcon,
|
|
LockClosedIcon,
|
|
PaperAirplaneIcon,
|
|
PencilIcon,
|
|
PlusIcon,
|
|
TrashIcon,
|
|
} from '@heroicons/react/solid';
|
|
import { Button } from '@/components/elements/button/index';
|
|
import { Dialog } from '@/components/elements/dialog';
|
|
|
|
const UsersContainerV2 = () => {
|
|
const [ users, setUsers ] = useState<User[]>([]);
|
|
useEffect(() => {
|
|
document.title = 'Admin | Users';
|
|
}, []);
|
|
|
|
const [ visible, setVisible ] = useState(false);
|
|
|
|
useEffect(() => {
|
|
http.get('/api/application/users')
|
|
.then(({ data }) => {
|
|
setUsers(data.data.map(AdminTransformers.toUser));
|
|
})
|
|
.catch(console.error);
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<div className={'flex justify-end mb-4'}>
|
|
<Button className={'shadow focus:ring-offset-2 focus:ring-offset-neutral-800'}>
|
|
Add User <PlusIcon className={'ml-2 w-5 h-5'}/>
|
|
</Button>
|
|
</div>
|
|
<Dialog title={'Delete account'} visible={visible} onDismissed={() => setVisible(false)}>
|
|
<Dialog.Icon type={'danger'}/>
|
|
This account will be permanently deleted.
|
|
<Dialog.Buttons>
|
|
<Button.Text onClick={() => setVisible(false)}>Cancel</Button.Text>
|
|
<Button.Danger>Delete</Button.Danger>
|
|
</Dialog.Buttons>
|
|
</Dialog>
|
|
<table className={'min-w-full rounded bg-neutral-700'}>
|
|
<thead className={'bg-neutral-900'}>
|
|
<tr>
|
|
<th scope={'col'} className={'w-8'}/>
|
|
<th scope={'col'} className={'text-left px-6 py-2 w-full'}>Email</th>
|
|
<th scope={'col'}/>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users.map(user => (
|
|
<tr key={user.uuid}>
|
|
<td className={'whitespace-nowrap'}>
|
|
<div className={'flex justify-end items-center w-8'}>
|
|
<input type={'checkbox'}/>
|
|
</div>
|
|
</td>
|
|
<td className={'pl-6 py-4 whitespace-nowrap'}>
|
|
<div className={'flex items-center'}>
|
|
<div className={'w-10 h-10'}>
|
|
<img
|
|
src={user.avatarUrl}
|
|
className={'w-10 h-10 rounded-full'}
|
|
alt={'User avatar'}
|
|
/>
|
|
</div>
|
|
<div className={'ml-4'}>
|
|
<p className={'font-medium'}>
|
|
{user.email}
|
|
</p>
|
|
<p className={'text-sm text-neutral-400'}>
|
|
{user.uuid}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className={'px-6 py-4 whitespace-nowrap'}>
|
|
<Dropdown>
|
|
<Dropdown.Button className={'px-2'}>
|
|
<DotsVerticalIcon/>
|
|
</Dropdown.Button>
|
|
<Dropdown.Item icon={<PencilIcon/>}>Edit</Dropdown.Item>
|
|
<Dropdown.Item icon={<PaperAirplaneIcon/>}>Reset Password</Dropdown.Item>
|
|
<Dropdown.Item icon={<LockClosedIcon/>}>Suspend</Dropdown.Item>
|
|
<Dropdown.Gap/>
|
|
<Dropdown.Item icon={<TrashIcon/>} onClick={() => setVisible(true)} danger>Delete Account</Dropdown.Item>
|
|
</Dropdown>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UsersContainerV2;
|