merge 7.0

frontend/package-lock.json

@@ -11464,9 +11464,9 @@
       }
     },
     "seafile-js": {
-      "version": "0.2.142",
+      "version": "0.2.143",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.142.tgz",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.143.tgz",
-      "integrity": "sha512-OWSsx6tjMX3INpEm7xhC8f0KLRKi0VQqYnblgXX22BVrOqUCVNEqajHhjhYboqtkdIi3/S4Mi5SpBo1XR/UTwg==",
+      "integrity": "sha512-HydirrVXSyoOjzQHAYo+OPk8okkI2qHbwWa6fpoZY3S7xjSXGcG9kSCCFTbZSe4y9aTSIT6WTLlDXKeDpbyvUg==",
       "requires": {
         "axios": "^0.18.0",
         "form-data": "^2.3.2",

frontend/package.json

@@ -44,7 +44,7 @@
     "react-responsive": "^6.1.2",
     "react-select": "^2.4.1",
     "reactstrap": "^6.4.0",
-    "seafile-js": "^0.2.142",
+    "seafile-js": "^0.2.143",
     "socket.io-client": "^2.2.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "unified": "^7.0.0",

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  type: PropTypes.oneOf(['move', 'copy']).isRequired,
+  asyncOperationProgress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  toggleDialog: PropTypes.func.isRequired,
+};
+
+class CopyMoveDirentProgressDialog extends React.Component {
+
+  render() {
+
+    let { type , asyncOperationProgress } = this.props;
+    let title = type === 'move' ? gettext('Move Progress') : gettext('Copy Progress');
+    let progressStyle = {
+      width: asyncOperationProgress + '%',
+      lineHeight: '40px',
+      textAlign: 'left',
+    };
+    return (
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{title}</ModalHeader>
+        <ModalBody style={{minHeight: '80px'}}>
+          <div className="progress" style={{height: '40px'}}>
+            <div 
+              className="progress-bar pl-2" 
+              role="progressbar" 
+              style={progressStyle}
+              aria-valuenow={asyncOperationProgress} 
+              aria-valuemin="0" 
+              aria-valuemax="100"
+            >
+              {asyncOperationProgress + '%'}
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+CopyMoveDirentProgressDialog.propTypes = propTypes;
+
+export default CopyMoveDirentProgressDialog;

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
 import moment from 'moment';
@@ -18,6 +18,8 @@ import LibDecryptDialog from '../../components/dialog/lib-decrypt-dialog';
 import LibContentToolbar from './lib-content-toolbar';
 import LibContentContainer from './lib-content-container';
 import FileUploader from '../../components/file-uploader/file-uploader';
+import SessionExpiredTip from '../../components/session-expired-tip';
+import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dirent-progress-dialog';
 
 const propTypes = {
   pathPrefix: PropTypes.array.isRequired,
@@ -74,6 +76,9 @@ class LibContentView extends React.Component {
       updateDetail: false,
       itemsShowLength: 100,
       isSessionExpired: false,
+      isCopyMoveProgressDialogShow: false,
+      asyncCopyMoveTaskId: '',
+      asyncOperationProgress: 0,
     };
 
     this.oldonpopstate = window.onpopstate;
@@ -568,43 +573,100 @@ class LibContentView extends React.Component {
     });
   }
 
+  async getAsyncCopyMoveProgress() {
+    let { asyncOperationType, asyncCopyMoveTaskId } = this.state;
+    try {
+      let res = await seafileAPI.queryAsyncOperationProgress(asyncCopyMoveTaskId);
+      let data = res.data;
+      if (data.failed) {
+        let message = gettext('Files moved to another repository failed.')
+        if (asyncOperationType === 'copy') {
+          message = gettext('Files copyed to another repository failed.')
+        }
+        toaster.danger(message);
+        this.setState({
+          asyncOperationProgress: 0,
+          isCopyMoveProgressDialogShow: false,
+        });
+        return;
+      }
+      
+      if (data.successful) {
+        this.setState({isCopyMoveProgressDialogShow: false});
+        let message = gettext('Files moved to another repository successfully.')
+        if (asyncOperationType === 'copy') {
+          message = gettext('Files copyed to another repository successfully.')
+        }
+        toaster.success(message);
+        return;
+      }
+
+      let asyncOperationProgress = parseInt((data.done/data.total * 100).toFixed(2));
+      this.setState({asyncOperationProgress: asyncOperationProgress});
+      this.getAsyncCopyMoveProgress();
+    } catch (error) {
+      this.setState({
+        asyncOperationProgress: 0,
+        isCopyMoveProgressDialogShow: false,
+      }); 
+    }
+  }
+
+  cancelCopyMoveDirent = () => {
+    let taskId = this.state.asyncCopyMoveTaskId;
+    seafileAPI.cancelCopyMoveOperation(taskId);
+  }
+
+  onMoveProgressDialogToggle = () => {
+    let { asyncOperationProgress } = this.state;
+    if (asyncOperationProgress && asyncOperationProgress !== 100) {
+      this.cancelCopyMoveDirent();
+    }
+
+    this.setState({
+      asyncOperationProgress: 0,
+      isCopyMoveProgressDialogShow: false,
+    })
+  }
+
   // toolbar operations
   onMoveItems = (destRepo, destDirentPath) => {
     let repoID = this.props.repoID;
     let direntPaths = this.getSelectedDirentPaths();
     let dirNames = this.getSelectedDirentNames();
 
+    if (repoID !== destRepo.repo_id) {
+      this.setState({
+        asyncOperationProgress: 0,
+        asyncOperationType: 'move',
+        isCopyMoveProgressDialogShow: true
+      });
+    }
+
     seafileAPI.moveDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(res => {
       if (repoID !== destRepo.repo_id) {
-        let taskId = res.data.task_id;
+        this.setState({
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
+          asyncCopyMoveTaskId: res.data.task_id,
-          if (res.data.failed) {
+        }, () => {
-            let errMessage = Utils.getMoveFailedMessage(dirNames);
+          this.getAsyncCopyMoveProgress();
-            toaster.danger(errMessage);
+        });
-            return;
       }
+
       direntPaths.forEach((direntPath, index) => {
         if (this.state.currentMode === 'column') {
           this.deleteTreeNode(direntPath);
         }
         this.moveDirent(direntPath);
       });
-          let message =  Utils.getMoveSuccessMessage(dirNames);
+
-          toaster.success(message);
+      // 1. move to current repo 
-        }).catch(error => {
+      // 2. tow columns mode need update left tree
-          let errMessage = Utils.getErrorMsg(error);
+      if (repoID === destRepo.repo_id && this.state.currentMode === 'column') {
-          toaster.danger(errMessage);
-        });
-      } else {
-        direntPaths.forEach((direntPath, index) => {
-          if (this.state.currentMode === 'column') {
-            this.deleteTreeNode(direntPath);
-          }
-          this.moveDirent(direntPath);
-        });
-        if (this.state.currentMode === 'column') {
         this.updateMoveCopyTreeNode(destDirentPath);
       }
+
+      // show tip message if move to current repo
+      if (repoID === destRepo.repo_id) {
         let message =  Utils.getMoveSuccessMessage(dirNames);
         toaster.success(message);
       }
@@ -619,38 +681,32 @@ class LibContentView extends React.Component {
 
   onCopyItems = (destRepo, destDirentPath) => {
     let repoID = this.props.repoID;
-    let direntPaths = this.getSelectedDirentPaths();
     let dirNames = this.getSelectedDirentNames();
 
+    if (repoID !== destRepo.repo_id) {
+      this.setState({
+        asyncOperationProgress: 0,
+        asyncOperationType: 'copy',
+        isCopyMoveProgressDialogShow: true
+      });
+    }
+
     seafileAPI.copyDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(res => {
       if (repoID !== destRepo.repo_id) {
-        let taskId = res.data.task_id;
+        this.setState({
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
+          asyncCopyMoveTaskId: res.data.task_id,
-          if (res.data.failed) {
+        }, () => {
-            let errMessage = Utils.getCopyFailedMessage(dirNames);
+          this.getAsyncCopyMoveProgress();
-            toaster.danger(errMessage);
-            return;
-          }
-          if (destDirentPath === this.state.path) {
-            this.loadDirentList(this.state.path);
-          }
-          let message =  Utils.getCopySuccessfulMessage(dirNames);
-          toaster.success(message);
-        }).catch(error => {
-          let errMessage = Utils.getErrorMsg(error);
-          toaster.danger(errMessage);
         });
-      } else {
-        if (this.state.currentMode === 'column') {
-          this.updateMoveCopyTreeNode(destDirentPath);
-        }
-        if (destDirentPath === this.state.path) {
-          this.loadDirentList(this.state.path);
-        }
-        let message =  Utils.getCopySuccessfulMessage(dirNames);
-        toaster.success(message);
       }
 
+      if (repoID === destRepo.repo_id && this.state.currentMode === 'column') {
+        this.updateMoveCopyTreeNode(destDirentPath);
+      }
+
+      if (destDirentPath === this.state.path) {
+        this.loadDirentList(this.state.path);
+      }
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       if (errMessage === gettext('Error')) {
@@ -945,34 +1001,38 @@ class LibContentView extends React.Component {
       nodeParentPath = this.state.path;
     }
     let direntPath = Utils.joinPath(nodeParentPath, dirName);
+
+    if (repoID !== destRepo.repo_id) {
+      this.setState({
+        asyncOperationProgress: 0,
+        asyncOperationType: 'move',
+        isCopyMoveProgressDialogShow: true,
+      });
+    }
+
     seafileAPI.moveDir(repoID, destRepo.repo_id, moveToDirentPath, nodeParentPath, dirName).then(res => {
       if (repoID !== destRepo.repo_id) {
-        let taskId = res.data.task_id;
+        this.setState({
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
+          asyncCopyMoveTaskId: res.data.task_id,
-          if (res.data.failed) {
+        }, () => {
-            let errMessage = gettext('Failed to move {name}.');
+          this.getAsyncCopyMoveProgress();
-            errMessage = errMessage.replace('{name}', dirName);
-            toaster.danger(errMessage);
-            return;
-          }
-          if (this.state.currentMode === 'column') {
-            this.deleteTreeNode(direntPath);
-          }
-          this.moveDirent(direntPath);
-          let message = gettext('Successfully moved {name}.');
-          message = message.replace('{name}', dirName);
-          toaster.success(message);
-        }).catch(error => {
-          let errMessage = Utils.getErrorMsg(error);
-          toaster.danger(errMessage);
         });
-      } else {
+      }
+
       if (this.state.currentMode === 'column') {
         this.deleteTreeNode(direntPath);
+      }
+
+      // 1. move to current repo 
+      // 2. tow columns mode need update left tree
+      if (repoID === destRepo.repo_id && this.state.currentMode === 'column') {
         this.updateMoveCopyTreeNode(moveToDirentPath);
       }
+
       this.moveDirent(direntPath, moveToDirentPath);
 
+      // show tip message if move to current repo
+      if (repoID === destRepo.repo_id) {
         let message = gettext('Successfully moved {name}.');
         message = message.replace('{name}', dirName);
         toaster.success(message);
@@ -994,36 +1054,34 @@ class LibContentView extends React.Component {
     if (!nodeParentPath) {
       nodeParentPath = this.state.path;
     }
-    let direntPath = Utils.joinPath(nodeParentPath, dirName);
+
+    if (repoID !== destRepo.repo_id) {
+      this.setState({
+        asyncOperationProgress: 0,
+        asyncOperationType: 'copy',
+        isCopyMoveProgressDialogShow: true
+      });
+    }
 
     seafileAPI.copyDir(repoID, destRepo.repo_id, copyToDirentPath, nodeParentPath, dirName).then(res => {
       
       if (repoID !== destRepo.repo_id) {
-        let taskId = res.data.task_id;
+        this.setState({
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
+          asyncCopyMoveTaskId: res.data.task_id,
-          if (res.data.failed) {
+        }, () => {
-            let errMessage = gettext('Failed to copy %(name)s');
+          this.getAsyncCopyMoveProgress();
-            errMessage = errMessage.replace('%(name)s', dirName);
-            toaster.danger(errMessage);
-            return;
-          }
-          if (copyToDirentPath === nodeParentPath) {
-            this.loadDirentList(this.state.path);
-          }
-          let message = gettext('Successfully copied %(name)s.');
-          message = message.replace('%(name)s', dirName);
-          toaster.success(message);
-        }).catch(error => {
-          let errMessage = Utils.getErrorMsg(error);
-          toaster.danger(errMessage);
         });
-      } else {
+      }
-        if (this.state.currentMode === 'column') {
+
+      if (repoID === destRepo.repo_id && this.state.currentMode === 'column') {
         this.updateMoveCopyTreeNode(copyToDirentPath);
       }
+
       if (copyToDirentPath === nodeParentPath) {
         this.loadDirentList(this.state.path);
       }
+
+      if (repoID === destRepo.repo_id) {
         let message = gettext('Successfully copied %(name)s.');
         message = message.replace('%(name)s', dirName);
         toaster.success(message);
@@ -1666,6 +1724,8 @@ class LibContentView extends React.Component {
     });
 
     return (
+      <Fragment>
+
         <div className="main-panel o-hidden">
           <div className="main-panel-north border-left-show">
             <LibContentToolbar
@@ -1797,6 +1857,14 @@ class LibContentView extends React.Component {
             )}
           </div>
         </div>
+        {this.state.isCopyMoveProgressDialogShow && (
+          <CopyMoveDirentProgressDialog
+            type={this.state.asyncOperationType}
+            asyncOperationProgress={this.state.asyncOperationProgress}
+            toggleDialog={this.onMoveProgressDialogToggle}
+          />
+        )}
+      </Fragment>
     );
   }
 }