Implement wiki mode menu function (#2461)

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -3,16 +3,23 @@ import PropTypes from 'prop-types';
 import { gettext, repoID } from '../../utils/constants';
 import URLDecorator from '../../utils/url-decorator';
 import editorUtilities from '../../utils/editor-utilties';
-import { seafileAPI } from '../../utils/seafile-api';
+import Loading from '../loading';
 import DirentListItem from './dirent-list-item';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
+import MoveDirentDialog from '../dialog/move-dirent-dialog';
+import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 
 const propTypes = {
   filePath: PropTypes.string.isRequired,
   direntList: PropTypes.array.isRequired,
   onItemDelete: PropTypes.func.isRequired,
+  onItemRename: PropTypes.func.isRequired,
   onItemClick: PropTypes.func.isRequired,
+  onItemMove: PropTypes.func.isRequired,
+  onItemCopy: PropTypes.func.isRequired,
+  onItemDetails: PropTypes.func.isRequired,
   updateViewList: PropTypes.func.isRequired,
+  isDirentListLoading: PropTypes.bool.isRequired,
 };
 
 class DirentListView extends React.Component {
@@ -20,54 +27,74 @@ class DirentListView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      progress: 0,
       isItemFreezed: false,
       isProgressDialogShow: false,
-      progress: '0%',
+      isMoveDialogShow: false,
+      isCopyDialogShow: false,
+      currentDirent: false,
+      direntPath: '',
     };
   }
 
-  onItemMenuShow = () => {
+  onFreezedItem = () => {
     this.setState({isItemFreezed: true});
   }
   
-  onItemMenuHide = () => {
+  onUnfreezedItem = () => {
     this.setState({isItemFreezed: false});
   }
 
-  onItemClick = (dirent) => {
-    let direntPath = this.getDirentPath(dirent);
-    this.props.onItemClick(direntPath);
+  onRenameMenuItemClick = () => {
+    this.onFreezedItem();
   }
 
-  onItemDelete = (dirent) => {
-    let direntPath = this.getDirentPath(dirent);
-    this.props.onItemDelete(direntPath);
+  onDirentItemMove = (dirent, direntPath) => {
+    this.setState({
+      isMoveDialogShow: true,
+      currentDirent: dirent,
+      direntPath: direntPath
+    });
   }
 
-  onItemStarred = (dirent) => {
-    let filePath = this.getDirentPath(dirent);
-    if (dirent.starred) {
-      seafileAPI.unStarFile(repoID, filePath).then(() => {
-        this.props.updateViewList(this.props.filePath);
-      });
-    } else {
-      seafileAPI.starFile(repoID, filePath).then(() => {
-        this.props.updateViewList(this.props.filePath);
-      });
-    }
+  onDirentItemCopy = (dirent, direntPath) => {
+    this.setState({
+      isCopyDialogShow: true,
+      currentDirent: dirent,
+      direntPath: direntPath
+    });
   }
 
-  onItemDownload = (dirent) => {
+  onItemMove = (repo, direntPath, moveToDirentPath) => {
+    this.props.onItemMove(repo, direntPath, moveToDirentPath);
+  }
+  
+  onCancelMove = () => {
+    this.setState({isMoveDialogShow: false});
+  }
+  
+  onItemCopy = (repo, direntPath, copyToDirentPath) => {
+    this.props.onItemCopy(repo, direntPath, copyToDirentPath);
+  }
+  
+  onCancelCopy = () => {
+    this.setState({isCopyDialogShow: false});
+  }
+
+  onItemDetails = (dirent, direntPath) => {
+    this.props.onItemDetails(dirent, direntPath);
+  }
+
+  onItemDownload = (dirent, direntPath) => {
     if (dirent.type === 'dir') {
-      this.setState({isProgressDialogShow: true, progress: '0%'});
+      this.setState({isProgressDialogShow: true, progress: 0});
       editorUtilities.zipDownload(this.props.filePath, dirent.name).then(res => {
         this.zip_token = res.data['zip_token'];
         this.addDownloadAnimation();
         this.interval = setInterval(this.addDownloadAnimation, 1000);
       });
     } else {
-      let path = this.getDirentPath(dirent);
-      let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: path});
+      let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
       location.href = url;
     }
   }
@@ -77,12 +104,12 @@ class DirentListView extends React.Component {
     let token = this.zip_token;
     editorUtilities.queryZipProgress(token).then(res => {
       let data = res.data;
-      let progress = data.total === 0 ? '100%' : (data.zipped / data.total * 100).toFixed(0) + '%';
-      this.setState({progress: progress});
+      let progress = data.total === 0 ? 100 : (data.zipped / data.total * 100).toFixed(0);
+      this.setState({progress: parseInt(progress)});
 
       if (data['total'] === data['zipped']) {
         this.setState({
-          progress: '100%'
+          progress: 100
         });
         clearInterval(this.interval);
         location.href = URLDecorator.getUrl({type: 'download_dir_zip_url', token: token});
@@ -103,13 +130,13 @@ class DirentListView extends React.Component {
     });
   }
 
-  getDirentPath = (dirent) => {
-    let path = this.props.filePath;
-    return path === '/' ? path + dirent.name : path + '/' + dirent.name;
-  }
-
   render() {
     const { direntList } = this.props;
+
+    if (this.props.isDirentListLoading) {
+      return (<Loading />);
+    }
+
     return (
       <div className="table-container">
         <table>
@@ -131,22 +158,44 @@ class DirentListView extends React.Component {
                   <DirentListItem
                     key={index}
                     dirent={dirent}
+                    filePath={this.props.filePath}
+                    onItemClick={this.props.onItemClick}
+                    onRenameMenuItemClick={this.onRenameMenuItemClick}
+                    onItemDelete={this.props.onItemDelete}
+                    onItemRename={this.props.onItemRename}
+                    updateViewList={this.props.updateViewList}
                     isItemFreezed={this.state.isItemFreezed}
-                    onItemMenuShow={this.onItemMenuShow}
-                    onItemMenuHide={this.onItemMenuHide}
-                    onItemDelete={this.onItemDelete}
-                    onItemStarred={this.onItemStarred}
+                    onFreezedItem={this.onFreezedItem}
+                    onUnfreezedItem={this.onUnfreezedItem}
                     onItemDownload={this.onItemDownload}
-                    onItemClick={this.onItemClick}
+                    onDirentItemMove={this.onDirentItemMove}
+                    onDirentItemCopy={this.onDirentItemCopy}
+                    onItemDetails={this.onItemDetails}
                   />
                 );
               })
             }
           </tbody>
         </table>
-        {
-          this.state.isProgressDialogShow && 
-          <ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload}/>
+        {this.state.isProgressDialogShow && 
+          <ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload}
+          />
+        }
+        {this.state.isMoveDialogShow &&
+          <MoveDirentDialog 
+            dirent={this.state.currentDirent} 
+            direntPath={this.state.direntPath} 
+            onItemMove={this.props.onItemMove}
+            onCancelMove={this.onCancelMove}
+          />
+        }
+        {this.state.isCopyDialogShow &&
+          <CopyDirentDialog 
+            dirent={this.state.currentDirent} 
+            direntPath={this.state.direntPath} 
+            onItemCopy={this.props.onItemCopy}
+            onCancelCopy={this.onCancelCopy} 
+          />
         }
       </div>
     );