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

Use grid and server SWR for settings box

Browse source
This commit is contained in:
Dane Everitt 2021-10-03 16:24:23 -07:00
parent 15aed3192b
commit 817a2bf8ae
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 39 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
resources/scripts/components/admin/AdminBox.tsx
View file

@ -1,11 +1,12 @@
import React, { memo } from 'react';
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import tw from 'twin.macro';
import isEqual from 'react-fast-compare';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
interface Props {
icon?: IconProp;
isLoading?: boolean;
title: string | React.ReactNode;
className?: string;
padding?: boolean;
@ -13,28 +14,23 @@ interface Props {
button?: React.ReactNode;
}
const AdminBox = ({ icon, title, className, padding, children, button }: Props) => {
if (padding === undefined) {
padding = true;
}
return (
<div css={tw`rounded shadow-md bg-neutral-700`} className={className}>
<div css={tw`flex flex-row bg-neutral-900 rounded-t px-4 py-3 border-b border-black`}>
{typeof title === 'string' ?
<p css={tw`text-sm uppercase`}>
{icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
</p>
:
title
}
{button}
</div>
<div css={padding ? tw`px-4 py-3` : undefined}>
{children}
</div>
const AdminBox = ({ icon, title, className, isLoading, children, button }: Props) => (
<div css={tw`relative rounded shadow-md bg-neutral-700`} className={className}>
<SpinnerOverlay visible={isLoading || false}/>
<div css={tw`flex flex-row bg-neutral-900 rounded-t px-4 lg:px-6 py-3 lg:py-4 border-b border-black`}>
{typeof title === 'string' ?
<p css={tw`text-sm uppercase`}>
{icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
</p>
:
title
}
{button}
</div>
);
};
<div css={tw`p-4 lg:p-6`}>
{children}
</div>
</div>
);
export default memo(AdminBox, isEqual);
export default AdminBox;

20
resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
View file

@ -4,7 +4,7 @@ import ServerDeleteButton from '@/components/admin/servers/ServerDeleteButton';
import Label from '@/components/elements/Label';
import Select from '@/components/elements/Select';
import SelectField, { AsyncSelectField, Option } from '@/components/elements/SelectField';
import { faBalanceScale, faCogs, faConciergeBell, faNetworkWired } from '@fortawesome/free-solid-svg-icons';
import { faBalanceScale, faConciergeBell, faNetworkWired } from '@fortawesome/free-solid-svg-icons';
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import { useHistory } from 'react-router-dom';
@ -258,24 +258,16 @@ export default function ServerSettingsContainer2 ({ server }: { server: Server }
<Form>
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8 mb-16`}>
<div css={tw`flex flex-col`}>
<div css={tw`flex mb-6`}>
<BaseSettingsBox server={server}/>
<div css={tw`mb-6 lg:mb-10`}>
<BaseSettingsBox/>
</div>
<div css={tw`flex mb-6`}>
<div css={tw`mb-6 lg:mb-10`}>
<ServerFeatureContainer/>
</div>
<div css={tw`flex`}>
<ServerAllocationsContainer server={server}/>
</div>
<ServerAllocationsContainer server={server}/>
</div>
<div css={tw`flex flex-col`}>
<div css={tw`flex mb-6`}>
<ServerResourceContainer/>
</div>
<ServerResourceContainer css={tw`mb-6`}/>
<div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6`}>
<div css={tw`flex flex-row`}>
<ServerDeleteButton

43
resources/scripts/components/admin/servers/settings/BaseSettingsBox.tsx
View file

@ -1,43 +1,24 @@
import { Server } from '@/api/admin/servers/getServers';
import React from 'react';
import tw from 'twin.macro';
import { useFormikContext } from 'formik';
import AdminBox from '@/components/admin/AdminBox';
import { faCogs } from '@fortawesome/free-solid-svg-icons';
import tw from 'twin.macro';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import Field from '@/components/elements/Field';
import OwnerSelect from '@/components/admin/servers/OwnerSelect';
import React from 'react';
import getServerDetails from '@/api/swr/admin/getServerDetails';
export default ({ server }: { server?: Server }) => {
export default () => {
const { data: server } = getServerDetails();
const { isSubmitting } = useFormikContext();
if (!server) return null;
return (
<AdminBox icon={faCogs} title={'Settings'} css={tw`relative w-full`}>
<SpinnerOverlay visible={isSubmitting}/>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
<Field
id={'name'}
name={'name'}
label={'Server Name'}
type={'text'}
/>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'externalId'}
name={'externalId'}
label={'External Identifier'}
type={'text'}
/>
</div>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mb-6 w-full md:w-1/2 md:flex md:flex-col md:pr-4 md:mb-0`}>
<OwnerSelect selected={server?.relations.user || null}/>
</div>
<AdminBox icon={faCogs} title={'Settings'} isLoading={isSubmitting}>
<div css={tw`grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6`}>
<Field id={'name'} name={'name'} label={'Server Name'} type={'text'}/>
<Field id={'externalId'} name={'externalId'} label={'External Identifier'} type={'text'}/>
<OwnerSelect selected={server.relations.user || null}/>
</div>
</AdminBox>
);