Delete support & cleaned up copy logic
This commit is contained in:
parent
2f9128508a
commit
456473ad0f
3 changed files with 51 additions and 37 deletions
9
resources/scripts/api/server/files/deleteFile.ts
Normal file
9
resources/scripts/api/server/files/deleteFile.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/delete`, { location })
|
||||
.then(() => resolve())
|
||||
.catch(reject);
|
||||
});
|
||||
};
|
|
@ -1,28 +0,0 @@
|
|||
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}/>
|
||||
);
|
||||
};
|
|
@ -10,16 +10,25 @@ 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';
|
||||
import { join } from 'path';
|
||||
import deleteFile from '@/api/server/files/deleteFile';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import copyFile from '@/api/server/files/copyFile';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
|
||||
type ModalType = 'rename' | 'move' | 'copy' | 'download' | 'delete';
|
||||
type ModalType = 'rename' | 'move';
|
||||
|
||||
export default ({ uuid }: { uuid: string }) => {
|
||||
const menu = createRef<HTMLDivElement>();
|
||||
const [ visible, setVisible ] = useState(false);
|
||||
const [ showSpinner, setShowSpinner ] = useState(false);
|
||||
const [ modal, setModal ] = useState<ModalType | null>(null);
|
||||
const [ posX, setPosX ] = useState(0);
|
||||
|
||||
const server = ServerContext.useStoreState(state => state.server.data!);
|
||||
const file = ServerContext.useStoreState(state => state.files.contents.find(file => file.uuid === uuid));
|
||||
const directory = ServerContext.useStoreState(state => state.files.directory);
|
||||
const { removeFile, getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
|
||||
if (!file) {
|
||||
return null;
|
||||
}
|
||||
|
@ -38,6 +47,27 @@ export default ({ uuid }: { uuid: string }) => {
|
|||
}
|
||||
};
|
||||
|
||||
const doDeletion = () => {
|
||||
setShowSpinner(true);
|
||||
deleteFile(server.uuid, join(directory, file.name))
|
||||
.then(() => removeFile(uuid))
|
||||
.catch(error => {
|
||||
console.error('Error while attempting to delete a file.', error);
|
||||
setShowSpinner(false);
|
||||
});
|
||||
};
|
||||
|
||||
const doCopy = () => {
|
||||
setShowSpinner(true);
|
||||
copyFile(server.uuid, join(directory, file.name))
|
||||
.then(() => getDirectoryContents(directory))
|
||||
.catch(error => {
|
||||
console.error('Error while attempting to copy file.', error);
|
||||
alert(httpErrorToHuman(error));
|
||||
setShowSpinner(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
visible
|
||||
? document.addEventListener('click', windowListener)
|
||||
|
@ -69,13 +99,13 @@ export default ({ uuid }: { uuid: string }) => {
|
|||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisH}/>
|
||||
{visible &&
|
||||
<React.Fragment>
|
||||
<RenameFileModal file={file} visible={modal === 'rename'} onDismissed={() => setModal(null)}/>
|
||||
<SpinnerOverlay visible={showSpinner} fixed={true} large={true}/>
|
||||
</React.Fragment>
|
||||
}
|
||||
</div>
|
||||
{visible &&
|
||||
<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
|
||||
className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
|
||||
|
@ -93,7 +123,7 @@ export default ({ uuid }: { uuid: string }) => {
|
|||
<span className={'ml-2'}>Move</span>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setModal('copy')}
|
||||
onClick={() => doCopy()}
|
||||
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCopy} className={'text-xs'}/>
|
||||
|
@ -103,7 +133,10 @@ export default ({ uuid }: { uuid: string }) => {
|
|||
<FontAwesomeIcon icon={faFileDownload} className={'text-xs'}/>
|
||||
<span className={'ml-2'}>Download</span>
|
||||
</div>
|
||||
<div className={'hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded'}>
|
||||
<div
|
||||
onClick={() => doDeletion()}
|
||||
className={'hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded'}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrashAlt} className={'text-xs'}/>
|
||||
<span className={'ml-2'}>Delete</span>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue