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

admin(ui): add radio buttons to MountEditContainer

Browse source
This commit is contained in:
Matthew Penner 2021-01-14 18:13:21 -07:00
parent 95d3f4c9e0
commit 79d80e8c22
1 changed files with 59 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
resources/scripts/components/admin/mounts/MountEditContainer.tsx
View file

@ -14,8 +14,9 @@ import AdminBox from '@/components/admin/AdminBox';
import Button from '@/components/elements/Button'; import Button from '@/components/elements/Button';
import Field from '@/components/elements/Field'; import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, Formik, FormikHelpers } from 'formik'; import { Field as FormikField, Form, Formik, FormikHelpers } from 'formik';
import MountDeleteButton from '@/components/admin/mounts/MountDeleteButton'; import MountDeleteButton from '@/components/admin/mounts/MountDeleteButton';
import Label from '@/components/elements/Label';
interface ctx { interface ctx {
mount: Mount | undefined; mount: Mount | undefined;
@ -35,8 +36,8 @@ interface Values {
description: string; description: string;
source: string; source: string;
target: string; target: string;
readOnly: boolean; readOnly: string;
userMountable: boolean; userMountable: string;
} }
const EditInformationContainer = () => { const EditInformationContainer = () => {
@ -56,8 +57,8 @@ const EditInformationContainer = () => {
const submit = ({ name, description, source, target, readOnly, userMountable }: Values, { setSubmitting }: FormikHelpers<Values>) => { const submit = ({ name, description, source, target, readOnly, userMountable }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('mount'); clearFlashes('mount');
updateMount(mount.id, name, description, source, target, readOnly, userMountable) updateMount(mount.id, name, description, source, target, readOnly === '1', userMountable === '1')
.then(() => setMount({ ...mount, name, description, source, target, readOnly, userMountable })) .then(() => setMount({ ...mount, name, description, source, target, readOnly: readOnly === '1', userMountable: userMountable === '1' }))
.catch(error => { .catch(error => {
console.error(error); console.error(error);
clearAndAddHttpError({ key: 'mount', error }); clearAndAddHttpError({ key: 'mount', error });
@ -73,8 +74,8 @@ const EditInformationContainer = () => {
description: mount.description || '', description: mount.description || '',
source: mount.source, source: mount.source,
target: mount.target, target: mount.target,
readOnly: mount.readOnly, readOnly: mount.readOnly ? '1' : '0',
userMountable: mount.userMountable, userMountable: mount.userMountable ? '1' : '0',
}} }}
validationSchema={object().shape({ validationSchema={object().shape({
name: string().required().min(1), name: string().required().min(1),
@ -130,6 +131,57 @@ const EditInformationContainer = () => {
</div> </div>
</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`}> <div css={tw`w-full flex flex-row items-center mt-6`}>
<div css={tw`flex`}> <div css={tw`flex`}>
<MountDeleteButton <MountDeleteButton