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

UI cleanup for add allocation button

Browse source
This commit is contained in:
Dane Everitt 2020-10-31 14:10:53 -07:00
parent abb043c1cc
commit db7e4e749f
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
2 changed files with 37 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
resources/scripts/api/server/network/newServerAllocation.ts → resources/scripts/api/server/network/createServerAllocation.ts
View file

86
resources/scripts/components/server/network/NetworkContainer.tsx
View file

@ -10,15 +10,16 @@ import { useDeepMemoize } from '@/plugins/useDeepMemoize';
import AllocationRow from '@/components/server/network/AllocationRow'; import AllocationRow from '@/components/server/network/AllocationRow';
import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation'; import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
import Button from '@/components/elements/Button'; import Button from '@/components/elements/Button';
import newServerAllocation from '@/api/server/network/newServerAllocation'; import createServerAllocation from '@/api/server/network/createServerAllocation';
import tw from 'twin.macro'; import tw from 'twin.macro';
import GreyRowBox from '@/components/elements/GreyRowBox'; import Can from '@/components/elements/Can';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
const NetworkContainer = () => { const NetworkContainer = () => {
const [ loading, setLoading ] = useState(false);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const allocationLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.allocations); const allocationLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.allocations);
const allocations = useDeepMemoize(ServerContext.useStoreState(state => state.server.data!.allocations)); const allocations = useDeepMemoize(ServerContext.useStoreState(state => state.server.data!.allocations));
const [ addingAllocation, setAddingAllocation ] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlash(); const { clearFlashes, clearAndAddHttpError } = useFlash();
const { data, error, mutate } = useSWR<Allocation[]>(uuid, key => getServerAllocations(key), { const { data, error, mutate } = useSWR<Allocation[]>(uuid, key => getServerAllocations(key), {
@ -32,7 +33,7 @@ const NetworkContainer = () => {
} }
}, [ error ]); }, [ error ]);
const setPrimaryAllocation = useCallback((id: number) => { const setPrimaryAllocation = (id: number) => {
clearFlashes('server:network'); clearFlashes('server:network');
const initial = data; const initial = data;
@ -43,24 +44,16 @@ const NetworkContainer = () => {
clearAndAddHttpError({ key: 'server:network', error }); clearAndAddHttpError({ key: 'server:network', error });
mutate(initial, false); mutate(initial, false);
}); });
}, []); };
const getNewAllocation = () => { const onCreateAllocation = () => {
clearFlashes('server:network'); clearFlashes('server:network');
setAddingAllocation(true);
const initial = data; setLoading(true);
createServerAllocation(uuid)
newServerAllocation(uuid) .then(allocation => mutate(data?.concat(allocation), false))
.then(allocation => { .catch(error => clearAndAddHttpError({ key: 'server:network', error }))
mutate(data?.concat(allocation), false); .then(() => setLoading(false));
setAddingAllocation(false);
})
.catch(error => {
clearAndAddHttpError({ key: 'server:network', error });
mutate(initial, false);
setAddingAllocation(false);
});
}; };
const onNotesAdded = useCallback((id: number, notes: string) => { const onNotesAdded = useCallback((id: number, notes: string) => {
@ -72,37 +65,32 @@ const NetworkContainer = () => {
{!data ? {!data ?
<Spinner size={'large'} centered/> <Spinner size={'large'} centered/>
: :
data.map(allocation => ( <>
<AllocationRow {
key={`${allocation.ip}:${allocation.port}`} data.map(allocation => (
allocation={allocation} <AllocationRow
onSetPrimary={setPrimaryAllocation} key={`${allocation.ip}:${allocation.port}`}
onNotesChanged={onNotesAdded} allocation={allocation}
/> onSetPrimary={setPrimaryAllocation}
)) onNotesChanged={onNotesAdded}
} />
{allocationLimit > data!.length ? ))
<GreyRowBox
$hoverable={false}
css={tw`mt-2 overflow-x-auto flex items-center justify-center`}
>
{addingAllocation ?
<Spinner size={'base'} centered/>
:
<Button
color={'primary'}
isSecondary
onClick={() => getNewAllocation()}
css={tw`my-2`}
>
Add New Allocation
</Button>
} }
</GreyRowBox> <Can action={'allocation.create'}>
: <SpinnerOverlay visible={loading}/>
<p css={tw`mt-2 text-center text-sm text-neutral-400`}> <div css={tw`mt-6 sm:flex items-center justify-end`}>
You have reached the max number of allocations allowed for your server. <p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
</p> You are currently using {data.length} of {allocationLimit} allowed allocations for this
server.
</p>
{allocationLimit > data.length &&
<Button css={tw`w-full sm:w-auto`} color={'primary'} onClick={onCreateAllocation}>
Create Allocation
</Button>
}
</div>
</Can>
</>
} }
</ServerContentBlock> </ServerContentBlock>
); );