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) {
setFilters(null);
} else {
setFilters({ id: query, name: query, host: query });
setFilters({ name: query });
}
return resolve();
});
@ -91,12 +91,6 @@ const DatabasesContainer = () => {
<FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
<AdminTable>
{ databases === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper
checked={selectedDatabasesLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick}
@ -113,7 +107,7 @@ const DatabasesContainer = () => {
</TableHead>
<TableBody>
{
{ databases !== undefined && !error && !isValidating && length > 0 &&
databases.items.map(database => (
<TableRow key={database.id}>
<td css={tw`pl-6`}>
@ -144,10 +138,18 @@ const DatabasesContainer = () => {
}
</TableBody>
</table>
{ databases === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
}
</AdminTable>
</AdminContentBlock>
);

20
resources/scripts/components/admin/locations/LocationsContainer.tsx
View file

@ -61,7 +61,7 @@ const LocationsContainer = () => {
if (query.length < 2) {
setFilters(null);
} else {
setFilters({ short: query, long: query });
setFilters({ short: query });
}
return resolve();
});
@ -87,12 +87,6 @@ const LocationsContainer = () => {
<FlashMessageRender byKey={'locations'} css={tw`mb-4`}/>
<AdminTable>
{ locations === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper
checked={selectedLocationsLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick}
@ -108,7 +102,7 @@ const LocationsContainer = () => {
</TableHead>
<TableBody>
{
{ locations !== undefined && !error && !isValidating && length > 0 &&
locations.items.map(location => (
<TableRow key={location.id}>
<td css={tw`pl-6`}>
@ -133,10 +127,18 @@ const LocationsContainer = () => {
}
</TableBody>
</table>
{ locations === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
}
</AdminTable>
</AdminContentBlock>
);

21
resources/scripts/components/admin/mounts/MountsContainer.tsx
View file

@ -61,7 +61,7 @@ const MountsContainer = () => {
if (query.length < 2) {
setFilters(null);
} else {
setFilters({ id: query });
setFilters({ name: query });
}
return resolve();
});
@ -89,12 +89,7 @@ const MountsContainer = () => {
<FlashMessageRender byKey={'mounts'} css={tw`mb-4`}/>
<AdminTable>
{ mounts === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper
checked={selectedMountsLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick}
@ -113,7 +108,7 @@ const MountsContainer = () => {
</TableHead>
<TableBody>
{
{ mounts !== undefined && !error && !isValidating && length > 0 &&
mounts.items.map(mount => (
<TableRow key={mount.id}>
<td css={tw`pl-6`}>
@ -172,10 +167,18 @@ const MountsContainer = () => {
}
</TableBody>
</table>
{ mounts === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
}
</AdminTable>
</AdminContentBlock>
);

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

@ -70,12 +70,6 @@ const EggsTable = () => {
return (
<AdminTable>
{ eggs === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper
checked={selectedEggsLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick}
@ -91,7 +85,7 @@ const EggsTable = () => {
</TableHead>
<TableBody>
{
{ eggs !== undefined && !error && !isValidating && length > 0 &&
eggs.items.map(egg => (
<TableRow key={egg.id}>
<td css={tw`pl-6`}>
@ -116,10 +110,18 @@ const EggsTable = () => {
}
</TableBody>
</table>
{ eggs === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
}
</AdminTable>
);
};

20
resources/scripts/components/admin/nests/NestsContainer.tsx
View file

@ -61,7 +61,7 @@ const NestsContainer = () => {
if (query.length < 2) {
setFilters(null);
} else {
setFilters({ id: query });
setFilters({ name: query });
}
return resolve();
});
@ -87,12 +87,6 @@ const NestsContainer = () => {
<FlashMessageRender byKey={'nests'} css={tw`mb-4`}/>
<AdminTable>
{ nests === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper
checked={selectedNestsLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick}
@ -108,7 +102,7 @@ const NestsContainer = () => {
</TableHead>
<TableBody>
{
{ nests !== undefined && !error && !isValidating && length > 0 &&
nests.items.map(nest => (
<TableRow key={nest.id}>
<td css={tw`pl-6`}>
@ -133,10 +127,18 @@ const NestsContainer = () => {
}
</TableBody>
</table>
{ nests === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
}
</AdminTable>
</AdminContentBlock>
);

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

@ -21,7 +21,7 @@ export default () => {
const match = useRouteMatch<{ id: string }>();
const [ ips, setIPs ] = useState<Option[]>([]);
const [ ports, setPorts ] = useState<Option[]>([]);
const [ ports ] = useState<Option[]>([]);
useEffect(() => {
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`}/>
<AdminTable>
{ nodes === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper
checked={selectedNodesLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick}
@ -119,7 +114,7 @@ const NodesContainer = () => {
</TableHead>
<TableBody>
{
{ nodes !== undefined && !error && !isValidating && length > 0 &&
nodes.items.map(node => (
<TableRow key={node.id}>
<td css={tw`pl-6`}>
@ -183,10 +178,18 @@ const NodesContainer = () => {
}
</TableBody>
</table>
{ nodes === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
}
</AdminTable>
</AdminContentBlock>
);

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

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

24
resources/scripts/components/admin/servers/ServersContainer.tsx
View file

@ -1,7 +1,7 @@
import React, { useContext, useEffect, useState } from 'react';
import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
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 CopyOnClick from '@/components/elements/CopyOnClick';
import FlashMessageRender from '@/components/FlashMessageRender';
@ -36,7 +36,7 @@ const ServersContainer = () => {
const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext);
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;
@ -96,12 +96,6 @@ const ServersContainer = () => {
onSelectAllClick={onSelectAllClick}
onSearch={onSearch}
>
{servers === undefined ?
<Loading/>
:
// length < 1 ?
// <NoItems/>
// :
<Pagination data={servers} onPageSelect={setPage}>
<div css={tw`overflow-x-auto`}>
<table css={tw`w-full table-auto`}>
@ -114,8 +108,8 @@ const ServersContainer = () => {
</TableHead>
<TableBody>
{
servers?.items.map(server => (
{ servers !== undefined && !error && !isValidating && length > 0 &&
servers.items.map(server => (
<tr key={server.id} css={tw`h-14 hover:bg-neutral-600`}>
<td css={tw`pl-6`}>
<RowCheckbox id={server.id}/>
@ -184,9 +178,17 @@ const ServersContainer = () => {
}
</TableBody>
</table>
{ servers === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
}
</ContentWrapper>
</AdminTable>
</AdminContentBlock>

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

@ -91,12 +91,6 @@ const UsersContainer = () => {
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
<AdminTable>
{ users === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
<ContentWrapper
checked={selectedUserLength === (length === 0 ? -1 : length)}
onSelectAllClick={onSelectAllClick}
@ -114,7 +108,7 @@ const UsersContainer = () => {
</TableHead>
<TableBody>
{
{ users !== undefined && !error && !isValidating && length > 0 &&
users.items.map(user => (
<tr key={user.id} css={tw`h-14 hover:bg-neutral-600`}>
<td css={tw`pl-6`}>
@ -161,10 +155,18 @@ const UsersContainer = () => {
}
</TableBody>
</table>
{ users === undefined || (error && isValidating) ?
<Loading/>
:
length < 1 ?
<NoItems/>
:
null
}
</div>
</Pagination>
</ContentWrapper>
}
</AdminTable>
</AdminContentBlock>
);