diff --git a/frontend/src/components/constance.js b/frontend/src/components/constance.js index 096a223c6d..dbbea09f2d 100644 --- 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 diff --git a/frontend/src/components/menu-component/menu-dialog/rename-dialog.js b/frontend/src/components/menu-component/menu-dialog/rename-dialog.js index b8717c7a3e..05d46668e8 100644 --- 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 ( {type === 'file' ? gettext("Rename File") : gettext("Rename Folder") } diff --git a/frontend/src/components/menu-component/node-menu.js b/frontend/src/components/menu-component/node-menu.js index 9df628bba1..b5ff5974a9 100644 --- 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 (
{this.renderNodeMenu()} - {this.state.showDelete && - - } - {this.state.showAddFileFolder && - - } - {this.state.showRename && - - }
) } diff --git a/frontend/src/components/tree-view/tree-node-view.js b/frontend/src/components/tree-view/tree-node-view.js index eef4689272..14b35196cb 100644 --- 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 (
diff --git a/frontend/src/components/tree-view/tree.js b/frontend/src/components/tree-view/tree.js index 94eb7c2522..c0c5c2b69a 100644 --- 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 }); diff --git a/frontend/src/pages/wiki/side-panel.js b/frontend/src/pages/wiki/side-panel.js index b02b0d2236..511f698a7e 100644 --- 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 (
@@ -135,7 +184,6 @@ class SidePanel extends Component {
{this.props.treeData && } + {this.state.isShowMenu && + } + {this.state.showDelete && + + } + {this.state.showAddFileFolder && + + } + {this.state.showRename && + + }
diff --git a/frontend/src/wiki.js b/frontend/src/wiki.js index d14a1b07eb..81faa93653 100644 --- 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} diff --git a/seahub/templates/wiki/wiki.html b/seahub/templates/wiki/wiki.html index 9512c7c335..a21a84fdba 100644 --- 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 }}" } };