Wiki optimized third (#2406)

frontend/src/components/tree-dir-view/tree-dir-list.js

@@ -1,41 +1,93 @@
 import React, { Component } from 'react';
 import { serviceUrl } from '../constants';
+import OperationGroup from '../dirent-operation/operation-group';
+
 class TreeDirList extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      isMourseEnter: false,
-      highlight: '',
-    }
+      highlight: false,
+      isOperationShow: false,
+    };
   }
 
   onMouseEnter = () => {
-    this.setState({
-      highlight: 'tr-highlight'
-    });
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        highlight: true,
+        isOperationShow: true,
+      });
+    }
+  }
+
+  onMouseOver = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        highlight: true,
+        isOperationShow: true,
+      });
+    }
   }
 
   onMouseLeave = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        highlight: false,
+        isOperationShow: false
+      });
+    }
+  }
+
+  onItemMenuShow = () => {
+    this.props.onItemMenuShow();
+  }
+
+  onItemMenuHide = () => {
     this.setState({
-      highlight: '',
+      isOperationShow: false,
+      highlight: ''
     });
+    this.props.onItemMenuHide();
   }
 
   onMainNodeClick = () => {
     this.props.onMainNodeClick(this.props.node);
   }
 
+  onDownload = () => {
+    this.props.onDownload(this.props.node);
+  }
+
+  onDelete = () => {
+    this.props.onDelete(this.props.node);
+  }
+
   render() {
     let node = this.props.node;
     return (
-      <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td className="icon" style={{width: "4%"}}>
+      <tr className={this.state.highlight ? "tr-highlight" : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver}>
+        <td className="icon">
           <img src={node.type === "dir" ? serviceUrl + "/media/img/folder-192.png" : serviceUrl + "/media/img/file/192/txt.png"}></img>
         </td>
-        <td className="name a-simulate" style={{width: "60%"}} onClick={this.onMainNodeClick}>{node.name}</td>
-        <td style={{width: "16%"}}>{node.size}</td>
-        <td style={{width: "20%"}} title={node.last_update_time}>{node.last_update_time}</td>
+        <td className="name a-simulate" onClick={this.onMainNodeClick}>{node.name}</td>
+        {
+          this.props.needOperationGroup &&
+          <td>
+            {
+              this.state.isOperationShow && 
+              <OperationGroup 
+                item={node} 
+                onItemMenuShow={this.onItemMenuShow}
+                onItemMenuHide={this.onItemMenuHide}
+                onDownload={this.onDownload}
+                onDelete={this.onDelete}
+              />
+            }
+          </td>
+        }
+        <td>{node.size}</td>
+        <td title={node.last_update_time}>{node.last_update_time}</td>
       </tr>
     )
   }

frontend/src/components/tree-dir-view/tree-dir-view.js

@@ -1,9 +1,81 @@
-import React, { Component } from "react";
+import React from "react";
+import { gettext, repoID } from '../constants';
+import editorUtilities from '../../utils/editor-utilties';
+import URLDecorator from '../../utils/url-decorator';
+import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import TreeDirList from './tree-dir-list'
 import "../../css/common.css";
-const gettext = window.gettext;
 
 class TreeDirView extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isProgressDialogShow: false,
+      progress: '0%',
+      isItemFreezed: false
+    };
+    this.zip_token = null;
+    this.interval = null;
+  }
+
+  onDownload = (item) => {
+    if (item.isDir()) {
+      this.setState({isProgressDialogShow: true, progress: '0%'});
+      editorUtilities.zipDownload(item.parent_path, item.name).then(res => {
+        this.zip_token = res.data['zip_token'];
+        this.addDownloadAnimation();
+        this.interval = setInterval(this.addDownloadAnimation, 1000);
+      });
+    } else {
+      let url = URLDecorator.getUrl({type:'download_file_url', repoID: repoID, filePath: item.path});
+      location.href = url;
+    }
+  }
+
+  addDownloadAnimation = () => {
+    let _this = this;
+    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});
+
+      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 = () => {
+    let zip_token = this.zip_token;
+    editorUtilities.cancelZipTask(zip_token).then(res => {
+      this.setState({
+        isProgressDialogShow: false,
+      });
+    })
+  }
+
+  onItemMenuShow = () => {
+    this.setState({
+      isItemFreezed: true,
+    })
+  }
+
+  onItemMenuHide = () => {
+    this.setState({
+      isItemFreezed: false,
+    });
+  }
+
   render() {
     let node = this.props.node;
     let children = node.hasChildren() ? node.children : null;
@@ -12,21 +84,46 @@ class TreeDirView extends React.Component {
       <div className="table-container">
         <table>
           <thead>
-            <tr>
-              <th style={{width: "4%"}}></th>
-              <th style={{width: "60%"}}>{gettext('Name')}</th>
-              <th style={{width: "16%"}}>{gettext('Size')}</th>
-              <th style={{width: "20%"}}>{gettext('Last Update')}</th>
-            </tr>
+            {
+              this.props.needOperationGroup ? 
+              <tr>
+                <th style={{width: "4%"}}></th>
+                <th style={{width: "46%"}}>{gettext('Name')}</th>
+                <th style={{width: "20%"}}></th>
+                <th style={{width: "15%"}}>{gettext('Size')}</th>
+                <th style={{width: "15%"}}>{gettext('Last Update')}</th>
+              </tr>
+              :
+              <tr>
+                <th style={{width: "4%"}}></th>
+                <th style={{width: "66%"}}>{gettext('Name')}</th>
+                <th style={{width: "15%"}}>{gettext('Size')}</th>
+                <th style={{width: "15%"}}>{gettext('Last Update')}</th>
+              </tr>
+            }
           </thead>
           <tbody>
             {children && children.map((node, index) => {
               return (
-                <TreeDirList key={index} node={node} onMainNodeClick={this.props.onMainNodeClick}></TreeDirList>
+                <TreeDirList 
+                  key={index} 
+                  node={node} 
+                  isItemFreezed={this.state.isItemFreezed}
+                  onMainNodeClick={this.props.onMainNodeClick}
+                  onItemMenuShow={this.onItemMenuShow}
+                  onItemMenuHide={this.onItemMenuHide}
+                  onDownload={this.onDownload}
+                  onDelete={this.props.onDeleteItem}
+                  needOperationGroup={this.props.needOperationGroup}
+                />
               )
             })}
           </tbody>
         </table>
+        {
+          this.state.isProgressDialogShow && 
+          <ZipDownloadDialog progress={this.state.progress} onCancleDownload={this.onCancelDownload}/>
+        }
       </div>
     )
   }