Skip to content

Commit 2716ff8

Browse files
DaneEverittDaneEveritt
committed
Basic working file rename modal
1 parent f4d0694 commit 2716ff8

8 files changed

Lines changed: 120 additions & 12 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"formik": "^1.5.7",
1616
"jquery": "^3.3.1",
1717
"lodash": "^4.17.11",
18+
"path": "^0.12.7",
1819
"query-string": "^6.7.0",
1920
"react": "^16.8.6",
2021
"react-dom": "^16.8.6",
@@ -41,6 +42,7 @@
4142
"@types/events": "^3.0.0",
4243
"@types/feather-icons": "^4.7.0",
4344
"@types/lodash": "^4.14.119",
45+
"@types/node": "^12.6.9",
4446
"@types/query-string": "^6.3.0",
4547
"@types/react": "^16.8.19",
4648
"@types/react-dom": "^16.8.4",

‎resources/scripts/api/server/files/renameFile.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import http from '@/api/http';
2+
3+
interface Data {
4+
renameFrom: string;
5+
renameTo: string;
6+
}
7+
8+
export default (uuid: string, { renameFrom, renameTo }: Data): Promise<void> => {
9+
return new Promise((resolve, reject) => {
10+
http.put(`/api/client/servers/${uuid}/files/rename`, {
11+
// eslint-disable-next-line @typescript-eslint/camelcase
12+
rename_from: renameFrom,
13+
// eslint-disable-next-line @typescript-eslint/camelcase
14+
rename_to: renameTo,
15+
})
16+
.then(() => resolve())
17+
.catch(reject);
18+
});
19+
};

‎resources/scripts/components/elements/Modal.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
44
import { CSSTransition } from 'react-transition-group';
55
import Spinner from '@/components/elements/Spinner';
66

