Add support for copying files.
This commit is contained in:
Dane Everitt
parent
5f59210c85
commit
2f9128508a
5 changed files with 55 additions and 10 deletions
9
resources/scripts/api/server/files/copyFile.ts
Normal file
9
resources/scripts/api/server/files/copyFile.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import http from '@/api/http';
|
||||
|
||||
export default (uuid: string, location: string): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
http.post(`/api/client/servers/${uuid}/files/copy`, { location })
|
||||
.then(() => resolve())
|
||||
.catch(reject);
|
||||
});
|
||||
};
|
||||
|
|
@ -3,10 +3,13 @@ import classNames from 'classnames';
|
|||
import { CSSTransition } from 'react-transition-group';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
|
||||
export default ({ large, visible }: { visible: boolean; large?: boolean }) => (
|
||||
export default ({ large, fixed, visible }: { visible: boolean; fixed?: boolean; large?: boolean }) => (
|
||||
<CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
|
||||
<div
|
||||
className={classNames('absolute pin-t pin-l flex items-center justify-center w-full h-full rounded')}
|
||||
className={classNames('z-50 pin-t pin-l flex items-center justify-center w-full h-full rounded', {
|
||||
absolute: !fixed,
|
||||
fixed: fixed,
|
||||
})}
|
||||
style={{ background: 'rgba(0, 0, 0, 0.45)' }}
|
||||
>
|
||||
<Spinner large={large}/>
|
||||
|
|
|
|||
28
resources/scripts/components/server/files/CopyFileModal.tsx
Normal file
28
resources/scripts/components/server/files/CopyFileModal.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { FileObject } from '@/api/server/files/loadDirectory';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import copyFile from '@/api/server/files/copyFile';
|
||||
import { join } from 'path';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
|
||||
// This component copies the given file on mount, so only mount it when
|
||||
// you actually want to copy the file...
|
||||
export default ({ file, onCopyComplete }: { file: FileObject; onCopyComplete: () => void }) => {
|
||||
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
||||
const directory = ServerContext.useStoreState(state => state.files.directory);
|
||||
const getDirectoryContents = ServerContext.useStoreActions(actions => actions.files.getDirectoryContents);
|
||||
|
||||
useEffect(() => {
|
||||
copyFile(uuid, join(directory, file.name))
|
||||
.then(() => getDirectoryContents(directory))
|
||||
.catch(error => {
|
||||
console.error('Error while attempting to copy file.', error);
|
||||
alert(httpErrorToHuman(error));
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SpinnerOverlay visible={true} large={true} fixed={true}/>
|
||||
);
|
||||
};
|
||||
|
|
@ -9,8 +9,9 @@ import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
|
|||
import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
|
||||
import RenameFileModal from '@/components/server/files/RenameFileModal';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import CopyFileModal from '@/components/server/files/CopyFileModal';
|
||||
|
||||
type ModalType = 'rename' | 'move';
|
||||
type ModalType = 'rename' | 'move' | 'copy' | 'download' | 'delete';
|
||||
|
||||
export default ({ uuid }: { uuid: string }) => {
|
||||
const menu = createRef<HTMLDivElement>();
|
||||
|
|
@ -54,7 +55,7 @@ export default ({ uuid }: { uuid: string }) => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div key={`dropdown:${file.uuid}`}>
|
||||
<div
|
||||
className={'p-3 hover:text-white'}
|
||||
onClick={e => {
|
||||
|
|
@ -70,9 +71,10 @@ export default ({ uuid }: { uuid: string }) => {
|
|||
<FontAwesomeIcon icon={faEllipsisH}/>
|
||||
</div>
|
||||
{visible &&
|
||||
<React.Fragment>
|
||||
<RenameFileModal file={file} visible={modal === 'rename'} onDismissed={() => setModal(null)}/>
|
||||
</React.Fragment>
|
||||
<React.Fragment>
|
||||
<RenameFileModal file={file} visible={modal === 'rename'} onDismissed={() => setModal(null)}/>
|
||||
{modal === 'copy' && <CopyFileModal file={file} onCopyComplete={() => setModal(null)}/>}
|
||||
</React.Fragment>
|
||||
}
|
||||
<CSSTransition timeout={250} in={visible} unmountOnExit={true} classNames={'fade'}>
|
||||
<div
|
||||
|
|
@ -80,8 +82,8 @@ export default ({ uuid }: { uuid: string }) => {
|
|||
ref={menu}
|
||||
>
|
||||
<div
|
||||
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
|
||||
onClick={() => setModal('rename')}
|
||||
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/>
|
||||
<span className={'ml-2'}>Rename</span>
|
||||
|
|
@ -90,7 +92,10 @@ export default ({ uuid }: { uuid: string }) => {
|
|||
<FontAwesomeIcon icon={faLevelUpAlt} className={'text-xs'}/>
|
||||
<span className={'ml-2'}>Move</span>
|
||||
</div>
|
||||
<div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
|
||||
<div
|
||||
onClick={() => setModal('copy')}
|
||||
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCopy} className={'text-xs'}/>
|
||||
<span className={'ml-2'}>Copy</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export default () => {
|
|||
<div>
|
||||
{
|
||||
files.map(file => (
|
||||
<FileObjectRow key={file.name} file={file}/>
|
||||
<FileObjectRow key={file.uuid} file={file}/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue