Zip download (#3252)

* [dir view] rewrote 'zip download'

* renamed component 'ShareLinkZipDownloadDialog' to 'ZipDownloadDialog'

* [zip download] show specific error msg

frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js

@@ -1,18 +1,17 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button , ButtonGroup , Modal } from 'reactstrap';
+import { Button, ButtonGroup } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
-import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import MoveDirentDialog from '../dialog/move-dirent-dialog';
 import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import DirentsMenu from '../dirent-list-view/dirents-menu';
 import ShareDialog from '../dialog/share-dialog';
 import RelatedFileDialogs from '../dialog/related-file-dialogs';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
-import toaster from '../toast';
+import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import ModalPortal from '../modal-portal';
 
 const propTypes = {
@@ -37,8 +36,7 @@ class MutipleDirOperationToolbar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      progress: 0,
-      isProgressDialogShow: false,
+      isZipDialogOpen: false,
       isMoveDialogShow: false,
       isCopyDialogShow: false,
       isMutipleOperation: true,
@@ -50,7 +48,6 @@ class MutipleDirOperationToolbar extends React.Component {
       showRelatedFileDialog: false,
       viewMode: 'list_related_file',     
     };
-    this.zipToken = null;
   }
 
   onMoveToggle = () => {
@@ -74,49 +71,15 @@ class MutipleDirOperationToolbar extends React.Component {
         location.href= url;
         return;
       }
-      let selectedDirentNames = selectedDirentList.map(dirent => {
-        return dirent.name;
-      });
-      this.setState({isProgressDialogShow: true, progress: 0});
-      seafileAPI.zipDownload(repoID, path, selectedDirentNames).then(res => {
-        this.zipToken = res.data['zip_token'];
-        this.addDownloadAnimation();
-        this.interval = setInterval(this.addDownloadAnimation, 1000);
-      }).catch((error) => {
-        clearInterval(this.interval);
-        this.setState({isProgressDialogShow: false});
-        let errorMessage = error.response.data.error_msg;
-        toaster.danger(errorMessage);
+      this.setState({
+        isZipDialogOpen: true
       });
     }
   }
 
-  addDownloadAnimation = () => {
-    let _this = this;
-    let token = this.zipToken;
-    seafileAPI.queryZipProgress(token).then(res => {
-      let data = res.data;
-      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
-        });
-        clearInterval(this.interval);
-        location.href = URLDecorator.getUrl({type: 'download_dir_zip_url', token: token});
-        setTimeout(function() {
-          _this.setState({isProgressDialogShow: false});
-        }, 500);
-      }
-
-    });
-  }
-
-  onCancelDownload = () => {
-    seafileAPI.cancelZipTask(this.zipToken).then(() => {
-      clearInterval(this.interval);
-      this.setState({isProgressDialogShow: false});
+  closeZipDialog = () => {
+    this.setState({
+      isZipDialogOpen: false
     });
   }
 
@@ -315,8 +278,15 @@ class MutipleDirOperationToolbar extends React.Component {
             onCancelCopy={this.onCopyToggle}
           />
         }
-        {this.state.isProgressDialogShow &&
-          <ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload} />
+        {this.state.isZipDialogOpen &&
+        <ModalPortal>
+          <ZipDownloadDialog
+            repoID={this.props.repoID}
+            path={this.props.path}
+            target={this.props.selectedDirentList.map(dirent => dirent.name)}
+            toggleDialog={this.closeZipDialog}
+          />
+        </ModalPortal>
         }
         {this.state.showLibContentViewDialogs && (
           <Fragment>