dvkei/Pterodactyl-Panel
1
0
Fork 0
forked from Alex/Pterodactyl-Panel
Code Issues Pull Requests Projects Releases Wiki Activity

ui(admin): fix tables being covered by no items message

Browse Source
This commit is contained in:
Matthew Penner 2021-07-14 16:59:37 -06:00
parent c0e9f1adee
commit 779b0eca67
10 changed files with 574 additions and 554 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
resources/scripts/components/admin/databases/DatabasesContainer.tsx
View File

@ -61,7 +61,7 @@ const DatabasesContainer = () => {
if (query.length < 2) { if (query.length < 2) {
setFilters(null); setFilters(null);
} else { } else {
setFilters({ id: query, name: query, host: query }); setFilters({ name: query });
} }
return resolve(); return resolve();
}); });
@ -91,63 +91,65 @@ const DatabasesContainer = () => {
<FlashMessageRender byKey={'databases'} css={tw`mb-4`}/> <FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ databases === undefined || (error && isValidating) ? <ContentWrapper
<Loading/> checked={selectedDatabasesLength === (length === 0 ? -1 : length)}
: onSelectAllClick={onSelectAllClick}
length < 1 ? onSearch={onSearch}
<NoItems/> >
: <Pagination data={databases} onPageSelect={setPage}>
<ContentWrapper <div css={tw`overflow-x-auto`}>
checked={selectedDatabasesLength === (length === 0 ? -1 : length)} <table css={tw`w-full table-auto`}>
onSelectAllClick={onSelectAllClick} <TableHead>
onSearch={onSearch} <TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
> <TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<Pagination data={databases} onPageSelect={setPage}> <TableHeader name={'Address'}/>
<div css={tw`overflow-x-auto`}> <TableHeader name={'Username'} direction={sort === 'username' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('username')}/>
<table css={tw`w-full table-auto`}> </TableHead>
<TableHead>
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<TableHeader name={'Address'}/>
<TableHeader name={'Username'} direction={sort === 'username' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('username')}/>
</TableHead>
<TableBody> <TableBody>
{ { databases !== undefined && !error && !isValidating && length > 0 &&
databases.items.map(database => ( databases.items.map(database => (
<TableRow key={database.id}> <TableRow key={database.id}>
<td css={tw`pl-6`}> <td css={tw`pl-6`}>
<RowCheckbox id={database.id}/> <RowCheckbox id={database.id}/>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={database.id.toString()}> <CopyOnClick text={database.id.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.id}</code> <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.id}</code>
</CopyOnClick> </CopyOnClick>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/${database.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`${match.url}/${database.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
{database.name} {database.name}
</NavLink> </NavLink>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={database.getAddress()}> <CopyOnClick text={database.getAddress()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.getAddress()}</code> <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.getAddress()}</code>
</CopyOnClick> </CopyOnClick>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.username}</td> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.username}</td>
</TableRow> </TableRow>
)) ))
} }
</TableBody> </TableBody>
</table> </table>
</div>
</Pagination> { databases === undefined || (error && isValidating) ?
</ContentWrapper> <Loading/>
} :
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );

96
resources/scripts/components/admin/locations/LocationsContainer.tsx
View File

@ -61,7 +61,7 @@ const LocationsContainer = () => {
if (query.length < 2) { if (query.length < 2) {
setFilters(null); setFilters(null);
} else { } else {
setFilters({ short: query, long: query }); setFilters({ short: query });
} }
return resolve(); return resolve();
}); });
@ -87,56 +87,58 @@ const LocationsContainer = () => {
<FlashMessageRender byKey={'locations'} css={tw`mb-4`}/> <FlashMessageRender byKey={'locations'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ locations === undefined || (error && isValidating) ? <ContentWrapper
<Loading/> checked={selectedLocationsLength === (length === 0 ? -1 : length)}
: onSelectAllClick={onSelectAllClick}
length < 1 ? onSearch={onSearch}
<NoItems/> >
: <Pagination data={locations} onPageSelect={setPage}>
<ContentWrapper <div css={tw`overflow-x-auto`}>
checked={selectedLocationsLength === (length === 0 ? -1 : length)} <table css={tw`w-full table-auto`}>
onSelectAllClick={onSelectAllClick} <TableHead>
onSearch={onSearch} <TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
> <TableHeader name={'Short Name'} direction={sort === 'short' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('short')}/>
<Pagination data={locations} onPageSelect={setPage}> <TableHeader name={'Long Name'} direction={sort === 'long' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('long')}/>
<div css={tw`overflow-x-auto`}> </TableHead>
<table css={tw`w-full table-auto`}>
<TableHead>
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
<TableHeader name={'Short Name'} direction={sort === 'short' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('short')}/>
<TableHeader name={'Long Name'} direction={sort === 'long' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('long')}/>
</TableHead>
<TableBody> <TableBody>
{ { locations !== undefined && !error && !isValidating && length > 0 &&
locations.items.map(location => ( locations.items.map(location => (
<TableRow key={location.id}> <TableRow key={location.id}>
<td css={tw`pl-6`}> <td css={tw`pl-6`}>
<RowCheckbox id={location.id}/> <RowCheckbox id={location.id}/>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={location.id.toString()}> <CopyOnClick text={location.id.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{location.id}</code> <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{location.id}</code>
</CopyOnClick> </CopyOnClick>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/${location.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`${match.url}/${location.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
{location.short} {location.short}
</NavLink> </NavLink>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{location.long}</td> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{location.long}</td>
</TableRow> </TableRow>
)) ))
} }
</TableBody> </TableBody>
</table> </table>
</div>
</Pagination> { locations === undefined || (error && isValidating) ?
</ContentWrapper> <Loading/>
} :
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );

165
resources/scripts/components/admin/mounts/MountsContainer.tsx
View File

@ -61,7 +61,7 @@ const MountsContainer = () => {
if (query.length < 2) { if (query.length < 2) {
setFilters(null); setFilters(null);
} else { } else {
setFilters({ id: query }); setFilters({ name: query });
} }
return resolve(); return resolve();
}); });
@ -89,93 +89,96 @@ const MountsContainer = () => {
<FlashMessageRender byKey={'mounts'} css={tw`mb-4`}/> <FlashMessageRender byKey={'mounts'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ mounts === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper
checked={selectedMountsLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick}
onSearch={onSearch}
>
<Pagination data={mounts} onPageSelect={setPage}>
<div css={tw`overflow-x-auto`}>
<table css={tw`w-full table-auto`}>
<TableHead>
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<TableHeader name={'Source Path'} direction={sort === 'source' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('source')}/>
<TableHeader name={'Target Path'} direction={sort === 'target' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('target')}/>
<th css={tw`px-6 py-2`}/>
<th css={tw`px-6 py-2`}/>
</TableHead>
<TableBody> <ContentWrapper
{ checked={selectedMountsLength === (length === 0 ? -1 : length)}
mounts.items.map(mount => ( onSelectAllClick={onSelectAllClick}
<TableRow key={mount.id}> onSearch={onSearch}
<td css={tw`pl-6`}> >
<RowCheckbox id={mount.id}/> <Pagination data={mounts} onPageSelect={setPage}>
</td> <div css={tw`overflow-x-auto`}>
<table css={tw`w-full table-auto`}>
<TableHead>
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<TableHeader name={'Source Path'} direction={sort === 'source' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('source')}/>
<TableHeader name={'Target Path'} direction={sort === 'target' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('target')}/>
<th css={tw`px-6 py-2`}/>
<th css={tw`px-6 py-2`}/>
</TableHead>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <TableBody>
<CopyOnClick text={mount.id.toString()}> { mounts !== undefined && !error && !isValidating && length > 0 &&
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.id}</code> mounts.items.map(mount => (
</CopyOnClick> <TableRow key={mount.id}>
</td> <td css={tw`pl-6`}>
<RowCheckbox id={mount.id}/>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/${mount.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <CopyOnClick text={mount.id.toString()}>
{mount.name} <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.id}</code>
</NavLink> </CopyOnClick>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={mount.source.toString()}> <NavLink to={`${match.url}/${mount.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.source}</code> {mount.name}
</CopyOnClick> </NavLink>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={mount.target.toString()}> <CopyOnClick text={mount.source.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.target}</code> <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.source}</code>
</CopyOnClick> </CopyOnClick>
</td> </td>
<td css={tw`px-6 whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
{ mount.readOnly ? <CopyOnClick text={mount.target.toString()}>
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}> <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.target}</code>
Read Only </CopyOnClick>
</span> </td>
:
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
Writable
</span>
}
</td>
<td css={tw`px-6 whitespace-nowrap`}> <td css={tw`px-6 whitespace-nowrap`}>
{ mount.userMountable ? { mount.readOnly ?
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}> <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
Mountable Read Only
</span> </span>
: :
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}> <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
Admin Only Writable
</span> </span>
} }
</td> </td>
</TableRow>
)) <td css={tw`px-6 whitespace-nowrap`}>
} { mount.userMountable ?
</TableBody> <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
</table> Mountable
</div> </span>
</Pagination> :
</ContentWrapper> <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
} Admin Only
</span>
}
</td>
</TableRow>
))
}
</TableBody>
</table>
{ mounts === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );

