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

ui(admin): implement new mount page

Browse source
This commit is contained in:
Matthew Penner 2021-08-04 22:41:52 -06:00
parent 00b44bf3bb
commit 56556e9660
No known key found for this signature in database
GPG key ID: 5396CC4C3C1C9704
5 changed files with 258 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

170
resources/scripts/components/admin/mounts/MountForm.tsx Normal file
View file

@ -0,0 +1,170 @@
import { boolean, object, string } from 'yup';
import { Field as FormikField, Form, Formik, FormikHelpers } from 'formik';
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import Field from '@/components/elements/Field';
import Label from '@/components/elements/Label';
import Button from '@/components/elements/Button';
interface Values {
name: string;
description: string;
source: string;
target: string;
readOnly: string;
userMountable: string;
}
interface Props {
action: string;
title: string,
initialValues?: Values;
onSubmit: (values: Values, helpers: FormikHelpers<Values>) => void;
children?: React.ReactNode
}
function MountForm ({ action, title, initialValues, children, onSubmit }: Props) {
const submit = (values: Values, helpers: FormikHelpers<Values>) => {
onSubmit(values, helpers);
};
if (!initialValues) {
initialValues = {
name: '',
description: '',
source: '',
target: '',
readOnly: '0',
userMountable: '0',
};
}
return (
<Formik
onSubmit={submit}
initialValues={initialValues}
validationSchema={object().shape({
name: string().required().min(1),
description: string().max(255, ''),
source: string().max(255, ''),
target: string().max(255, ''),
readOnly: boolean(),
userMountable: boolean(),
})}
>
{
({ isSubmitting, isValid }) => (
<AdminBox title={title} 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`md:w-full md:flex md:flex-row mt-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
<Field
id={'source'}
name={'source'}
label={'Source'}
type={'text'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
<Field
id={'target'}
name={'target'}
label={'Target'}
type={'text'}
/>
</div>
</div>
<div css={tw`md:w-full md:flex md:flex-row mt-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
<Label htmlFor={'readOnly'}>Permissions</Label>
<div>
<label css={tw`inline-flex items-center mr-2`}>
<FormikField
name={'readOnly'}
type={'radio'}
value={'0'}
/>
<span css={tw`ml-2`}>Writable</span>
</label>
<label css={tw`inline-flex items-center ml-2`}>
<FormikField
name={'readOnly'}
type={'radio'}
value={'1'}
/>
<span css={tw`ml-2`}>Read Only</span>
</label>
</div>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
<Label htmlFor={'userMountable'}>User Mountable</Label>
<div>
<label css={tw`inline-flex items-center mr-2`}>
<FormikField
name={'userMountable'}
type={'radio'}
value={'0'}
/>
<span css={tw`ml-2`}>Admin Only</span>
</label>
<label css={tw`inline-flex items-center ml-2`}>
<FormikField
name={'userMountable'}
type={'radio'}
value={'1'}
/>
<span css={tw`ml-2`}>Users</span>
</label>
</div>
</div>
</div>
<div css={tw`w-full flex flex-row items-center mt-6`}>
{children}
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
{action}
</Button>
</div>
</div>
</Form>
</AdminBox>
)
}
</Formik>
);
}
export default MountForm;