Wiki mode optimized (#2442)

frontend/src/components/dialog/zip-download-dialog.js

@@ -1,6 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
+const propTypes = {
+  onCancelDownload: PropTypes.func.isRequired,
+  progress: PropTypes.string.isRequired,
+};
+
 class ZipDownloadDialog extends React.Component {
 
   toggle = () => {
@@ -19,4 +25,6 @@ class ZipDownloadDialog extends React.Component {
   }
 }
 
+ZipDownloadDialog.propTypes = propTypes;
+
 export default ZipDownloadDialog;

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

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { serviceUrl, gettext } from '../../utils/constants';
+import OperationGroup from '../dirent-operation/operation-group';
+
+const propTypes = {
+  isItemFreezed: PropTypes.bool.isRequired,
+  dirent: PropTypes.object.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+  onItemMenuShow: PropTypes.func.isRequired,
+  onItemMenuHide: PropTypes.func.isRequired,
+  onItemDelete: PropTypes.func.isRequired,
+  onItemStarred: PropTypes.func.isRequired,
+  onItemDownload: PropTypes.func.isRequired,
+};
+
+class DirentListItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false,
+      highlight: false
+    };
+  }
+
+  //UI Interactive
+  onMouseEnter = () => {
+    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({
+      isOperationShow: false,
+      highlight: ''
+    });
+    this.props.onItemMenuHide();
+  }
+
+  //buiness handler
+  onItemSelected = () => {
+    //todos;
+  }
+
+  onItemStarred = () => {
+    this.props.onItemStarred(this.props.dirent);
+  }
+
+  onItemClick = () => {
+    this.props.onItemClick(this.props.dirent);
+  }
+
+
+  onItemDownload = () => {
+    this.props.onItemDownload(this.props.dirent);
+  }
+
+  onItemDelete = () => {
+    this.props.onItemDelete(this.props.dirent);
+  }
+
+  render() {
+    let { dirent } = this.props;
+    return (
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
+        <td className="select">
+          <input type="checkbox" className="vam" />
+        </td>
+        <td className="star" onClick={this.onItemStarred}>
+          {dirent.starred !== undefined && !dirent.starred && <i className="far fa-star empty"></i>}
+          {dirent.starred !== undefined && dirent.starred && <i className="fas fa-star"></i>}
+        </td>
+        <td className="icon">
+          <img src={dirent.type === 'dir' ? serviceUrl + '/media/img/folder-192.png' : serviceUrl + '/media/img/file/192/txt.png'} alt={gettext('file icon')}></img>
+        </td>
+        <td className="name a-simulate" onClick={this.onItemClick}>{dirent.name}</td>
+        <td className="operation">
+          {
+            this.state.isOperationShow && 
+            <OperationGroup 
+              dirent={dirent} 
+              onItemMenuShow={this.onItemMenuShow}
+              onItemMenuHide={this.onItemMenuHide}
+              onDownload={this.onItemDownload}
+              onDelete={this.onItemDelete}
+            />
+          }
+        </td>
+        <td className="file-size">{dirent.size && dirent.size}</td>
+        <td className="last-update" dangerouslySetInnerHTML={{__html: dirent.mtime}}></td>
+      </tr>
+    );
+  }
+}
+
+DirentListItem.propTypes = propTypes;
+
+export default DirentListItem;

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

@@ -0,0 +1,158 @@
+import React from 'react';
+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 DirentListItem from './dirent-list-item';
+import ZipDownloadDialog from '../dialog/zip-download-dialog';
+
+const propTypes = {
+  filePath: PropTypes.string.isRequired,
+  direntList: PropTypes.array.isRequired,
+  onItemDelete: PropTypes.func.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+  updateViewList: PropTypes.func.isRequired,
+};
+
+class DirentListView extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false,
+      isProgressDialogShow: false,
+      progress: '0%',
+    };
+  }
+
+  onItemMenuShow = () => {
+    this.setState({isItemFreezed: true});
+  }
+  
+  onItemMenuHide = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  onItemClick = (dirent) => {
+    let direntPath = this.getDirentPath(dirent);
+    this.props.onItemClick(direntPath);
+  }
+
+  onItemDelete = (dirent) => {
+    let direntPath = this.getDirentPath(dirent);
+    this.props.onItemDelete(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);
+      });
+    }
+  }
+
+  onItemDownload = (dirent) => {
+    if (dirent.type === 'dir') {
+      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});
+      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,
+      });
+    });
+  }
+
+  getDirentPath = (dirent) => {
+    let path = this.props.filePath;
+    return path === '/' ? path + dirent.name : path + '/' + dirent.name;
+  }
+
+  render() {
+    const { direntList } = this.props;
+    return (
+      <div className="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th width="3%" className="select"><input type="checkbox" className="vam" /></th>
+              <th width="3%"></th>
+              <th width="5%"></th>
+              <th width="45%">{gettext('Name')}</th>
+              <th width="20%"></th>
+              <th width="11%">{gettext('Size')}</th>
+              <th width="13%">{gettext('Last Update')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              direntList.length !== 0 && direntList.map((dirent, index) => {
+                return (
+                  <DirentListItem
+                    key={index}
+                    dirent={dirent}
+                    isItemFreezed={this.state.isItemFreezed}
+                    onItemMenuShow={this.onItemMenuShow}
+                    onItemMenuHide={this.onItemMenuHide}
+                    onItemDelete={this.onItemDelete}
+                    onItemStarred={this.onItemStarred}
+                    onItemDownload={this.onItemDownload}
+                    onItemClick={this.onItemClick}
+                  />
+                );
+              })
+            }
+          </tbody>
+        </table>
+        {
+          this.state.isProgressDialogShow && 
+          <ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload}/>
+        }
+      </div>
+    );
+  }
+}
+
+DirentListView.propTypes = propTypes;
+
+export default DirentListView;

