105 lines
5.2 KiB
TypeScript
105 lines
5.2 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 { Menu } from '@headlessui/react';
|
||
|
|
import { ChevronDownIcon, LockClosedIcon } from '@heroicons/react/solid';
|
||
|
|
|
||
|
|
const UsersContainerV2 = () => {
|
||
|
|
const [ users, setUsers ] = useState<User[]>([]);
|
||
|
|
useEffect(() => {
|
||
|
|
document.title = 'Admin | Users';
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
http.get('/api/application/users')
|
||
|
|
.then(({ data }) => {
|
||
|
|
setUsers(data.data.map(AdminTransformers.toUser));
|
||
|
|
})
|
||
|
|
.catch(console.error);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={'overflow-hidden rounded bg-neutral-700'}>
|
||
|
|
<table className={'min-w-full'}>
|
||
|
|
<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'}>
|
||
|
|
<Menu as={'div'} className={'relative inline-block text-left'}>
|
||
|
|
<Menu.Button
|
||
|
|
className={'inline-flex justify-center w-full px-4 py-2 font-medium text-white rounded-md'}
|
||
|
|
>
|
||
|
|
Options
|
||
|
|
<ChevronDownIcon
|
||
|
|
aria-hidden={'true'}
|
||
|
|
className={'w-5 h-5 -mr-1 ml-2 text-neutral-100'}
|
||
|
|
/>
|
||
|
|
</Menu.Button>
|
||
|
|
<Menu.Items className={'absolute right-0 mt-2 origin-top-right bg-neutral-900 z-10 w-56'}>
|
||
|
|
<div className={'px-1 py-1'}>
|
||
|
|
<Menu.Item>
|
||
|
|
{() => (
|
||
|
|
<a href={'#'} className={'group flex rounded items-center w-full px-2 py-2 hover:bg-neutral-800'}>
|
||
|
|
<LockClosedIcon className={'w-5 h-5 mr-2'} />
|
||
|
|
<span>Reset Password</span>
|
||
|
|
</a>
|
||
|
|
)}
|
||
|
|
</Menu.Item>
|
||
|
|
<Menu.Item>
|
||
|
|
{() => (
|
||
|
|
<a href={'#'} className={'group flex rounded items-center w-full px-2 py-2'}>Delete</a>
|
||
|
|
)}
|
||
|
|
</Menu.Item>
|
||
|
|
<Menu.Item
|
||
|
|
disabled
|
||
|
|
>
|
||
|
|
<span className={'group flex rounded items-center w-full px-2 py-2 opacity-75'}>
|
||
|
|
Resend Invite
|
||
|
|
</span>
|
||
|
|
</Menu.Item>
|
||
|
|
</div>
|
||
|
|
</Menu.Items>
|
||
|
|
</Menu>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default UsersContainerV2;
|