repair wiki bug (#2344)

* repair wiki bug * optimized code * optimized code
2025-09-01 23:20:51 +00:00 · 2018-09-05 17:44:14 +08:00
parent 508f5c705f
commit eab6c6fe61
8 changed files with 123 additions and 142 deletions
--- a/frontend/src/components/constance.js
+++ b/frontend/src/components/constance.js
@@ -13,3 +13,4 @@ export const slug = window.wiki.config.slug;
 export const repoID = window.wiki.config.repoId;
 export const serviceUrl = window.wiki.config.serviceUrl;
 export const initialFilePath = window.wiki.config.initial_file_path;
+export const permission = window.wiki.config.permission
--- a/frontend/src/components/menu-component/menu-dialog/rename-dialog.js
+++ b/frontend/src/components/menu-component/menu-dialog/rename-dialog.js
@@ -59,7 +59,6 @@ class Rename extends React.Component {

  render() {
    let type = this.props.currentNode.type;
-    let preName = this.props.currentNode.name;
    return (
      <Modal isOpen={true} toggle={this.toggle}>
        <ModalHeader toggle={this.toggle}>{type === 'file' ? gettext("Rename File") : gettext("Rename Folder") }</ModalHeader>
--- a/frontend/src/components/menu-component/node-menu.js
+++ b/frontend/src/components/menu-component/node-menu.js
@@ -1,101 +1,24 @@
 import React from 'react'
-import Delete from './menu-dialog/delete-dialog';
-import CreateFlieFolder from './menu-dialog/create-fileforder-dialog';
-import Rename from './menu-dialog/rename-dialog';

 const gettext = window.gettext;

 class NodeMenu extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      showDelete: false,
-      showAddFileFolder: false,
-      showRename: false,
-      isFile: false
-    };
-  }
-
-  toggleDelete = () => {
-    this.setState({showDelete: !this.state.showDelete});
-    this.props.onHideContextMenu();
-  }
-
+  
  toggleAddFileFolder = (ev, flag) => {
-    if(flag){
-      this.setState({
-        showAddFileFolder: !this.state.showAddFileFolder,
-        isFile: true
-      });
-    } else {
-      this.setState({
-        showAddFileFolder: !this.state.showAddFileFolder,
-        isFile: false
-      })
-    }
-    this.props.onHideContextMenu();
+    this.props.toggleAddFileFolder(flag);
  }
-
+  
  toggleRename = () => {
-    this.setState({showRename: !this.state.showRename});
-    this.props.onHideContextMenu();
+    this.props.toggleRename();
  }
-
-  onDelete = () => {
-    this.setState({showDelete: !this.state.showDelete});
-    this.props.onDeleteNode();
-  }
-
-  deleteCancel = () => {
-    this.setState({showDelete: !this.state.showDelete});
-  }
-
-  onAddFile = (filePath) => {
-    this.setState({
-      showAddFileFolder: !this.state.showAddFileFolder,
-      isFile: false
-    });
-    this.props.onAddFileNode(filePath);
-  }
-
-  addFileCancel = () => {
-    this.setState({
-      showAddFileFolder: !this.state.showAddFileFolder,
-      isFile: false
-    });
-  }
-
-  onAddFolder = (dirPath) => {
-    this.setState({
-      showAddFileFolder: !this.state.showAddFileFolder,
-      isFile: false
-    });
-    this.props.onAddFolderNode(dirPath);
-  }
-
-  addFolderCancel = () => {
-    this.setState({
-      showAddFileFolder: !this.state.showAddFileFolder,
-      isFile: false
-    });
-  }
-
-  onRename = (newName) => {
-    this.setState({showRename: !this.state.showRename});
-    this.props.onRenameNode(newName);
-  }
-
-  renameCancel = () => {
-    this.setState({showRename: !this.state.showRename});
+  
+  toggleDelete = () => {
+    this.props.toggleDelete();
  }

  renderNodeMenu() {
-    let style = null;
    let position = this.props.menuPosition;
-    if (this.props.isShowMenu) {
-      style = {position: "fixed",left: position.left, top: position.top, display: 'block'};
-    }
+    let style = {position: "fixed",left: position.left, top: position.top, display: 'block'};

    if (this.props.currentNode.type === "dir") {

@@ -134,30 +57,6 @@ class NodeMenu extends React.Component {
    return (
      <div className="node-menu-module">
        {this.renderNodeMenu()}
-        {this.state.showDelete &&
-        <Delete 
-          currentNode={this.props.currentNode}
-          handleSubmit={this.onDelete}
-          toggleCancel={this.deleteCancel}
-        />
-        }
-        {this.state.showAddFileFolder && 
-        <CreateFlieFolder 
-          isFile={this.state.isFile}
-          currentNode={this.props.currentNode}
-          onAddFolder={this.onAddFolder}
-          addFolderCancel={this.addFolderCancel}
-          onAddFile={this.onAddFile}
-          addFileCancel={this.addFileCancel}
-        />
-        }
-        {this.state.showRename &&
-        <Rename 
-          currentNode={this.props.currentNode}
-          onRename={this.onRename} 
-          toggleCancel={this.renameCancel} 
-        />
-        }
      </div>
    )
  }
--- a/frontend/src/components/tree-view/tree-node-view.js
+++ b/frontend/src/components/tree-view/tree-node-view.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import MenuControl from '../menu-component/node-menu-control'
+import MenuControl from '../menu-component/node-menu-control';
+import { permission } from '../constance';

 function sortByType(a, b) {
  if (a.type == "dir" && b.type != "dir") {
@@ -110,7 +111,6 @@ class TreeNodeView extends React.Component {
                paddingLeft={this.props.paddingLeft}
                treeView={this.props.treeView}
                isNodeItemFrezee={this.props.isNodeItemFrezee}
-                permission={this.props.permission}
                currentFilePath={this.props.currentFilePath}
                onDirCollapse={this.props.onDirCollapse}
              />
@@ -124,7 +124,7 @@ class TreeNodeView extends React.Component {
  }

  renderMenuController() {
-    if (this.props.permission === "rw") {
+    if (permission === "True") {
      let isShow = (this.props.node.path === this.props.currentFilePath);
      return (
        <div className="right-icon">
--- a/frontend/src/components/tree-view/tree.js
+++ b/frontend/src/components/tree-view/tree.js
@@ -1,5 +1,6 @@
 import Node from './node';
 import moment from 'moment';
+import { bytesToSize } from '../utils';

 class Tree {
  
@@ -172,7 +173,7 @@ class Tree {
    var node = new Node({
      name: model.name,
      type: model.type,
-      size: model.size,
+      size: bytesToSize(model.size),
      last_update_time: moment.unix(model.last_update_time).fromNow(),
      isExpanded: false
    });
@@ -200,7 +201,7 @@ class Tree {
      let node = new Node({
        name: nodeObj.name,
        type: nodeObj.type,
-        size: nodeObj.size,
+        size: bytesToSize(nodeObj.size),
        last_update_time: moment.unix(nodeObj.last_update_time).fromNow(),
        isExpanded: false
      });
@@ -226,7 +227,7 @@ class Tree {
    var node = new Node({
      name: node.name,
      type: node.type,
-      size: node.size,
+      size: bytesToSize(node.size),
      last_update_time: moment.unix(node.last_update_time).fromNow(),
      isExpanded: false
    });
--- a/frontend/src/pages/wiki/side-panel.js
+++ b/frontend/src/pages/wiki/side-panel.js
@@ -3,6 +3,9 @@ import TreeView from '../../components/tree-view/tree-view';
 import { siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight } from '../../components/constance';
 import NodeMenu from '../../components/menu-component/node-menu';
 import MenuControl from '../../components/menu-component/node-menu-control';
+import Delete from '../../components/menu-component/menu-dialog/delete-dialog';
+import Rename from '../../components/menu-component/menu-dialog/rename-dialog';
+import CreateFlieFolder from '../../components/menu-component/menu-dialog/create-fileforder-dialog';

 const gettext = window.gettext;

@@ -19,7 +22,11 @@ class SidePanel extends Component {
        top: 0
      },
      isLoadFailed: false,
-      isMenuIconShow: false
+      isMenuIconShow: false,
+      showDelete: false,
+      showAddFileFolder: false,
+      showRename: false,
+      isFile: false
    }
    this.searchedPath = null;
  }
@@ -71,26 +78,52 @@ class SidePanel extends Component {
  }

  onHideContextMenu = () => {
+    if (!this.state.isShowMenu) {
+      return;
+    }
    this.setState({
      isShowMenu: false,
      isNodeItemFrezee: false
    })
  }

-  onAddFolderNode = (dirPath) => {
-    this.props.onAddFolderNode(dirPath);
+  toggleAddFileFolder = (flag) => {
+    let isFile = flag === true ? true : false;
+    this.setState({
+      showAddFileFolder: !this.state.showAddFileFolder,
+      isFile: isFile
+    });
+    this.onHideContextMenu();
+  }
+  
+  toggleRename = () => {
+    this.setState({showRename: !this.state.showRename});
+    this.onHideContextMenu();
+  }
+  
+  toggleDelete = () => {
+    this.setState({showDelete: !this.state.showDelete});
+    this.onHideContextMenu();
  }

+  onAddFolderNode = (dirPath) => {
+    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
+    this.props.onAddFolderNode(dirPath);
+  }
+  
  onAddFileNode = (filePath) => {
+    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
    this.props.onAddFileNode(filePath);
  }
  
  onRenameNode = (newName) => {
+    this.setState({showRename: !this.state.showRename})
    let node = this.state.currentNode;
    this.props.onRenameNode(node, newName)
  }
  
  onDeleteNode = () => {
+    this.setState({showDelete: !this.state.showDelete})
    let node = this.state.currentNode;
    this.props.onDeleteNode(node);
  }
@@ -109,6 +142,22 @@ class SidePanel extends Component {
    document.removeEventListener('click', this.onHideContextMenu);
  }

+  addFolderCancel = () => {
+    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
+  }
+
+  addFileCancel = () => {
+    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
+  }
+
+  deleteCancel = () => {
+    this.setState({showDelete: !this.state.showDelete})
+  }
+
+  renameCancel = () => {
+    this.setState({showRename: !this.state.showRename})
+  }
+
  render() {
    return (
      <div className={`wiki-side-panel ${this.props.closeSideBar ? "": "left-zero"}`}>
@@ -135,7 +184,6 @@ class SidePanel extends Component {
          <div className="wiki-pages-container">
            {this.props.treeData && 
            <TreeView
-              permission={this.props.permission}
              currentFilePath={this.props.currentFilePath}
              treeData={this.props.treeData}
              currentNode={this.state.currentNode}
@@ -145,16 +193,39 @@ class SidePanel extends Component {
              onDirCollapse={this.props.onDirCollapse}
            />
            }
+            {this.state.isShowMenu && 
            <NodeMenu 
-              isShowMenu={this.state.isShowMenu}
              menuPosition={this.state.menuPosition}
              currentNode={this.state.currentNode}
-              onHideContextMenu={this.onHideContextMenu}
-              onDeleteNode={this.onDeleteNode}
-              onAddFileNode={this.onAddFileNode}
-              onAddFolderNode={this.onAddFolderNode}
-              onRenameNode={this.onRenameNode}
+              toggleAddFileFolder={this.toggleAddFileFolder}
+              toggleRename={this.toggleRename}
+              toggleDelete={this.toggleDelete}
            />
+            }
+            {this.state.showDelete &&
+            <Delete 
+              currentNode={this.state.currentNode}
+              handleSubmit={this.onDeleteNode}
+              toggleCancel={this.deleteCancel}
+            />
+            }
+            {this.state.showAddFileFolder && 
+            <CreateFlieFolder 
+              isFile={this.state.isFile}
+              currentNode={this.state.currentNode}
+              onAddFolder={this.onAddFolderNode}
+              addFolderCancel={this.addFolderCancel}
+              onAddFile={this.onAddFileNode}
+              addFileCancel={this.addFileCancel}
+            />
+            }
+            {this.state.showRename &&
+            <Rename 
+              currentNode={this.state.currentNode}
+              onRename={this.onRenameNode} 
+              toggleCancel={this.renameCancel} 
+            />
+            }
          </div>
        </div>
      </div>
--- a/frontend/src/wiki.js
+++ b/frontend/src/wiki.js
@@ -45,10 +45,12 @@ class Wiki extends Component {
      treeData.parseListToTree(files);

      let node = treeData.getNodeByPath(filePath);
+      treeData.setNodeToActivated(node);
      if (node.isDir()) {
        this.exitViewFileState(treeData, node);
        this.setState({isFileLoading: false});
      } else {
+        treeData.setNodeToActivated(node);
        editorUtilities.getWikiFileContent(slug, filePath).then(res => {
          this.setState({
            tree_data: treeData,
@@ -72,7 +74,7 @@ class Wiki extends Component {
    })
  }

-  initMainPanelData(filePath) {
+  initMainPanelData(filePath){
    this.setState({isFileLoading: true});
    editorUtilities.getWikiFileContent(slug, filePath)
      .then(res => {
@@ -114,9 +116,7 @@ class Wiki extends Component {
      let tree = this.state.tree_data.clone();
      let node = tree.getNodeByPath(path);
      tree.setNodeToActivated(node);
-
-      let path = node.path; //node is file
-      this.enterViewFileState(tree, node, path);
+      this.enterViewFileState(tree, node, node.path);
    }
  }

@@ -234,14 +234,16 @@ class Wiki extends Component {
    let filePath = node.path;
    if (node.isMarkdown()) {
      editorUtilities.renameFile(filePath, newName).then(res => {
-        let date = new Date().getTime()/1000;
+        let cloneNode = node.clone();
+
        tree.updateNodeParam(node, "name", newName);
        node.name = newName;
+        let date = new Date().getTime()/1000;
        tree.updateNodeParam(node, "last_update_time", moment.unix(date).fromNow());
-
        node.last_update_time = moment.unix(date).fromNow();
+
        if (this.state.isViewFileState) {
-          if (this.isModifyCurrentFile(node)) {
+          if (this.isModifyCurrentFile(cloneNode)) {
            tree.setNodeToActivated(node);
            this.setState({
              tree_data: tree,
@@ -252,23 +254,28 @@ class Wiki extends Component {
            this.setState({tree_data: tree});
          }
        } else {
-          this.setState({tree_data: tree});
+          let parentNode = tree.findNodeParentFromTree(node);
+          this.setState({
+            tree_data: tree,
+            changedNode: parentNode
+          });
        }
      })
    } else if (node.isDir()) {
      editorUtilities.renameDir(filePath, newName).then(res => {

-        let currentFilePath = this.state.filePath;// the sequence is must right
+        let currentFilePath = this.state.filePath;
        let currentFileNode = tree.getNodeByPath(currentFilePath);
-        let isPathEqual = (node.path === currentFilePath);
-        let date = new Date().getTime()/1000;
+        let nodePath = node.path;
+
        tree.updateNodeParam(node, "name", newName);
-        node.name = newName;  // just synchronization node data && tree data;
+        node.name = newName;
+        let date = new Date().getTime()/1000;
        tree.updateNodeParam(node, "last_update_time", moment.unix(date).fromNow());
        node.last_update_time = moment.unix(date).fromNow();

        if (this.state.isViewFileState) {
-          if (this.isModifyContainsCurrentFile(node)) {
+          if (currentFilePath.indexOf(nodePath) > -1) {
            tree.setNodeToActivated(currentFileNode);
            this.setState({
              tree_data: tree,
@@ -279,7 +286,10 @@ class Wiki extends Component {
            this.setState({tree_data: tree});
          }
        } else {
-          if (isPathEqual || node.path.indexOf(currentFilePath) > -1) {
+          if (nodePath === currentFilePath) { // old node
+            tree.setNodeToActivated(node);
+            this.exitViewFileState(tree, node);
+          } else if (node.path.indexOf(currentFilePath) > -1) { // new node
            tree.setNodeToActivated(currentFileNode);
            this.exitViewFileState(tree, currentFileNode);
          } else {
@@ -429,7 +439,6 @@ class Wiki extends Component {
          closeSideBar={this.state.closeSideBar}
          onCloseSide ={this.onCloseSide}
          treeData={this.state.tree_data}
-          permission={this.state.permission}
          currentFilePath={this.state.filePath}
          changedNode={this.state.changedNode}
          onAddFolderNode={this.onAddFolderNode}
--- a/seahub/templates/wiki/wiki.html
+++ b/seahub/templates/wiki/wiki.html
@@ -11,7 +11,8 @@
            slug: "{{ wiki.slug }}",
            repoId: "{{ wiki.repo_id }}",
            serviceUrl: "{{ service_url}}",
-            initial_file_path: "{{ file_path }}"
+            initial_file_path: "{{ file_path }}",
+            permission: "{{ user_can_write }}"
        }
    };
 </script>