2018-10-25 05:36:06 +00:00
|
|
|
import React from 'react';
|
2024-09-23 01:48:43 +00:00
|
|
|
import { Modal, ModalHeader } from 'reactstrap';
|
2024-11-08 10:04:48 +00:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { IconBtn } from '@seafile/sf-metadata-ui-component';
|
2024-09-23 01:48:43 +00:00
|
|
|
import SelectDirentBody from './select-dirent-body';
|
2024-11-08 10:04:48 +00:00
|
|
|
import { gettext, isPro } from '../../utils/constants';
|
2018-10-25 05:36:06 +00:00
|
|
|
import { Utils } from '../../utils/utils';
|
2024-11-08 10:04:48 +00:00
|
|
|
import Searcher from '../file-chooser/searcher';
|
|
|
|
import { MODE_TYPE_MAP } from '../file-chooser/repo-list-wrapper';
|
|
|
|
import { RepoInfo } from '../../models';
|
|
|
|
import { seafileAPI } from '../../utils/seafile-api';
|
|
|
|
import toaster from '../toast';
|
2018-10-25 05:36:06 +00:00
|
|
|
|
|
|
|
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,
|
2024-11-08 10:04:48 +00:00
|
|
|
onAddFolder: PropTypes.func,
|
2018-10-25 05:36:06 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
class MoveDirent extends React.Component {
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
2024-11-08 10:04:48 +00:00
|
|
|
mode: MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY,
|
2022-02-16 03:24:54 +00:00
|
|
|
repo: { repo_id: this.props.repoID },
|
|
|
|
selectedPath: this.props.path,
|
2024-11-08 10:04:48 +00:00
|
|
|
selectedSearchedItem: null,
|
|
|
|
selectedSearchedRepo: null,
|
|
|
|
searchStatus: '',
|
|
|
|
searchResults: [],
|
|
|
|
showSearchBar: false,
|
2024-08-05 02:48:16 +00:00
|
|
|
errMessage: '',
|
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-09-23 01:48:43 +00:00
|
|
|
this.setErrMessage(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-09-23 01:48:43 +00:00
|
|
|
this.setErrMessage(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-09-23 01:48:43 +00:00
|
|
|
this.setErrMessage(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-09-23 01:48:43 +00:00
|
|
|
this.setErrMessage(message);
|
2018-11-23 12:19:42 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2024-11-09 08:48:46 +00:00
|
|
|
this.props.onItemsMove(repo, selectedPath, true);
|
2018-11-23 12:19:42 +00:00
|
|
|
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-09-23 01:48:43 +00:00
|
|
|
this.setErrMessage(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-09-23 01:48:43 +00:00
|
|
|
this.setErrMessage(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-09-23 01:48:43 +00:00
|
|
|
this.setErrMessage(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-09-23 01:48:43 +00:00
|
|
|
this.setErrMessage(message);
|
2018-10-25 05:36:06 +00:00
|
|
|
return;
|
|
|
|
}
|
2018-11-23 12:19:42 +00:00
|
|
|
|
2024-11-09 08:48:46 +00:00
|
|
|
this.props.onItemMove(repo, this.props.dirent, selectedPath, this.props.path, true);
|
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
|
|
|
|
2024-09-23 01:48:43 +00:00
|
|
|
selectRepo = (repo) => {
|
|
|
|
this.setState({ repo });
|
2023-09-13 00:40:50 +00:00
|
|
|
};
|
2018-10-25 05:36:06 +00:00
|
|
|
|
2024-09-23 01:48:43 +00:00
|
|
|
setSelectedPath = (selectedPath) => {
|
|
|
|
this.setState({ selectedPath });
|
2023-09-13 00:40:50 +00:00
|
|
|
};
|
2018-10-25 05:36:06 +00:00
|
|
|
|
2024-09-23 01:48:43 +00:00
|
|
|
setErrMessage = (message) => {
|
|
|
|
this.setState({ errMessage: message });
|
2024-08-05 02:48:16 +00:00
|
|
|
};
|
|
|
|
|
2024-11-08 10:04:48 +00:00
|
|
|
onUpdateMode = (mode) => {
|
|
|
|
if (mode === this.state.mode) return;
|
|
|
|
|
|
|
|
if (this.state.mode === MODE_TYPE_MAP.SEARCH_RESULTS) {
|
|
|
|
this.setState({
|
|
|
|
selectedSearchedRepo: null,
|
|
|
|
selectedSearchedItem: null,
|
|
|
|
searchResults: [],
|
|
|
|
showSearchBar: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.state.selectedSearchedRepo) {
|
|
|
|
this.setState({
|
|
|
|
selectedSearchedRepo: null,
|
|
|
|
selectedSearchedItem: null,
|
|
|
|
searchResults: [],
|
|
|
|
showSearchBar: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
mode,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
onUpdateSearchStatus = (status) => {
|
|
|
|
this.setState({ searchStatus: status });
|
|
|
|
};
|
|
|
|
|
|
|
|
onUpdateSearchResults = (results) => {
|
|
|
|
this.setState({
|
|
|
|
searchResults: results
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
onDirentItemClick = (repo, selectedPath) => {
|
|
|
|
this.setState({
|
|
|
|
selectedPath: selectedPath,
|
|
|
|
repo,
|
|
|
|
errMessage: '',
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
onOpenSearchBar = () => {
|
|
|
|
this.setState({ showSearchBar: true });
|
|
|
|
};
|
|
|
|
|
|
|
|
onCloseSearchBar = () => {
|
|
|
|
const { selectedSearchedRepo } = this.state;
|
|
|
|
const mode = (!selectedSearchedRepo || selectedSearchedRepo.repo_id === this.props.repoID) ? MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY : MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES;
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
mode,
|
|
|
|
searchStatus: '',
|
|
|
|
searchResults: [],
|
|
|
|
selectedSearchedRepo: null,
|
|
|
|
showSearchBar: false
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
onSearchedItemClick = (item) => {
|
|
|
|
item['type'] = item.is_dir ? 'dir' : 'file';
|
|
|
|
let repo = new RepoInfo(item);
|
|
|
|
this.onDirentItemClick(repo, item.path, item);
|
|
|
|
};
|
|
|
|
|
|
|
|
onSearchedItemDoubleClick = (item) => {
|
|
|
|
if (item.type !== 'dir') return;
|
|
|
|
|
|
|
|
const selectedItemInfo = {
|
|
|
|
repoID: item.repo_id,
|
|
|
|
filePath: item.path,
|
|
|
|
};
|
|
|
|
|
|
|
|
this.setState({ selectedSearchedItem: selectedItemInfo });
|
|
|
|
|
|
|
|
seafileAPI.getRepoInfo(item.repo_id).then(res => {
|
|
|
|
const repoInfo = new RepoInfo(res.data);
|
|
|
|
const path = item.path.substring(0, item.path.length - 1);
|
|
|
|
const mode = item.repo_id === this.props.repoID ? MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY : MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES;
|
|
|
|
this.setState({
|
|
|
|
mode,
|
|
|
|
searchResults: [],
|
|
|
|
selectedSearchedRepo: repoInfo,
|
|
|
|
selectedPath: path,
|
|
|
|
showSearchBar: mode === MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES,
|
|
|
|
});
|
|
|
|
}).catch(err => {
|
|
|
|
const errMessage = Utils.getErrorMsg(err);
|
|
|
|
toaster.danger(errMessage);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2024-08-05 02:48:16 +00:00
|
|
|
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() {
|
2024-09-23 01:48:43 +00:00
|
|
|
const { dirent, selectedDirentList, isMultipleOperation, path, repoID } = this.props;
|
2024-11-08 10:04:48 +00:00
|
|
|
const { mode, selectedPath, showSearchBar, searchStatus, searchResults, selectedSearchedRepo, errMessage } = this.state;
|
2024-08-05 02:48:16 +00:00
|
|
|
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
|
|
|
|
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-11-11 04:31:12 +00:00
|
|
|
<ModalHeader toggle={this.toggle} close={
|
|
|
|
<div className="header-close-list">
|
|
|
|
<span aria-hidden="true" className="sf3-font sf3-font-x-01 comment-close-icon" onClick={this.toggle}></span>
|
|
|
|
</div>
|
|
|
|
}>
|
2024-11-08 10:04:48 +00:00
|
|
|
{isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className='d-flex'></div>}
|
|
|
|
{isPro && (
|
|
|
|
showSearchBar ? (
|
|
|
|
<Searcher
|
|
|
|
onUpdateMode={this.onUpdateMode}
|
|
|
|
onUpdateSearchStatus={this.onUpdateSearchStatus}
|
|
|
|
onUpdateSearchResults={this.onUpdateSearchResults}
|
|
|
|
onClose={this.onCloseSearchBar}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<IconBtn
|
|
|
|
iconName="search"
|
|
|
|
size={24}
|
|
|
|
className="search"
|
|
|
|
onClick={this.onOpenSearchBar}
|
|
|
|
role="button"
|
|
|
|
onKeyDown={() => {}}
|
|
|
|
tabIndex={0}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
)}
|
2024-03-07 07:37:09 +00:00
|
|
|
</ModalHeader>
|
2024-09-23 01:48:43 +00:00
|
|
|
<SelectDirentBody
|
|
|
|
path={path}
|
2024-11-08 10:04:48 +00:00
|
|
|
selectedPath={selectedPath}
|
2024-09-23 01:48:43 +00:00
|
|
|
repoID={repoID}
|
|
|
|
isSupportOtherLibraries={!isCustomPermission}
|
2024-11-08 10:04:48 +00:00
|
|
|
errMessage={errMessage}
|
2024-09-23 01:48:43 +00:00
|
|
|
onCancel={this.toggle}
|
|
|
|
selectRepo={this.selectRepo}
|
|
|
|
setSelectedPath={this.setSelectedPath}
|
|
|
|
setErrMessage={this.setErrMessage}
|
|
|
|
handleSubmit={this.handleSubmit}
|
2024-11-08 10:04:48 +00:00
|
|
|
mode={mode}
|
|
|
|
onUpdateMode={this.onUpdateMode}
|
|
|
|
searchStatus={searchStatus}
|
|
|
|
searchResults={searchResults}
|
|
|
|
onSearchedItemClick={this.onSearchedItemClick}
|
|
|
|
onSearchedItemDoubleClick={this.onSearchedItemDoubleClick}
|
|
|
|
selectedSearchedRepo={selectedSearchedRepo}
|
|
|
|
onAddFolder={this.props.onAddFolder}
|
2024-09-23 01:48:43 +00:00
|
|
|
/>
|
2018-10-25 05:36:06 +00:00
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
MoveDirent.propTypes = propTypes;
|
|
|
|
|
|
|
|
export default MoveDirent;
|