7-
interface Props {
7+
export interface RequiredModalProps {
88
visible: boolean;
99
onDismissed: () => void;
10+
}
11+
12+
type Props = RequiredModalProps & {
1013
dismissable?: boolean;
1114
closeOnEscape?: boolean;
1215
closeOnBackground?: boolean;

‎resources/scripts/components/server/files/FileDropdownMenu.tsx‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,16 @@ import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
77
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
88
import { faFileDownload } from '@fortawesome/free-solid-svg-icons/faFileDownload';
99
import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
10-
import { faArrowsAltH } from '@fortawesome/free-solid-svg-icons/faArrowsAltH';
11-
import { faBalanceScaleLeft } from '@fortawesome/free-solid-svg-icons/faBalanceScaleLeft';
1210
import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
11+
import RenameFileModal from '@/components/server/files/RenameFileModal';
12+
13+
type ModalType = 'rename' | 'move';
1314

1415
export default ({ file }: { file: FileObject }) => {
1516
const menu = createRef<HTMLDivElement>();
1617
const [ visible, setVisible ] = useState(false);
17-
const [posX, setPosX] = useState(0);
18+
const [ modal, setModal ] = useState<ModalType | null>(null);
19+
const [ posX, setPosX ] = useState(0);
1820

1921
const windowListener = (e: MouseEvent) => {
2022
if (e.button === 2 || !visible || !menu.current) {
@@ -37,7 +39,7 @@ export default ({ file }: { file: FileObject }) => {
3739

3840
if (visible && menu.current) {
3941
menu.current.setAttribute(
40-
'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`
42+
'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`,
4143
);
4244
}
4345
}, [ visible ]);
@@ -54,18 +56,28 @@ export default ({ file }: { file: FileObject }) => {
5456
e.preventDefault();
5557
if (!visible) {
5658
setPosX(e.clientX);
59+
} else if (visible) {
60+
setModal(null);
5761
}
5862
setVisible(!visible);
5963
}}
6064
>
6165
<FontAwesomeIcon icon={faEllipsisH}/>
6266
</div>
67+
{visible &&
68+
<React.Fragment>
69+
<RenameFileModal file={file} visible={modal === 'rename'} onDismissed={() => setModal(null)}/>
70+
</React.Fragment>
71+
}
6372
<CSSTransition timeout={250} in={visible} unmountOnExit={true} classNames={'fade'}>
6473
<div
6574
className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
6675
ref={menu}
6776
>
68-
<div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
77+
<div
78+
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
79+
onClick={() => setModal('rename')}
80+
>
6981
<FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/>
7082
<span className={'ml-2'}>Rename</span>
7183
</div>

‎resources/scripts/components/server/files/FileManagerContainer.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,18 @@ import { CSSTransition } from 'react-transition-group';
99
import { Link } from 'react-router-dom';
1010
import Spinner from '@/components/elements/Spinner';
1111
import FileObjectRow from '@/components/server/files/FileObjectRow';
12+
import { getDirectoryFromHash } from '@/helpers';
1213

1314
export default () => {
1415
const [ loading, setLoading ] = useState(true);
1516
const [ files, setFiles ] = useState<FileObject[]>([]);
1617
const server = ServerContext.useStoreState(state => state.server.data!);
1718
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
1819

19-
const currentDirectory = window.location.hash.replace(/^#(\/)+/, '/');
20-
2120
const load = () => {
2221
setLoading(true);
2322
clearFlashes();
24-
loadDirectory(server.uuid, currentDirectory)
23+
loadDirectory(server.uuid, getDirectoryFromHash())
2524
.then(files => {
2625
setFiles(files);
2726
setLoading(false);
@@ -37,7 +36,7 @@ export default () => {
3736
});
3837
};
3938

40-
const breadcrumbs = (): { name: string; path?: string }[] => currentDirectory.split('/')
39+
const breadcrumbs = (): { name: string; path?: string }[] => getDirectoryFromHash().split('/')
4140
.filter(directory => !!directory)
4241
.map((directory, index, dirs) => {
4342
if (index === dirs.length - 1) {
@@ -87,7 +86,7 @@ export default () => {
8786
<div>
8887
{
8988
files.map(file => (
90-
<FileObjectRow key={file.name} directory={currentDirectory} file={file}/>
89+
<FileObjectRow key={file.name} directory={getDirectoryFromHash()} file={file}/>
9190
))
9291
}
9392
</div>

‎resources/scripts/components/server/files/RenameFileModal.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
3+
import { Form, Formik, FormikActions } from 'formik';
4+
import { FileObject } from '@/api/server/files/loadDirectory';
5+
import Field from '@/components/elements/Field';
6+
import { getDirectoryFromHash } from '@/helpers';
7+
import { join } from 'path';
8+
import renameFile from '@/api/server/files/renameFile';
9+
import { ServerContext } from '@/state/server';
10+
11+
interface FormikValues {
12+
name: string;
13+
}
14+
15+
export default ({ file, ...props }: RequiredModalProps & { file: FileObject }) => {
16+
const server = ServerContext.useStoreState(state => state.server.data!);
17+
18+
const submit = (values: FormikValues, { setSubmitting }: FormikActions<FormikValues>) => {
19+
const renameFrom = join(getDirectoryFromHash(), file.name);
20+
const renameTo = join(getDirectoryFromHash(), values.name);
21+
22+
renameFile(server.uuid, { renameFrom, renameTo })
23+
.then(() => props.onDismissed())
24+
.catch(error => {
25+
setSubmitting(false);
26+
console.error(error);
27+
});
28+
};
29+
30+
return (
31+
<Formik
32+
onSubmit={submit}
33+
initialValues={{ name: file.name }}
34+
>
35+
{({ isSubmitting }) => (
36+
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
37+
<Form className={'m-0'}>
38+
<Field
39+
type={'string'}
40+
id={'file_name'}
41+
name={'name'}
42+
label={'File Name'}
43+
description={'Enter the new name of this file or folder.'}
44+
/>
45+
<div className={'mt-6 text-right'}>
46+
<button className={'btn btn-sm btn-primary'}>
47+
Rename
48+
</button>
49+
</div>
50+
</Form>
51+
</Modal>
52+
)}
53+
</Formik>
54+
);
55+
};

‎resources/scripts/helpers.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,10 @@ export function bytesToHuman (bytes: number): string {
44
// @ts-ignore
55
return `${(bytes / Math.pow(1000, i)).toFixed(2) * 1} ${['Bytes', 'kB', 'MB', 'GB', 'TB'][i]}`;
66
}
7+
8+
/**
9+
* Returns the current directory for the given window.
10+
*/
11+
export function getDirectoryFromHash (): string {
12+
return window.location.hash.replace(/^#(\/)+/, '/');
13+
}

‎yarn.lock‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -857,6 +857,10 @@
857857
version "4.14.119"
858858
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39"
859859

860+
"@types/node@^12.6.9":
861+
version "12.6.9"
862+
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.6.9.tgz#ffeee23afdc19ab16e979338e7b536fdebbbaeaf"
863+
860864
"@types/prop-types@*":
861865
version "15.7.1"
862866
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
@@ -5571,6 +5575,13 @@ path-type@^2.0.0:
55715575
dependencies:
55725576
pify "^2.0.0"
55735577

5578+
path@^0.12.7:
5579+
version "0.12.7"
5580+
resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
5581+
dependencies:
5582+
process "^0.11.1"
5583+
util "^0.10.3"
5584+
55745585
pbkdf2@^3.0.3:
55755586
version "3.0.16"
55765587
resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.16.tgz#7404208ec6b01b62d85bf83853a8064f8d9c2a5c"
@@ -6266,7 +6277,7 @@ process-nextick-args@~2.0.0:
62666277
version "2.0.0"
62676278
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
62686279

6269-
process@^0.11.10:
6280+
process@^0.11.1, process@^0.11.10:
62706281
version "0.11.10"
62716282
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
62726283

0 commit comments

Comments
 (0)