Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial concept at a user table listing using Tailwind JIT & Headless UI

Browse source
This commit is contained in:
Dane Everitt 2022-02-20 19:10:58 -05:00
parent 4920ca41a8
commit bc59ffbf37
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
4 changed files with 118 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -42,6 +42,7 @@
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@headlessui/react": "^1.5.0",
"@heroicons/react": "^1.0.5",
"@hot-loader/react-dom": "^16.14.0",
"axios": "^0.21.4",

104
resources/scripts/components/admin/users/UsersContainerV2.tsx Normal file
View file

@ -0,0 +1,104 @@
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;

4
resources/scripts/routers/AdminRouter.tsx
View file

@ -15,7 +15,6 @@ import LocationEditContainer from '@/components/admin/locations/LocationEditCont
import ServersContainer from '@/components/admin/servers/ServersContainer';
import NewServerContainer from '@/components/admin/servers/NewServerContainer';
import ServerRouter from '@/components/admin/servers/ServerRouter';
import UsersContainer from '@/components/admin/users/UsersContainer';
import NewUserContainer from '@/components/admin/users/NewUserContainer';
import UserRouter from '@/components/admin/users/UserRouter';
import RolesContainer from '@/components/admin/roles/RolesContainer';
@ -46,6 +45,7 @@ import {
import CollapsedIcon from '@/assets/images/pterodactyl.svg';
import Sidebar from '@/components/admin/Sidebar';
import useUserPersistedState from '@/plugins/useUserPersistedState';
import UsersContainerV2 from '@/components/admin/users/UsersContainerV2';
const AdminRouter = ({ location, match }: RouteComponentProps) => {
const email = useStoreState((state: State<ApplicationStore>) => state.user.data!.email);
@ -132,7 +132,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
<Route path={`${match.path}/servers`} component={ServersContainer} exact/>
<Route path={`${match.path}/servers/new`} component={NewServerContainer} exact/>
<Route path={`${match.path}/servers/:id`} component={ServerRouter}/>
<Route path={`${match.path}/users`} component={UsersContainer} exact/>
<Route path={`${match.path}/users`} component={UsersContainerV2} exact/>
<Route path={`${match.path}/users/new`} component={NewUserContainer} exact/>
<Route path={`${match.path}/users/:id`} component={UserRouter}/>
<Route path={`${match.path}/roles`} component={RolesContainer} exact/>

11
yarn.lock
View file

@ -2474,6 +2474,16 @@ __metadata:
languageName: node
linkType: hard
"@headlessui/react@npm:^1.5.0":
version: 1.5.0
resolution: "@headlessui/react@npm:1.5.0"
peerDependencies:
react: ^16 || ^17 || ^18
react-dom: ^16 || ^17 || ^18
checksum: e3373dfb73936950d659a87718fb9fdedc599b344b30cb0d8b1ef0a2ec13d6f405c653fa51284236788658840ece82c6a8538a5a5931e595274e9590b2020079
languageName: node
linkType: hard
"@heroicons/react@npm:^1.0.5":
version: 1.0.5
resolution: "@heroicons/react@npm:1.0.5"
@ -10933,6 +10943,7 @@ fsevents@^1.2.7:
"@fortawesome/free-regular-svg-icons": ^5.15.4
"@fortawesome/free-solid-svg-icons": ^5.15.4
"@fortawesome/react-fontawesome": ^0.1.16
"@headlessui/react": ^1.5.0
"@heroicons/react": ^1.0.5
"@hot-loader/react-dom": ^16.14.0
"@tailwindcss/forms": ^0.4.0