frontend/src/components/dirent-operation/operation-group.js

@@ -1,7 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import OperationMenu from './operation-menu';
 
+const propTypes = {
+  dirent: PropTypes.object.isRequired,
+  onItemMenuShow: PropTypes.func.isRequired,
+  onItemMenuHide: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onDownload: PropTypes.func.isRequired,
+};
+
 class OperationGroup extends React.Component {
 
   constructor(props) {
@@ -9,7 +18,7 @@ class OperationGroup extends React.Component {
     this.state = {
       isItemMenuShow: false,
       menuPosition: {top: 0, left: 0 },
-    }
+    };
   }
 
   componentDidMount() {
@@ -34,24 +43,28 @@ class OperationGroup extends React.Component {
     this.props.onDelete();
   }
 
-  onItemMenuShow = (e) => {
+  onItemMenuToggle = (e) => {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+
     if (!this.state.isItemMenuShow) {
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-  
-      let left = e.clientX - 8*16;
-      let top  = e.clientY + 15;
-      let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
-      this.setState({
-        menuPosition: position,
-        isItemMenuShow: true,
-      });
-      this.props.onItemMenuShow();
+      this.onItemMenuShow(e);
     } else {
       this.onItemMenuHide();
     }
   }
 
+  onItemMenuShow = (e) => {
+    let left = e.clientX - 8*16;
+    let top  = e.clientY + 15;
+    let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
+    this.setState({
+      menuPosition: position,
+      isItemMenuShow: true,
+    });
+    this.props.onItemMenuShow();
+  }
+
   onItemMenuHide = () => {
     this.setState({
       isItemMenuShow: false,
@@ -81,13 +94,13 @@ class OperationGroup extends React.Component {
             <i className="sf2-icon-delete" title={gettext('Delete')} onClick={this.onDelete}></i>
           </li>
           <li className="operation-group-item">
-            <i className="sf2-icon-caret-down sf-dropdown-toggle" title={gettext('More Operation')} onClick={this.onItemMenuShow}></i>
+            <i className="sf2-icon-caret-down sf-dropdown-toggle" title={gettext('More Operation')} onClick={this.onItemMenuToggle}></i>
           </li>
         </ul>
         {
           this.state.isItemMenuShow && 
           <OperationMenu 
-            currentItem={this.props.item}
+            dirent={this.props.dirent}
             menuPosition={this.state.menuPosition}
             onRename={this.onRename}
             onCopy={this.onCopy}
@@ -98,4 +111,6 @@ class OperationGroup extends React.Component {
   }
 }
 
+OperationGroup.propTypes = propTypes;
+
 export default OperationGroup;

frontend/src/components/dirent-operation/operation-menu.js

@@ -1,22 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
+import { gettext, repoID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import Repo from '../../models/repo';
 
 const propTypes = {
-  currentItem: PropTypes.object.isRequired,
+  dirent: PropTypes.object.isRequired,
   menuPosition: PropTypes.object.isRequired, 
 };
 
 class OperationMenu extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      repo: null,
+      is_repo_owner: false,
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      let repo = new Repo(res.data);
+      seafileAPI.getAccountInfo().then(res => {
+        let user_email = res.data.email;
+        let is_repo_owner = repo.owner_email === user_email;
+        this.setState({
+          repo: repo,
+          is_repo_owner: is_repo_owner
+        });
+      })
+    });
+  }
+
   getItemType() {
-    return this.props.currentItem.type;
+    let type = this.props.dirent.is_dir ? 'dir' : 'file';
+    return type;
   }
 
   renderDirentDirMenu() {
     let position = this.props.menuPosition;
     let style = {position: 'fixed', left: position.left, top: position.top, display: 'block'};
-    if (this.props.currentItem.permission === 'rw') {
+    if (this.props.dirent.permission === 'rw') {
       return (
         <ul className="dropdown-menu operation-menu" style={style}>
           <li className="dropdown-item operation-menu-item">
@@ -44,7 +69,7 @@ class OperationMenu extends React.Component {
       );
     }
 
-    if (this.props.currentItem.permission === 'r') {
+    if (this.props.dirent.permission === 'r') {
       return (
         <ul className="dropdown-menu operation-menu" style={style}>
           <li className="dropdown-item operation-menu-item">
@@ -62,7 +87,7 @@ class OperationMenu extends React.Component {
   renderDirentFileMenu() {
     let position = this.props.menuPosition;
     let style = {position: 'fixed', left: position.left, top: position.top, display: 'block'};
-    if (this.props.currentItem.permission === 'rw') {
+    if (this.props.dirent.permission === 'rw') {
       return (
         <ul className="dropdown-menu operation-menu" style={style}>
           <li className="dropdown-item operation-menu-item">
@@ -105,7 +130,7 @@ class OperationMenu extends React.Component {
       );
     }
 
-    if (this.props.currentItem.permission === "r") {
+    if (this.props.dirent.permission === 'r') {
       return (
         <ul className="dropdown-menu operation-menu" style={style}>
           <li className="dropdown-item operation-menu-item">
@@ -130,14 +155,14 @@ class OperationMenu extends React.Component {
     let type = this.getItemType();
     let menu = null;
     switch(type) {
-      case 'file':
-        menu = this.renderDirentFileMenu();
-        break;
-      case 'dir':
-        menu = this.renderDirentDirMenu();
-        break;
-      default:
-        break;
+    case 'file':
+      menu = this.renderDirentFileMenu();
+      break;
+    case 'dir':
+      menu = this.renderDirentDirMenu();
+      break;
+    default:
+      break;
     }
     return menu;
   }