Handle mass actions for file deletion
This commit is contained in:
Dane Everitt
parent
82bc9e617b
commit
93cab68cc3
9 changed files with 147 additions and 31 deletions
|
|
@ -13,7 +13,7 @@ import {
|
|||
import RenameFileModal from '@/components/server/files/RenameFileModal';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { join } from 'path';
|
||||
import deleteFile from '@/api/server/files/deleteFile';
|
||||
import deleteFiles from '@/api/server/files/deleteFiles';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import copyFile from '@/api/server/files/copyFile';
|
||||
import Can from '@/components/elements/Can';
|
||||
|
|
@ -71,7 +71,7 @@ export default ({ file }: { file: FileObject }) => {
|
|||
// If the delete actually fails, we'll fetch the current directory contents again automatically.
|
||||
mutate(files => files.filter(f => f.uuid !== file.uuid), false);
|
||||
|
||||
deleteFile(uuid, join(directory, file.name)).catch(error => {
|
||||
deleteFiles(uuid, directory, [ file.name ]).catch(error => {
|
||||
mutate();
|
||||
clearAndAddHttpError({ key: 'files', error });
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ import Button from '@/components/elements/Button';
|
|||
import useServer from '@/plugins/useServer';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
|
||||
import { Form, Formik } from 'formik';
|
||||
import MassActionsBar from '@/components/server/files/MassActionsBar';
|
||||
|
||||
const sortFiles = (files: FileObject[]): FileObject[] => {
|
||||
return files.sort((a, b) => a.name.localeCompare(b.name))
|
||||
|
|
@ -55,23 +57,29 @@ export default () => {
|
|||
</p>
|
||||
:
|
||||
<CSSTransition classNames={'fade'} timeout={150} appear in>
|
||||
<React.Fragment>
|
||||
<div>
|
||||
{files.length > 250 &&
|
||||
<div css={tw`rounded bg-yellow-400 mb-px p-3`}>
|
||||
<p css={tw`text-yellow-900 text-sm text-center`}>
|
||||
This directory is too large to display in the browser,
|
||||
limiting the output to the first 250 files.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
sortFiles(files.slice(0, 250)).map(file => (
|
||||
<FileObjectRow key={file.uuid} file={file}/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
<div>
|
||||
<Formik
|
||||
onSubmit={() => undefined}
|
||||
initialValues={{ selectedFiles: [] }}
|
||||
>
|
||||
<Form>
|
||||
{files.length > 250 &&
|
||||
<div css={tw`rounded bg-yellow-400 mb-px p-3`}>
|
||||
<p css={tw`text-yellow-900 text-sm text-center`}>
|
||||
This directory is too large to display in the browser,
|
||||
limiting the output to the first 250 files.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
sortFiles(files.slice(0, 250)).map(file => (
|
||||
<FileObjectRow key={file.uuid} file={file}/>
|
||||
))
|
||||
}
|
||||
<MassActionsBar/>
|
||||
</Form>
|
||||
</Formik>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
}
|
||||
<Can action={'file.create'}>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,22 @@ import { NavLink, useHistory, useRouteMatch } from 'react-router-dom';
|
|||
import tw from 'twin.macro';
|
||||
import isEqual from 'react-fast-compare';
|
||||
import styled from 'styled-components/macro';
|
||||
import FormikCheckbox from '@/components/elements/Checkbox';
|
||||
|
||||
const Row = styled.div`
|
||||
${tw`flex bg-neutral-700 rounded-sm mb-px text-sm hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600`};
|
||||
`;
|
||||
|
||||
const Checkbox = styled(FormikCheckbox)`
|
||||
&& {
|
||||
${tw`border-neutral-500`};
|
||||
|
||||
&:not(:checked) {
|
||||
${tw`hover:border-neutral-300`};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const FileObjectRow = ({ file }: { file: FileObject }) => {
|
||||
const directory = ServerContext.useStoreState(state => state.files.directory);
|
||||
const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
|
||||
|
|
@ -44,12 +55,15 @@ const FileObjectRow = ({ file }: { file: FileObject }) => {
|
|||
window.dispatchEvent(new CustomEvent(`pterodactyl:files:ctx:${file.uuid}`, { detail: e.clientX }));
|
||||
}}
|
||||
>
|
||||
<label css={tw`flex-none p-4 absolute self-center z-30 cursor-pointer`}>
|
||||
<Checkbox name={'selectedFiles'} value={file.name}/>
|
||||
</label>
|
||||
<NavLink
|
||||
to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
|
||||
css={tw`flex flex-1 text-neutral-300 no-underline p-3`}
|
||||
onClick={onRowClick}
|
||||
>
|
||||
<div css={tw`flex-none text-neutral-400 mr-4 text-lg pl-3`}>
|
||||
<div css={tw`flex-none self-center text-neutral-400 mr-4 text-lg pl-3 ml-6`}>
|
||||
{file.isFile ?
|
||||
<FontAwesomeIcon icon={file.isSymlink ? faFileImport : faFileAlt}/>
|
||||
:
|
||||
|
|
|
|||
87
resources/scripts/components/server/files/MassActionsBar.tsx
Normal file
87
resources/scripts/components/server/files/MassActionsBar.tsx
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import React, { useState } from 'react';
|
||||
import tw from 'twin.macro';
|
||||
import Button from '@/components/elements/Button';
|
||||
import { useFormikContext } from 'formik';
|
||||
import Fade from '@/components/elements/Fade';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faFileArchive, faLevelUpAlt, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import compressFiles from '@/api/server/files/compressFiles';
|
||||
import useServer from '@/plugins/useServer';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import deleteFiles from '@/api/server/files/deleteFiles';
|
||||
|
||||
const MassActionsBar = () => {
|
||||
const { uuid } = useServer();
|
||||
const { mutate } = useFileManagerSwr();
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const [ loading, setLoading ] = useState(false);
|
||||
const [ showConfirm, setShowConfirm ] = useState(false);
|
||||
const { values, setFieldValue } = useFormikContext<{ selectedFiles: string[] }>();
|
||||
const directory = ServerContext.useStoreState(state => state.files.directory);
|
||||
|
||||
const onClickCompress = () => {
|
||||
setLoading(true);
|
||||
clearFlashes('files');
|
||||
|
||||
compressFiles(uuid, directory, values.selectedFiles)
|
||||
.then(() => mutate())
|
||||
.then(() => setFieldValue('selectedFiles', []))
|
||||
.catch(error => clearAndAddHttpError({ key: 'files', error }))
|
||||
.then(() => setLoading(false));
|
||||
};
|
||||
|
||||
const onClickConfirmDeletion = () => {
|
||||
setLoading(true);
|
||||
setShowConfirm(false);
|
||||
clearFlashes('files');
|
||||
|
||||
deleteFiles(uuid, directory, values.selectedFiles)
|
||||
.then(() => {
|
||||
mutate(files => files.filter(f => values.selectedFiles.indexOf(f.name) < 0), false);
|
||||
setFieldValue('selectedFiles', []);
|
||||
})
|
||||
.catch(error => {
|
||||
mutate();
|
||||
clearAndAddHttpError({ key: 'files', error });
|
||||
})
|
||||
.then(() => setLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Fade timeout={75} in={values.selectedFiles.length > 0} unmountOnExit>
|
||||
<div css={tw`fixed bottom-0 z-50 left-0 right-0 flex justify-center`}>
|
||||
<SpinnerOverlay visible={loading} size={'large'} fixed/>
|
||||
<ConfirmationModal
|
||||
visible={showConfirm}
|
||||
title={'Delete these files?'}
|
||||
buttonText={'Yes, Delete Files'}
|
||||
onConfirmed={onClickConfirmDeletion}
|
||||
onDismissed={() => setShowConfirm(false)}
|
||||
>
|
||||
Deleting files is a permanent operation, you cannot undo this action.
|
||||
</ConfirmationModal>
|
||||
<div css={tw`rounded p-4 mb-6`} style={{ background: 'rgba(0, 0, 0, 0.35)' }}>
|
||||
<Button size={'xsmall'} css={tw`mr-4`}>
|
||||
<FontAwesomeIcon icon={faLevelUpAlt} css={tw`mr-2`}/> Move
|
||||
</Button>
|
||||
<Button
|
||||
size={'xsmall'}
|
||||
css={tw`mr-4`}
|
||||
onClick={onClickCompress}
|
||||
>
|
||||
<FontAwesomeIcon icon={faFileArchive} css={tw`mr-2`}/> Archive
|
||||
</Button>
|
||||
<Button size={'xsmall'} color={'red'} isSecondary onClick={() => setShowConfirm(true)}>
|
||||
<FontAwesomeIcon icon={faTrashAlt} css={tw`mr-2`}/> Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Fade>
|
||||
);
|
||||
};
|
||||
|
||||
export default MassActionsBar;
|
||||
Loading…
Add table
Add a link
Reference in a new issue