Wiki mutiple chioce (#2559)

frontend/src/components/dialog/move-dirent-dialog.js

@@ -6,9 +6,13 @@ import { Utils } from '../../utils/utils';
 import FileChooser from '../file-chooser/file-chooser';
 
 const propTypes = {
+  path: PropTypes.string.isRequired,
   direntPath: PropTypes.string,
-  dirent: PropTypes.object.isRequired,
+  dirent: PropTypes.object,
+  isMutipleOperation: PropTypes.bool.isRequired,
+  selectedDirentList: PropTypes.array.isRequired,
   onItemMove: PropTypes.func.isRequired,
+  onItemsMove: PropTypes.func.isRequired,
   onCancelMove: PropTypes.func.isRequired,
 };
 
@@ -19,7 +23,7 @@ class MoveDirent extends React.Component {
     super(props);
     this.state = {
       repo: null,
-      filePath: '',
+      selectedPath: '',
       errMessage: '',
     };
   }
@@ -32,37 +36,95 @@ class MoveDirent extends React.Component {
   }
 
   handleSubmit = () => {
+    if (this.props.isMutipleOperation) {
+      this.moveItems();
+    } else {
+      this.moveItem();
+    }
+  }
+
+  moveItems = () => {
+    let { repo, selectedPath } = this.state;
+    let message = gettext('Invalid destination path');
+    
+    if (!repo || (repo.repo_id === repoID) && selectedPath === '') {
+      this.setState({errMessage: message});
+      return;
+    }
+
+    let selectedDirentList = this.props.selectedDirentList;
+    let direntPaths = [];
+    selectedDirentList.forEach(dirent => {
+      let path = Utils.joinPath(this.props.path, dirent.name);
+      direntPaths.push(path);
+    });
+    
+    // copy dirents to one of them. eg: A/B, A/C -> A/B
+    if (direntPaths.some(direntPath => { return direntPath === selectedPath})) {
+      this.setState({errMessage: message});
+      return;
+    }
+
+    // copy dirents to current path
+    if (selectedPath && selectedPath === this.props.path) {
+      this.setState({errMessage: message});
+      return;
+    }
+
+    // copy dirents to one of their child. eg: A/B, A/D -> A/B/C
+    let moveDirentPath = '';
+    let isChildPath = direntPaths.some(direntPath => {
+      let flag = selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1;
+      if (flag) {
+        moveDirentPath = direntPath;
+      }
+      return flag;
+    })
+
+    if (isChildPath) {
+      message = gettext('Can not move directory %(src)s to its subdirectory %(des)s');
+      message = message.replace('%(src)s', moveDirentPath);
+      message = message.replace('%(des)s', selectedPath);
+      this.setState({errMessage: message});
+      return;
+    }
+
+    this.props.onItemsMove(repo, selectedPath);
+    this.toggle();
+  }
+
+  moveItem = () => {
     let { direntPath } = this.props;
-    let { repo, filePath } = this.state; 
+    let { repo, selectedPath } = this.state; 
     let message = gettext('Invalid destination path');
 
-    if (!repo || (repo.repo_id === repoID && filePath === '')) {
+    if (!repo || (repo.repo_id === repoID && selectedPath === '')) {
       this.setState({errMessage: message});
       return;
     }
     
-    if (filePath && direntPath === filePath) {
+    // copy the dirent to itself. eg: A/B -> A/B
+    if (selectedPath && direntPath === selectedPath) {
       this.setState({errMessage: message});
       return;
     }
     
-    
-    if (filePath && direntPath.length > filePath.length && direntPath.indexOf(filePath) > -1) {
+    // copy the dirent to current path
+    if (selectedPath && Utils.getDirName(direntPath) === selectedPath) {
       this.setState({errMessage: message});
       return;
     }
     
-    if ( filePath && filePath.length > direntPath.length && filePath.indexOf(direntPath) > -1) {
+    // copy the dirent to it's child. eg: A/B -> A/B/C
+    if ( selectedPath && selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1) {
       message = gettext('Can not move directory %(src)s to its subdirectory %(des)s');
       message = message.replace('%(src)s', direntPath);
-      message = message.replace('%(des)s', filePath);
+      message = message.replace('%(des)s', selectedPath);
       this.setState({errMessage: message});
       return;
     }
-    if (filePath === '') {
-      filePath = '/';
-    }
-    this.props.onItemMove(repo, direntPath, filePath);
+
+    this.props.onItemMove(repo, direntPath, selectedPath);
     this.toggle();
   }
 
@@ -70,10 +132,10 @@ class MoveDirent extends React.Component {
     this.props.onCancelMove();
   }
 
-  onDirentItemClick = (repo, filePath) => {
+  onDirentItemClick = (repo, selectedPath) => {
     this.setState({
       repo: repo,
-      filePath: filePath,
+      selectedPath: selectedPath,
       errMessage: '',
     });
   }
@@ -81,14 +143,18 @@ class MoveDirent extends React.Component {
   onRepoItemClick = (repo) => {
     this.setState({
       repo: repo,
-      filePath: '',
+      selectedPath: '/',
       errMessage: ''
     });
   }
 
   render() {
     let title = gettext('Move {placeholder} to:');
-    title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+    if (!this.props.isMutipleOperation) {
+      title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+    } else {
+      title = gettext("Move selected item(s) to:");
+    }
     return (
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>