haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-21 08:25:21 +00:00
Code Issues Releases Wiki Activity

Wiki improve (#2894)

Browse Source
This commit is contained in:
杨顺强 2019-01-28 16:48:03 +08:00 committed by Daniel Pan
parent 0f76617b00
commit c53a1f0b3b
21 changed files with 646 additions and 1669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/index-viewer.js
View File

@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer'; import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer';
const viewerPropTypes = { const viewerPropTypes = {
onLinkClick: PropTypes.func, indexContent: PropTypes.string.isRequired,
onContentRendered: PropTypes.func.isRequired, onLinkClick: PropTypes.func.isRequired,
indexContent: PropTypes.string,
}; };
class IndexContentViewer extends React.Component { class IndexContentViewer extends React.Component {
@ -15,6 +14,10 @@ class IndexContentViewer extends React.Component {
this.props.onLinkClick(event); this.props.onLinkClick(event);
} }
onContentRendered = () => {
// todo
}
render() { render() {
return ( return (
<div className="markdown-content"> <div className="markdown-content">

167
frontend/src/components/tree-view-2/tree-node-view.js
View File

@ -1,167 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import TreeNodeMenu from './tree-node-menu';
import { permission } from '../../utils/constants';
const propTypes = {
node: PropTypes.object.isRequired,
currentPath: PropTypes.string.isRequired,
paddingLeft: PropTypes.number.isRequired,
isItemFreezed: PropTypes.bool.isRequired,
onNodeClick: PropTypes.func.isRequired,
onNodeExpanded: PropTypes.func.isRequired,
onNodeCollapse: PropTypes.func.isRequired,
onNodeDragStart: PropTypes.func.isRequired,
onFreezedItem: PropTypes.func.isRequired,
onUnFreezedItem: PropTypes.func.isRequired,
};
class TreeNodeView extends React.Component {
constructor(props) {
super(props);
this.state = {
isHighlight: false,
isShowOperationMenu: false
};
}
onMouseEnter = () => {
if (!this.props.isItemFreezed) {
this.setState({
isShowOperationMenu: true,
isHighlight: true,
});
}
}
onMouseLeave = () => {
if (!this.props.isItemFreezed) {
this.setState({
isShowOperationMenu: false,
isHighlight: false,
});
}
}
onNodeClick = () => {
this.props.onNodeClick(this.props.node);
}
onLoadToggle = () => {
let { node } = this.props;
if (node.isExpanded) {
this.props.onNodeCollapse(node);
} else {
this.props.onNodeExpanded(node);
}
}
onNodeDragStart = (e) => {
this.props.onNodeDragStart(e, this.props.node);
}
onUnFreezedItem = () => {
this.setState({isShowOperationMenu: false});
this.props.onUnFreezedItem();
}
onMenuItemClick = (operation, node) => {
this.props.onMenuItemClick(operation, node);
}
getNodeTypeAndIcon = () => {
let { node } = this.props;
let icon = '';
let type = '';
if (node.object.type === 'dir') {
icon = <i className="far fa-folder"></i>
type = 'dir';
} else {
let index = node.object.name.lastIndexOf('.');
if (index === -1) {
icon = <i className="far fa-file"></i>
type = 'file';
} else {
let suffix = node.object.name.slice(index).toLowerCase();
if (suffix === '.png' || suffix === '.jpg') {
icon = <i className="far fa-image"></i>
type = 'image';
} else {
icon = <i className="far fa-file"></i>
type = 'file';
}
}
}
return {icon, type};
}
renderChildren = () => {
let { node, paddingLeft } = this.props;
if (!node.hasChildren()) {
return '';
}
return (
<div className="children" style={{paddingLeft: paddingLeft}}>
{node.children.map(item => {
return (
<TreeNodeView
key={item.path}
node={item}
paddingLeft={paddingLeft}
currentPath={this.props.currentPath}
isItemFreezed={this.props.isItemFreezed}
onNodeClick={this.props.onNodeClick}
onNodeCollapse={this.props.onNodeCollapse}
onNodeExpanded={this.props.onNodeExpanded}
onFreezedItem={this.props.onFreezedItem}
onMenuItemClick={this.onMenuItemClick}
onUnFreezedItem={this.onUnFreezedItem}
/>
);
})}
</div>
);
}
render() {
let { currentPath, node } = this.props;
let { type, icon } = this.getNodeTypeAndIcon();
let hlClass = this.state.isHighlight ? 'tree-node-inner-hover ' : '';
if (node.path === currentPath) {
hlClass = 'tree-node-hight-light';
}
return (
<div className="tree-node">
<div type={type} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/'? 'hide': ''}`}>
<div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} onClick={this.onNodeClick}>{node.object.name}</div>
<div className="left-icon">
{type === 'dir' && (!node.isLoaded || (node.isLoaded && node.hasChildren())) && (
<i
className={`folder-toggle-icon fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`}
onMouseDown={e => e.stopPropagation()}
onClick={this.onLoadToggle}
></i>
)}
<i className="tree-node-icon">{icon}</i>
</div>
<div className="right-icon">
{(permission && this.state.isShowOperationMenu) && (
<TreeNodeMenu
node={this.props.node}
onMenuItemClick={this.onMenuItemClick}
onUnFreezedItem={this.onUnFreezedItem}
onFreezedItem={this.props.onFreezedItem}
/>
)}
</div>
</div>
{node.isExpanded && this.renderChildren()}
</div>
);
}
}
TreeNodeView.propTypes = propTypes;
export default TreeNodeView;

60
frontend/src/components/tree-view-2/tree-view.js
View File

@ -1,60 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import TreeNodeView from './tree-node-view';
const propTypes = {
treeData: PropTypes.object.isRequired,
currentPath: PropTypes.string.isRequired,
onMenuItemClick: PropTypes.func.isRequired,
onNodeClick: PropTypes.func.isRequired,
onNodeExpanded: PropTypes.func.isRequired,
onNodeCollapse: PropTypes.func.isRequired,
};
const PADDING_LEFT = 12;
class TreeView extends React.Component {
constructor(props) {
super(props);
this.state = {
isItemFreezed: false,
};
}
onNodeDragStart = (e, node) => {
// todo
}
onFreezedItem = () => {
this.setState({isItemFreezed: true});
}
onUnFreezedItem = () => {
this.setState({isItemFreezed: false});
}
render() {
return (
<div className="tree-view tree">
<TreeNodeView
node={this.props.treeData.root}
currentPath={this.props.currentPath}
paddingLeft={PADDING_LEFT}
isItemFreezed={this.state.isItemFreezed}
onNodeClick={this.props.onNodeClick}
onMenuItemClick={this.props.onMenuItemClick}
onNodeExpanded={this.props.onNodeExpanded}
onNodeCollapse={this.props.onNodeCollapse}
onNodeDragStart={this.onNodeDragStart}
onFreezedItem={this.onFreezedItem}
onUnFreezedItem={this.onUnFreezedItem}
/>
</div>
);
}
}
TreeView.propTypes = propTypes;
export default TreeView;

139
frontend/src/components/tree-view-2/tree.js
View File

@ -1,139 +0,0 @@
import TreeNode from './tree-node';
class Tree {
constructor() {
this.root = null;
}
clone() {
let tree = new Tree();
if (this.root) {
tree.root = this.root.clone();
}
return tree;
}
setRoot(node) {
this.root = node;
}
getNodeByPath(path) {
let findNode = null;
function callback(currentNode) {
if (currentNode.path === path) {
findNode = currentNode;
return true;
}
return false;
}
this.traverseDF(callback);
return findNode;
}
getNodeChildrenObject(node) {
let objects = node.children.map(item => {
let object = item.object;
return object;
});
return objects;
}
addNodeToParent(node, parentNode) {
parentNode.addChild(node);
}
addNodeListToParent(nodeList, parentNode) {
nodeList.forEach(node => {
parentNode.addChild(node);
});
}
deleteNode(node) {
let parentNode = this.getNodeByPath(node.parentNode.path);
parentNode.deleteChild(node);
}
deleteNodeList(nodeList) {
nodeList.forEach(node => {
this.deleteNode(node);
});
}
renameNode(node, newName) {
node.rename(newName);
}
updateNode(node, keys, newValues) {
node.updateObjectParam(keys, newValues);
}
moveNode(node, destNode) {
this.deleteNode(node);
destNode.addChild(node);
}
copyNode(node, destNode) {
destNode.addChild(node);
}
traverseDF(callback) {
let stack = [];
let found = false;
stack.unshift(this.root);
let currentNode = stack.shift();
while (!found && currentNode) {
found = callback(currentNode) == true ? true : false;
if (!found) {
stack.unshift(...currentNode.children);
currentNode = stack.shift();
}
}
}
traverseBF(callback) {
let queue = [];
let found = false;
queue.push(this.root);
let currentNode = queue.shift();
while (!found && currentNode) {
found = callback(currentNode) === true ? true : false;
if (!found) {
queue.push(...currentNode.children);
currentNode = queue.shift();
}
}
}
expandNode(node) {
node.isExpanded = true;
while (node.parentNode) {
node.parentNode.isExpanded = true;
node = node.parentNode;
}
}
collapseNode(node) {
node.isExpanded = false;
}
isNodeChild(node, parentNode) {
return parentNode.children.some(item => {
return item.path === node.path;
});
}
serializeToJson() {
return this.root.serializeToJson();
}
deserializefromJson(json) {
let root = TreeNode.deserializefromJson(json);
let tree = new Tree();
tree.setRoot(root);
return tree;
}
}
export default Tree;

79
frontend/src/components/tree-view/node-menu.js
View File

@ -1,79 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
const propTypes = {
menuPosition: PropTypes.object.isRequired,
currentNode: PropTypes.object.isRequired,
toggleRename: PropTypes.func.isRequired,
toggleDelete: PropTypes.func.isRequired,
toggleAddFile: PropTypes.func.isRequired,
toggleAddFolder: PropTypes.func.isRequired,
};
class NodeMenu extends React.Component {
toggleAddFile = () => {
this.props.toggleAddFile();
}
toggleAddFolder = () => {
this.props.toggleAddFolder();
}
toggleRename = () => {
this.props.toggleRename();
}
toggleDelete = () => {
this.props.toggleDelete();
}
renderNodeMenu() {
let position = this.props.menuPosition;
let style = {position: 'fixed',left: position.left, top: position.top, display: 'block'};
if (this.props.currentNode.type === 'dir') {
if (this.props.currentNode.name === '/') {
return (
<ul className="dropdown-menu" style={style}>
<li className="dropdown-item" onClick={this.toggleAddFolder}>{gettext('New Folder')}</li>
<li className="dropdown-item" onClick={this.toggleAddFile}>{gettext('New File')}</li>
</ul>
);
}
return (
<ul className="dropdown-menu" style={style}>
<li className="dropdown-item" onClick={this.toggleAddFolder}>{gettext('New Folder')}</li>
<li className="dropdown-item" onClick={this.toggleAddFile}>{gettext('New File')}</li>
<li className="dropdown-item" onClick={this.toggleRename}>{gettext('Rename')}</li>
<li className="dropdown-item" onClick={this.toggleDelete}>{gettext('Delete')}</li>
</ul>
);
}
return (
<ul className="dropdown-menu" style={style}>
<li className="dropdown-item" onClick={this.toggleRename}>{gettext('Rename')}</li>
<li className="dropdown-item" onClick={this.toggleDelete}>{gettext('Delete')}</li>
</ul>
);
}
render() {
if (!this.props.currentNode) {
return (<div className="node-menu-module"></div>);
}
return (
<div className="node-menu-module">
{this.renderNodeMenu()}
</div>
);
}
}
NodeMenu.propTypes = propTypes;
export default NodeMenu;

128
frontend/src/components/tree-view/node.js
View File

@ -1,128 +0,0 @@
class Node {
static deserializefromJson(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)),
});
return node;
}
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;
}
clone() {
var n = new Node({
name: this.name,
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 => {
var newChild = child.clone();
newChild.parent = n;
return newChild;
});
return n;
}
get path() {
if (!this.parent) {
return this.name;
} else {
let p = this.parent.path;
return p === '/' ? (p + this.name) : (p + '/' + this.name);
}
}
hasChildren() {
return this.children.length > 0;
}
isRoot() {
return this.parent === undefined;
}
isMarkdown() {
if (this.isDir()) {
return false;
}
let index = this.name.lastIndexOf('.');
if (index == -1) {
return false;
} else {
let type = this.name.substring(index).toLowerCase();
if (type == '.md' || type == '.markdown') {
return true;
} else {
return false;
}
}
}
isFile() {
return this.type === 'file';
}
isDir() {
return this.type == 'dir';
}
isImage() {
let index = this.name.lastIndexOf('.');
if (index == -1) {
return false;
} else {
let type = this.name.substring(index).toLowerCase();
if (type == '.png' || type == '.jpg') {
return true;
} else {
return false;
}
}
}
serializeToJson() {
var children = [];
if (this.hasChildren()) {
children = this.children.map(m => m.toJSON());
}
const object = {
name: this.name,
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
};
return object;
}
}
export default Node;

0
frontend/src/components/tree-view-2/tree-helper.js → frontend/src/components/tree-view/tree-helper.js
View File

0
frontend/src/components/tree-view-2/tree-node-menu.js → frontend/src/components/tree-view/tree-node-menu.js
View File

257
frontend/src/components/tree-view/tree-node-view.js
View File

@ -1,210 +1,169 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import MenuControl from '../menu-control'; import TreeNodeMenu from './tree-node-menu';
import { permission } from '../../utils/constants'; import { permission } from '../../utils/constants';
const propTypes = { const propTypes = {
isNodeItemFrezee: PropTypes.bool.isRequired, node: PropTypes.object.isRequired,
currentPath: PropTypes.string.isRequired, currentPath: PropTypes.string.isRequired,
paddingLeft: PropTypes.number.isRequired, paddingLeft: PropTypes.number.isRequired,
node: PropTypes.object.isRequired, isNodeMenuShow: PropTypes.bool.isRequired,
treeView: PropTypes.object.isRequired, isItemFreezed: PropTypes.bool.isRequired,
onDirCollapse: PropTypes.func.isRequired, onNodeClick: PropTypes.func.isRequired,
onNodeExpanded: PropTypes.func.isRequired,
onNodeCollapse: PropTypes.func.isRequired,
onNodeDragStart: PropTypes.func.isRequired,
onFreezedItem: PropTypes.func.isRequired,
onUnFreezedItem: PropTypes.func.isRequired,
}; };
function sortByType(a, b) {
if (a.type == 'dir' && b.type != 'dir') {
return -1;
} else if (a.type != 'dir' && b.type == 'dir') {
return 1;
} else {
return a.name.localeCompare(b.name);
}
}
class TreeNodeView extends React.Component { class TreeNodeView extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
isMenuIconShow: false isHighlight: false,
isShowOperationMenu: false
}; };
} }
onClick = () => {
// e.nativeEvent.stopImmediatePropagation();
let { node } = this.props;
this.props.treeView.onNodeClick(node);
}
onMouseEnter = () => { onMouseEnter = () => {
if (!this.props.isNodeItemFrezee) { if (!this.props.isItemFreezed) {
this.setState({ this.setState({
isMenuIconShow: true isShowOperationMenu: true,
isHighlight: true,
}); });
} }
} }
onMouseLeave = () => { onMouseLeave = () => {
if (!this.props.isNodeItemFrezee) { if (!this.props.isItemFreezed) {
this.setState({ this.setState({
isMenuIconShow: false isShowOperationMenu: false,
isHighlight: false,
}); });
} }
} }
handleCollapse = (e) => { onNodeClick = () => {
e.stopPropagation(); this.props.onNodeClick(this.props.node);
this.props.onDirCollapse(this.props.node);
} }
onDragStart = (e) => { onLoadToggle = () => {
const { node } = this.props; let { node } = this.props;
this.props.treeView.onDragStart(e, node); if (node.isExpanded) {
} this.props.onNodeCollapse(node);
} else {
onMenuControlClick = (e) => { this.props.onNodeExpanded(node);
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
const { node } = this.props;
this.props.treeView.onShowContextMenu(e, node);
}
hideMenuIcon = () => {
this.setState({
isMenuIconShow: false
});
}
componentDidMount() {
document.addEventListener('click', this.hideMenuIcon);
}
componentWillUnmount() {
document.removeEventListener('click', this.hideMenuIcon);
}
renderCollapse = () => {
const { node } = this.props;
if (node.hasChildren()) {
const { isExpanded } = node;
return (
<i
className={isExpanded ? 'folder-toggle-icon fa fa-caret-down' : 'folder-toggle-icon fa fa-caret-right'}
onMouseDown={e => e.stopPropagation()}
onClick={this.handleCollapse}
/>
);
} }
return null;
} }
renderChildren = () => { onNodeDragStart = (e) => {
const { node } = this.props; this.props.onNodeDragStart(e, this.props.node);
if (node.children && node.children.length) {
const childrenStyles = {
paddingLeft: this.props.paddingLeft
};
var l = node.children.sort(sortByType);
/*
the `key` property is needed. Otherwise there is a warning in the console
*/
return (
<div className="children" style={childrenStyles}>
{l.map(child => {
return (
<TreeNodeView
node={child}
key={child.path}
paddingLeft={this.props.paddingLeft}
treeView={this.props.treeView}
isNodeItemFrezee={this.props.isNodeItemFrezee}
currentPath={this.props.currentPath}
onDirCollapse={this.props.onDirCollapse}
/>
);
})}
</div>
);
}
return null;
} }
renderMenuController() { onUnFreezedItem = () => {
if (permission) { this.setState({isShowOperationMenu: false});
let isShow = (this.props.node.path === this.props.currentPath); this.props.onUnFreezedItem();
return (
<div className="right-icon">
<MenuControl
isShow={this.state.isMenuIconShow || isShow}
onClick={this.onMenuControlClick}
/>
</div>
);
}
return;
} }
getNodeTypeAndIcon() { onMenuItemClick = (operation, node) => {
const node = this.props.node; this.props.onMenuItemClick(operation, node);
}
getNodeTypeAndIcon = () => {
let { node } = this.props;
let icon = ''; let icon = '';
let type = ''; let type = '';
if (node.type === 'dir') { if (node.object.type === 'dir') {
icon = <i className="far fa-folder"/>; icon = <i className="far fa-folder"></i>
type = 'dir'; type = 'dir';
} else { } else {
let index = node.name.lastIndexOf('.'); let index = node.object.name.lastIndexOf('.');
if (index === -1) { if (index === -1) {
icon = <i className="far fa-file"/>; icon = <i className="far fa-file"></i>
type = 'file'; type = 'file';
} else { } else {
type = node.name.substring(index).toLowerCase(); let suffix = node.object.name.slice(index).toLowerCase();
if (type === '.png' || type === '.jpg') { if (suffix === '.png' || suffix === '.jpg') {
icon = <i className="far fa-image"/>; icon = <i className="far fa-image"></i>
type = 'image'; type = 'image';
} else { } else {
icon = <i className="far fa-file"/>; icon = <i className="far fa-file"></i>
type = 'file'; type = 'file';
} }
} }
} }
return {icon, type};
return { type, icon };
} }
render() { renderChildren = () => {
const styles = {}; let { node, paddingLeft } = this.props;
let node = this.props.node; if (!node.hasChildren()) {
let { type, icon } = this.getNodeTypeAndIcon(); return '';
let hlClass = '';
if (node.path === this.props.currentPath) {
hlClass = 'tree-node-hight-light';
} }
return ( return (
<div type={type} className="tree-node" style={styles}> <div className="children" style={{paddingLeft: paddingLeft}}>
<div {node.children.map(item => {
onMouseLeave={this.onMouseLeave} return (
onMouseEnter={this.onMouseEnter} <TreeNodeView
onClick={this.onClick} key={item.path}
type={type} node={item}
className={`tree-node-inner text-nowrap ${hlClass} ${node.name === '/'? 'hide': ''}`} paddingLeft={paddingLeft}
> currentPath={this.props.currentPath}
<div className="tree-node-text" type={type} draggable="true" onDragStart={this.onDragStart}>{node.name}</div> isNodeMenuShow={this.props.isNodeMenuShow}
<div className="left-icon"> isItemFreezed={this.props.isItemFreezed}
{this.renderCollapse()} onNodeClick={this.props.onNodeClick}
<i type={type} className="tree-node-icon">{icon}</i> onNodeCollapse={this.props.onNodeCollapse}
</div> onNodeExpanded={this.props.onNodeExpanded}
{this.renderMenuController()} onFreezedItem={this.props.onFreezedItem}
</div> onMenuItemClick={this.onMenuItemClick}
{node.isExpanded ? this.renderChildren() : null} onUnFreezedItem={this.onUnFreezedItem}
/>
);
})}
</div> </div>
); );
} }
render() {
let { currentPath, node, isNodeMenuShow } = this.props;
let { type, icon } = this.getNodeTypeAndIcon();
let hlClass = this.state.isHighlight ? 'tree-node-inner-hover ' : '';
if (node.path === currentPath) {
hlClass = 'tree-node-hight-light';
}
return (
<div className="tree-node">
<div type={type} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/'? 'hide': ''}`}>
<div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} onClick={this.onNodeClick}>{node.object.name}</div>
<div className="left-icon">
{type === 'dir' && (!node.isLoaded || (node.isLoaded && node.hasChildren())) && (
<i
className={`folder-toggle-icon fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`}
onMouseDown={e => e.stopPropagation()}
onClick={this.onLoadToggle}
></i>
)}
<i className="tree-node-icon">{icon}</i>
</div>
{isNodeMenuShow && (
<div className="right-icon">
{(permission && this.state.isShowOperationMenu) && (
<TreeNodeMenu
node={this.props.node}
onMenuItemClick={this.onMenuItemClick}
onUnFreezedItem={this.onUnFreezedItem}
onFreezedItem={this.props.onFreezedItem}
/>
)}
</div>
)}
</div>
{node.isExpanded && this.renderChildren()}
</div>
);
}
} }
TreeNodeView.propTypes = propTypes; TreeNodeView.propTypes = propTypes;

