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

admin(ui): add ability to edit nests

Browse source
This commit is contained in:
Matthew Penner 2021-01-08 10:02:49 -07:00
parent 0e366f69ee
commit 20234b308c
13 changed files with 157 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
resources/scripts/components/admin/AdminBox.tsx Normal file
View file

@ -0,0 +1,31 @@
import React, { memo } 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';
interface Props {
icon?: IconProp;
title: string | React.ReactNode;
className?: string;
children: React.ReactNode;
}
const AdminBox = ({ icon, title, children, className }: Props) => (
<div css={tw`rounded shadow-md bg-neutral-700`} className={className}>
<div css={tw`bg-neutral-900 rounded-t px-6 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
}
</div>
<div css={tw`px-6 py-4`}>
{children}
</div>
</div>
);
export default memo(AdminBox, isEqual);

2
resources/scripts/components/admin/databases/DatabasesContainer.tsx
View file

@ -44,7 +44,7 @@ const DatabasesContainer = () => {
return;
}
clearAndAddHttpError({ error, key: 'databases' });
clearAndAddHttpError({ key: 'databases', error });
}, [ error ]);
const length = databases?.items?.length || 0;

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

@ -44,7 +44,7 @@ const LocationsContainer = () => {
return;
}
clearAndAddHttpError({ error, key: 'locations' });
clearAndAddHttpError({ key: 'locations', error });
}, [ error ]);
const length = locations?.items?.length || 0;

2
resources/scripts/components/admin/locations/NewLocationButton.tsx
View file

@ -38,7 +38,7 @@ export default () => {
setVisible(false);
})
.catch(error => {
clearAndAddHttpError(error);
clearAndAddHttpError({ key: 'location:create', error });
setSubmitting(false);
});
};

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

@ -44,7 +44,7 @@ const MountsContainer = () => {
return;
}
clearAndAddHttpError({ error, key: 'mounts' });
clearAndAddHttpError({ key: 'mounts', error });
}, [ error ]);
const length = mounts?.items?.length || 0;

123
resources/scripts/components/admin/nests/NestEditContainer.tsx
View file

@ -1,20 +1,113 @@
import React, { useEffect, useState } from 'react';
import React, { createContext, useContext, useEffect, useState } from 'react';
import { useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import useFlash from '@/plugins/useFlash';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import Spinner from '@/components/elements/Spinner';
import FlashMessageRender from '@/components/FlashMessageRender';
import { Nest } from '@/api/admin/nests/getNests';
import getNest from '@/api/admin/nests/getNest';
import updateNest from '@/api/admin/nests/updateNest';
import { object, string } from 'yup';
import Button from '@/components/elements/Button';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
import { Form, Formik, FormikHelpers } from 'formik';
import AdminBox from '@/components/admin/AdminBox';
export default () => {
interface ctx {
nest: Nest | undefined;
setNest: (value: Nest | undefined) => void;
}
export const Context = createContext<ctx>({ nest: undefined, setNest: () => 1 });
interface Values {
name: string;
description: string | null;
}
const NestEditBox = () => {
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const { nest, setNest } = useContext(Context);
if (nest === undefined) {
return (
<></>
);
}
const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('nest');
updateNest(nest.id, name, description || undefined)
.then(() => setNest({ ...nest, name, description }))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'nest', error });
})
.then(() => setSubmitting(false));
};
return (
<Formik
onSubmit={submit}
initialValues={{
name: nest.name,
description: nest.description,
}}
validationSchema={object().shape({
name: string().required().min(1),
description: string().max(255, ''),
})}
>
{
({ isSubmitting, isValid }) => (
<React.Fragment>
<AdminBox title={'Edit Nest'} css={tw`relative`}>
<SpinnerOverlay visible={isSubmitting}/>
<Form css={tw`mb-0`}>
<div>
<Field
id={'name'}
name={'name'}
label={'Name'}
type={'text'}
/>
</div>
<div css={tw`mt-6`}>
<Field
id={'description'}
name={'description'}
label={'Description'}
type={'text'}
/>
</div>
<div css={tw`mt-6 text-right`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
Save
</Button>
</div>
</Form>
</AdminBox>
</React.Fragment>
)
}
</Formik>
);
};
const NestEditContainer = () => {
const match = useRouteMatch<{ nestId?: string }>();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const [ loading, setLoading ] = useState(true);
const [ nest, setNest ] = useState<Nest | undefined>(undefined);
const { nest, setNest } = useContext(Context);
useEffect(() => {
clearFlashes('nest');
@ -23,7 +116,7 @@ export default () => {
.then(nest => setNest(nest))
.catch(error => {
console.error(error);
clearAndAddHttpError(error);
clearAndAddHttpError({ key: 'nest', error });
})
.then(() => setLoading(false));
}, []);
@ -31,11 +124,11 @@ export default () => {
if (loading || nest === undefined) {
return (
<AdminContentBlock title={'Nests'}>
<FlashMessageRender byKey={'nest'} css={tw`mb-4`}/>
<div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
<Spinner size={'base'}/>
</div>
<FlashMessageRender byKey={'nest'} css={tw`mb-4`}/>
</AdminContentBlock>
);
}
@ -49,7 +142,19 @@ export default () => {
</div>
</div>
<p>{JSON.stringify(nest.relations.eggs)}</p>
<FlashMessageRender byKey={'nest'} css={tw`mb-4`}/>
<NestEditBox/>
</AdminContentBlock>
);
};
export default () => {
const [ nest, setNest ] = useState<Nest | undefined>(undefined);
return (
<Context.Provider value={{ nest, setNest }}>
<NestEditContainer/>
</Context.Provider>
);
};

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

@ -44,7 +44,7 @@ const NestsContainer = () => {
return;
}
clearAndAddHttpError({ error, key: 'nests' });
clearAndAddHttpError({ key: 'nests', error });
}, [ error ]);
const length = nests?.items?.length || 0;

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

@ -45,7 +45,7 @@ const NodesContainer = () => {
return;
}
clearAndAddHttpError({ error, key: 'nodes' });
clearAndAddHttpError({ key: 'nodes', error });
}, [ error ]);
const length = nodes?.items?.length || 0;

2
resources/scripts/components/admin/overview/OverviewContainer.tsx
View file

@ -26,7 +26,7 @@ export default () => {
.then(versionData => setVersionData(versionData))
.catch(error => {
console.error(error);
clearAndAddHttpError(error);
clearAndAddHttpError({ key: 'overview', error });
})
.then(() => setLoading(false));
}, []);

5
resources/scripts/components/admin/roles/NewRoleButton.tsx
View file

@ -1,6 +1,5 @@
import React, { useState } from 'react';
import createRole from '@/api/admin/roles/createRole';
import { httpErrorToHuman } from '@/api/http';
import { AdminContext } from '@/state/admin';
import Button from '@/components/elements/Button';
import Field from '@/components/elements/Field';
@ -26,7 +25,7 @@ const schema = object().shape({
export default () => {
const [ visible, setVisible ] = useState(false);
const { addError, clearFlashes } = useFlash();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const appendRole = AdminContext.useStoreActions(actions => actions.roles.appendRole);
@ -40,7 +39,7 @@ export default () => {
setVisible(false);
})
.catch(error => {
addError({ key: 'role:create', message: httpErrorToHuman(error) });
clearAndAddHttpError({ key: 'role:create', error });
setSubmitting(false);
});
};

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

@ -52,7 +52,7 @@ export default () => {
.then(roles => setRoles(roles))
.catch(error => {
console.error(error);
clearAndAddHttpError(error);
clearAndAddHttpError({ key: 'roles', error });
})
.then(() => setLoading(false));
}, []);

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

@ -44,7 +44,7 @@ const UsersContainer = () => {
return;
}
clearAndAddHttpError({ error, key: 'servers' });
clearAndAddHttpError({ key: 'servers', error });
}, [ error ]);
const length = servers?.items?.length || 0;

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

@ -44,7 +44,7 @@ const UsersContainer = () => {
return;
}
clearAndAddHttpError({ error, key: 'users' });
clearAndAddHttpError({ key: 'users', error });
}, [ error ]);
const length = users?.items?.length || 0;