misc_pterodactyl-panel/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
2021-01-31 16:48:49 -07:00

114 lines
4.3 KiB
TypeScript

import LocationSelect from '@/components/admin/nodes/LocationSelect';
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { object, string } from 'yup';
import updateNode from '@/api/admin/nodes/updateNode';
import Button from '@/components/elements/Button';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, Formik, FormikHelpers } from 'formik';
import { Context } from '@/components/admin/nodes/NodeEditContainer';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
interface Values {
public: boolean;
name: string;
description: string;
locationId: number;
fqdn: string;
}
export default () => {
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const node = Context.useStoreState(state => state.node);
const setNode = Context.useStoreActions(actions => actions.setNode);
if (node === undefined) {
return (
<></>
);
}
const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('database');
updateNode(node.id, name, description)
.then(() => setNode({ ...node, name, description }))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'node', error });
})
.then(() => setSubmitting(false));
};
return (
<Formik
onSubmit={submit}
initialValues={{
public: node.public,
name: node.name,
description: node.description || '',
locationId: node.locationId,
fqdn: node.fqdn,
}}
validationSchema={object().shape({
name: string().required().max(191),
description: string().max(255),
})}
>
{
({ isSubmitting, isValid }) => (
<React.Fragment>
<AdminBox title={'Settings'} css={tw`relative`}>
<SpinnerOverlay visible={isSubmitting}/>
<Form css={tw`mb-0`}>
<div css={tw`mb-6`}>
<Field
id={'name'}
name={'name'}
label={'Name'}
type={'text'}
/>
</div>
<div css={tw`mb-6`}>
<Field
id={'description'}
name={'description'}
label={'Description'}
type={'text'}
/>
</div>
<div css={tw`mb-6`}>
<LocationSelect defaultLocation={{ id: 1, short: 'local', long: '', createdAt: new Date(), updatedAt: new Date() }}/>
</div>
<div css={tw`mb-6`}>
<Field
id={'fqdn'}
name={'fqdn'}
label={'FQDN'}
type={'text'}
/>
</div>
<div css={tw`w-full flex flex-row items-center`}>
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
Save
</Button>
</div>
</div>
</Form>
</AdminBox>
</React.Fragment>
)
}
</Formik>
);
};