0
frontend/src/components/tree-view-2/tree-node.js → frontend/src/components/tree-view/tree-node.js
View File

60
frontend/src/components/tree-view/tree-view.js
View File

@ -1,62 +1,60 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import TreeNodeView from './tree-node-view'; import TreeNodeView from './tree-node-view';
import editorUtilities from '../../utils/editor-utilties';
const propTypes = { const propTypes = {
permission: PropTypes.string, isNodeMenuShow: PropTypes.bool.isRequired,
isNodeItemFrezee: PropTypes.bool.isRequired,
currentPath: PropTypes.string.isRequired,
treeData: PropTypes.object.isRequired, treeData: PropTypes.object.isRequired,
onShowContextMenu: PropTypes.func.isRequired, currentPath: PropTypes.string.isRequired,
onMenuItemClick: PropTypes.func,
onNodeClick: PropTypes.func.isRequired, onNodeClick: PropTypes.func.isRequired,
onDirCollapse: PropTypes.func.isRequired, onNodeExpanded: PropTypes.func.isRequired,
onNodeCollapse: PropTypes.func.isRequired,
}; };
class TreeView extends React.PureComponent { const PADDING_LEFT = 12;
change = (tree) => { class TreeView extends React.Component {
/*
this._updated = true; constructor(props) {
if (this.props.onChange) this.props.onChange(tree.obj); super(props);
*/ this.state = {
isItemFreezed: false,
};
} }
onDragStart = (e, node) => { onNodeDragStart = (e, node) => {
const url = editorUtilities.getFileURL(node); // todo
e.dataTransfer.setData('text/uri-list', url);
e.dataTransfer.setData('text/plain', url);
} }
onNodeClick = (node) => { onFreezedItem = () => {
this.props.onNodeClick(node); this.setState({isItemFreezed: true});
} }
onShowContextMenu = (e, node) => { onUnFreezedItem = () => {
this.props.onShowContextMenu(e, node); this.setState({isItemFreezed: false});
} }
render() { render() {
if (!this.props.treeData.root) {
return <div>Loading...</div>;
}
return ( return (
<div className="tree-view tree"> <div className="tree-view tree">
<TreeNodeView <TreeNodeView
paddingLeft={12}
treeView={this}
node={this.props.treeData.root} node={this.props.treeData.root}
isNodeItemFrezee={this.props.isNodeItemFrezee}
permission={this.props.permission}
currentPath={this.props.currentPath} currentPath={this.props.currentPath}
onShowContextMenu={this.props.onShowContextMenu} paddingLeft={PADDING_LEFT}
onDirCollapse={this.props.onDirCollapse} isNodeMenuShow={this.props.isNodeMenuShow}
isItemFreezed={this.state.isItemFreezed}
onNodeClick={this.props.onNodeClick}
onMenuItemClick={this.props.onMenuItemClick}
onNodeExpanded={this.props.onNodeExpanded}
onNodeCollapse={this.props.onNodeCollapse}
onNodeDragStart={this.onNodeDragStart}
onFreezedItem={this.onFreezedItem}
onUnFreezedItem={this.onUnFreezedItem}
/> />
</div> </div>
); );
} }
} }
TreeView.propTypes = propTypes; TreeView.propTypes = propTypes;

