misc_pterodactyl-panel/resources/scripts/components/server/files/ChmodFileModal.tsx
2022-11-25 13:25:03 -07:00

74 lines
2.8 KiB
TypeScript

import { fileBitsToString } from '@/helpers';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import { Form, Formik, FormikHelpers } from 'formik';
import Field from '@/components/elements/Field';
import chmodFiles from '@/api/server/files/chmodFiles';
import { ServerContext } from '@/state/server';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import useFlash from '@/plugins/useFlash';
interface FormikValues {
mode: string;
}
interface File {
file: string;
mode: string;
}
type OwnProps = RequiredModalProps & { files: File[] };
const ChmodFileModal = ({ files, ...props }: OwnProps) => {
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const directory = ServerContext.useStoreState(state => state.files.directory);
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
const submit = async ({ mode }: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
clearFlashes('files');
await mutate(
data =>
data!.map(f =>
f.name === files[0]?.file ? { ...f, mode: fileBitsToString(mode, !f.isFile), modeBits: mode } : f,
),
false,
);
const data = files.map(f => ({ file: f.file, mode: mode }));
chmodFiles(uuid, directory, data)
.then((): Promise<any> => (files.length > 0 ? mutate() : Promise.resolve()))
.then(() => setSelectedFiles([]))
.catch(error => {
mutate();
setSubmitting(false);
clearAndAddHttpError({ key: 'files', error });
})
.then(() => props.onDismissed());
};
return (
<Formik onSubmit={submit} initialValues={{ mode: files.length > 1 ? '' : files[0]?.mode ?? '' }}>
{({ isSubmitting }) => (
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
<Form css={tw`m-0`}>
<div css={tw`flex flex-wrap items-end`}>
<div css={tw`w-full sm:flex-1 sm:mr-4`}>
<Field type={'string'} id={'file_mode'} name={'mode'} label={'File Mode'} autoFocus />
</div>
<div css={tw`w-full sm:w-auto mt-4 sm:mt-0`}>
<Button css={tw`w-full`}>Update</Button>
</div>
</div>
</Form>
</Modal>
)}
</Formik>
);
};
export default ChmodFileModal;