Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Basic working file rename modal

Browse source
This commit is contained in:
Dane Everitt 2019-08-02 22:22:01 -07:00
parent f4d0694670
commit 2716ff8841
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
8 changed files with 120 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -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
View 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);
});
};

5
resources/scripts/components/elements/Modal.tsx
View file

@ -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;

22
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

@ -7,14 +7,16 @@ 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 [posX, setPosX] = useState(0);
const [ modal, setModal ] = useState<ModalType | null>(null);
const [ posX, setPosX ] = useState(0);
const windowListener = (e: MouseEvent) => {
if (e.button === 2 || !visible || !menu.current) {
@ -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
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -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>

55
resources/scripts/components/server/files/RenameFileModal.tsx Normal file
View file

@ -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>
);
};

7
resources/scripts/helpers.ts
View file

@ -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
View file

@ -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"