280
frontend/src/components/tree-view/tree.js
View File

@ -1,9 +1,4 @@
import Node from './node'; import TreeNode from './tree-node';
import moment from 'moment';
import { Utils } from '../../utils/utils';
const lang = window.app.config.lang;
moment.locale(lang);
class Tree { class Tree {
@ -12,170 +7,76 @@ class Tree {
} }
clone() { clone() {
var t = new Tree(); let tree = new Tree();
if (this.root) if (this.root) {
t.root = this.root.clone(); tree.root = this.root.clone();
return t; }
return tree;
} }
setRoot(node) { setRoot(node) {
this.root = node; this.root = node;
} }
addNodeToParent(node, parentNode) { getNodeByPath(path) {
node.parent = parentNode; let findNode = null;
parentNode.children.push(node); function callback(currentNode) {
return node; if (currentNode.path === path) {
} findNode = currentNode;
return true;
removeNodeFromParent(node, parentNode) {
let children = parentNode.children;
let removeNode = null;
let index = null;
for (let i = 0; i < children.length; i++) {
if (node.path === children[i].path) {
removeNode = children[i];
index = i;
break;
} }
return false;
} }
node.parent = null; this.traverseDF(callback);
parentNode.children.splice(index, 1); return findNode;
return removeNode ? removeNode : null;
} }
addNode(node) { getNodeChildrenObject(node) {
let treeNodeParent = this.findNodeParentFromTree(node); let objects = node.children.map(item => {
if (treeNodeParent) { let object = item.object;
this.addNodeToParent(node, treeNodeParent); return object;
return true; });
} return objects;
return false; }
addNodeToParent(node, parentNode) {
parentNode.addChild(node);
}
addNodeListToParent(nodeList, parentNode) {
nodeList.forEach(node => {
parentNode.addChild(node);
});
} }
deleteNode(node) { deleteNode(node) {
let treeNodeParent = this.findNodeParentFromTree(node); let parentNode = this.getNodeByPath(node.parentNode.path);
if (treeNodeParent) { parentNode.deleteChild(node);
this.removeNodeFromParent(node, treeNodeParent);
return true;
}
return false;
} }
deleteNodeByPath(path) { deleteNodeList(nodeList) {
let node = this.getNodeByPath(path); nodeList.forEach(node => {
this.deleteNode(node);
}
moveNode(node, moveToNode, isDestroy) {
let moveNode = node.clone();
this.addNodeToParent(moveNode, moveToNode);
if (isDestroy) {
this.deleteNode(node); this.deleteNode(node);
} });
} }
moveNodeByPath(path, moveToPath, isDestroy) { renameNode(node, newName) {
let node = this.getNodeByPath(path); node.rename(newName);
let moveToNode = this.getNodeByPath(moveToPath);
this.moveNode(node, moveToNode, isDestroy);
} }
updateNodeParam(node, param, newValue) { updateNode(node, keys, newValues) {
let treeNode = this.findNodeFromTree(node); node.updateObjectParam(keys, newValues);
if (treeNode && treeNode[param]) {
treeNode[param] = newValue;
return true;
}
return false;
} }
updateNodeParamByPath(path, param, newValue) { moveNode(node, destNode) {
let node = this.getNodeByPath(path); this.deleteNode(node);
this.updateNodeParam(node, param, newValue); destNode.addChild(node);
} }
findNode(node) { copyNode(node, destNode) {
return this.findNodeFromTree(node); destNode.addChild(node);
} }
findNodeFromTree(node) {
let findNode = this.getNodeByPath(node.path);
return findNode;
}
findNodeParentFromTree(node) {
let parentNode = node.parent;
let findNode = null;
function cb(treeNode) {
if (treeNode.path === parentNode.path) {
findNode = treeNode;
return true;
}
return false;
}
this.traverseDF(cb);
return findNode;
}
expandNode(node) {
let treeNode = this.findNodeFromTree(node);
if (treeNode) {
treeNode.isExpanded = true;
while (treeNode.parent) {
treeNode.parent.isExpanded = true;
treeNode = treeNode.parent;
}
return true;
}
return false;
}
collapseNode(node) {
let treeNode = this.findNodeFromTree(node);
if (treeNode) {
treeNode.isExpanded = false;
return true;
}
return false;
}
resetTreeState() {
function cb(treeNode) {
treeNode.isExpanded = false;
return false;
}
this.traverseBF(cb);
this.root.isExpanded = true;
return true;
}
getNodeByPath(path) {
let findNode = null;
function cb(treeNode) {
if (treeNode.path === path) {
findNode = treeNode;
return true;
}
return false;
}
this.traverseBF(cb);
return findNode;
}
isNodeChild(parentNode, node) {
let isChild = false;
while(node.parent){
if(node.parent.path === parentNode.path){
isChild = true;
break;
}
node = node.parent;
}
return isChild;
}
traverseDF(callback) { traverseDF(callback) {
let stack = []; let stack = [];
let found = false; let found = false;
@ -204,82 +105,33 @@ class Tree {
} }
} }
parseModelToTree(model) { expandNode(node) {
var node = new Node({ node.isExpanded = true;
name: model.name, while (node.parentNode) {
type: model.type, node.parentNode.isExpanded = true;
size: Utils.bytesToSize(model.size), node = node.parentNode;
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) {
for (let child of model.children) {
this.addNodeToParent(this.parseNodeToTree(child), node);
}
} }
return node;
} }
parseListToTree(nodeList) { collapseNode(node) {
node.isExpanded = false;
function getNodePath(parentPath, nodeName) {
return parentPath === '/' ? (parentPath + nodeName) : (parentPath + '/' + nodeName);
}
let root = new Node({name: '/', type: 'dir', isExpanded: true});
this.root = root;
let map = new Map();
map.set(root.name, root);
let treeNodeList = [];
for (let nodeObj of nodeList) {
let node = new Node({
name: nodeObj.name,
type: nodeObj.type,
size: Utils.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;
treeNodeList.push(node);
if (node.isDir()) {
map.set(getNodePath(node.parent_path, node.name), node);
}
}
for (let node of treeNodeList) {
let p = map.get(node.parent_path);
if (p === undefined) {
/* eslint-disable */
console.log('warning: node ' + node.parent_path + ' not exist');
/* eslint-enable */
} else {
this.addNodeToParent(node, p);
}
}
} }
parseNodeToTree(node) { isNodeChild(node, parentNode) {
var newNode = new Node({ return parentNode.children.some(item => {
name: node.name, return item.path === node.path;
type: node.type,
size: Utils.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) { }
for (let child of node.children) {
this.addNodeToParent(this.parseNodeToTree(child), newNode); serializeToJson() {
} return this.root.serializeToJson();
} }
return newNode;
deserializefromJson(json) {
let root = TreeNode.deserializefromJson(json);
let tree = new Tree();
tree.setRoot(root);
return tree;
} }
} }

32
frontend/src/components/tree-dir-view/tree-dir-list.js → frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js
View File

@ -4,17 +4,17 @@ import { siteRoot } from '../../utils/constants';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
const propTypes = { const propTypes = {
node: PropTypes.object.isRequired, path: PropTypes.string.isRequired,
onMainNodeClick: PropTypes.func.isRequired, dirent: PropTypes.object.isRequired,
onDirentClick: PropTypes.func.isRequired,
}; };
class TreeDirList extends React.Component { class WikiDirListItem extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
highlight: false, highlight: false,
isOperationShow: false,
}; };
} }
@ -26,22 +26,22 @@ class TreeDirList extends React.Component {
this.setState({highlight: false}); this.setState({highlight: false});
} }
onMainNodeClick = (e) => { onDirentClick = (e) => {
e.preventDefault(); e.preventDefault();
this.props.onMainNodeClick(this.props.node); this.props.onDirentClick(this.props.dirent);
} }
render() { render() {
let node = this.props.node; let { path, dirent } = this.props;
let href = siteRoot + 'wikis' + node.path; let href = siteRoot + 'wikis' + Utils.joinPath(path, dirent.name);
let size = Utils.isHiDPI() ? 48 : 24; let size = Utils.isHiDPI() ? 48 : 24;
let iconUrl = ''; let iconUrl = '';
if (node.type === 'file') { if (dirent.type === 'file') {
iconUrl = Utils.getFileIconUrl(node.name, size); iconUrl = Utils.getFileIconUrl(dirent.name, size);
} else { } else {
let isReadOnly = false; let isReadOnly = false;
if (node.permission === 'r' || node.permission === 'preview') { if (dirent.permission === 'r' || dirent.permission === 'preview') {
isReadOnly = true; isReadOnly = true;
} }
iconUrl = Utils.getFolderIconUrl({isReadOnly, size}); iconUrl = Utils.getFolderIconUrl({isReadOnly, size});
@ -53,15 +53,15 @@ class TreeDirList extends React.Component {
<img src={iconUrl} width="24" alt="" /> <img src={iconUrl} width="24" alt="" />
</td> </td>
<td className="name"> <td className="name">
<a href={href} onClick={this.onMainNodeClick}>{node.name}</a> <a href={href} onClick={this.onDirentClick}>{dirent.name}</a>
</td> </td>
<td>{node.size}</td> <td>{dirent.size}</td>
<td title={node.last_update_time}>{node.last_update_time}</td> <td title={dirent.last_update_time}>{dirent.last_update_time}</td>
</tr> </tr>
); );
} }
} }
TreeDirList.propTypes = propTypes; WikiDirListItem.propTypes = propTypes;
export default TreeDirList; export default WikiDirListItem;

