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

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

20
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,12 +91,6 @@ const DatabasesContainer = () => {
<FlashMessageRender byKey={'databases'} css={tw`mb-4`}/> <FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ databases === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper <ContentWrapper
checked={selectedDatabasesLength === (length === 0 ? -1 : length)} checked={selectedDatabasesLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick} onSelectAllClick={onSelectAllClick}
@ -113,7 +107,7 @@ const DatabasesContainer = () => {
</TableHead> </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`}>
@ -144,10 +138,18 @@ const DatabasesContainer = () => {
} }
</TableBody> </TableBody>
</table> </table>
{ databases === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div> </div>
</Pagination> </Pagination>
</ContentWrapper> </ContentWrapper>
}
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );

20
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,12 +87,6 @@ const LocationsContainer = () => {
<FlashMessageRender byKey={'locations'} css={tw`mb-4`}/> <FlashMessageRender byKey={'locations'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ locations === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper <ContentWrapper
checked={selectedLocationsLength === (length === 0 ? -1 : length)} checked={selectedLocationsLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick} onSelectAllClick={onSelectAllClick}
@ -108,7 +102,7 @@ const LocationsContainer = () => {
</TableHead> </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`}>
@ -133,10 +127,18 @@ const LocationsContainer = () => {
} }
</TableBody> </TableBody>
</table> </table>
{ locations === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div> </div>
</Pagination> </Pagination>
</ContentWrapper> </ContentWrapper>
}
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );

21
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,12 +89,7 @@ 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 <ContentWrapper
checked={selectedMountsLength === (length === 0 ? -1 : length)} checked={selectedMountsLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick} onSelectAllClick={onSelectAllClick}
@ -113,7 +108,7 @@ const MountsContainer = () => {
</TableHead> </TableHead>
<TableBody> <TableBody>
{ { mounts !== undefined && !error && !isValidating && length > 0 &&
mounts.items.map(mount => ( mounts.items.map(mount => (
<TableRow key={mount.id}> <TableRow key={mount.id}>
<td css={tw`pl-6`}> <td css={tw`pl-6`}>
@ -172,10 +167,18 @@ const MountsContainer = () => {
} }
</TableBody> </TableBody>
</table> </table>
{ mounts === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div> </div>
</Pagination> </Pagination>
</ContentWrapper> </ContentWrapper>
}
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );

18
resources/scripts/components/admin/nests/NestEggTable.tsx
View file

@ -70,12 +70,6 @@ const EggsTable = () => {
return ( return (
<AdminTable> <AdminTable>
{ eggs === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper <ContentWrapper
checked={selectedEggsLength === (length === 0 ? -1 : length)} checked={selectedEggsLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick} onSelectAllClick={onSelectAllClick}
@ -91,7 +85,7 @@ const EggsTable = () => {
</TableHead> </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`}>
@ -116,10 +110,18 @@ const EggsTable = () => {
} }
</TableBody> </TableBody>
</table> </table>
{ eggs === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div> </div>
</Pagination> </Pagination>
</ContentWrapper> </ContentWrapper>
}
</AdminTable> </AdminTable>
); );
}; };

20
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,12 +87,6 @@ const NestsContainer = () => {
<FlashMessageRender byKey={'nests'} css={tw`mb-4`}/> <FlashMessageRender byKey={'nests'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ nests === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper <ContentWrapper
checked={selectedNestsLength === (length === 0 ? -1 : length)} checked={selectedNestsLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick} onSelectAllClick={onSelectAllClick}
@ -108,7 +102,7 @@ const NestsContainer = () => {
</TableHead> </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`}>
@ -133,10 +127,18 @@ const NestsContainer = () => {
} }
</TableBody> </TableBody>
</table> </table>
{ nests === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div> </div>
</Pagination> </Pagination>
</ContentWrapper> </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)

19
resources/scripts/components/admin/nodes/NodesContainer.tsx
View file

@ -93,12 +93,7 @@ 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 <ContentWrapper
checked={selectedNodesLength === (length === 0 ? -1 : length)} checked={selectedNodesLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick} onSelectAllClick={onSelectAllClick}
@ -119,7 +114,7 @@ const NodesContainer = () => {
</TableHead> </TableHead>
<TableBody> <TableBody>
{ { nodes !== undefined && !error && !isValidating && length > 0 &&
nodes.items.map(node => ( nodes.items.map(node => (
<TableRow key={node.id}> <TableRow key={node.id}>
<td css={tw`pl-6`}> <td css={tw`pl-6`}>
@ -183,10 +178,18 @@ const NodesContainer = () => {
} }
</TableBody> </TableBody>
</table> </table>
{ nodes === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div> </div>
</Pagination> </Pagination>
</ContentWrapper> </ContentWrapper>
}
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );

18
resources/scripts/components/admin/roles/RolesContainer.tsx
View file

@ -87,12 +87,6 @@ const RolesContainer = () => {
<FlashMessageRender byKey={'roles'} css={tw`mb-4`}/> <FlashMessageRender byKey={'roles'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ roles === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper <ContentWrapper
checked={selectedRolesLength === (length === 0 ? -1 : length)} checked={selectedRolesLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick} onSelectAllClick={onSelectAllClick}
@ -108,7 +102,7 @@ const RolesContainer = () => {
</TableHead> </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`}>
@ -133,10 +127,18 @@ const RolesContainer = () => {
} }
</TableBody> </TableBody>
</table> </table>
{ roles === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div> </div>
</Pagination> </Pagination>
</ContentWrapper> </ContentWrapper>
}
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );

24
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,12 +96,6 @@ const ServersContainer = () => {
onSelectAllClick={onSelectAllClick} onSelectAllClick={onSelectAllClick}
onSearch={onSearch} onSearch={onSearch}
> >
{servers === undefined ?
<Loading/>
:
// length < 1 ?
// <NoItems/>
// :
<Pagination data={servers} onPageSelect={setPage}> <Pagination data={servers} onPageSelect={setPage}>
<div css={tw`overflow-x-auto`}> <div css={tw`overflow-x-auto`}>
<table css={tw`w-full table-auto`}> <table css={tw`w-full table-auto`}>
@ -114,8 +108,8 @@ const ServersContainer = () => {
</TableHead> </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}/>
@ -184,9 +178,17 @@ const ServersContainer = () => {
} }
</TableBody> </TableBody>
</table> </table>
{ servers === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div> </div>
</Pagination> </Pagination>
}
</ContentWrapper> </ContentWrapper>
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>

18
resources/scripts/components/admin/users/UsersContainer.tsx
View file

@ -91,12 +91,6 @@ const UsersContainer = () => {
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/> <FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
<AdminTable> <AdminTable>
{ users === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper <ContentWrapper
checked={selectedUserLength === (length === 0 ? -1 : length)} checked={selectedUserLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick} onSelectAllClick={onSelectAllClick}
@ -114,7 +108,7 @@ const UsersContainer = () => {
</TableHead> </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`}>
@ -161,10 +155,18 @@ const UsersContainer = () => {
} }
</TableBody> </TableBody>
</table> </table>
{ users === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div> </div>
</Pagination> </Pagination>
</ContentWrapper> </ContentWrapper>
}
</AdminTable> </AdminTable>
</AdminContentBlock> </AdminContentBlock>
); );