Basic working file rename modal
This commit is contained in:
Dane Everitt
parent
f4d0694670
commit
2716ff8841
8 changed files with 120 additions and 12 deletions
|
|
@ -15,6 +15,7 @@
|
|||
"formik": "^1.5.7",
|
||||
"jquery": "^3.3.1",
|
||||
"lodash": "^4.17.11",
|
||||
"path": "^0.12.7",
|
||||
"query-string": "^6.7.0",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
|
|
@ -41,6 +42,7 @@
|
|||
"@types/events": "^3.0.0",
|
||||
"@types/feather-icons": "^4.7.0",
|
||||
"@types/lodash": "^4.14.119",
|
||||
"@types/node": "^12.6.9",
|
||||
"@types/query-string": "^6.3.0",
|
||||
"@types/react": "^16.8.19",
|
||||
"@types/react-dom": "^16.8.4",
|
||||
|
|
|
|||
19
resources/scripts/api/server/files/renameFile.ts
Normal file
19
resources/scripts/api/server/files/renameFile.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import http from '@/api/http';
|
||||
|
||||
interface Data {
|
||||
renameFrom: string;
|
||||
renameTo: string;
|
||||
}
|
||||
|
||||
export default (uuid: string, { renameFrom, renameTo }: Data): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
http.put(`/api/client/servers/${uuid}/files/rename`, {
|
||||
// eslint-disable-next-line @typescript-eslint/camelcase
|
||||
rename_from: renameFrom,
|
||||
// eslint-disable-next-line @typescript-eslint/camelcase
|
||||
rename_to: renameTo,
|
||||
})
|
||||
.then(() => resolve())
|
||||
.catch(reject);
|
||||
});
|
||||
};
|
||||
|
|
@ -4,9 +4,12 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
|
|||
import { CSSTransition } from 'react-transition-group';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
|
||||
interface Props {
|
||||
export interface RequiredModalProps {
|
||||
visible: boolean;
|
||||
onDismissed: () => void;
|
||||
}
|
||||
|
||||
type Props = RequiredModalProps & {
|
||||
dismissable?: boolean;
|
||||
closeOnEscape?: boolean;
|
||||
closeOnBackground?: boolean;
|
||||
|
|
|
|||
|
|
@ -7,13 +7,15 @@ import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
|
|||
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
|
||||
import { faFileDownload } from '@fortawesome/free-solid-svg-icons/faFileDownload';
|
||||
import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
|
||||
import { faArrowsAltH } from '@fortawesome/free-solid-svg-icons/faArrowsAltH';
|
||||
import { faBalanceScaleLeft } from '@fortawesome/free-solid-svg-icons/faBalanceScaleLeft';
|
||||
import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
|
||||
import RenameFileModal from '@/components/server/files/RenameFileModal';
|
||||
|
||||
type ModalType = 'rename' | 'move';
|
||||
|
||||
export default ({ file }: { file: FileObject }) => {
|
||||
const menu = createRef<HTMLDivElement>();
|
||||
const [ visible, setVisible ] = useState(false);
|
||||
const [ modal, setModal ] = useState<ModalType | null>(null);
|
||||
const [ posX, setPosX ] = useState(0);
|
||||
|
||||
const windowListener = (e: MouseEvent) => {
|
||||
|
|
@ -37,7 +39,7 @@ export default ({ file }: { file: FileObject }) => {
|
|||
|
||||
if (visible && menu.current) {
|
||||
menu.current.setAttribute(
|
||||
'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`
|
||||
'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`,
|
||||
);
|
||||
}
|
||||
}, [ visible ]);
|
||||
|
|
@ -54,18 +56,28 @@ export default ({ file }: { file: FileObject }) => {
|
|||
e.preventDefault();
|
||||
if (!visible) {
|
||||
setPosX(e.clientX);
|
||||
} else if (visible) {
|
||||
setModal(null);
|
||||
}
|
||||
setVisible(!visible);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisH}/>
|
||||
</div>
|
||||
{visible &&
|
||||
<React.Fragment>
|
||||
<RenameFileModal file={file} visible={modal === 'rename'} onDismissed={() => 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'}
|
||||
ref={menu}
|
||||
>
|
||||
<div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
|
||||
<div
|
||||
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
|
||||
onClick={() => setModal('rename')}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/>
|
||||
<span className={'ml-2'}>Rename</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { CSSTransition } from 'react-transition-group';
|
|||
import { Link } from 'react-router-dom';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import FileObjectRow from '@/components/server/files/FileObjectRow';
|
||||
import { getDirectoryFromHash } from '@/helpers';
|
||||
|
||||
export default () => {
|
||||
const [ loading, setLoading ] = useState(true);
|
||||
|
|
@ -16,12 +17,10 @@ export default () => {
|
|||
const server = ServerContext.useStoreState(state => state.server.data!);
|
||||
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
|
||||
const currentDirectory = window.location.hash.replace(/^#(\/)+/, '/');
|
||||
|
||||
const load = () => {
|
||||
setLoading(true);
|
||||
clearFlashes();
|
||||
loadDirectory(server.uuid, currentDirectory)
|
||||
loadDirectory(server.uuid, getDirectoryFromHash())
|
||||
.then(files => {
|
||||
setFiles(files);
|
||||
setLoading(false);
|
||||
|
|
@ -37,7 +36,7 @@ export default () => {
|
|||
});
|
||||
};
|
||||
|
||||
const breadcrumbs = (): { name: string; path?: string }[] => currentDirectory.split('/')
|
||||
const breadcrumbs = (): { name: string; path?: string }[] => getDirectoryFromHash().split('/')
|
||||
.filter(directory => !!directory)
|
||||
.map((directory, index, dirs) => {
|
||||
if (index === dirs.length - 1) {
|
||||
|
|
@ -87,7 +86,7 @@ export default () => {
|
|||
<div>
|
||||
{
|
||||
files.map(file => (
|
||||
<FileObjectRow key={file.name} directory={currentDirectory} file={file}/>
|
||||
<FileObjectRow key={file.name} directory={getDirectoryFromHash()} file={file}/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
import React from 'react';
|
||||
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
|
||||
import { Form, Formik, FormikActions } from 'formik';
|
||||
import { FileObject } from '@/api/server/files/loadDirectory';
|
||||
import Field from '@/components/elements/Field';
|
||||
import { getDirectoryFromHash } from '@/helpers';
|
||||
import { join } from 'path';
|
||||
import renameFile from '@/api/server/files/renameFile';
|
||||
import { ServerContext } from '@/state/server';
|
||||
|
||||
interface FormikValues {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export default ({ file, ...props }: RequiredModalProps & { file: FileObject }) => {
|
||||
const server = ServerContext.useStoreState(state => state.server.data!);
|
||||
|
||||
const submit = (values: FormikValues, { setSubmitting }: FormikActions<FormikValues>) => {
|
||||
const renameFrom = join(getDirectoryFromHash(), file.name);
|
||||
const renameTo = join(getDirectoryFromHash(), values.name);
|
||||
|
||||
renameFile(server.uuid, { renameFrom, renameTo })
|
||||
.then(() => props.onDismissed())
|
||||
.catch(error => {
|
||||
setSubmitting(false);
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{ name: file.name }}
|
||||
>
|
||||
{({ isSubmitting }) => (
|
||||
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
|
||||
<Form className={'m-0'}>
|
||||
<Field
|
||||
type={'string'}
|
||||
id={'file_name'}
|
||||
name={'name'}
|
||||
label={'File Name'}
|
||||
description={'Enter the new name of this file or folder.'}
|
||||
/>
|
||||
<div className={'mt-6 text-right'}>
|
||||
<button className={'btn btn-sm btn-primary'}>
|
||||
Rename
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
|
@ -4,3 +4,10 @@ export function bytesToHuman (bytes: number): string {
|
|||
// @ts-ignore
|
||||
return `${(bytes / Math.pow(1000, i)).toFixed(2) * 1} ${['Bytes', 'kB', 'MB', 'GB', 'TB'][i]}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the current directory for the given window.
|
||||
*/
|
||||
export function getDirectoryFromHash (): string {
|
||||
return window.location.hash.replace(/^#(\/)+/, '/');
|
||||
}
|
||||
|
|
|
|||
13
yarn.lock
13
yarn.lock
|
|
@ -857,6 +857,10 @@
|
|||
version "4.14.119"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39"
|
||||
|
||||
"@types/node@^12.6.9":
|
||||
version "12.6.9"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.6.9.tgz#ffeee23afdc19ab16e979338e7b536fdebbbaeaf"
|
||||
|
||||
"@types/prop-types@*":
|
||||
version "15.7.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
|
||||
|
|
@ -5571,6 +5575,13 @@ path-type@^2.0.0:
|
|||
dependencies:
|
||||
pify "^2.0.0"
|
||||
|
||||
path@^0.12.7:
|
||||
version "0.12.7"
|
||||
resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
|
||||
dependencies:
|
||||
process "^0.11.1"
|
||||
util "^0.10.3"
|
||||
|
||||
pbkdf2@^3.0.3:
|
||||
version "3.0.16"
|
||||
resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.16.tgz#7404208ec6b01b62d85bf83853a8064f8d9c2a5c"
|
||||
|
|
@ -6266,7 +6277,7 @@ process-nextick-args@~2.0.0:
|
|||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
|
||||
|
||||
process@^0.11.10:
|
||||
process@^0.11.1, process@^0.11.10:
|
||||
version "0.11.10"
|
||||
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue