mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-02 23:48:47 +00:00
update repo wiki mode
This commit is contained in:
@@ -1,12 +1,10 @@
|
||||
import React, { Component } from 'react';
|
||||
import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../components/constance';
|
||||
import { gettext, repoID, serviceUrl, slug, siteRoot, isPro } from '../../components/constance';
|
||||
import Search from '../../components/search';
|
||||
import Account from '../../components/account';
|
||||
import MarkdownViewer from '../../components/markdown-viewer';
|
||||
import TreeDirView from '../../components/tree-dir-view/tree-dir-view';
|
||||
|
||||
// const repoName = window.repo.config.repo_name
|
||||
|
||||
class MainPanel extends Component {
|
||||
|
||||
onMenuClick = () => {
|
||||
@@ -60,15 +58,17 @@ class MainPanel extends Component {
|
||||
<a className="btn btn-secondary btn-topbar sf2-icon-grid-view" id='grid' title={gettext("Grid")} onClick={this.switchViewMode}></a>
|
||||
</div>
|
||||
<div className="common-toolbar">
|
||||
<Search onSearchedClick={this.props.onSearchedClick}
|
||||
placeholder={gettext("Search files in this library")}/>
|
||||
{isPro && <Search onSearchedClick={this.props.onSearchedClick}
|
||||
placeholder={gettext("Search files in this wiki")}
|
||||
/>
|
||||
}
|
||||
<Account />
|
||||
</div>
|
||||
</div>
|
||||
<div className="cur-view-main">
|
||||
<div className="cur-view-path">
|
||||
<div className="path-containter">
|
||||
<a href={siteRoot + '#my-libs/'} className="normal">{gettext("Libraries")}</a>
|
||||
<a href={siteRoot + '#common/'} className="normal">{gettext("Libraries")}</a>
|
||||
<span className="path-split">/</span>
|
||||
<a href={siteRoot + 'wiki/lib/' + repoID + '/'} className="normal">{slug}</a>
|
||||
{pathElem}
|
||||
|
@@ -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
|
||||
})
|
||||
}
|
||||
|
||||
toggleAddFileFolder = (flag) => {
|
||||
let isFile = flag === true ? true : false;
|
||||
this.setState({
|
||||
showAddFileFolder: !this.state.showAddFileFolder,
|
||||
isFile: isFile
|
||||
});
|
||||
this.onHideContextMenu();
|
||||
}
|
||||
|
||||
toggleRename = () => {
|
||||
this.setState({showRename: !this.state.showRename});
|
||||
this.onHideContextMenu();
|
||||
}
|
||||
|
||||
toggleDelete = () => {
|
||||
this.setState({showDelete: !this.state.showDelete});
|
||||
this.onHideContextMenu();
|
||||
}
|
||||
|
||||
onAddFolderNode = (dirPath) => {
|
||||
this.setState({showAddFileFolder: !this.state.showAddFileFolder});
|
||||
this.props.onAddFolderNode(dirPath);
|
||||
}
|
||||
|
||||
onAddFileNode = (filePath) => {
|
||||
this.setState({showAddFileFolder: !this.state.showAddFileFolder});
|
||||
this.props.onAddFileNode(filePath);
|
||||
}
|
||||
|
||||
onRenameNode = (newName) => {
|
||||
this.setState({showRename: !this.state.showRename})
|
||||
let node = this.state.currentNode;
|
||||
this.props.onRenameNode(node, newName)
|
||||
}
|
||||
|
||||
onDeleteNode = () => {
|
||||
this.setState({showDelete: !this.state.showDelete})
|
||||
let node = this.state.currentNode;
|
||||
this.props.onDeleteNode(node);
|
||||
}
|
||||
@@ -109,6 +142,22 @@ class SidePanel extends Component {
|
||||
document.removeEventListener('click', this.onHideContextMenu);
|
||||
}
|
||||
|
||||
addFolderCancel = () => {
|
||||
this.setState({showAddFileFolder: !this.state.showAddFileFolder});
|
||||
}
|
||||
|
||||
addFileCancel = () => {
|
||||
this.setState({showAddFileFolder: !this.state.showAddFileFolder});
|
||||
}
|
||||
|
||||
deleteCancel = () => {
|
||||
this.setState({showDelete: !this.state.showDelete})
|
||||
}
|
||||
|
||||
renameCancel = () => {
|
||||
this.setState({showRename: !this.state.showRename})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={`wiki-side-panel ${this.props.closeSideBar ? "": "left-zero"}`}>
|
||||
@@ -135,7 +184,6 @@ class SidePanel extends Component {
|
||||
<div className="wiki-pages-container">
|
||||
{this.props.treeData &&
|
||||
<TreeView
|
||||
permission={this.props.permission}
|
||||
currentFilePath={this.props.currentFilePath}
|
||||
treeData={this.props.treeData}
|
||||
currentNode={this.state.currentNode}
|
||||
@@ -145,16 +193,39 @@ class SidePanel extends Component {
|
||||
onDirCollapse={this.props.onDirCollapse}
|
||||
/>
|
||||
}
|
||||
{this.state.isShowMenu &&
|
||||
<NodeMenu
|
||||
isShowMenu={this.state.isShowMenu}
|
||||
menuPosition={this.state.menuPosition}
|
||||
currentNode={this.state.currentNode}
|
||||
onHideContextMenu={this.onHideContextMenu}
|
||||
onDeleteNode={this.onDeleteNode}
|
||||
onAddFileNode={this.onAddFileNode}
|
||||
onAddFolderNode={this.onAddFolderNode}
|
||||
onRenameNode={this.onRenameNode}
|
||||
toggleAddFileFolder={this.toggleAddFileFolder}
|
||||
toggleRename={this.toggleRename}
|
||||
toggleDelete={this.toggleDelete}
|
||||
/>
|
||||
}
|
||||
{this.state.showDelete &&
|
||||
<Delete
|
||||
currentNode={this.state.currentNode}
|
||||
handleSubmit={this.onDeleteNode}
|
||||
toggleCancel={this.deleteCancel}
|
||||
/>
|
||||
}
|
||||
{this.state.showAddFileFolder &&
|
||||
<CreateFlieFolder
|
||||
isFile={this.state.isFile}
|
||||
currentNode={this.state.currentNode}
|
||||
onAddFolder={this.onAddFolderNode}
|
||||
addFolderCancel={this.addFolderCancel}
|
||||
onAddFile={this.onAddFileNode}
|
||||
addFileCancel={this.addFileCancel}
|
||||
/>
|
||||
}
|
||||
{this.state.showRename &&
|
||||
<Rename
|
||||
currentNode={this.state.currentNode}
|
||||
onRename={this.onRenameNode}
|
||||
toggleCancel={this.renameCancel}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@@ -5,8 +5,8 @@ import SidePanel from './pages/repo-wiki-mode/side-panel';
|
||||
import MainPanel from './pages/repo-wiki-mode/main-panel';
|
||||
import moment from 'moment';
|
||||
import { slug, repoID, serviceUrl, initialFilePath } from './components/constance';
|
||||
import editorUtilities from './utils/editor-utilties';
|
||||
import { seafileAPI } from './utils/editor-utilties';
|
||||
import editorUtilities from './utils/editor-utilties';
|
||||
import { seafileAPI } from './utils/editor-utilties';
|
||||
import Node from './components/tree-view/node'
|
||||
import Tree from './components/tree-view/tree'
|
||||
import 'seafile-ui';
|
||||
@@ -47,6 +47,7 @@ class Wiki extends Component {
|
||||
treeData.parseListToTree(files);
|
||||
|
||||
let node = treeData.getNodeByPath(filePath);
|
||||
treeData.expandNode(node);
|
||||
if (node.isDir()) {
|
||||
this.exitViewFileState(treeData, node);
|
||||
this.setState({isFileLoading: false});
|
||||
@@ -60,6 +61,7 @@ class Wiki extends Component {
|
||||
lastModified: moment.unix(mtime).fromNow(),
|
||||
permission: permission,
|
||||
filePath: filePath,
|
||||
isFileLoading: false
|
||||
})
|
||||
|
||||
seafileAPI.getFileDownloadLink(repoID, filePath).then((res) => {
|
||||
@@ -104,11 +106,10 @@ class Wiki extends Component {
|
||||
content: res.data,
|
||||
isFileLoading: false
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
let fileUrl = serviceUrl + '/wiki/lib/' + repoID + filePath;
|
||||
window.history.pushState({urlPath: fileUrl, filePath: filePath}, filePath, fileUrl);
|
||||
}
|
||||
@@ -134,6 +135,9 @@ class Wiki extends Component {
|
||||
if (this.isInternalMarkdownLink(url)) {
|
||||
let path = this.getPathFromInternalMarkdownLink(url);
|
||||
this.initMainPanelData(path);
|
||||
} else if (this.isInternalDirLink(url)) {
|
||||
let path = this.getPathFromInternalDirLink(url);
|
||||
this.initWikiData(path);
|
||||
} else {
|
||||
window.location.href = url;
|
||||
}
|
||||
@@ -151,17 +155,15 @@ 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);
|
||||
tree.expandNode(node);
|
||||
this.enterViewFileState(tree, node, node.path);
|
||||
}
|
||||
}
|
||||
|
||||
onMainNavBarClick = (nodePath) => {
|
||||
let tree = this.state.tree_data.clone();
|
||||
let node = tree.getNodeByPath(nodePath);
|
||||
tree.setNodeToActivated(node);
|
||||
tree.expandNode(node);
|
||||
|
||||
this.exitViewFileState(tree, node);
|
||||
|
||||
@@ -172,7 +174,7 @@ class Wiki extends Component {
|
||||
|
||||
onMainNodeClick = (node) => {
|
||||
let tree = this.state.tree_data.clone();
|
||||
tree.setNodeToActivated(node);
|
||||
tree.expandNode(node);
|
||||
if (node.isMarkdown()) {
|
||||
this.initMainPanelData(node.path);
|
||||
this.enterViewFileState(tree, node, node.path);
|
||||
@@ -192,6 +194,13 @@ class Wiki extends Component {
|
||||
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');
|
||||
@@ -232,7 +241,7 @@ class Wiki extends Component {
|
||||
let parentNode = tree.getNodeByPath(parentPath);
|
||||
tree.addNodeToParent(node, parentNode);
|
||||
if (this.state.isViewFileState) {
|
||||
tree.setNodeToActivated(node);
|
||||
tree.expandNode(node);
|
||||
this.setState({
|
||||
tree_data: tree,
|
||||
changedNode: node
|
||||
@@ -256,7 +265,7 @@ class Wiki extends Component {
|
||||
let parentNode = tree.getNodeByPath(parentPath);
|
||||
tree.addNodeToParent(node, parentNode);
|
||||
if (this.state.isViewFileState) {
|
||||
tree.setNodeToActivated(node);
|
||||
tree.expandNode(node);
|
||||
this.setState({
|
||||
tree_data: tree,
|
||||
changedNode: node
|
||||
@@ -272,15 +281,17 @@ 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)) {
|
||||
tree.setNodeToActivated(node);
|
||||
if (this.isModifyCurrentFile(cloneNode)) {
|
||||
tree.expandNode(node);
|
||||
this.setState({
|
||||
tree_data: tree,
|
||||
changedNode: node
|
||||
@@ -290,23 +301,29 @@ 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 currentFileNode = tree.getNodeByPath(currentFilePath);
|
||||
|
||||
let isPathEqual = (node.path === currentFilePath);
|
||||
let date = new Date().getTime()/1000;
|
||||
let currentFilePath = this.state.filePath;
|
||||
let currentFileNode = tree.getNodeByPath(currentFilePath);
|
||||
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)) {
|
||||
tree.setNodeToActivated(currentFileNode);
|
||||
if (currentFilePath.indexOf(nodePath) > -1) {
|
||||
tree.expandNode(currentFileNode);
|
||||
this.setState({
|
||||
tree_data: tree,
|
||||
changedNode: currentFileNode
|
||||
@@ -316,8 +333,11 @@ class Wiki extends Component {
|
||||
this.setState({tree_data: tree});
|
||||
}
|
||||
} else {
|
||||
if (isPathEqual || node.path.indexOf(currentFilePath) > -1) {
|
||||
tree.setNodeToActivated(currentFileNode);
|
||||
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});
|
||||
@@ -349,7 +369,7 @@ class Wiki extends Component {
|
||||
if (this.state.isViewFileState) {
|
||||
if (isCurrentFile) {
|
||||
let homeNode = this.getHomeNode(tree);
|
||||
tree.setNodeToActivated(homeNode);
|
||||
tree.expandNode(homeNode);
|
||||
this.setState({
|
||||
tree_data: tree,
|
||||
changedNode: homeNode
|
||||
@@ -451,6 +471,11 @@ class Wiki extends Component {
|
||||
return re.test(url);
|
||||
}
|
||||
|
||||
isInternalDirLink(url) {
|
||||
var re = new RegExp(serviceUrl + '/#[a-z\-]*?/lib/' + repoID + '/.*');
|
||||
return re.test(url);
|
||||
}
|
||||
|
||||
getPathFromInternalMarkdownLink(url) {
|
||||
var re = new RegExp(serviceUrl + '/lib/' + repoID + '/file' + "(.*\.md)");
|
||||
var array = re.exec(url);
|
||||
@@ -458,6 +483,22 @@ class Wiki extends Component {
|
||||
return path;
|
||||
}
|
||||
|
||||
getPathFromInternalDirLink(url) {
|
||||
var re = new RegExp(serviceUrl + '/#[a-z\-]*?/lib/' + repoID + "(/.*)");
|
||||
var array = re.exec(url);
|
||||
var path = decodeURIComponent(array[1]);
|
||||
|
||||
var dirPath = path.substring(1);
|
||||
var re = new RegExp("(^/.*)");
|
||||
if (re.test(dirPath)) {
|
||||
path = dirPath;
|
||||
} else {
|
||||
path = '/' + dirPath
|
||||
}
|
||||
|
||||
return path;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="main" className="wiki-main">
|
||||
@@ -466,7 +507,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}
|
||||
|
Reference in New Issue
Block a user