94
resources/scripts/components/admin/nests/NestEggTable.tsx
View File

@ -70,56 +70,58 @@ const EggsTable = () => {
return ( return (
<AdminTable> <AdminTable>
{ eggs === undefined || (error && isValidating) ? <ContentWrapper
<Loading/> checked={selectedEggsLength === (length === 0 ? -1 : length)}
: onSelectAllClick={onSelectAllClick}
length < 1 ? onSearch={onSearch}
<NoItems/> >
: <Pagination data={eggs} onPageSelect={setPage}>
<ContentWrapper <div css={tw`overflow-x-auto`}>
checked={selectedEggsLength === (length === 0 ? -1 : length)} <table css={tw`w-full table-auto`}>
onSelectAllClick={onSelectAllClick} <TableHead>
onSearch={onSearch} <TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
> <TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<Pagination data={eggs} onPageSelect={setPage}> <TableHeader name={'Description'}/>
<div css={tw`overflow-x-auto`}> </TableHead>
<table css={tw`w-full table-auto`}>
<TableHead>
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<TableHeader name={'Description'}/>
</TableHead>
<TableBody> <TableBody>
{ { eggs !== undefined && !error && !isValidating && length > 0 &&
eggs.items.map(egg => ( eggs.items.map(egg => (
<TableRow key={egg.id}> <TableRow key={egg.id}>
<td css={tw`pl-6`}> <td css={tw`pl-6`}>
<RowCheckbox id={egg.id}/> <RowCheckbox id={egg.id}/>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={egg.id.toString()}> <CopyOnClick text={egg.id.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{egg.id}</code> <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{egg.id}</code>
</CopyOnClick> </CopyOnClick>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/eggs/${egg.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`${match.url}/eggs/${egg.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
{egg.name} {egg.name}
</NavLink> </NavLink>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{egg.description}</td> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{egg.description}</td>
</TableRow> </TableRow>
)) ))
} }
</TableBody> </TableBody>
</table> </table>
</div>
</Pagination> { eggs === undefined || (error && isValidating) ?
</ContentWrapper> <Loading/>
} :
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
</AdminTable> </AdminTable>
); );
}; };

96
resources/scripts/components/admin/nests/NestsContainer.tsx
View File

@ -61,7 +61,7 @@ const NestsContainer = () => {
if (query.length < 2) { if (query.length < 2) {
setFilters(null); setFilters(null);
} else { } else {
setFilters({ id: query }); setFilters({ name: query });
} }
return resolve(); return resolve();
}); });
@ -87,56 +87,58 @@ const NestsContainer = () => {
<FlashMessageRender byKey={'nests'} css={tw`mb-4`}/> <FlashMessageRender byKey={'nests'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ nests === undefined || (error && isValidating) ? <ContentWrapper
<Loading/> checked={selectedNestsLength === (length === 0 ? -1 : length)}
: onSelectAllClick={onSelectAllClick}
length < 1 ? onSearch={onSearch}
<NoItems/> >
: <Pagination data={nests} onPageSelect={setPage}>
<ContentWrapper <div css={tw`overflow-x-auto`}>
checked={selectedNestsLength === (length === 0 ? -1 : length)} <table css={tw`w-full table-auto`}>
onSelectAllClick={onSelectAllClick} <TableHead>
onSearch={onSearch} <TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
> <TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<Pagination data={nests} onPageSelect={setPage}> <TableHeader name={'Description'}/>
<div css={tw`overflow-x-auto`}> </TableHead>
<table css={tw`w-full table-auto`}>
<TableHead>
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<TableHeader name={'Description'}/>
</TableHead>
<TableBody> <TableBody>
{ { nests !== undefined && !error && !isValidating && length > 0 &&
nests.items.map(nest => ( nests.items.map(nest => (
<TableRow key={nest.id}> <TableRow key={nest.id}>
<td css={tw`pl-6`}> <td css={tw`pl-6`}>
<RowCheckbox id={nest.id}/> <RowCheckbox id={nest.id}/>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={nest.id.toString()}> <CopyOnClick text={nest.id.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{nest.id}</code> <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{nest.id}</code>
</CopyOnClick> </CopyOnClick>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/${nest.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`${match.url}/${nest.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
{nest.name} {nest.name}
</NavLink> </NavLink>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{nest.description}</td> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{nest.description}</td>
</TableRow> </TableRow>
)) ))
} }
</TableBody> </TableBody>
</table> </table>
</div>
</Pagination> { nests === undefined || (error && isValidating) ?
</ContentWrapper> <Loading/>
} :
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );

2
resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx
View File

@ -21,7 +21,7 @@ export default () => {
const match = useRouteMatch<{ id: string }>(); const match = useRouteMatch<{ id: string }>();
const [ ips, setIPs ] = useState<Option[]>([]); const [ ips, setIPs ] = useState<Option[]>([]);
const [ ports, setPorts ] = useState<Option[]>([]); const [ ports ] = useState<Option[]>([]);
useEffect(() => { useEffect(() => {
getAllocations(match.params.id) getAllocations(match.params.id)

173
resources/scripts/components/admin/nodes/NodesContainer.tsx
View File

@ -93,100 +93,103 @@ const NodesContainer = () => {
<FlashMessageRender byKey={'nodes'} css={tw`mb-4`}/> <FlashMessageRender byKey={'nodes'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ nodes === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper
checked={selectedNodesLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick}
onSearch={onSearch}
>
<Pagination data={nodes} onPageSelect={setPage}>
<div css={tw`overflow-x-auto`}>
<table css={tw`w-full table-auto`}>
<TableHead>
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<TableHeader name={'Location'} direction={sort === 'location_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('location_id')}/>
<TableHeader name={'FQDN'} direction={sort === 'fqdn' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('fqdn')}/>
<TableHeader name={'Total Memory'} direction={sort === 'memory' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('memory')}/>
<TableHeader name={'Total Disk'} direction={sort === 'disk' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('disk')}/>
<TableHeader/>
<TableHeader/>
</TableHead>
<TableBody> <ContentWrapper
{ checked={selectedNodesLength === (length === 0 ? -1 : length)}
nodes.items.map(node => ( onSelectAllClick={onSelectAllClick}
<TableRow key={node.id}> onSearch={onSearch}
<td css={tw`pl-6`}> >
<RowCheckbox id={node.id}/> <Pagination data={nodes} onPageSelect={setPage}>
</td> <div css={tw`overflow-x-auto`}>
<table css={tw`w-full table-auto`}>
<TableHead>
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<TableHeader name={'Location'} direction={sort === 'location_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('location_id')}/>
<TableHeader name={'FQDN'} direction={sort === 'fqdn' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('fqdn')}/>
<TableHeader name={'Total Memory'} direction={sort === 'memory' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('memory')}/>
<TableHeader name={'Total Disk'} direction={sort === 'disk' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('disk')}/>
<TableHeader/>
<TableHeader/>
</TableHead>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <TableBody>
<CopyOnClick text={node.id.toString()}> { nodes !== undefined && !error && !isValidating && length > 0 &&
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{node.id}</code> nodes.items.map(node => (
</CopyOnClick> <TableRow key={node.id}>
</td> <td css={tw`pl-6`}>
<RowCheckbox id={node.id}/>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/${node.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <CopyOnClick text={node.id.toString()}>
{node.name} <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{node.id}</code>
</NavLink> </CopyOnClick>
</td> </td>
{/* TODO: Have permission check for displaying location information. */} <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}> <NavLink to={`${match.url}/${node.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
<NavLink to={`/admin/locations/${node.relations.location?.id}`} css={tw`text-primary-400 hover:text-primary-300`}> {node.name}
<div css={tw`text-sm text-neutral-200`}> </NavLink>
{node.relations.location?.short} </td>
</div>
<div css={tw`text-sm text-neutral-400`}> {/* TODO: Have permission check for displaying location information. */}
{node.relations.location?.long} <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
</div> <NavLink to={`/admin/locations/${node.relations.location?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
</NavLink> <div css={tw`text-sm text-neutral-200`}>
</td> {node.relations.location?.short}
</div>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <div css={tw`text-sm text-neutral-400`}>
<CopyOnClick text={node.fqdn}> {node.relations.location?.long}
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{node.fqdn}</code> </div>
</CopyOnClick> </NavLink>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.memory))}</td> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.disk))}</td> <CopyOnClick text={node.fqdn}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{node.fqdn}</code>
</CopyOnClick>
</td>
<td css={tw`px-6 whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.memory))}</td>
{node.scheme === 'https' ? <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.disk))}</td>
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
Secure
</span>
:
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}>
Non-Secure
</span>
}
</td>
<td css={tw`px-6 whitespace-nowrap`}> <td css={tw`px-6 whitespace-nowrap`}>
{/* TODO: Change color based off of online/offline status */} {node.scheme === 'https' ?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={[ tw`h-5 w-5`, node.scheme === 'https' ? tw`text-green-200` : tw`text-red-300` ]}> <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
<path clipRule="evenodd" fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" /> Secure
</svg> </span>
</td> :
</TableRow> <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}>
)) Non-Secure
} </span>
</TableBody> }
</table> </td>
</div>
</Pagination> <td css={tw`px-6 whitespace-nowrap`}>
</ContentWrapper> {/* TODO: Change color based off of online/offline status */}
} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={[ tw`h-5 w-5`, node.scheme === 'https' ? tw`text-green-200` : tw`text-red-300` ]}>
<path clipRule="evenodd" fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
</svg>
</td>
</TableRow>
))
}
</TableBody>
</table>
{ nodes === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );

94
resources/scripts/components/admin/roles/RolesContainer.tsx
View File

@ -87,56 +87,58 @@ const RolesContainer = () => {
<FlashMessageRender byKey={'roles'} css={tw`mb-4`}/> <FlashMessageRender byKey={'roles'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ roles === undefined || (error && isValidating) ? <ContentWrapper
<Loading/> checked={selectedRolesLength === (length === 0 ? -1 : length)}
: onSelectAllClick={onSelectAllClick}
length < 1 ? onSearch={onSearch}
<NoItems/> >
: <Pagination data={roles} onPageSelect={setPage}>
<ContentWrapper <div css={tw`overflow-x-auto`}>
checked={selectedRolesLength === (length === 0 ? -1 : length)} <table css={tw`w-full table-auto`}>
onSelectAllClick={onSelectAllClick} <TableHead>
onSearch={onSearch} <TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
> <TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<Pagination data={roles} onPageSelect={setPage}> <TableHeader name={'Description'}/>
<div css={tw`overflow-x-auto`}> </TableHead>
<table css={tw`w-full table-auto`}>
<TableHead>
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<TableHeader name={'Description'}/>
</TableHead>
<TableBody> <TableBody>
{ { roles !== undefined && !error && !isValidating && length > 0 &&
roles.items.map(role => ( roles.items.map(role => (
<TableRow key={role.id}> <TableRow key={role.id}>
<td css={tw`pl-6`}> <td css={tw`pl-6`}>
<RowCheckbox id={role.id}/> <RowCheckbox id={role.id}/>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={role.id.toString()}> <CopyOnClick text={role.id.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{role.id}</code> <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{role.id}</code>
</CopyOnClick> </CopyOnClick>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/${role.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`${match.url}/${role.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
{role.name} {role.name}
</NavLink> </NavLink>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.description}</td> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.description}</td>
</TableRow> </TableRow>
)) ))
} }
</TableBody> </TableBody>
</table> </table>
</div>
</Pagination> { roles === undefined || (error && isValidating) ?
</ContentWrapper> <Loading/>
} :
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );

166
resources/scripts/components/admin/servers/ServersContainer.tsx
View File

@ -1,7 +1,7 @@
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers'; import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
import AdminCheckbox from '@/components/admin/AdminCheckbox'; import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, { ContentWrapper, Loading, Pagination, TableBody, TableHead, TableHeader } from '@/components/admin/AdminTable'; import AdminTable, { ContentWrapper, Loading, NoItems, Pagination, TableBody, TableHead, TableHeader } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button'; import Button from '@/components/elements/Button';
import CopyOnClick from '@/components/elements/CopyOnClick'; import CopyOnClick from '@/components/elements/CopyOnClick';
import FlashMessageRender from '@/components/FlashMessageRender'; import FlashMessageRender from '@/components/FlashMessageRender';
@ -36,7 +36,7 @@ const ServersContainer = () => {
const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext); const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext);
const { clearFlashes, clearAndAddHttpError } = useFlash(); const { clearFlashes, clearAndAddHttpError } = useFlash();
const { data: servers, error } = getServers([ 'node', 'user' ]); const { data: servers, error, isValidating } = getServers([ 'node', 'user' ]);
const length = servers?.items?.length || 0; const length = servers?.items?.length || 0;
@ -96,97 +96,99 @@ const ServersContainer = () => {
onSelectAllClick={onSelectAllClick} onSelectAllClick={onSelectAllClick}
onSearch={onSearch} onSearch={onSearch}
> >
{servers === undefined ? <Pagination data={servers} onPageSelect={setPage}>
<Loading/> <div css={tw`overflow-x-auto`}>
: <table css={tw`w-full table-auto`}>
// length < 1 ? <TableHead>
// <NoItems/> <TableHeader name={'Identifier'} direction={sort === 'uuidShort' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('uuidShort')}/>
// : <TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<Pagination data={servers} onPageSelect={setPage}> <TableHeader name={'Owner'} direction={sort === 'owner_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('owner_id')}/>
<div css={tw`overflow-x-auto`}> <TableHeader name={'Node'} direction={sort === 'node_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('node_id')}/>
<table css={tw`w-full table-auto`}> <TableHeader name={'Status'} direction={sort === 'status' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('status')}/>
<TableHead> </TableHead>
<TableHeader name={'Identifier'} direction={sort === 'uuidShort' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('uuidShort')}/>
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
<TableHeader name={'Owner'} direction={sort === 'owner_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('owner_id')}/>
<TableHeader name={'Node'} direction={sort === 'node_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('node_id')}/>
<TableHeader name={'Status'} direction={sort === 'status' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('status')}/>
</TableHead>
<TableBody> <TableBody>
{ { servers !== undefined && !error && !isValidating && length > 0 &&
servers?.items.map(server => ( servers.items.map(server => (
<tr key={server.id} css={tw`h-14 hover:bg-neutral-600`}> <tr key={server.id} css={tw`h-14 hover:bg-neutral-600`}>
<td css={tw`pl-6`}> <td css={tw`pl-6`}>
<RowCheckbox id={server.id}/> <RowCheckbox id={server.id}/>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={server.identifier}> <CopyOnClick text={server.identifier}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{server.identifier}</code> <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{server.identifier}</code>
</CopyOnClick> </CopyOnClick>
</td> </td>
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/${server.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`${match.url}/${server.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
{server.name} {server.name}
</NavLink> </NavLink>
</td> </td>
{/* TODO: Have permission check for displaying user information. */} {/* TODO: Have permission check for displaying user information. */}
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
<NavLink to={`/admin/users/${server.relations.user?.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`/admin/users/${server.relations.user?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
<div css={tw`text-sm text-neutral-200`}> <div css={tw`text-sm text-neutral-200`}>
{server.relations.user?.firstName} {server.relations.user?.lastName} {server.relations.user?.firstName} {server.relations.user?.lastName}
</div> </div>
<div css={tw`text-sm text-neutral-400`}> <div css={tw`text-sm text-neutral-400`}>
{server.relations.user?.email} {server.relations.user?.email}
</div> </div>
</NavLink> </NavLink>
</td> </td>
{/* TODO: Have permission check for displaying node information. */} {/* TODO: Have permission check for displaying node information. */}
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
<NavLink to={`/admin/nodes/${server.relations.node?.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`/admin/nodes/${server.relations.node?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
<div css={tw`text-sm text-neutral-200`}> <div css={tw`text-sm text-neutral-200`}>
{server.relations.node?.name} {server.relations.node?.name}
</div> </div>
<div css={tw`text-sm text-neutral-400`}> <div css={tw`text-sm text-neutral-400`}>
{server.relations.node?.fqdn} {server.relations.node?.fqdn}
</div> </div>
</NavLink> </NavLink>
</td> </td>
<td css={tw`px-6 whitespace-nowrap`}> <td css={tw`px-6 whitespace-nowrap`}>
{server.status === 'installing' ? {server.status === 'installing' ?
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
Installing
</span>
:
server.status === 'transferring' ?
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}> <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
Installing Transferring
</span> </span>
: : server.status === 'suspended' ?
server.status === 'transferring' ? <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}>
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}> Suspended
Transferring
</span> </span>
: server.status === 'suspended' ? :
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}> <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
Suspended Active
</span> </span>
: }
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}> </td>
Active </tr>
</span> ))
} }
</td> </TableBody>
</tr> </table>
))
} { servers === undefined || (error && isValidating) ?
</TableBody> <Loading/>
</table> :
</div> length < 1 ?
</Pagination> <NoItems/>
} :
null
}
</div>
</Pagination>
</ContentWrapper> </ContentWrapper>
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>

134
resources/scripts/components/admin/users/UsersContainer.tsx
View File

@ -91,80 +91,82 @@ const UsersContainer = () => {
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/> <FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ users === undefined || (error && isValidating) ? <ContentWrapper
<Loading/> checked={selectedUserLength === (length === 0 ? -1 : length)}
: onSelectAllClick={onSelectAllClick}
length < 1 ? onSearch={onSearch}
<NoItems/> >
: <Pagination data={users} onPageSelect={setPage}>
<ContentWrapper <div css={tw`overflow-x-auto`}>
checked={selectedUserLength === (length === 0 ? -1 : length)} <table css={tw`w-full table-auto`}>
onSelectAllClick={onSelectAllClick} <TableHead>
onSearch={onSearch} <TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
> <TableHeader name={'Name'} direction={sort === 'email' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('email')}/>
<Pagination data={users} onPageSelect={setPage}> <TableHeader name={'Username'} direction={sort === 'username' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('username')}/>
<div css={tw`overflow-x-auto`}> <TableHeader name={'Status'}/>
<table css={tw`w-full table-auto`}> <TableHeader name={'Role'} direction={sort === 'admin_role_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('admin_role_id')}/>
<TableHead> </TableHead>
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
<TableHeader name={'Name'} direction={sort === 'email' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('email')}/>
<TableHeader name={'Username'} direction={sort === 'username' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('username')}/>
<TableHeader name={'Status'}/>
<TableHeader name={'Role'} direction={sort === 'admin_role_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('admin_role_id')}/>
</TableHead>
<TableBody> <TableBody>
{ { users !== undefined && !error && !isValidating && length > 0 &&
users.items.map(user => ( users.items.map(user => (
<tr key={user.id} css={tw`h-14 hover:bg-neutral-600`}> <tr key={user.id} css={tw`h-14 hover:bg-neutral-600`}>
<td css={tw`pl-6`}> <td css={tw`pl-6`}>
<RowCheckbox id={user.id}/> <RowCheckbox id={user.id}/>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={user.id.toString()}> <CopyOnClick text={user.id.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{user.id}</code> <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{user.id}</code>
</CopyOnClick> </CopyOnClick>
</td> </td>
<td css={tw`px-6 whitespace-nowrap`}> <td css={tw`px-6 whitespace-nowrap`}>
<NavLink to={`${match.url}/${user.id}`}> <NavLink to={`${match.url}/${user.id}`}>
<div css={tw`flex items-center`}> <div css={tw`flex items-center`}>
<div css={tw`flex-shrink-0 h-10 w-10`}> <div css={tw`flex-shrink-0 h-10 w-10`}>
<img css={tw`h-10 w-10 rounded-full`} alt="" src={user.avatarURL + '?s=40'}/> <img css={tw`h-10 w-10 rounded-full`} alt="" src={user.avatarURL + '?s=40'}/>
</div> </div>
<div css={tw`ml-4`}> <div css={tw`ml-4`}>
<div css={tw`text-sm text-neutral-200`}> <div css={tw`text-sm text-neutral-200`}>
{user.firstName} {user.lastName} {user.firstName} {user.lastName}
</div>
<div css={tw`text-sm text-neutral-400`}>
{user.email}
</div>
</div>
</div> </div>
</NavLink>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.username}</td> <div css={tw`text-sm text-neutral-400`}>
{user.email}
</div>
</div>
</div>
</NavLink>
</td>
<td css={tw`px-6 whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.username}</td>
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
Active
</span>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.roleName || 'None'}</td> <td css={tw`px-6 whitespace-nowrap`}>
</tr> <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
)) Active
} </span>
</TableBody> </td>
</table>
</div> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.roleName || 'None'}</td>
</Pagination> </tr>
</ContentWrapper> ))
} }
</TableBody>
</table>
{ users === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );