Wiki optimized third (#2406)

2025-09-05 08:53:14 +00:00 · 2018-09-29 15:47:53 +08:00
parent 5cffd4cb69
commit 3ab4cbff4f
22 changed files with 612 additions and 107 deletions
--- a/frontend/src/components/constants.js
+++ b/frontend/src/components/constants.js
@@ -10,6 +10,7 @@ export const logoWidth = window.app.config.logoWidth;
 export const logoHeight = window.app.config.logoHeight;
 export const isPro = window.app.config.isPro === "True";
 export const lang = window.app.config.lang;
+export const fileServerRoot = window.app.config.fileServerRoot;

 // wiki
 export const slug = window.wiki ? window.wiki.config.slug : '';
--- a/frontend/src/components/dialog/zip-download-dialog.js
+++ b/frontend/src/components/dialog/zip-download-dialog.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+
+class ZipDownloadDialog extends React.Component {
+
+  toggle = () => {
+    this.props.onCancelDownload();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}></ModalHeader>
+        <ModalBody>
+          <div>{this.props.progress}</div>
+        </ModalBody>
+      </Modal>
+    )
+  }
+}
+
+export default ZipDownloadDialog;
--- a/frontend/src/components/dirent-operation/operation-group.js
+++ b/frontend/src/components/dirent-operation/operation-group.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import { gettext } from '../constants';
+import OperationMenu from './operation-menu';
+
+class OperationGroup extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemMenuShow: false,
+      menuPosition: {top: 0, left: 0 },
+    }
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.onItemMenuHide);
+  }
+  
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onItemMenuHide);
+  }
+
+  onDownload = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.props.onDownload();
+  }
+
+  onShare = (e) => {
+    //todos::
+  }
+
+  onDelete = (e) => {
+    e.nativeEvent.stopImmediatePropagation(); //for document event
+    this.props.onDelete();
+  }
+
+  onItemMenuShow = (e) => {
+    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();
+    } else {
+      this.onItemMenuHide();
+    }
+  }
+
+  onItemMenuHide = () => {
+    this.setState({
+      isItemMenuShow: false,
+    });
+    this.props.onItemMenuHide();
+  }
+
+  onRename = () => {
+    //todos:
+  }
+
+  onCopy = () => {
+    //todos
+  }
+
+  render() {
+    return (
+      <div className="operations">
+        <ul className="operation-group">
+          <li className="operation-group-item">
+            <i className="sf2-icon-download" title={gettext('Download')} onClick={this.onDownload}></i>
+          </li>
+          <li className="operation-group-item">
+            <i className="sf2-icon-share" title={gettext('Share')} onClick={this.onShare}></i>
+          </li>
+          <li className="operation-group-item">
+            <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>
+          </li>
+        </ul>
+        {
+          this.state.isItemMenuShow && 
+          <OperationMenu 
+            currentItem={this.props.item}
+            menuPosition={this.state.menuPosition}
+            onRename={this.onRename}
+            onCopy={this.onCopy}
+          />
+        }
+      </div>
+    );
+  }
+}
+
+export default OperationGroup;
--- a/frontend/src/components/dirent-operation/operation-menu.js
+++ b/frontend/src/components/dirent-operation/operation-menu.js
@@ -0,0 +1,142 @@
+import React from 'react';
+import { gettext } from '../constants';
+
+class OperationMenu extends React.Component {
+
+  getItemType() {
+    return this.props.currentItem.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') {
+      return (
+        <ul className="dropdown-menu operation-menu" style={style}>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Rename')} aria-label={gettext('Rename')}>{gettext('Rename')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Move')} aria-label={gettext('Move')}>{gettext('Move')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Copy')} aria-label={gettext('Copy')}>{gettext('Copy')}</span>
+          </li>
+          <li className="dropdown-item menu-inner-divider"></li>
+
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Permission')} aria-label={gettext('Permission')}>{gettext('Permission')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Details')} aria-label={gettext('Details')}>{gettext('Details')}</span>
+          </li>
+          <li className="dropdown-item menu-inner-divider"></li>
+
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Open via Client')} aria-label={gettext('Open via Client')}>{gettext('Open via Client')}</span>
+          </li>
+        </ul>
+      )
+    }
+
+    if (this.props.currentItem.permission === 'r') {
+      return (
+        <ul className="dropdown-menu operation-menu" style={style}>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Copy')} aria-label={gettext('Copy')}>{gettext('Copy')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Details')} aria-label={gettext('Details')}>{gettext('Details')}</span>
+          </li>
+        </ul>
+      )
+    }
+
+  }
+
+  renderDirentFileMenu() {
+    let position = this.props.menuPosition;
+    let style = {position: 'fixed', left: position.left, top: position.top, display: 'block'};
+    if (this.props.currentItem.permission === 'rw') {
+      return (
+        <ul className="dropdown-menu operation-menu" style={style}>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Rename')} aria-label={gettext('Rename')}>{gettext('Rename')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Move')} aria-label={gettext('Move')}>{gettext('Move')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Copy')} aria-label={gettext('Copy')}>{gettext('Copy')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Lock')} aria-label={gettext('Lock')}>{gettext('Lock')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Unlock')} aria-label={gettext('Unlock')}>{gettext('Unlock')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('New Draft')} aria-label={gettext('New Draft')}>{gettext('New Draft')}</span>
+          </li>
+          <li className="dropdown-item menu-inner-divider"></li>
+
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Comment')} aria-label={gettext('Comment')}>{gettext('Comment')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="" title={gettext('History')} aria-label={gettext('History')}>{gettext('History')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Access Log')} aria-label={gettext('Access Log')}>{gettext('Access Log')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Details')} aria-label={gettext('Details')}>{gettext('Details')}</span>
+          </li>
+          <li className="dropdown-item menu-inner-divider"></li>
+
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Open via Client')} aria-label={gettext('Open via Client')}>{gettext('Open via Client')}</span>
+          </li>
+        </ul>
+      )
+    }
+
+    if (this.props.currentItem.permission === "r") {
+      return (
+        <ul className="dropdown-menu operation-menu" style={style}>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Copy')} aria-label={gettext('Copy')}>{gettext('Copy')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Comment')} aria-label={gettext('Comment')}>{gettext('Comment')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('History')} aria-label={gettext('History')}>{gettext('History')}</span>
+          </li>
+          <li className="dropdown-item operation-menu-item">
+            <span className="user-select-none" title={gettext('Details')} aria-label={gettext('Details')}>{gettext('Details')}</span>
+          </li>
+        </ul>
+      )
+    }
+
+  }
+
+  render() {
+    let type = this.getItemType();
+    let menu = null;
+    switch(type) {
+      case 'file':
+        menu = this.renderDirentFileMenu();
+        break;
+      case 'dir':
+        menu = this.renderDirentDirMenu();
+        break;
+      default:
+        break;
+    }
+    return menu;
+  }
+}
+
+export default OperationMenu;
--- a/frontend/src/components/draft-list-view/draft-list-item.js
+++ b/frontend/src/components/draft-list-view/draft-list-item.js
@@ -62,11 +62,11 @@ class DraftListItem extends React.Component {
    localTime = moment(localTime).fromNow();
    return (
      <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td className="icon" style={{width: "4%"}}><img src={siteRoot + "media/img/file/192/txt.png"} /></td>
-        <td className="name a-simulate" style={{width: "46%"}} onClick={this.onDraftEditClick}>{fileName}</td>
-        <td className="owner" style={{width: "20%"}}>{draft.owner}</td>
-        <td className="update" style={{width: "20%"}}>{localTime}</td>
-        <td className="menu-toggle" style={{width: "10%"}}>
+        <td className="icon"><img src={siteRoot + "media/img/file/192/txt.png"} /></td>
+        <td className="name a-simulate" onClick={this.onDraftEditClick}>{fileName}</td>
+        <td className="owner">{draft.owner}</td>
+        <td className="update">{localTime}</td>
+        <td className="menu-toggle">
          <NodeMenuControl
            isShow={this.state.isMenuControlShow}
            onClick={this.onMenuToggleClick}
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { gettext, repoID, serviceUrl } from '../constants';
+import { gettext, repoID, siteRoot } from '../constants';
 import SearchResultItem from './search-result-item';
 import editorUtilities from '../../utils/editor-utilties';
 import More from '../more';
@@ -169,7 +169,7 @@ class Search extends Component {
    for (let key in queryData) {
      params += key + '=' + queryData[key] + '&';
    }
-    window.location = serviceUrl + '/search/?' + params.slice(0, params.length - 1);
+    window.location = siteRoot + '/search/?' + params.slice(0, params.length - 1);
  }

  renderSearchResult() {
--- a/frontend/src/components/toolbar/path-toolbar.js
+++ b/frontend/src/components/toolbar/path-toolbar.js
@@ -1,29 +1,51 @@
 import React from 'react';
-import { gettext, repoID, permission, siteRoot, initialFilePath } from '../constants';
+import { gettext, repoID, slug, permission, siteRoot } from '../constants';
+import { encodePath } from '../utils';
+import PropTypes from 'prop-types';

-function PathToolbar() {
+const propTypes = {
+  filePath: PropTypes.string.isRequired
+};

-  let trashUrl = '';
-  let historyUrl = '';
-  if (initialFilePath === '/' && permission) {
-    trashUrl = siteRoot + 'repo/recycle/' + repoID + '/?referer=' + encodeURIComponent(location.href);
-    historyUrl = siteRoot + 'repo/history/' + repoID + '/?referer=' + encodeURIComponent(location.href);
-    return (
-      <ul className="path-toolbar">
-        <li className="toolbar-item"><a className="op-link sf2-icon-trash" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a></li>
-        <li className="toolbar-item"><a className="op-link sf2-icon-history" href={historyUrl} title={gettext('History')} aria-label={gettext('History')}></a></li>
-      </ul>
-    );
-  } else if (permission) {
-    trashUrl = siteRoot + 'dir/recycle/' + repoID + '/?dir_path=' + encodeURIComponent(initialFilePath);
-    return (
-      <ul className="path-toolbar">
-        <li className="toolbar-item"><a className="op-link sf2-icon-trash" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a></li>
-      </ul>
-    );
+class PathToolbar extends React.Component {
+
+  isMarkdownFile(filePath) {
+    let lastIndex = filePath.lastIndexOf('/');
+    let name = filePath.slice(lastIndex + 1);
+    return name.indexOf('.md') > -1 ? true : false;
+  }
+  
+  render() {
+    let isFile = this.isMarkdownFile(this.props.filePath);
+    let index = this.props.filePath.lastIndexOf('/');
+    let name = this.props.filePath.slice(index + 1);
+    let trashUrl = siteRoot + 'repo/recycle/' + repoID + '/?referer=' + encodeURIComponent(location.href);
+    let historyUrl = siteRoot + 'repo/history/' + repoID + '/?referer=' + encodeURIComponent(location.href);
+    if ( (name === slug  || name === '') && !isFile && permission) {
+      return (
+        <ul className="path-toolbar">
+          <li className="toolbar-item"><a className="op-link sf2-icon-trash" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a></li>
+          <li className="toolbar-item"><a className="op-link sf2-icon-history" href={historyUrl} title={gettext('History')} aria-label={gettext('History')}></a></li>
+        </ul>
+      );
+    } else if ( !isFile && permission) {
+      return (
+        <ul className="path-toolbar">
+          <li className="toolbar-item"><a className="op-link sf2-icon-trash" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a></li>
+        </ul>
+      );
+    } else if (permission) {
+      historyUrl = siteRoot + 'repo/file_revisions/' + repoID + '/?p=' + encodePath(this.props.filePath) + '&referer=' + encodeURIComponent(location.href);
+      return (
+        <ul className="path-toolbar">
+          <li className="toolbar-item"><a className="op-link sf2-icon-history" href={historyUrl} title={gettext('History')} aria-label={gettext('History')}></a></li>
+        </ul>
+      )
+    }
+    return '';
  }
-  return '';
-
 }

+PathToolbar.propTypes = propTypes;
+
 export default PathToolbar;
--- a/frontend/src/components/tree-dir-view/tree-dir-list.js
+++ b/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>
    )
  }
--- a/frontend/src/components/tree-dir-view/tree-dir-view.js
+++ b/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>
    )
  }
--- a/frontend/src/components/tree-view/node.js
+++ b/frontend/src/components/tree-view/node.js
@@ -1,13 +1,15 @@
 class Node {

  static deserializefromJson(object) {
-    const {name, type, size, last_update_time, isExpanded = true, children = []} = object;
+    const {name, type, size, last_update_time, permission, parent_path, isExpanded = true, children = []} = object;

    const node = new Node({
      name,
      type,
      size,
      last_update_time,
+      permission,
+      parent_path,
      isExpanded,
      children: children.map(item => Node.deserializefromJson(item)),
    });
@@ -15,11 +17,13 @@ class Node {
    return node;
  }
  
-  constructor({name, type, size, last_update_time, isExpanded, children}) {
+  constructor({name, type, size, last_update_time, permission, parent_path, isExpanded, children}) {
    this.name = name;
    this.type = type;
    this.size = size;
    this.last_update_time = last_update_time;
+    this.permission = permission;
+    this.parent_path = parent_path;
    this.isExpanded = isExpanded !== undefined ? isExpanded : true;
    this.children = children ? children : [];
    this.parent = null;
@@ -31,6 +35,8 @@ class Node {
      type: this.type,
      size: this.size,
      last_update_time: this.last_update_time,
+      permission: this.permission,
+      parent_path: this.parent_path,
      isExpanded: this.isExpanded
    });
    n.children = this.children.map(child => { 
@@ -101,6 +107,8 @@ class Node {
      type: this.type,
      size: this.size,
      last_update_time: this.last_update_time,
+      permission: this.permission,
+      parent_path: this.parent_path,
      isExpanded: this.isExpanded,
      children: children
    }
--- a/frontend/src/components/tree-view/tree.js
+++ b/frontend/src/components/tree-view/tree.js
@@ -186,6 +186,8 @@ class Tree {
      type: model.type,
      size: bytesToSize(model.size),
      last_update_time: moment.unix(model.last_update_time).fromNow(),
+      permission: model.permission,
+      parent_path: model.parent_path,
      isExpanded: false
    });
    if (model.children instanceof Array) {
@@ -214,6 +216,8 @@ class Tree {
        type: nodeObj.type,
        size: bytesToSize(nodeObj.size),
        last_update_time: moment.unix(nodeObj.last_update_time).fromNow(),
+        permission: nodeObj.permission,
+        parent_path: nodeObj.parent_path,
        isExpanded: false
      });
      node.parent_path = nodeObj.parent_path;
@@ -240,6 +244,8 @@ class Tree {
      type: node.type,
      size: bytesToSize(node.size),
      last_update_time: moment.unix(node.last_update_time).fromNow(),
+      permission: node.permission,
+      parent_path: node.parent_path,
      isExpanded: false
    });
    if (node.children instanceof Array) {
--- a/frontend/src/components/utils.js
+++ b/frontend/src/components/utils.js
@@ -18,3 +18,12 @@ export function bytesToSize(bytes) {
  if (i === 0) return bytes + ' ' + sizes[i];
  return (bytes / (1000 ** i)).toFixed(1) + ' ' + sizes[i];
 }
+
+export function encodePath(path) {
+  let path_arr = path.split('/');
+  let path_arr_ = [];
+  for (let i = 0, len = path_arr.length; i < len; i++) {
+    path_arr_.push(encodeURIComponent(path_arr[i]));
+  }
+  return path_arr_.join('/');
+}