20
frontend/src/components/tree-dir-view/tree-dir-view.js → frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js
View File

@ -1,19 +1,17 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants'; import { gettext } from '../../utils/constants';
import TreeDirList from './tree-dir-list'; import WikiDirListItem from './wiki-dir-list-item';
const propTypes = { const propTypes = {
node: PropTypes.object.isRequired, path: PropTypes.string.isRequired,
onMainNodeClick: PropTypes.func.isRequired, direntList: PropTypes.array.isRequired,
onDirentClick: PropTypes.func.isRequired,
}; };
class TreeDirView extends React.Component { class WikiDirListView extends React.Component {
render() { render() {
let node = this.props.node;
let children = node.hasChildren() ? node.children : null;
return ( return (
<table> <table>
<thead> <thead>
@ -25,9 +23,9 @@ class TreeDirView extends React.Component {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{children && children.map((node, index) => { {this.props.direntList.length !== 0 && this.props.direntList.map((dirent, index) => {
return ( return (
<TreeDirList key={index} node={node} onMainNodeClick={this.props.onMainNodeClick}/> <WikiDirListItem key={index} path={this.props.path} dirent={dirent} onDirentClick={this.props.onDirentClick}/>
); );
})} })}
</tbody> </tbody>
@ -36,6 +34,6 @@ class TreeDirView extends React.Component {
} }
} }
TreeDirView.propTypes = propTypes; WikiDirListView.propTypes = propTypes;
export default TreeDirView; export default WikiDirListView;

9
frontend/src/pages/repo-wiki-mode/side-panel.js
View File

@ -1,9 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { gettext, permission } from '../../utils/constants';
import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'; import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
import { gettext } from '../../utils/constants'; import TreeView from '../../components/tree-view/tree-view';
import { Utils } from '../../utils/utils';
import TreeView from '../../components/tree-view-2/tree-view';
import Logo from '../../components/logo'; import Logo from '../../components/logo';
import Loading from '../../components/loading'; import Loading from '../../components/loading';
import toaster from '../../components/toast'; import toaster from '../../components/toast';
@ -43,6 +42,7 @@ class SidePanel extends Component {
isAddFolderDialogShow: false, isAddFolderDialogShow: false,
isRenameDialogShow: false, isRenameDialogShow: false,
}; };
this.isNodeMenuShow = true;
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
@ -166,7 +166,7 @@ class SidePanel extends Component {
<h3 className="wiki-pages-heading" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> <h3 className="wiki-pages-heading" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
{gettext('Files')} {gettext('Files')}
<div className="heading-icon"> <div className="heading-icon">
{this.state.isMenuIconShow && ( {(permission && this.state.isMenuIconShow) && (
<Dropdown isOpen={this.state.isHeaderMenuShow} toggle={this.toggleOperationMenu}> <Dropdown isOpen={this.state.isHeaderMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle <DropdownToggle
tag="i" tag="i"
@ -188,6 +188,7 @@ class SidePanel extends Component {
{this.props.isTreeDataLoading ? {this.props.isTreeDataLoading ?
(<Loading/>) : (<Loading/>) :
(<TreeView (<TreeView
isNodeMenuShow={this.isNodeMenuShow}
treeData={this.props.treeData} treeData={this.props.treeData}
currentPath={this.props.currentPath} currentPath={this.props.currentPath}
onNodeClick={this.onNodeClick} onNodeClick={this.onNodeClick}

73
frontend/src/pages/wiki/main-panel.js
View File

@ -1,44 +1,35 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { gettext, repoID, slug, siteRoot } from '../../utils/constants'; import { gettext, repoID, slug, siteRoot, username } from '../../utils/constants';
import CommonToolbar from '../../components/toolbar/common-toolbar'; import CommonToolbar from '../../components/toolbar/common-toolbar';
import WikiMarkdownViewer from '../../components/wiki-markdown-viewer'; import WikiMarkdownViewer from '../../components/wiki-markdown-viewer';
import TreeDirView from '../../components/tree-dir-view/tree-dir-view'; import WikiDirListView from '../../components/wiki-dir-list-view/wiki-dir-list-view';
import Loading from '../../components/loading';
let loginUser = window.app.pageOptions.username;
const propTypes = { const propTypes = {
path: PropTypes.string.isRequired,
pathExist: PropTypes.bool.isRequired,
isViewFile: PropTypes.bool.isRequired,
isDataLoading: PropTypes.bool.isRequired,
content: PropTypes.string, content: PropTypes.string,
permission: PropTypes.string,
lastModified: PropTypes.string, lastModified: PropTypes.string,
latestContributor: PropTypes.string, latestContributor: PropTypes.string,
permission: PropTypes.string, direntList: PropTypes.array.isRequired,
filePath: PropTypes.string.isRequired,
isFileLoading: PropTypes.bool.isRequired,
isViewFileState: PropTypes.bool.isRequired,
changedNode: PropTypes.object,
onMenuClick: PropTypes.func.isRequired, onMenuClick: PropTypes.func.isRequired,
onSearchedClick: PropTypes.func.isRequired, onSearchedClick: PropTypes.func.isRequired,
onMainNavBarClick: PropTypes.func.isRequired, onMainNavBarClick: PropTypes.func.isRequired,
onMainNodeClick: PropTypes.func.isRequired, onDirentClick: PropTypes.func.isRequired,
onLinkClick: PropTypes.func.isRequired, onLinkClick: PropTypes.func.isRequired,
onDeleteNode: PropTypes.func.isRequired,
onRenameNode: PropTypes.func.isRequired,
}; };
class MainPanel extends Component { class MainPanel extends Component {
constructor(props) {
super(props);
this.state = {
needOperationGroup: false
};
}
onMenuClick = () => { onMenuClick = () => {
this.props.onMenuClick(); this.props.onMenuClick();
} }
onEditClick = (e) => { onEditClick = (e) => {
// const w=window.open('about:blank')
e.preventDefault(); e.preventDefault();
window.location.href= siteRoot + 'lib/' + repoID + '/file' + this.props.filePath + '?mode=edit'; window.location.href= siteRoot + 'lib/' + repoID + '/file' + this.props.filePath + '?mode=edit';
} }
@ -47,16 +38,14 @@ class MainPanel extends Component {
this.props.onMainNavBarClick(e.target.dataset.path); this.props.onMainNavBarClick(e.target.dataset.path);
} }
renderNavPath = () => {
render() { let paths = this.props.path.split('/');
let filePathList = this.props.filePath.split('/');
let nodePath = ''; let nodePath = '';
let pathElem = filePathList.map((item, index) => { let pathElem = paths.map((item, index) => {
if (item === '') { if (item === '') {
return; return;
} }
if (index === (filePathList.length - 1)) { if (index === (paths.length - 1)) {
return ( return (
<span key={index}><span className="path-split">/</span>{item}</span> <span key={index}><span className="path-split">/</span>{item}</span>
); );
@ -75,18 +64,21 @@ class MainPanel extends Component {
); );
} }
}); });
return pathElem;
}
render() {
return ( return (
<div className="main-panel wiki-main-panel o-hidden"> <div className="main-panel wiki-main-panel o-hidden">
<div className="main-panel-top panel-top"> <div className="main-panel-top panel-top">
{loginUser && {username && (
<Fragment> <Fragment>
<div className="cur-view-toolbar border-left-show"> <div className="cur-view-toolbar border-left-show">
<span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span> <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
{ {this.props.permission === 'rw' && (
this.props.permission === 'rw' &&
<button className="btn btn-secondary operation-item" title="Edit File" onClick={this.onEditClick}>{gettext('Edit Page')}</button> <button className="btn btn-secondary operation-item" title="Edit File" onClick={this.onEditClick}>{gettext('Edit Page')}</button>
} )}
</div> </div>
<CommonToolbar <CommonToolbar
repoID={repoID} repoID={repoID}
@ -94,35 +86,40 @@ class MainPanel extends Component {
searchPlaceholder={gettext('Search files in this library')} searchPlaceholder={gettext('Search files in this library')}
/> />
</Fragment> </Fragment>
} )}
</div> </div>
<div className="cur-view-container"> <div className="cur-view-container">
<div className="cur-view-path"> <div className="cur-view-path">
<div className="path-containter"> <div className="path-containter">
{loginUser && {username &&
<Fragment> <Fragment>
<a href={siteRoot + 'wikis/'} className="normal">{gettext('Wikis')}</a> <a href={siteRoot + 'wikis/'} className="normal">{gettext('Wikis')}</a>
<span className="path-split">/</span> <span className="path-split">/</span>
</Fragment> </Fragment>
} }
<a href={siteRoot + 'wikis/' + slug} className="normal">{slug}</a> <a href={siteRoot + 'wikis/' + slug} className="normal">{slug}</a>
{pathElem} {this.renderNavPath()}
</div> </div>
</div> </div>
<div className="cur-view-content"> <div className="cur-view-content">
{this.props.isViewFileState && {this.props.isDataLoading && <Loading />}
{(!this.props.isDataLoading && this.props.isViewFile) && (
<WikiMarkdownViewer <WikiMarkdownViewer
markdownContent={this.props.content} markdownContent={this.props.content}
isFileLoading={this.props.isFileLoading} isFileLoading={this.props.isDataLoading}
lastModified = {this.props.lastModified} lastModified = {this.props.lastModified}
latestContributor={this.props.latestContributor} latestContributor={this.props.latestContributor}
onLinkClick={this.props.onLinkClick} onLinkClick={this.props.onLinkClick}
isWiki={true} isWiki={true}
/> />
} )}
{!this.props.isViewFileState && {(!this.props.isDataLoading && !this.props.isViewFile) && (
<TreeDirView node={this.props.changedNode} onMainNodeClick={this.props.onMainNodeClick} /> <WikiDirListView
} path={this.props.path}
direntList={this.props.direntList}
onDirentClick={this.props.onDirentClick}
/>
)}
</div> </div>
</div> </div>
</div> </div>

248
frontend/src/pages/wiki/side-panel.js
View File

@ -1,194 +1,52 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
import { gettext, siteRoot, repoID } from '../../utils/constants'; import { gettext, siteRoot, repoID } from '../../utils/constants';
import Logo from '../../components/logo'; import Logo from '../../components/logo';
import Loading from '../../components/loading';
import TreeView from '../../components/tree-view/tree-view'; import TreeView from '../../components/tree-view/tree-view';
import NodeMenu from '../../components/tree-view/node-menu';
import Delete from '../../components/dialog/delete-dialog';
import Rename from '../../components/dialog/rename-dialog';
import CreateFolder from '../../components/dialog/create-folder-dialog';
import CreateFile from '../../components/dialog/create-file-dialog';
import IndexContentViewer from '../../components/index-viewer'; import IndexContentViewer from '../../components/index-viewer';
const propTypes = { const propTypes = {
changedNode: PropTypes.object,
treeData: PropTypes.object.isRequired,
currentPath: PropTypes.string.isRequired,
closeSideBar: PropTypes.bool.isRequired, closeSideBar: PropTypes.bool.isRequired,
isTreeDataLoading: PropTypes.bool.isRequired,
treeData: PropTypes.object.isRequired,
indexNode: PropTypes.object,
indexContent: PropTypes.string.isRequired,
currentPath: PropTypes.string.isRequired,
onCloseSide: PropTypes.func.isRequired, onCloseSide: PropTypes.func.isRequired,
onDirCollapse: PropTypes.func.isRequired,
onNodeClick: PropTypes.func.isRequired, onNodeClick: PropTypes.func.isRequired,
onRenameNode: PropTypes.func.isRequired, onNodeCollapse: PropTypes.func.isRequired,
onDeleteNode: PropTypes.func.isRequired, onNodeExpanded: PropTypes.func.isRequired,
onAddFileNode: PropTypes.func.isRequired, onLinkClick: PropTypes.func.isRequired,
onAddFolderNode: PropTypes.func.isRequired,
onLinkClick: PropTypes.func,
hasIndex: PropTypes.bool.isRequired,
indexContent: PropTypes.string,
indexPath: PropTypes.string,
indexPermission: PropTypes.string,
}; };
class SidePanel extends Component { class SidePanel extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.isNodeMenuShow = false;
currentNode: null,
isNodeItemFrezee: false,
isShowMenu: false,
menuPosition: {
left: 0,
top: 0
},
isLoadFailed: false,
isMenuIconShow: false,
isHeaderMenuShow: false,
isDeleteDialogShow: false,
isAddFileDialogShow: false,
isAddFolderDialogShow: false,
isRenameDialogShow: false,
};
}
componentDidMount() {
document.addEventListener('click', this.onHideContextMenu);
}
componentWillReceiveProps(nextProps) {
this.setState({currentNode: nextProps.changedNode});
}
componentWillUnmount() {
document.removeEventListener('click', this.onHideContextMenu);
}
onMouseEnter = () => {
this.setState({isMenuIconShow: true});
}
onMouseLeave = () => {
this.setState({isMenuIconShow: false});
}
onDropdownToggleClick = (e) => {
e.preventDefault();
this.toggleOperationMenu();
}
toggleOperationMenu = () => {
this.setState({isHeaderMenuShow: !this.state.isHeaderMenuShow});
}
onNodeClick = (e, node) => {
this.setState({currentNode: node});
this.props.onNodeClick(e, node);
}
onShowContextMenu = (e, node) => {
let left = e.clientX - 8*16;
let top = e.clientY + 10;
let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
this.setState({
isShowMenu: !this.state.isShowMenu,
currentNode: node,
menuPosition: position,
isNodeItemFrezee: true
});
}
onHideContextMenu = () => {
if (!this.state.isShowMenu) {
return;
}
this.setState({
isShowMenu: false,
isNodeItemFrezee: false
});
}
onAddFolderToggle = () => {
this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
this.onHideContextMenu();
}
onAddFileToggle = () => {
this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
this.onHideContextMenu();
}
onRenameToggle = () => {
this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
this.onHideContextMenu();
}
onDeleteToggle = () => {
this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
this.onHideContextMenu();
}
onAddFolderNode = (dirPath) => {
this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
this.props.onAddFolderNode(dirPath);
}
onAddFileNode = (filePath) => {
this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
this.props.onAddFileNode(filePath);
}
onRenameNode = (newName) => {
this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
let node = this.state.currentNode;
this.props.onRenameNode(node, newName);
}
onDeleteNode = () => {
this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
let node = this.state.currentNode;
this.props.onDeleteNode(node);
}
addFolderCancel = () => {
this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
}
addFileCancel = () => {
this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
}
deleteCancel = () => {
this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
}
renameCancel = () => {
this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
} }
onEditClick = (e) => { onEditClick = (e) => {
e.preventDefault(); e.preventDefault();
window.location.href= siteRoot + 'lib/' + repoID + '/file' + this.props.indexPath + '?mode=edit'; let indexNode = this.props.indexNode
} window.location.href= siteRoot + 'lib/' + repoID + '/file' + indexNode.path + '?mode=edit';
onContentRendered = () => {
// todo
} }
renderIndexView = () => { renderIndexView = () => {
let indexNode = this.props.indexNode;
return ( return (
<Fragment> <Fragment>
<h3 className="wiki-pages-heading"> <h3 className="wiki-pages-heading">
{gettext('Contents')} {gettext('Contents')}
{this.props.indexPermission === 'rw' && {indexNode.object.permission === 'rw' &&
<button className="btn btn-secondary operation-item index-edit" title="Edit Index" onClick={this.onEditClick}>{gettext('Edit')}</button> <button className="btn btn-secondary operation-item index-edit" title="Edit Index" onClick={this.onEditClick}>{gettext('Edit')}</button>
} }
</h3> </h3>
<div className="wiki-pages-container"> <div className="wiki-pages-container">
<IndexContentViewer <IndexContentViewer
onLinkClick={this.props.onLinkClick}
onContentRendered={this.onContentRendered}
indexContent={this.props.indexContent} indexContent={this.props.indexContent}
onLinkClick={this.props.onLinkClick}
/> />
</div> </div>
</Fragment> </Fragment>
@ -198,76 +56,16 @@ class SidePanel extends Component {
renderTreeView = () => { renderTreeView = () => {
return ( return (
<Fragment> <Fragment>
<h3 className="wiki-pages-heading" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> <h3 className="wiki-pages-heading">{gettext('Pages')}</h3>
{gettext('Pages')}
<div className="heading-icon">
{this.state.isMenuIconShow && (
<Dropdown isOpen={this.state.isHeaderMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle
tag="i"
className="fas fa-ellipsis-v"
title={gettext('More Operations')}
data-toggle="dropdown"
aria-expanded={this.state.isHeaderMenuShow}
onClick={this.onDropdownToggleClick}
/>
<DropdownMenu right>
<DropdownItem onClick={this.onAddFolderToggle}>{gettext('New Folder')}</DropdownItem>
<DropdownItem onClick={this.onAddFileToggle}>{gettext('New File')}</DropdownItem>
</DropdownMenu>
</Dropdown>
)}
</div>
</h3>
<div className="wiki-pages-container"> <div className="wiki-pages-container">
{this.props.treeData && ( {this.props.treeData && (
<TreeView <TreeView
currentPath={this.props.currentPath}
treeData={this.props.treeData} treeData={this.props.treeData}
currentNode={this.state.currentNode} currentPath={this.props.currentPath}
isNodeItemFrezee={this.state.isNodeItemFrezee} isNodeMenuShow={this.isNodeMenuShow}
onNodeClick={this.onNodeClick} onNodeClick={this.props.onNodeClick}
onShowContextMenu={this.onShowContextMenu} onNodeCollapse={this.props.onNodeCollapse}
onDirCollapse={this.props.onDirCollapse} onNodeExpanded={this.props.onNodeExpanded}
/>
)}
{this.state.isShowMenu && (
<NodeMenu
menuPosition={this.state.menuPosition}
currentNode={this.state.currentNode}
toggleAddFile={this.onAddFileToggle}
toggleAddFolder={this.onAddFolderToggle}
toggleRename={this.onRenameToggle}
toggleDelete={this.onDeleteToggle}
/>
)}
{this.state.isDeleteDialogShow && (
<Delete
currentNode={this.state.currentNode}
handleSubmit={this.onDeleteNode}
toggleCancel={this.deleteCancel}
/>
)}
{this.state.isAddFileDialogShow && (
<CreateFile
fileType={'.md'}
parentPath={this.state.currentNode.path}
onAddFile={this.onAddFileNode}
addFileCancel={this.addFileCancel}
/>
)}
{this.state.isAddFolderDialogShow && (
<CreateFolder
parentPath={this.state.currentNode.path}
onAddFolder={this.onAddFolderNode}
addFolderCancel={this.addFolderCancel}
/>
)}
{this.state.isRenameDialogShow && (
<Rename
currentNode={this.state.currentNode}
onRename={this.onRenameNode}
toggleCancel={this.renameCancel}
/> />
)} )}
</div> </div>
@ -282,7 +80,9 @@ class SidePanel extends Component {
<Logo onCloseSidePanel={this.props.onCloseSide} /> <Logo onCloseSidePanel={this.props.onCloseSide} />
</div> </div>
<div id="side-nav" className="wiki-side-nav" role="navigation"> <div id="side-nav" className="wiki-side-nav" role="navigation">
{this.props.hasIndex ? this.renderIndexView() : this.renderTreeView()}} {this.props.isTreeDataLoading && <Loading /> }
{!this.props.isTreeDataLoading && this.props.indexNode && this.renderIndexView() }
{!this.props.isTreeDataLoading && !this.props.indexNode && this.renderTreeView() }
</div> </div>
</div> </div>
); );

6
frontend/src/repo-wiki-mode.js
View File

@ -7,8 +7,8 @@ import { Utils } from './utils/utils';
import collabServer from './utils/collab-server'; import collabServer from './utils/collab-server';
import SidePanel from './pages/repo-wiki-mode/side-panel'; import SidePanel from './pages/repo-wiki-mode/side-panel';
import MainPanel from './pages/repo-wiki-mode/main-panel'; import MainPanel from './pages/repo-wiki-mode/main-panel';
import TreeNode from './components/tree-view-2/tree-node'; import TreeNode from './components/tree-view/tree-node';
import treeHelper from './components/tree-view-2/tree-helper'; import treeHelper from './components/tree-view/tree-helper';
import toaster from './components/toast'; import toaster from './components/toast';
import LibDecryptDialog from './components/dialog/lib-decrypt-dialog'; import LibDecryptDialog from './components/dialog/lib-decrypt-dialog';
import ModalPortal from './components/modal-portal'; import ModalPortal from './components/modal-portal';
@ -332,7 +332,7 @@ class Wiki extends Component {
onSearchedClick = (item) => { onSearchedClick = (item) => {
let path = item.is_dir ? item.path.slice(0, item.path.length - 1) : item.path; let path = item.is_dir ? item.path.slice(0, item.path.length - 1) : item.path;
if (this.state.currentFilePath === path) { if (this.state.currentPath === path) {
return; return;
} }

709
frontend/src/wiki.js
View File

@ -1,13 +1,15 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import moment from 'moment';
import { slug, repoID, siteRoot, initialPath, isDir } from './utils/constants';
import { Utils } from './utils/utils';
import { seafileAPI } from './utils/seafile-api';
import Dirent from './models/dirent';
import TreeNode from './components/tree-view/tree-node';
import treeHelper from './components/tree-view/tree-helper';
import SidePanel from './pages/wiki/side-panel'; import SidePanel from './pages/wiki/side-panel';
import MainPanel from './pages/wiki/main-panel'; import MainPanel from './pages/wiki/main-panel';
import moment from 'moment';
import { slug, repoID, siteRoot, initialPath } from './utils/constants';
import editorUtilities from './utils/editor-utilties';
import { Utils } from './utils/utils';
import Node from './components/tree-view/node';
import Tree from './components/tree-view/tree';
import './assets/css/fa-solid.css'; import './assets/css/fa-solid.css';
import './assets/css/fa-regular.css'; import './assets/css/fa-regular.css';
import './assets/css/fontawesome.css'; import './assets/css/fontawesome.css';
@ -17,104 +19,183 @@ import './css/wiki.css';
import './css/toolbar.css'; import './css/toolbar.css';
import './css/search.css'; import './css/search.css';
class Wiki extends Component { class Wiki extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
content: '', path: '',
tree_data: new Tree(), pathExist: true,
closeSideBar: false, closeSideBar: false,
filePath: '', isViewFile: true,
latestContributor: '', isDataLoading: true,
lastModified: '', direntList: [],
content: '',
permission: '', permission: '',
isFileLoading: false, lastModified: '',
changedNode: null, latestContributor: '',
isViewFileState: true, isTreeDataLoading: true,
hasIndex: false, treeData: treeHelper.buildTree(),
currentNode: null,
indexNode: null,
indexContent: '', indexContent: '',
indexPath: '',
indexPermission: '',
}; };
window.onpopstate = this.onpopstate; window.onpopstate = this.onpopstate;
this.indexPath = '/index.md';
this.homePath = '/home.md';
} }
componentDidMount() { componentDidMount() {
this.initWikiData(initialPath); this.loadWikiData(initialPath);
} }
getIndexContent = (files) => { loadWikiData = () => {
files.some(file => { this.loadSidePanel(initialPath);
if (file.parent_path === '/' && file.type === 'file' && file.name === 'index.md') {
let filePath = Utils.joinPath(file.parent_path, file.name); if (isDir === 'None') {
editorUtilities.getWikiFileContent(slug, filePath).then((res) => { this.setState({pathExist: false});
this.setState({ } else if (isDir === 'True') {
hasIndex: true, this.showDir(initialPath);
indexContent: res.data.content, } else if (isDir === 'False') {
indexPath: filePath, this.showFile(initialPath);
indexPermission: res.data.permission, }
}
loadSidePanel = (initialPath) => {
if (initialPath === this.homePath || isDir === 'None') {
seafileAPI.listDir(repoID, '/').then(res => {
let tree = this.state.treeData;
this.addResponseListToNode(res.data.dirent_list, tree.root);
let indexNode = tree.getNodeByPath(this.indexPath);
if (indexNode) {
seafileAPI.getFileDownloadLink(repoID, indexNode.path).then(res => {
seafileAPI.getFileContent(res.data).then(res => {
this.setState({
treeData: tree,
indexNode: indexNode,
indexContent: res.data,
isTreeDataLoading: false,
});
});
}); });
return; } else {
}); this.setState({
} treeData: tree,
}); isTreeDataLoading: false,
});
}
}).catch(() => {
this.setState({isLoadFailed: true});
});
} else {
this.loadNodeAndParentsByPath(initialPath);
}
} }
initWikiData(filePath){ showDir = (dirPath) => {
this.setState({isFileLoading: true}); this.loadDirentList(dirPath);
editorUtilities.getFiles().then((files) => {
// construct the tree object
var treeData = new Tree();
treeData.parseListToTree(files);
let node = treeData.getNodeByPath(filePath); // update location url
treeData.expandNode(node); let fileUrl = siteRoot + 'wikis/' + slug + dirPath;
if (node.isDir()) { window.history.pushState({url: fileUrl, path: dirPath}, dirPath, fileUrl);
this.exitViewFileState(treeData, node); }
this.setState({isFileLoading: false});
} else { showFile = (filePath) => {
treeData.expandNode(node); this.setState({
editorUtilities.getWikiFileContent(slug, filePath).then(res => { isDataLoading: true,
isViewFile: true,
path: filePath,
});
seafileAPI.getFileInfo(repoID, filePath).then(res => {
let { mtime, permission, last_modifier_name } = res.data;
seafileAPI.getFileDownloadLink(repoID, filePath).then(res => {
seafileAPI.getFileContent(res.data).then(res => {
this.setState({ this.setState({
tree_data: treeData, isDataLoading: false,
content: res.data.content, content: res.data,
latestContributor: res.data.latest_contributor, permission: permission,
lastModified: moment.unix(res.data.last_modified).fromNow(), lastModified: moment.unix(mtime).fromNow(),
permission: res.data.permission, latestContributor: last_modifier_name,
filePath: filePath,
isFileLoading: false
}); });
}); });
const hash = window.location.hash;
let fileUrl = siteRoot + 'wikis/' + slug + filePath + hash;
window.history.pushState({urlPath: fileUrl, filePath: filePath}, filePath, fileUrl);
}
this.getIndexContent(files);
}, () => {
this.setState({
isLoadFailed: true
}); });
}); });
}
initMainPanelData(filePath){
this.setState({isFileLoading: true});
editorUtilities.getWikiFileContent(slug, filePath)
.then(res => {
this.setState({
content: res.data.content,
isViewFileState: true,
latestContributor: res.data.latest_contributor,
lastModified: moment.unix(res.data.last_modified).fromNow(),
permission: res.data.permission,
filePath: filePath,
isFileLoading: false
});
});
const hash = window.location.hash; const hash = window.location.hash;
let fileUrl = siteRoot + 'wikis/' + slug + filePath + hash; let fileUrl = siteRoot + 'wikis/' + slug + filePath + hash;
window.history.pushState({urlPath: fileUrl, filePath: filePath}, filePath, fileUrl); window.history.pushState({url: fileUrl, path: filePath}, filePath, fileUrl);
}
loadDirentList = (dirPath) => {
this.setState({isDataLoading: true});
seafileAPI.listDir(repoID, dirPath).then(res => {
let direntList = res.data.dirent_list.map(item => {
let dirent = new Dirent(item);
return dirent;
});
direntList = Utils.sortDirents(direntList, 'name', 'asc');
this.setState({
path: dirPath,
isViewFile: false,
direntList: direntList,
isDataLoading: false,
});
}).catch(() => {
this.setState({isLoadFailed: true})
});
}
loadTreeNodeByPath = (path) => {
let tree = this.state.treeData.clone();
let node = tree.getNodeByPath(path);
if (!node.isLoaded) {
seafileAPI.listDir(repoID, node.path).then(res => {
this.addResponseListToNode(res.data.dirent_list, node);
let parentNode = tree.getNodeByPath(node.parentNode.path);
parentNode.isExpanded = true;
this.setState({
treeData: tree,
currentNode: node
});
})
} else {
let parentNode = tree.getNodeByPath(node.parentNode.path);
parentNode.isExpanded = true;
this.setState({treeData: tree, currentNode: node}); //tree
}
}
loadNodeAndParentsByPath = (path) => {
let tree = this.state.treeData.clone();
if (Utils.isMarkdownFile(path)) {
path = Utils.getDirName(path);
}
seafileAPI.listDir(repoID, path, {with_parents: true}).then(res => {
let direntList = res.data.dirent_list;
let results = {};
for (let i = 0; i < direntList.length; i++) {
let object = direntList[i];
let key = object.parent_dir;
if (!results[key]) {
results[key] = [];
}
results[key].push(object);
}
for (let key in results) {
let node = tree.getNodeByPath(key);
if (!node.isLoaded) {
this.addResponseListToNode(results[key], node);
}
}
this.setState({
isTreeDataLoading: false,
treeData: tree
});
}).catch(() => {
this.setState({isLoadFailed: true});
});
} }
onLinkClick = (link) => { onLinkClick = (link) => {
@ -131,365 +212,203 @@ class Wiki extends Component {
} }
onpopstate = (event) => { onpopstate = (event) => {
if (event.state && event.state.filePath) { if (event.state && event.state.path) {
this.initMainPanelData(event.state.filePath); let path = event.state.path;
if (Utils.isMarkdownFile(path)) {
this.showFile(path);
} else {
this.loadDirentList(path);
this.setState({
path: path,
isViewFile: false
});
}
} }
} }
onSearchedClick = (item) => { onSearchedClick = (item) => {
let path = item.is_dir ? item.path.slice(0, item.path.length - 1) : item.path;
if (this.state.currentPath === path) {
return;
}
// load sidePanel
let index = -1;
let paths = Utils.getPaths(path);
for (let i = 0; i < paths.length; i++) {
let node = this.state.treeData.getNodeByPath(node);
if (!node) {
index = i;
break;
}
}
if (index === -1) { // all the data has been loaded already.
let tree = this.state.treeData.clone();
let node = tree.getNodeByPath(item.path);
treeHelper.expandNode(node);
this.setState({treeData: tree});
} else {
this.loadNodeAndParentsByPath(path);
}
// load mainPanel
if (item.is_dir) { if (item.is_dir) {
let path = item.path.slice(0, item.path.length - 1); this.showDir(path);
if (this.state.filePath !== path) {
let tree = this.state.tree_data.clone();
let node = tree.getNodeByPath(path);
tree.expandNode(node);
this.exitViewFileState(tree, node);
}
} else if (Utils.isMarkdownFile(item.path)) {
let path = item.path;
if (this.state.filePath !== path) {
this.initMainPanelData(path);
let tree = this.state.tree_data.clone();
let node = tree.getNodeByPath(path);
tree.expandNode(node);
this.enterViewFileState(tree, node, node.path);
}
} else { } else {
let url = siteRoot + 'lib/' + item.repo_id + '/file' + Utils.encodePath(item.path); if (Utils.isMarkdownFile(path)) {
let newWindow = window.open('about:blank'); this.showFile(path);
newWindow.location.href = url; } else {
} let url = siteRoot + 'lib/' + item.repo_id + '/file' + Utils.encodePath(path);
} let newWindow = window.open('about:blank');
newWindow.location.href = url;
onMainNavBarClick = (nodePath) => {
let tree = this.state.tree_data.clone();
let node = tree.getNodeByPath(nodePath);
tree.expandNode(node);
this.exitViewFileState(tree, node);
// update location url
let fileUrl = siteRoot + 'wikis/' + slug + node.path;
window.history.pushState({urlPath: fileUrl, filePath: node.path},node.path, fileUrl);
}
onMainNodeClick = (node) => {
let tree = this.state.tree_data.clone();
tree.expandNode(node);
if (node.isMarkdown()) {
this.initMainPanelData(node.path);
this.enterViewFileState(tree, node, node.path);
} else if (node.isDir()){
this.exitViewFileState(tree, node);
} else {
const w=window.open('about:blank');
const url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(node.path);
w.location.href = url;
}
}
onNodeClick = (node) => {
if (node instanceof Node && node.isMarkdown()){
let tree = this.state.tree_data.clone();
this.initMainPanelData(node.path);
this.enterViewFileState(tree, node, node.path);
} else if(node instanceof Node && node.isDir()){
let tree = this.state.tree_data.clone();
if (this.state.filePath === node.path) {
if (node.isExpanded) {
tree.collapseNode(node);
} else {
tree.expandNode(node);
}
} }
this.exitViewFileState(tree, node);
} else {
const w=window.open('about:blank');
const url = siteRoot + 'lib/' + repoID + '/file' + node.path;
w.location.href = url;
} }
} }
onDirCollapse = (node) => {
let tree = this.state.tree_data.clone();
let findNode = tree.getNodeByPath(node.path);
findNode.isExpanded = !findNode.isExpanded;
this.setState({tree_data: tree});
}
onMenuClick = () => { onMenuClick = () => {
this.setState({ this.setState({closeSideBar: !this.state.closeSideBar,});
closeSideBar: !this.state.closeSideBar, }
});
onMainNavBarClick = (nodePath) => {
let tree = this.state.treeData.clone();
let node = tree.getNodeByPath(nodePath);
tree.expandNode(node);
this.setState({treeData: tree, currentNode: node});
this.showDir(node.path);
}
onDirentClick = (dirent) => {
let direntPath = Utils.joinPath(this.state.path, dirent.name);
if (dirent.isDir()) { // is dir
this.loadTreeNodeByPath(direntPath);
this.showDir(direntPath);
} else { // is file
if (Utils.isMarkdownFile(direntPath)) {
this.showFile(direntPath);
} else {
const w=window.open('about:blank');
const url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(direntPath);
w.location.href = url;
}
}
} }
onCloseSide = () => { onCloseSide = () => {
this.setState({ this.setState({closeSideBar: !this.state.closeSideBar});
closeSideBar: !this.state.closeSideBar,
});
} }
onAddFolderNode = (dirPath) => { onNodeClick = (node) => {
editorUtilities.createDir(dirPath).then(res => { if (!this.state.pathExist) {
let tree = this.state.tree_data.clone(); this.setState({pathExist: true});
let name = this.getFileNameByPath(dirPath); }
let index = dirPath.lastIndexOf('/');
let parentPath = dirPath.substring(0, index); if (node.object.isDir()) {
if (!parentPath) { if (!node.isLoaded) {
parentPath = '/'; let tree = this.state.treeData.clone();
} node = tree.getNodeByPath(node.path);
let node = this.buildNewNode(name, 'dir'); seafileAPI.listDir(repoID, node.path).then(res => {
let parentNode = tree.getNodeByPath(parentPath); this.addResponseListToNode(res.data.dirent_list, node);
tree.addNodeToParent(node, parentNode); tree.collapseNode(node);
if (this.state.isViewFileState) { this.setState({treeData: tree});
tree.expandNode(node);
this.setState({
tree_data: tree,
changedNode: node
}); });
} else {
this.exitViewFileState(tree, parentNode);
} }
}); if (node.path === this.state.path) {
} if (node.isExpanded) {
let tree = treeHelper.collapseNode(this.state.treeData, node);
onAddFileNode = (filePath) => { this.setState({treeData: tree});
editorUtilities.createFile(filePath).then(res => {
let tree = this.state.tree_data.clone();
let name = this.getFileNameByPath(filePath);
let index = filePath.lastIndexOf('/');
let parentPath = filePath.substring(0, index);
if (!parentPath) {
parentPath = '/';
}
let node = this.buildNewNode(name, 'file');
let parentNode = tree.getNodeByPath(parentPath);
tree.addNodeToParent(node, parentNode);
if (this.state.isViewFileState) {
tree.expandNode(node);
this.setState({
tree_data: tree,
changedNode: node
});
} else {
this.exitViewFileState(tree, parentNode);
}
});
}
onRenameNode = (node, newName) => {
let tree = this.state.tree_data.clone();
let filePath = node.path;
if (node.isMarkdown()) {
editorUtilities.renameFile(filePath, newName).then(res => {
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(cloneNode)) {
tree.expandNode(node);
this.setState({
tree_data: tree,
changedNode: node
});
this.initMainPanelData(node.path);
} else {
this.setState({tree_data: tree});
}
} else { } else {
let parentNode = tree.findNodeParentFromTree(node); let tree = this.state.treeData.clone();
this.setState({ node = tree.getNodeByPath(node.path);
tree_data: tree, tree.expandNode(node);
changedNode: parentNode this.setState({treeData: tree});
});
} }
});
} else if (node.isDir()) {
editorUtilities.renameDir(filePath, newName).then(res => {
let currentFilePath = this.state.filePath;
let currentFileNode = tree.getNodeByPath(currentFilePath);
let nodePath = node.path;
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 (currentFilePath.indexOf(nodePath) > -1) {
tree.expandNode(currentFileNode);
this.setState({
tree_data: tree,
changedNode: currentFileNode
});
this.initMainPanelData(currentFileNode.path);
} else {
this.setState({tree_data: tree});
}
} else {
if (nodePath === currentFilePath) { // old node
tree.expandNode(node);
this.exitViewFileState(tree, node);
} else if (node.path.indexOf(currentFilePath) > -1) { // new node
tree.expandNode(currentFileNode);
this.exitViewFileState(tree, currentFileNode);
} else {
this.setState({tree_data: tree});
}
}
});
}
}
onDeleteNode = (node) => {
let filePath = node.path;
if (node.isDir()) {
editorUtilities.deleteDir(filePath);
} else {
editorUtilities.deleteFile(filePath);
}
let isCurrentFile = false;
if (node.isDir()) {
isCurrentFile = this.isModifyContainsCurrentFile(node);
} else {
isCurrentFile = this.isModifyCurrentFile(node);
}
let tree = this.state.tree_data.clone();
if (this.state.isViewFileState) {
if (isCurrentFile) {
let homeNode = this.getHomeNode(tree);
tree.expandNode(homeNode);
this.setState({
tree_data: tree,
changedNode: homeNode
});
this.initMainPanelData(homeNode.path);
} else {
this.setState({tree_data: tree});
}
} else {
let parentNode = tree.getNodeByPath(this.state.filePath);
let isChild = tree.isNodeChild(parentNode, node);
if (isChild) {
this.exitViewFileState(tree, parentNode);
} else {
this.setState({tree_data: tree});
} }
} }
tree.deleteNode(node);
}
if (node.path === this.state.path ) {
enterViewFileState(newTree, newNode, newPath) { return;
this.setState({
tree_data: newTree,
changedNode: newNode,
filePath: newPath,
isViewFileState: true
});
}
exitViewFileState(newTree, newNode) {
this.setState({
tree_data: newTree,
changedNode: newNode,
filePath: newNode.path,
isViewFileState: false
});
let fileUrl = siteRoot + 'wikis/' + slug + newNode.path;
window.history.pushState({urlPath: fileUrl, filePath: newNode.path}, newNode.path, fileUrl);
}
getFileNameByPath(path) {
let index = path.lastIndexOf('/');
if (index === -1) {
return '';
} }
return path.slice(index+1);
}
getHomeNode(treeData) { if (node.object.isDir()) { // isDir
return treeData.getNodeByPath('/home.md'); this.showDir(node.path);
} } else {
if (Utils.isMarkdownFile(node.path)) {
buildNewNode(name, type) { if (node.path !== this.state.path) {
let date = new Date().getTime()/1000; this.showFile(node.path);
let node = new Node({ }
name : name, } else {
type: type, const w = window.open('about:blank');
size: '0', const url = siteRoot + 'lib/' + repoID + '/file' + node.path;
last_update_time: moment.unix(date).fromNow(), w.location.href = url;
isExpanded: false, }
children: []
});
return node;
}
isModifyCurrentFile(node) {
let nodeName = node.name;
let fileName = this.getFileNameByPath(this.state.filePath);
return nodeName === fileName;
}
isModifyContainsCurrentFile(node) {
let filePath = this.state.filePath;
let nodePath = node.path;
if (filePath.indexOf(nodePath) > -1) {
return true;
} }
return false; }
onNodeCollapse = (node) => {
let tree = treeHelper.collapseNode(this.state.treeData, node);
this.setState({treeData: tree});
}
onNodeExpanded = (node) => {
let tree = this.state.treeData.clone();
node = tree.getNodeByPath(node.path);
if (!node.isLoaded) {
seafileAPI.listDir(repoID, node.path).then(res => {
this.addResponseListToNode(res.data.dirent_list, node);
this.setState({treeData: tree});
});
} else {
tree.expandNode(node);
this.setState({treeData: tree});
}
}
addResponseListToNode = (list, node) => {
node.isLoaded = true;
node.isExpanded = true;
let direntList = list.map(item => {
return new Dirent(item);
});
direntList = Utils.sortDirents(direntList, 'name', 'asc');
let nodeList = direntList.map(object => {
return new TreeNode({object});
});
node.addChildren(nodeList);
} }
render() { render() {
return ( return (
<div id="main" className="wiki-main"> <div id="main" className="wiki-main">
<SidePanel <SidePanel
onNodeClick={this.onNodeClick} isTreeDataLoading={this.state.isTreeDataLoading}
closeSideBar={this.state.closeSideBar} closeSideBar={this.state.closeSideBar}
onCloseSide ={this.onCloseSide} currentPath={this.state.path}
treeData={this.state.tree_data} treeData={this.state.treeData}
currentPath={this.state.filePath} indexNode={this.state.indexNode}
changedNode={this.state.changedNode}
onAddFolderNode={this.onAddFolderNode}
onAddFileNode={this.onAddFileNode}
onRenameNode={this.onRenameNode}
onDeleteNode={this.onDeleteNode}
onDirCollapse={this.onDirCollapse}
onLinkClick={this.onLinkClick}
hasIndex={this.state.hasIndex}
indexContent={this.state.indexContent} indexContent={this.state.indexContent}
indexPath={this.state.indexPath} onCloseSide={this.onCloseSide}
indexPermission={this.state.indexPermission} onNodeClick={this.onNodeClick}
onNodeCollapse={this.onNodeCollapse}
onNodeExpanded={this.onNodeExpanded}
onLinkClick={this.onLinkClick}
/> />
<MainPanel <MainPanel
path={this.state.path}
pathExist={this.state.pathExist}
isViewFile={this.state.isViewFile}
isDataLoading={this.state.isDataLoading}
content={this.state.content} content={this.state.content}
filePath={this.state.filePath}
latestContributor={this.state.latestContributor}
lastModified={this.state.lastModified}
permission={this.state.permission} permission={this.state.permission}
isViewFileState={this.state.isViewFileState} lastModified={this.state.lastModified}
changedNode={this.state.changedNode} latestContributor={this.state.latestContributor}
isFileLoading={this.state.isFileLoading} direntList={this.state.direntList}
onLinkClick={this.onLinkClick} onLinkClick={this.onLinkClick}
onMenuClick={this.onMenuClick} onMenuClick={this.onMenuClick}
onSearchedClick={this.onSearchedClick} onSearchedClick={this.onSearchedClick}
onMainNavBarClick={this.onMainNavBarClick} onMainNavBarClick={this.onMainNavBarClick}
onMainNodeClick={this.onMainNodeClick} onDirentClick={this.onDirentClick}
onDeleteNode={this.onDeleteNode}
onRenameNode={this.onRenameNode}
/> />
</div> </div>
); );

2
seahub/templates/wiki/wiki.html
View File

@ -11,7 +11,9 @@
slug: "{{ wiki.slug }}", slug: "{{ wiki.slug }}",
repoId: "{{ wiki.repo_id }}", repoId: "{{ wiki.repo_id }}",
initial_path: "{{ file_path }}", initial_path: "{{ file_path }}",
permission: "{{ user_can_write }}",
isPublicWiki: "{{ is_public_wiki }}", isPublicWiki: "{{ is_public_wiki }}",
isDir: "{{ is_dir }}",
} }
}; };
</script> </script>

31
seahub/wiki/views.py
View File

@ -4,6 +4,7 @@ import urllib2
import posixpath import posixpath
import seaserv import seaserv
from seaserv import seafile_api
from django.core.urlresolvers import reverse from django.core.urlresolvers import reverse
from django.http import Http404, HttpResponseRedirect from django.http import Http404, HttpResponseRedirect
from django.shortcuts import render, get_object_or_404, redirect from django.shortcuts import render, get_object_or_404, redirect
@ -42,15 +43,25 @@ def wiki_list(request):
def slug(request, slug, file_path="home.md"): def slug(request, slug, file_path="home.md"):
"""Show wiki page. """Show wiki page.
""" """
# compatible with old wiki url
if len(file_path.split('.')) == 1:
new_path = file_path + '.md'
return HttpResponseRedirect(reverse('wiki:slug', args=[slug, new_path]))
# get wiki object or 404 # get wiki object or 404
wiki = get_object_or_404(Wiki, slug=slug) wiki = get_object_or_404(Wiki, slug=slug)
file_path = "/" + file_path file_path = "/" + file_path
is_dir = None
file_id = seafile_api.get_file_id_by_path(wiki.repo_id, file_path)
if file_id:
is_dir = False
dir_id = seafile_api.get_dir_id_by_path(wiki.repo_id, file_path)
if dir_id:
is_dir = True
# compatible with old wiki url
if is_dir is None:
if len(file_path.split('.')) == 1:
new_path = file_path[1:] + '.md'
return HttpResponseRedirect(reverse('wiki:slug', args=[slug, new_path]))
# perm check # perm check
req_user = request.user.username req_user = request.user.username
@ -65,6 +76,14 @@ def slug(request, slug, file_path="home.md"):
file_url = reverse('view_lib_file', args=[wiki.repo_id, file_path]) file_url = reverse('view_lib_file', args=[wiki.repo_id, file_path])
return HttpResponseRedirect(file_url + "?raw=1") return HttpResponseRedirect(file_url + "?raw=1")
if not req_user:
user_can_write = False
elif req_user == wiki.username or check_folder_permission(
request, wiki.repo_id, '/') == 'rw':
user_can_write = True
else:
user_can_write = False
is_public_wiki = False is_public_wiki = False
if wiki.permission == 'public': if wiki.permission == 'public':
is_public_wiki = True is_public_wiki = True
@ -72,11 +91,13 @@ def slug(request, slug, file_path="home.md"):
return render(request, "wiki/wiki.html", { return render(request, "wiki/wiki.html", {
"wiki": wiki, "wiki": wiki,
"page_name": file_path, "page_name": file_path,
"user_can_write": user_can_write,
"file_path": file_path, "file_path": file_path,
"repo_id": wiki.repo_id, "repo_id": wiki.repo_id,
"search_repo_id": wiki.repo_id, "search_repo_id": wiki.repo_id,
"search_wiki": True, "search_wiki": True,
"is_public_wiki": is_public_wiki, "is_public_wiki": is_public_wiki,
"is_dir": is_dir,
}) })