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

ui(admin): update button components, fix Editor for eggs

Browse source
This commit is contained in:
Matthew Penner 2022-12-21 14:27:50 -07:00
parent 4e56f6dbea
commit 089860b721
No known key found for this signature in database
35 changed files with 363 additions and 623 deletions
Download patch file Download diff file Expand all files Collapse all files

128
resources/scripts/components/admin/nests/NewNestButton.tsx
View file

@ -1,4 +1,9 @@
import React, { useState } from 'react';
import type { FormikHelpers } from 'formik';
import { Form, Formik } from 'formik';
import { useState } from 'react';
import tw from 'twin.macro';
import { object, string } from 'yup';
import createNest from '@/api/admin/nests/createNest';
import getNests from '@/api/admin/nests/getNests';
import Button from '@/components/elements/Button';
@ -6,25 +11,19 @@ import Field from '@/components/elements/Field';
import Modal from '@/components/elements/Modal';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
import { Form, Formik, FormikHelpers } from 'formik';
import { object, string } from 'yup';
import tw from 'twin.macro';
interface Values {
name: string,
description: string,
name: string;
description: string;
}
const schema = object().shape({
name: string()
.required('A nest name must be provided.')
.max(32, 'Nest name must not exceed 32 characters.'),
description: string()
.max(255, 'Nest description must not exceed 255 characters.'),
name: string().required('A nest name must be provided.').max(32, 'Nest name must not exceed 32 characters.'),
description: string().max(255, 'Nest description must not exceed 255 characters.'),
});
export default () => {
const [ visible, setVisible ] = useState(false);
const [visible, setVisible] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { mutate } = getNests();
@ -33,7 +32,7 @@ export default () => {
setSubmitting(true);
createNest(name, description)
.then(async (nest) => {
.then(async nest => {
await mutate(data => ({ ...data!, items: data!.items.concat(nest) }), false);
setVisible(false);
})
@ -45,66 +44,65 @@ export default () => {
return (
<>
<Formik
onSubmit={submit}
initialValues={{ name: '', description: '' }}
validationSchema={schema}
>
{
({ isSubmitting, resetForm }) => (
<Modal
visible={visible}
dismissable={!isSubmitting}
showSpinnerOverlay={isSubmitting}
onDismissed={() => {
resetForm();
setVisible(false);
}}
>
<FlashMessageRender byKey={'nest:create'} css={tw`mb-6`}/>
<Formik onSubmit={submit} initialValues={{ name: '', description: '' }} validationSchema={schema}>
{({ isSubmitting, resetForm }) => (
<Modal
visible={visible}
dismissable={!isSubmitting}
showSpinnerOverlay={isSubmitting}
onDismissed={() => {
resetForm();
setVisible(false);
}}
>
<FlashMessageRender byKey={'nest:create'} css={tw`mb-6`} />
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Nest</h2>
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Nest</h2>
<Form css={tw`m-0`}>
<Form css={tw`m-0`}>
<Field
type={'text'}
id={'name'}
name={'name'}
label={'Name'}
description={'A short name used to identify this nest.'}
autoFocus
/>
<div css={tw`mt-6`}>
<Field
type={'text'}
id={'name'}
name={'name'}
label={'Name'}
description={'A short name used to identify this nest.'}
autoFocus
id={'description'}
name={'description'}
label={'Description'}
description={'A description for this nest.'}
/>
</div>
<div css={tw`mt-6`}>
<Field
type={'text'}
id={'description'}
name={'description'}
label={'Description'}
description={'A description for this nest.'}
/>
</div>
<div css={tw`flex flex-wrap justify-end mt-6`}>
<Button
type={'button'}
isSecondary
css={tw`w-full sm:w-auto sm:mr-2`}
onClick={() => setVisible(false)}
>
Cancel
</Button>
<Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
Create Nest
</Button>
</div>
</Form>
</Modal>
)
}
<div css={tw`flex flex-wrap justify-end mt-6`}>
<Button
type={'button'}
isSecondary
css={tw`w-full sm:w-auto sm:mr-2`}
onClick={() => setVisible(false)}
>
Cancel
</Button>
<Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
Create Nest
</Button>
</div>
</Form>
</Modal>
)}
</Formik>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`} onClick={() => setVisible(true)}>
<Button
type={'button'}
size={'large'}
css={tw`h-10 px-4 py-0 whitespace-nowrap`}
onClick={() => setVisible(true)}
>
New Nest
</Button>
</>