Improve create directory dialog
This commit is contained in:
DaneEveritt
parent
8d82aa2124
commit
03a6e26c4d
2 changed files with 53 additions and 61 deletions
|
|
@ -71,7 +71,7 @@ return [
|
|||
'compress_other' => 'Compressed :count files in :directory',
|
||||
'read' => 'Viewed the contents of :file',
|
||||
'copy' => 'Created a copy of :file',
|
||||
'create-directory' => 'Created a new directory :name in :directory',
|
||||
'create-directory' => 'Created directory :directory:name',
|
||||
'decompress' => 'Decompressed :files in :directory',
|
||||
'delete_one' => 'Deleted :directory:files.0',
|
||||
'delete_other' => 'Deleted :count files in :directory',
|
||||
|
|
@ -81,7 +81,7 @@ return [
|
|||
'rename_other' => 'Renamed :count files in :directory',
|
||||
'write' => 'Wrote new content to :file',
|
||||
'upload' => 'Began a file upload',
|
||||
'uploaded' => 'Uploaded :file in :directory',
|
||||
'uploaded' => 'Uploaded :directory:file',
|
||||
],
|
||||
'sftp' => [
|
||||
'denied' => 'Blocked SFTP access due to permissions',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { Form, Formik, FormikHelpers } from 'formik';
|
||||
import Field from '@/components/elements/Field';
|
||||
|
|
@ -8,13 +8,13 @@ import createDirectory from '@/api/server/files/createDirectory';
|
|||
import tw from 'twin.macro';
|
||||
import { Button } from '@/components/elements/button/index';
|
||||
import { FileObject } from '@/api/server/files/loadDirectory';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import { useFlashKey } from '@/plugins/useFlash';
|
||||
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
|
||||
import { WithClassname } from '@/components/types';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { Dialog } from '@/components/elements/dialog';
|
||||
import Portal from '@/components/elements/Portal';
|
||||
import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
|
||||
import Code from '@/components/elements/Code';
|
||||
import asDialog from '@/hoc/asDialog';
|
||||
|
||||
interface Values {
|
||||
directoryName: string;
|
||||
|
|
@ -39,78 +39,70 @@ const generateDirectoryData = (name: string): FileObject => ({
|
|||
isEditable: () => false,
|
||||
});
|
||||
|
||||
export default ({ className }: WithClassname) => {
|
||||
const NewDirectoryDialog = asDialog({
|
||||
title: 'Create Directory',
|
||||
})(() => {
|
||||
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
const { mutate } = useFileManagerSwr();
|
||||
const directory = ServerContext.useStoreState((state) => state.files.directory);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) return;
|
||||
const { mutate } = useFileManagerSwr();
|
||||
const { close } = useContext(DialogWrapperContext);
|
||||
const { clearAndAddHttpError } = useFlashKey('files:directory-modal');
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
clearFlashes('files:directory-modal');
|
||||
clearAndAddHttpError();
|
||||
};
|
||||
}, [visible]);
|
||||
}, []);
|
||||
|
||||
const submit = ({ directoryName }: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||||
createDirectory(uuid, directory, directoryName)
|
||||
.then(() => mutate((data) => [...data, generateDirectoryData(directoryName)], false))
|
||||
.then(() => setVisible(false))
|
||||
.then(() => close())
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
setSubmitting(false);
|
||||
clearAndAddHttpError({ key: 'files:directory-modal', error });
|
||||
clearAndAddHttpError(error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik onSubmit={submit} validationSchema={schema} initialValues={{ directoryName: '' }}>
|
||||
{({ submitForm, values }) => (
|
||||
<>
|
||||
<FlashMessageRender key={'files:directory-modal'} />
|
||||
<Form css={tw`m-0`}>
|
||||
<Field autoFocus id={'directoryName'} name={'directoryName'} label={'Name'} />
|
||||
<p css={tw`mt-2 text-sm md:text-base break-all`}>
|
||||
<span css={tw`text-neutral-200`}>This directory will be created as </span>
|
||||
<Code>
|
||||
/home/container/
|
||||
<span css={tw`text-cyan-200`}>
|
||||
{join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, '')}
|
||||
</span>
|
||||
</Code>
|
||||
</p>
|
||||
</Form>
|
||||
<Dialog.Footer>
|
||||
<Button.Text className={'w-full sm:w-auto'} onClick={close}>
|
||||
Cancel
|
||||
</Button.Text>
|
||||
<Button className={'w-full sm:w-auto'} onClick={submitForm}>
|
||||
Create
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
});
|
||||
|
||||
export default ({ className }: WithClassname) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Portal>
|
||||
<Formik onSubmit={submit} validationSchema={schema} initialValues={{ directoryName: '' }}>
|
||||
{({ resetForm, submitForm, isSubmitting: _, values }) => (
|
||||
<Dialog
|
||||
title={'Create Directory'}
|
||||
open={visible}
|
||||
onClose={() => {
|
||||
setVisible(false);
|
||||
resetForm();
|
||||
}}
|
||||
>
|
||||
<FlashMessageRender key={'files:directory-modal'} />
|
||||
<Form css={tw`m-0`}>
|
||||
<Field autoFocus id={'directoryName'} name={'directoryName'} label={'Name'} />
|
||||
<p css={tw`mt-2 text-sm md:text-base break-all`}>
|
||||
<span css={tw`text-neutral-200`}>This directory will be created as </span>
|
||||
<Code>
|
||||
/home/container/
|
||||
<span css={tw`text-cyan-200`}>
|
||||
{join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, '')}
|
||||
</span>
|
||||
</Code>
|
||||
</p>
|
||||
</Form>
|
||||
<Dialog.Footer>
|
||||
<Button.Text
|
||||
className={'w-full sm:w-auto'}
|
||||
onClick={() => {
|
||||
setVisible(false);
|
||||
resetForm();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button.Text>
|
||||
<Button className={'w-full sm:w-auto'} onClick={submitForm}>
|
||||
Create
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog>
|
||||
)}
|
||||
</Formik>
|
||||
</Portal>
|
||||
<Button.Text onClick={() => setVisible(true)} className={className}>
|
||||
<NewDirectoryDialog open={open} onClose={setOpen.bind(this, false)} />
|
||||
<Button.Text onClick={setOpen.bind(this, true)} className={className}>
|
||||
Create Directory
|
||||
</Button.Text>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in a new issue