2018-10-25 05:36:06 +00:00
|
|
|
|
import React from 'react';
|
|
|
|
|
import PropTypes from 'prop-types';
|
2024-08-05 02:48:16 +00:00
|
|
|
|
import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert, Row, Col } from 'reactstrap';
|
2018-11-28 04:41:49 +00:00
|
|
|
|
import { gettext } from '../../utils/constants';
|
2018-10-25 05:36:06 +00:00
|
|
|
|
import { Utils } from '../../utils/utils';
|
|
|
|
|
import FileChooser from '../file-chooser/file-chooser';
|
|
|
|
|
|
|
|
|
|
const propTypes = {
|
2018-11-23 12:19:42 +00:00
|
|
|
|
path: PropTypes.string.isRequired,
|
2018-11-28 04:41:49 +00:00
|
|
|
|
repoID: PropTypes.string.isRequired,
|
2018-11-23 12:19:42 +00:00
|
|
|
|
dirent: PropTypes.object,
|
2018-11-27 06:47:19 +00:00
|
|
|
|
selectedDirentList: PropTypes.array,
|
2024-08-02 03:41:07 +00:00
|
|
|
|
isMultipleOperation: PropTypes.bool.isRequired,
|
2018-11-27 06:47:19 +00:00
|
|
|
|
onItemMove: PropTypes.func,
|
|
|
|
|
onItemsMove: PropTypes.func,
|
2018-10-25 05:36:06 +00:00
|
|
|
|
onCancelMove: PropTypes.func.isRequired,
|
2019-03-20 03:04:36 +00:00
|
|
|
|
repoEncrypted: PropTypes.bool.isRequired,
|
2018-10-25 05:36:06 +00:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// need dirent file Path;
|
|
|
|
|
class MoveDirent extends React.Component {
|
|
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
2022-02-16 03:24:54 +00:00
|
|
|
|
repo: { repo_id: this.props.repoID },
|
|
|
|
|
selectedPath: this.props.path,
|
2024-08-05 02:48:16 +00:00
|
|
|
|
errMessage: '',
|
|
|
|
|
mode: 'only_current_library',
|
2018-10-25 05:36:06 +00:00
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleSubmit = () => {
|
2024-08-02 03:41:07 +00:00
|
|
|
|
if (this.props.isMultipleOperation) {
|
2018-11-23 12:19:42 +00:00
|
|
|
|
this.moveItems();
|
|
|
|
|
} else {
|
|
|
|
|
this.moveItem();
|
|
|
|
|
}
|
2023-09-13 00:40:50 +00:00
|
|
|
|
};
|
2018-11-23 12:19:42 +00:00
|
|
|
|
|
|
|
|
|
moveItems = () => {
|
2019-01-23 08:25:14 +00:00
|
|
|
|
let { repoID } = this.props;
|
|
|
|
|
let { repo, selectedPath } = this.state;
|
2018-11-23 12:19:42 +00:00
|
|
|
|
let message = gettext('Invalid destination path');
|
2020-11-02 05:56:35 +00:00
|
|
|
|
|
2018-11-27 06:47:19 +00:00
|
|
|
|
if (!repo || selectedPath === '') {
|
2024-07-18 03:58:42 +00:00
|
|
|
|
this.setState({ errMessage: message });
|
2018-11-23 12:19:42 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let selectedDirentList = this.props.selectedDirentList;
|
|
|
|
|
let direntPaths = [];
|
|
|
|
|
selectedDirentList.forEach(dirent => {
|
|
|
|
|
let path = Utils.joinPath(this.props.path, dirent.name);
|
|
|
|
|
direntPaths.push(path);
|
|
|
|
|
});
|
2020-11-02 05:56:35 +00:00
|
|
|
|
|
2018-12-22 03:17:03 +00:00
|
|
|
|
// move dirents to one of them. eg: A/B, A/C -> A/B
|
2018-11-27 06:47:19 +00:00
|
|
|
|
if (direntPaths.some(direntPath => { return direntPath === selectedPath;})) {
|
2024-07-18 03:58:42 +00:00
|
|
|
|
this.setState({ errMessage: message });
|
2018-11-23 12:19:42 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-22 03:17:03 +00:00
|
|
|
|
// move dirents to current path
|
2018-11-27 06:47:19 +00:00
|
|
|
|
if (selectedPath && selectedPath === this.props.path && (repo.repo_id === repoID)) {
|
2024-07-18 03:58:42 +00:00
|
|
|
|
this.setState({ errMessage: message });
|
2018-11-23 12:19:42 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-22 03:17:03 +00:00
|
|
|
|
// move dirents to one of their child. eg: A/B, A/D -> A/B/C
|
2018-11-23 12:19:42 +00:00
|
|
|
|
let moveDirentPath = '';
|
|
|
|
|
let isChildPath = direntPaths.some(direntPath => {
|
|
|
|
|
let flag = selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1;
|
|
|
|
|
if (flag) {
|
|
|
|
|
moveDirentPath = direntPath;
|
|
|
|
|
}
|
|
|
|
|
return flag;
|
2018-11-27 06:47:19 +00:00
|
|
|
|
});
|
2018-11-23 12:19:42 +00:00
|
|
|
|
|
|
|
|
|
if (isChildPath) {
|
2024-08-23 09:09:56 +00:00
|
|
|
|
message = gettext('Can not move folder %(src)s to its subfolder %(des)s');
|
2018-11-23 12:19:42 +00:00
|
|
|
|
message = message.replace('%(src)s', moveDirentPath);
|
|
|
|
|
message = message.replace('%(des)s', selectedPath);
|
2024-07-18 03:58:42 +00:00
|
|
|
|
this.setState({ errMessage: message });
|
2018-11-23 12:19:42 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.props.onItemsMove(repo, selectedPath);
|
|
|
|
|
this.toggle();
|
2023-09-13 00:40:50 +00:00
|
|
|
|
};
|
2018-11-23 12:19:42 +00:00
|
|
|
|
|
|
|
|
|
moveItem = () => {
|
2019-05-31 05:44:10 +00:00
|
|
|
|
let { repoID } = this.props;
|
2020-11-02 05:56:35 +00:00
|
|
|
|
let { repo, selectedPath } = this.state;
|
2018-11-27 06:47:19 +00:00
|
|
|
|
let direntPath = Utils.joinPath(this.props.path, this.props.dirent.name);
|
2018-10-25 05:36:06 +00:00
|
|
|
|
let message = gettext('Invalid destination path');
|
|
|
|
|
|
2018-11-23 12:19:42 +00:00
|
|
|
|
if (!repo || (repo.repo_id === repoID && selectedPath === '')) {
|
2024-07-18 03:58:42 +00:00
|
|
|
|
this.setState({ errMessage: message });
|
2018-10-25 05:36:06 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
2020-11-02 05:56:35 +00:00
|
|
|
|
|
2018-11-23 12:19:42 +00:00
|
|
|
|
// copy the dirent to itself. eg: A/B -> A/B
|
|
|
|
|
if (selectedPath && direntPath === selectedPath) {
|
2024-07-18 03:58:42 +00:00
|
|
|
|
this.setState({ errMessage: message });
|
2018-10-25 05:36:06 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
2020-11-02 05:56:35 +00:00
|
|
|
|
|
2018-11-23 12:19:42 +00:00
|
|
|
|
// copy the dirent to current path
|
2018-11-28 04:41:49 +00:00
|
|
|
|
if (selectedPath && this.props.path === selectedPath && repo.repo_id === repoID) {
|
2024-07-18 03:58:42 +00:00
|
|
|
|
this.setState({ errMessage: message });
|
2018-10-25 05:36:06 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
2020-11-02 05:56:35 +00:00
|
|
|
|
|
2018-11-23 12:19:42 +00:00
|
|
|
|
// copy the dirent to it's child. eg: A/B -> A/B/C
|
2024-07-23 15:08:53 +00:00
|
|
|
|
if (selectedPath && selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1) {
|
2024-08-23 09:09:56 +00:00
|
|
|
|
message = gettext('Can not move folder %(src)s to its subfolder %(des)s');
|
2018-10-25 05:36:06 +00:00
|
|
|
|
message = message.replace('%(src)s', direntPath);
|
2018-11-23 12:19:42 +00:00
|
|
|
|
message = message.replace('%(des)s', selectedPath);
|
2024-07-18 03:58:42 +00:00
|
|
|
|
this.setState({ errMessage: message });
|
2018-10-25 05:36:06 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
2018-11-23 12:19:42 +00:00
|
|
|
|
|
2019-03-20 03:04:36 +00:00
|
|
|
|
this.props.onItemMove(repo, this.props.dirent, selectedPath, this.props.path);
|
2018-10-25 05:36:06 +00:00
|
|
|
|
this.toggle();
|
2023-09-13 00:40:50 +00:00
|
|
|
|
};
|
2018-10-25 05:36:06 +00:00
|
|
|
|
|
|
|
|
|
toggle = () => {
|
|
|
|
|
this.props.onCancelMove();
|
2023-09-13 00:40:50 +00:00
|
|
|
|
};
|
2018-10-25 05:36:06 +00:00
|
|
|
|
|
2018-11-23 12:19:42 +00:00
|
|
|
|
onDirentItemClick = (repo, selectedPath) => {
|
2018-10-25 05:36:06 +00:00
|
|
|
|
this.setState({
|
|
|
|
|
repo: repo,
|
2018-11-23 12:19:42 +00:00
|
|
|
|
selectedPath: selectedPath,
|
2022-02-16 03:24:54 +00:00
|
|
|
|
errMessage: ''
|
2018-10-25 05:36:06 +00:00
|
|
|
|
});
|
2023-09-13 00:40:50 +00:00
|
|
|
|
};
|
2018-10-25 05:36:06 +00:00
|
|
|
|
|
|
|
|
|
onRepoItemClick = (repo) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
repo: repo,
|
2018-11-23 12:19:42 +00:00
|
|
|
|
selectedPath: '/',
|
2018-10-25 05:36:06 +00:00
|
|
|
|
errMessage: ''
|
|
|
|
|
});
|
2023-09-13 00:40:50 +00:00
|
|
|
|
};
|
2018-10-25 05:36:06 +00:00
|
|
|
|
|
2024-08-05 02:48:16 +00:00
|
|
|
|
onSelectedMode = (mode) => {
|
|
|
|
|
this.setState({ mode: mode });
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
renderTitle = () => {
|
|
|
|
|
const { dirent, isMultipleOperation } = this.props;
|
2019-05-27 09:13:15 +00:00
|
|
|
|
let title = gettext('Move {placeholder} to');
|
2024-08-05 02:48:16 +00:00
|
|
|
|
|
|
|
|
|
if (isMultipleOperation) {
|
|
|
|
|
return gettext('Move selected item(s) to:');
|
2018-11-23 12:19:42 +00:00
|
|
|
|
} else {
|
2024-08-05 02:48:16 +00:00
|
|
|
|
return title.replace('{placeholder}', `<span class="op-target text-truncate mx-1">${Utils.HTMLescape(dirent.name)}</span>`);
|
2018-11-23 12:19:42 +00:00
|
|
|
|
}
|
2024-08-05 02:48:16 +00:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const { dirent, selectedDirentList, isMultipleOperation, repoID, path } = this.props;
|
|
|
|
|
const { mode, errMessage } = this.state;
|
|
|
|
|
|
|
|
|
|
const movedDirent = dirent || selectedDirentList[0];
|
2021-09-24 04:17:20 +00:00
|
|
|
|
const { permission } = movedDirent;
|
2021-09-13 02:37:07 +00:00
|
|
|
|
const { isCustomPermission } = Utils.getUserPermission(permission);
|
2024-08-05 02:48:16 +00:00
|
|
|
|
|
|
|
|
|
const LibraryOption = ({ mode, label }) => (
|
|
|
|
|
<div className={`repo-list-item ${this.state.mode === mode ? 'active' : ''}`} onClick={() => this.onSelectedMode(mode)}>
|
|
|
|
|
<span className='library'>{label}</span>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
2018-10-25 05:36:06 +00:00
|
|
|
|
return (
|
2024-08-05 02:48:16 +00:00
|
|
|
|
<Modal className='custom-modal' isOpen={true} toggle={this.toggle}>
|
2024-03-07 07:37:09 +00:00
|
|
|
|
<ModalHeader toggle={this.toggle}>
|
2024-08-05 02:48:16 +00:00
|
|
|
|
{isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className='d-flex mw-100'></div>}
|
2024-03-07 07:37:09 +00:00
|
|
|
|
</ModalHeader>
|
2024-08-05 02:48:16 +00:00
|
|
|
|
<Row>
|
|
|
|
|
<Col className='repo-list-col border-right' >
|
|
|
|
|
<LibraryOption mode='only_current_library' label={gettext('Current Library')} />
|
|
|
|
|
{!isCustomPermission && <LibraryOption mode='only_other_libraries' label={gettext('Other Libraries')} />}
|
|
|
|
|
<LibraryOption mode='recently_used' label={gettext('Recently Used')} />
|
|
|
|
|
</Col>
|
|
|
|
|
<Col className='file-list-col'>
|
|
|
|
|
<ModalBody>
|
|
|
|
|
<FileChooser
|
|
|
|
|
repoID={repoID}
|
|
|
|
|
currentPath={path}
|
|
|
|
|
onDirentItemClick={this.onDirentItemClick}
|
|
|
|
|
onRepoItemClick={this.onRepoItemClick}
|
|
|
|
|
mode={mode}
|
|
|
|
|
hideLibraryName={false}
|
|
|
|
|
/>
|
|
|
|
|
{errMessage && <Alert color="danger" className="alert-message">{errMessage}</Alert>}
|
|
|
|
|
</ModalBody>
|
|
|
|
|
<ModalFooter>
|
|
|
|
|
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
|
|
|
|
|
<Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
|
|
|
|
|
</ModalFooter>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
2018-10-25 05:36:06 +00:00
|
|
|
|
</Modal>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
MoveDirent.propTypes = propTypes;
|
|
|
|
|
|
|
|
|
|
export default MoveDirent;
|