Add progress for move (#4455)

* add move dsprogress ialog * optimize code * add copy logic * update ui * optimize code
2025-09-01 23:20:51 +00:00 · 2020-02-29 17:02:11 +08:00
parent 88355d0c77
commit 2f07e57255
4 changed files with 378 additions and 245 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -4787,7 +4787,8 @@
          "version": "2.1.1",
          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
@@ -4811,13 +4812,15 @@
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
          "dev": true,
+          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@@ -4834,19 +4837,22 @@
          "version": "1.1.0",
          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
@@ -4977,7 +4983,8 @@
          "version": "2.0.3",
          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "ini": {
          "version": "1.3.5",
@@ -4991,6 +4998,7 @@
          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
          "dev": true,
+          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -5007,6 +5015,7 @@
          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
          "dev": true,
+          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@@ -5015,13 +5024,15 @@
          "version": "0.0.8",
          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "minipass": {
          "version": "2.2.4",
          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
          "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
          "dev": true,
+          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.1",
            "yallist": "^3.0.0"
@@ -5042,6 +5053,7 @@
          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
          "dev": true,
+          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@@ -5130,7 +5142,8 @@
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
@@ -5144,6 +5157,7 @@
          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
          "dev": true,
+          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@@ -5239,7 +5253,8 @@
          "version": "5.1.1",
          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@@ -5281,6 +5296,7 @@
          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
          "dev": true,
+          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@@ -5302,6 +5318,7 @@
          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
          "dev": true,
+          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@@ -5350,13 +5367,15 @@
          "version": "1.0.2",
          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "yallist": {
          "version": "3.0.2",
          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
          "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
-          "dev": true
+          "dev": true,
+          "optional": true
        }
      }
    },
@@ -11377,9 +11396,9 @@
      }
    },
    "seafile-js": {
-      "version": "0.2.140",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.140.tgz",
-      "integrity": "sha512-7WMvQMShWBorBGxygDFCIUt9XPBxHnbobnObSw3eOHflSWfdXrCu0G4ZEj32cDbeece/mEEaD5p/YNn7O7zgKw==",
+      "version": "0.2.143",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.143.tgz",
+      "integrity": "sha512-HydirrVXSyoOjzQHAYo+OPk8okkI2qHbwWa6fpoZY3S7xjSXGcG9kSCCFTbZSe4y9aTSIT6WTLlDXKeDpbyvUg==",
      "requires": {
        "axios": "^0.18.0",
        "form-data": "^2.3.2",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,7 +36,7 @@
    "react-responsive": "^6.1.2",
    "react-select": "^2.4.1",
    "reactstrap": "^6.4.0",
-    "seafile-js": "^0.2.140",
+    "seafile-js": "^0.2.143",
    "socket.io-client": "^2.2.0",
    "sw-precache-webpack-plugin": "0.11.4",
    "unified": "^7.0.0",
--- a/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
+++ b/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;
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/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';
@@ -19,6 +19,7 @@ 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,
@@ -75,6 +76,9 @@ class LibContentView extends React.Component {
      updateDetail: false,
      itemsShowLength: 100,
      isSessionExpired: false,
+      isCopyMoveProgressDialogShow: false,
+      asyncCopyMoveTaskId: '',
+      asyncOperationProgress: 0,
    };

    this.oldonpopstate = window.onpopstate;
@@ -574,43 +578,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;
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
-          if (res.data.failed) {
-            let errMessage = Utils.getMoveFailedMessage(dirNames);
-            toaster.danger(errMessage);
-            return;
+        this.setState({
+          asyncCopyMoveTaskId: res.data.task_id,
+        }, () => {
+          this.getAsyncCopyMoveProgress();
+        });
      }
+
      direntPaths.forEach((direntPath, index) => {
        if (this.state.currentMode === 'column') {
          this.deleteTreeNode(direntPath);
        }
        this.moveDirent(direntPath);
      });
-          let message =  Utils.getMoveSuccessMessage(dirNames);
-          toaster.success(message);
-        }).catch(error => {
-          let errMessage = Utils.getErrorMsg(error);
-          toaster.danger(errMessage);
-        });
-      } else {
-        direntPaths.forEach((direntPath, index) => {
-          if (this.state.currentMode === 'column') {
-            this.deleteTreeNode(direntPath);
-          }
-          this.moveDirent(direntPath);
-        });
-        if (this.state.currentMode === 'column') {
+
+      // 1. move to current repo 
+      // 2. tow columns mode need update left tree
+      if (repoID === destRepo.repo_id && 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);
      }
@@ -625,38 +686,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;
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
-          if (res.data.failed) {
-            let errMessage = Utils.getCopyFailedMessage(dirNames);
-            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);
+        this.setState({
+          asyncCopyMoveTaskId: res.data.task_id,
+        }, () => {
+          this.getAsyncCopyMoveProgress();
        });
-      } 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')) {
@@ -951,34 +1006,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;
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
-          if (res.data.failed) {
-            let errMessage = gettext('Failed to move {name}.');
-            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);
+        this.setState({
+          asyncCopyMoveTaskId: res.data.task_id,
+        }, () => {
+          this.getAsyncCopyMoveProgress();
        });
-      } 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);
@@ -1000,36 +1059,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;
-        seafileAPI.queryAsyncOperationProgress(taskId).then(res => {
-          if (res.data.failed) {
-            let errMessage = gettext('Failed to copy %(name)s');
-            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);
+        this.setState({
+          asyncCopyMoveTaskId: res.data.task_id,
+        }, () => {
+          this.getAsyncCopyMoveProgress();
        });
-      } 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);
@@ -1672,6 +1729,8 @@ class LibContentView extends React.Component {
    });

    return (
+      <Fragment>
+
        <div className="main-panel o-hidden">
          <div className="main-panel-north border-left-show">
            <LibContentToolbar
@@ -1803,6 +1862,14 @@ class LibContentView extends React.Component {
            )}
          </div>
        </div>
+        {this.state.isCopyMoveProgressDialogShow && (
+          <CopyMoveDirentProgressDialog
+            type={this.state.asyncOperationType}
+            asyncOperationProgress={this.state.asyncOperationProgress}
+            toggleDialog={this.onMoveProgressDialogToggle}
+          />
+        )}
+      </Fragment>
    );
  }
 }