mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-03 07:55:36 +00:00
Wiki improve (#2894)
This commit is contained in:
杨顺强
Daniel Pan
@@ -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;
|
||||
@@ -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;
|
||||
144
frontend/src/components/tree-view/tree-helper.js
Normal file
144
frontend/src/components/tree-view/tree-helper.js
Normal file
@@ -0,0 +1,144 @@
|
||||
import { Utils } from '../../utils/utils';
|
||||
import Tree from './tree';
|
||||
import TreeNode from './tree-node';
|
||||
import Dirent from '../../models/dirent';
|
||||
|
||||
class TreeHelper {
|
||||
|
||||
expandNode(tree, node) { // This tree has been cloned
|
||||
tree.expandNode(node);
|
||||
}
|
||||
|
||||
collapseNode(tree, node) {
|
||||
let treeCopy = tree.clone();
|
||||
node = treeCopy.getNodeByPath(node.path);
|
||||
treeCopy.collapseNode(node);
|
||||
return treeCopy;
|
||||
}
|
||||
|
||||
findNodeByPath(tree, nodePath) {
|
||||
let treeCopy = tree.clone();
|
||||
let node = treeCopy.getNodeByPath(nodePath);
|
||||
return node;
|
||||
}
|
||||
|
||||
getNodeChildrenObject(tree, node, sortType = 'name', order = 'asc') {
|
||||
let objects = tree.getNodeChildrenObject(node);
|
||||
objects = Utils.sortDirents(objects, sortType, order);
|
||||
return objects;
|
||||
}
|
||||
|
||||
addNodeToParent(tree, node, parentNode) {
|
||||
tree.addNodeToParentNode(node, parentNode);
|
||||
return tree;
|
||||
}
|
||||
|
||||
addNodeListToParent(tree, nodeList, parentNode) {
|
||||
tree.addNodeListToParent(nodeList, parentNode);
|
||||
return tree;
|
||||
}
|
||||
|
||||
addNodeToParentByPath(tree, node, parentPath) {
|
||||
let treeCopy = tree.clone();
|
||||
let parentNode = treeCopy.getNodeByPath(parentPath);
|
||||
treeCopy.addNodeToParent(node, parentNode);
|
||||
return treeCopy;
|
||||
}
|
||||
|
||||
deleteNodeByPath(tree, nodePath) {
|
||||
let treeCopy = tree.clone();
|
||||
let node = treeCopy.getNodeByPath(nodePath);
|
||||
treeCopy.deleteNode(node);
|
||||
return treeCopy;
|
||||
}
|
||||
|
||||
deleteNodeListByPaths(tree, nodePaths) {
|
||||
let treeCopy = tree.clone();
|
||||
nodePaths.forEach(nodePath => {
|
||||
let node = treeCopy.getNodeByPath(nodePath);
|
||||
treeCopy.deleteNode(node);
|
||||
});
|
||||
return treeCopy;
|
||||
}
|
||||
|
||||
renameNodeByPath(tree, nodePath, newName) {
|
||||
let treeCopy = tree.clone();
|
||||
let node = treeCopy.getNodeByPath(nodePath);
|
||||
treeCopy.renameNode(node, newName);
|
||||
return treeCopy;
|
||||
}
|
||||
|
||||
updateNodeByPath(tree, nodePath, keys, newValues) {
|
||||
let treeCopy = tree.clone();
|
||||
let node = treeCopy.getNodeByPath(nodePath);
|
||||
treeCopy.updateNode(node, keys, newValues);
|
||||
return treeCopy;
|
||||
}
|
||||
|
||||
moveNodeByPath(tree, nodePath, destPath, nodeName) {
|
||||
let treeCopy = tree.clone();
|
||||
let node = treeCopy.getNodeByPath(nodePath);
|
||||
let destNode = treeCopy.getNodeByPath(destPath);
|
||||
if (destNode && node) { // node has loaded
|
||||
node.object.name = nodeName; // need not update path
|
||||
treeCopy.moveNode(node, destNode);
|
||||
}
|
||||
if (!destNode && node){
|
||||
treeCopy.deleteNode(node);
|
||||
}
|
||||
return treeCopy;
|
||||
}
|
||||
|
||||
moveNodeListByPaths(tree, nodePaths, destPath) {
|
||||
let treeCopy = tree.clone();
|
||||
let destNode = treeCopy.getNodeByPath(destPath);
|
||||
if (destNode) {
|
||||
nodePaths.forEach(nodePath => {
|
||||
let node = treeCopy.getNodeByPath(nodePath);
|
||||
treeCopy.moveNode(node, destNode);
|
||||
});
|
||||
} else {
|
||||
nodePaths.forEach(nodePath=> {
|
||||
let node = treeCopy.getNodeByPath(nodePath);
|
||||
treeCopy.delete(node);
|
||||
});
|
||||
}
|
||||
return treeCopy;
|
||||
}
|
||||
|
||||
copyNodeByPath(tree, nodePath, destPath, nodeName) {
|
||||
let treeCopy = tree.clone();
|
||||
let destNode = treeCopy.getNodeByPath(destPath);
|
||||
let treeNode = treeCopy.getNodeByPath(nodePath);
|
||||
if (destNode) {
|
||||
let node = treeNode.clone(); // need a dup
|
||||
node.object.name = nodeName; // need not update path
|
||||
treeCopy.copyNode(node, destNode);
|
||||
}
|
||||
return treeCopy;
|
||||
}
|
||||
|
||||
copyNodeListByPaths(tree, nodePaths, destPath) {
|
||||
let treeCopy = tree.clone();
|
||||
let destNode = treeCopy.getNodeByPath(destPath);
|
||||
if (destNode) {
|
||||
nodePaths.forEach(nodePath => {
|
||||
let node = treeCopy.getNodeByPath(nodePath);
|
||||
treeCopy.copyNode(node, destNode);
|
||||
});
|
||||
}
|
||||
return treeCopy;
|
||||
}
|
||||
|
||||
buildTree() {
|
||||
let tree = new Tree();
|
||||
let object = new Dirent({name: '/'});
|
||||
let root = new TreeNode({object, isLoaded: false, isExpanded: true});
|
||||
tree.setRoot(root);
|
||||
return tree;
|
||||
}
|
||||
}
|
||||
|
||||
let treeHelper = new TreeHelper();
|
||||
|
||||
export default treeHelper;
|
||||
108
frontend/src/components/tree-view/tree-node-menu.js
Normal file
108
frontend/src/components/tree-view/tree-node-menu.js
Normal file
@@ -0,0 +1,108 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
|
||||
import { gettext } from '../../utils/constants';
|
||||
|
||||
const propTypes = {
|
||||
node: PropTypes.object.isRequired,
|
||||
onMenuItemClick: PropTypes.func.isRequired,
|
||||
onFreezedItem: PropTypes.func.isRequired,
|
||||
onUnFreezedItem: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class TreeNodeMenu extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isItemMenuShow: false,
|
||||
menuList: []
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let menuList = this.caculateMenuList();
|
||||
this.setState({menuList: menuList});
|
||||
}
|
||||
|
||||
caculateMenuList() {
|
||||
let { node } = this.props;
|
||||
let menuList = [];
|
||||
if (node.object.type === 'dir') {
|
||||
menuList = ['New Folder', 'New File', 'Rename', 'Delete'];
|
||||
} else {
|
||||
menuList = ['Rename', 'Delete'];
|
||||
}
|
||||
return menuList;
|
||||
}
|
||||
|
||||
translateMenuItem = (menuItem) => {
|
||||
let translateResult = '';
|
||||
switch(menuItem) {
|
||||
case 'New Folder':
|
||||
translateResult = gettext('New Folder');
|
||||
break;
|
||||
case 'New File':
|
||||
translateResult = gettext('New File');
|
||||
break;
|
||||
case 'Rename':
|
||||
translateResult = gettext('Rename');
|
||||
break;
|
||||
case 'Delete':
|
||||
translateResult = gettext('Delete');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return translateResult;
|
||||
}
|
||||
|
||||
onDropdownToggleClick = (e) => {
|
||||
e.preventDefault();
|
||||
this.toggleOperationMenu(e);
|
||||
}
|
||||
|
||||
toggleOperationMenu = (e) => {
|
||||
e.stopPropagation();
|
||||
this.setState(
|
||||
{isItemMenuShow: !this.state.isItemMenuShow }, () => {
|
||||
if (this.state.isItemMenuShow) {
|
||||
this.props.onFreezedItem()
|
||||
} else {
|
||||
this.props.onUnFreezedItem();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMenuItemClick = (event) => {
|
||||
let operation = event.target.dataset.toggle;
|
||||
let node = this.props.node;
|
||||
this.props.onMenuItemClick(operation, node);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
|
||||
<DropdownToggle
|
||||
tag="i"
|
||||
className="fas fa-ellipsis-v"
|
||||
title={gettext('More Operations')}
|
||||
data-toggle="dropdown"
|
||||
aria-expanded={this.state.isItemMenuShow}
|
||||
onClick={this.onDropdownToggleClick}
|
||||
/>
|
||||
<DropdownMenu>
|
||||
{this.state.menuList.map((menuItem, index) => {
|
||||
return (
|
||||
<DropdownItem key={index} data-toggle={menuItem} onClick={this.onMenuItemClick}>{this.translateMenuItem(menuItem)}</DropdownItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TreeNodeMenu.propTypes = propTypes;
|
||||
|
||||
export default TreeNodeMenu;
|
||||
@@ -1,210 +1,169 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import MenuControl from '../menu-control';
|
||||
import TreeNodeMenu from './tree-node-menu';
|
||||
import { permission } from '../../utils/constants';
|
||||
|
||||
const propTypes = {
|
||||
isNodeItemFrezee: PropTypes.bool.isRequired,
|
||||
node: PropTypes.object.isRequired,
|
||||
currentPath: PropTypes.string.isRequired,
|
||||
paddingLeft: PropTypes.number.isRequired,
|
||||
node: PropTypes.object.isRequired,
|
||||
treeView: PropTypes.object.isRequired,
|
||||
onDirCollapse: PropTypes.func.isRequired,
|
||||
isNodeMenuShow: PropTypes.bool.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,
|
||||
};
|
||||
|
||||
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 {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isMenuIconShow: false
|
||||
isHighlight: false,
|
||||
isShowOperationMenu: false
|
||||
};
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
// e.nativeEvent.stopImmediatePropagation();
|
||||
let { node } = this.props;
|
||||
this.props.treeView.onNodeClick(node);
|
||||
}
|
||||
|
||||
onMouseEnter = () => {
|
||||
if (!this.props.isNodeItemFrezee) {
|
||||
if (!this.props.isItemFreezed) {
|
||||
this.setState({
|
||||
isMenuIconShow: true
|
||||
isShowOperationMenu: true,
|
||||
isHighlight: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMouseLeave = () => {
|
||||
if (!this.props.isNodeItemFrezee) {
|
||||
if (!this.props.isItemFreezed) {
|
||||
this.setState({
|
||||
isMenuIconShow: false
|
||||
isShowOperationMenu: false,
|
||||
isHighlight: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleCollapse = (e) => {
|
||||
e.stopPropagation();
|
||||
this.props.onDirCollapse(this.props.node);
|
||||
onNodeClick = () => {
|
||||
this.props.onNodeClick(this.props.node);
|
||||
}
|
||||
|
||||
onDragStart = (e) => {
|
||||
const { node } = this.props;
|
||||
this.props.treeView.onDragStart(e, node);
|
||||
}
|
||||
|
||||
onMenuControlClick = (e) => {
|
||||
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}
|
||||
/>
|
||||
);
|
||||
onLoadToggle = () => {
|
||||
let { node } = this.props;
|
||||
if (node.isExpanded) {
|
||||
this.props.onNodeCollapse(node);
|
||||
} else {
|
||||
this.props.onNodeExpanded(node);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
renderChildren = () => {
|
||||
const { node } = this.props;
|
||||
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;
|
||||
onNodeDragStart = (e) => {
|
||||
this.props.onNodeDragStart(e, this.props.node);
|
||||
}
|
||||
|
||||
renderMenuController() {
|
||||
if (permission) {
|
||||
let isShow = (this.props.node.path === this.props.currentPath);
|
||||
return (
|
||||
<div className="right-icon">
|
||||
<MenuControl
|
||||
isShow={this.state.isMenuIconShow || isShow}
|
||||
onClick={this.onMenuControlClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return;
|
||||
onUnFreezedItem = () => {
|
||||
this.setState({isShowOperationMenu: false});
|
||||
this.props.onUnFreezedItem();
|
||||
}
|
||||
|
||||
getNodeTypeAndIcon() {
|
||||
const node = this.props.node;
|
||||
onMenuItemClick = (operation, node) => {
|
||||
this.props.onMenuItemClick(operation, node);
|
||||
}
|
||||
|
||||
getNodeTypeAndIcon = () => {
|
||||
let { node } = this.props;
|
||||
let icon = '';
|
||||
let type = '';
|
||||
if (node.type === 'dir') {
|
||||
icon = <i className="far fa-folder"/>;
|
||||
if (node.object.type === 'dir') {
|
||||
icon = <i className="far fa-folder"></i>
|
||||
type = 'dir';
|
||||
} else {
|
||||
let index = node.name.lastIndexOf('.');
|
||||
if (index === -1) {
|
||||
icon = <i className="far fa-file"/>;
|
||||
let index = node.object.name.lastIndexOf('.');
|
||||
if (index === -1) {
|
||||
icon = <i className="far fa-file"></i>
|
||||
type = 'file';
|
||||
} else {
|
||||
type = node.name.substring(index).toLowerCase();
|
||||
if (type === '.png' || type === '.jpg') {
|
||||
icon = <i className="far fa-image"/>;
|
||||
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"/>;
|
||||
icon = <i className="far fa-file"></i>
|
||||
type = 'file';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { type, icon };
|
||||
return {icon, type};
|
||||
}
|
||||
|
||||
render() {
|
||||
const styles = {};
|
||||
let node = this.props.node;
|
||||
let { type, icon } = this.getNodeTypeAndIcon();
|
||||
let hlClass = '';
|
||||
if (node.path === this.props.currentPath) {
|
||||
hlClass = 'tree-node-hight-light';
|
||||
renderChildren = () => {
|
||||
let { node, paddingLeft } = this.props;
|
||||
if (!node.hasChildren()) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return (
|
||||
<div type={type} className="tree-node" style={styles}>
|
||||
<div
|
||||
onMouseLeave={this.onMouseLeave}
|
||||
onMouseEnter={this.onMouseEnter}
|
||||
onClick={this.onClick}
|
||||
type={type}
|
||||
className={`tree-node-inner text-nowrap ${hlClass} ${node.name === '/'? 'hide': ''}`}
|
||||
>
|
||||
<div className="tree-node-text" type={type} draggable="true" onDragStart={this.onDragStart}>{node.name}</div>
|
||||
<div className="left-icon">
|
||||
{this.renderCollapse()}
|
||||
<i type={type} className="tree-node-icon">{icon}</i>
|
||||
</div>
|
||||
{this.renderMenuController()}
|
||||
</div>
|
||||
{node.isExpanded ? this.renderChildren() : null}
|
||||
<div className="children" style={{paddingLeft: paddingLeft}}>
|
||||
{node.children.map(item => {
|
||||
return (
|
||||
<TreeNodeView
|
||||
key={item.path}
|
||||
node={item}
|
||||
paddingLeft={paddingLeft}
|
||||
currentPath={this.props.currentPath}
|
||||
isNodeMenuShow={this.props.isNodeMenuShow}
|
||||
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, 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;
|
||||
|
||||
133
frontend/src/components/tree-view/tree-node.js
Normal file
133
frontend/src/components/tree-view/tree-node.js
Normal file
@@ -0,0 +1,133 @@
|
||||
class TreeNode {
|
||||
|
||||
constructor({ path, object, isLoaded, isPreload, isExpanded, parentNode }) {
|
||||
this.path = path || object.name, // The default setting is the object name, which is set to a relative path when the father is set.
|
||||
this.object = object.clone();
|
||||
this.isLoaded = isLoaded || false;
|
||||
this.isPreload = isPreload || false;
|
||||
this.isExpanded = isExpanded || false;
|
||||
this.children = [];
|
||||
this.parentNode = parentNode || null;
|
||||
}
|
||||
|
||||
clone() {
|
||||
let treeNode = new TreeNode({
|
||||
path: this.path,
|
||||
object: this.object.clone(),
|
||||
isLoaded: this.isLoaded,
|
||||
isPreload: this.isPreload,
|
||||
isExpanded: this.isExpanded,
|
||||
parentNode: this.parentNode,
|
||||
});
|
||||
treeNode.children = this.children.map(child => {
|
||||
let newChild = child.clone();
|
||||
return newChild;
|
||||
});
|
||||
|
||||
return treeNode;
|
||||
}
|
||||
|
||||
setParent(parentNode) {
|
||||
this.path = this.generatePath(parentNode);
|
||||
this.parentNode = parentNode;
|
||||
this.isLoaded = false; // update parentNode need loaded data again;
|
||||
}
|
||||
|
||||
hasChildren() {
|
||||
return this.children.length !== 0;
|
||||
}
|
||||
|
||||
addChild(node) {
|
||||
node.setParent(this);
|
||||
let children = this.children;
|
||||
if (node.object.isDir()) {
|
||||
this.children.unshift(node);
|
||||
} else {
|
||||
let index = -1;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
if (!children[i].object.isDir()) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (index === -1) { // -1: all the node object is dir;
|
||||
this.children.push(node);
|
||||
} else if (index === 0) { // 0: all the node object is file
|
||||
this.children.unshift(node);
|
||||
} else {
|
||||
this.children.splice(index, 0, node);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addChildren(nodeList) {
|
||||
nodeList.forEach(node => {
|
||||
node.setParent(this);
|
||||
});
|
||||
this.children = nodeList;
|
||||
}
|
||||
|
||||
deleteChild(node) {
|
||||
let children = this.children.filter(item => {
|
||||
return item !== node;
|
||||
});
|
||||
this.children = children;
|
||||
}
|
||||
|
||||
rename(newName) {
|
||||
this.object.name = newName;
|
||||
this.path = this.generatePath(this.parentNode);
|
||||
// this.isLoaded = false;
|
||||
}
|
||||
|
||||
updateObjectProperties(keys, newValues) {
|
||||
if (Array.isArray(keys) && Array.isArray(newValues)) {
|
||||
keys.forEach((key, index) => {
|
||||
this.object[key] = newValues[index];
|
||||
});
|
||||
} else {
|
||||
this.object[keys] = newValues;
|
||||
}
|
||||
}
|
||||
|
||||
generatePath(parentNode) {
|
||||
return parentNode.path === '/' ? parentNode.path + this.object.name : parentNode.path + '/' + this.object.name;
|
||||
}
|
||||
|
||||
serializeToJson() {
|
||||
let children = [];
|
||||
if (this.hasChildren) {
|
||||
children = this.children.map(m => m.serializeToJson());
|
||||
}
|
||||
|
||||
const treeNode = {
|
||||
path: this.path,
|
||||
object: this.object.clone(),
|
||||
isLoaded: this.isLoaded,
|
||||
isPreload: this.isPreload,
|
||||
isExpanded: this.isExpanded,
|
||||
parentNode: this.parentNode,
|
||||
children: children,
|
||||
}
|
||||
|
||||
return treeNode;
|
||||
}
|
||||
|
||||
static deserializefromJson(json) {
|
||||
let { path, object, isLoaded, isPreload, isExpanded, parentNode, children = [] } = json;
|
||||
object = object.clone();
|
||||
|
||||
const treeNode = new TreeNode({
|
||||
path,
|
||||
object,
|
||||
isLoaded,
|
||||
isPreload,
|
||||
isExpanded,
|
||||
parentNode,
|
||||
children: children.map(item => TreeNode.deserializefromJson(item))
|
||||
});
|
||||
return treeNode;
|
||||
}
|
||||
}
|
||||
|
||||
export default TreeNode;
|
||||
@@ -1,62 +1,60 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import TreeNodeView from './tree-node-view';
|
||||
import editorUtilities from '../../utils/editor-utilties';
|
||||
|
||||
const propTypes = {
|
||||
permission: PropTypes.string,
|
||||
isNodeItemFrezee: PropTypes.bool.isRequired,
|
||||
currentPath: PropTypes.string.isRequired,
|
||||
isNodeMenuShow: PropTypes.bool.isRequired,
|
||||
treeData: PropTypes.object.isRequired,
|
||||
onShowContextMenu: PropTypes.func.isRequired,
|
||||
currentPath: PropTypes.string.isRequired,
|
||||
onMenuItemClick: PropTypes.func,
|
||||
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) => {
|
||||
/*
|
||||
this._updated = true;
|
||||
if (this.props.onChange) this.props.onChange(tree.obj);
|
||||
*/
|
||||
class TreeView extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isItemFreezed: false,
|
||||
};
|
||||
}
|
||||
|
||||
onDragStart = (e, node) => {
|
||||
const url = editorUtilities.getFileURL(node);
|
||||
e.dataTransfer.setData('text/uri-list', url);
|
||||
e.dataTransfer.setData('text/plain', url);
|
||||
onNodeDragStart = (e, node) => {
|
||||
// todo
|
||||
}
|
||||
|
||||
onNodeClick = (node) => {
|
||||
this.props.onNodeClick(node);
|
||||
onFreezedItem = () => {
|
||||
this.setState({isItemFreezed: true});
|
||||
}
|
||||
|
||||
onShowContextMenu = (e, node) => {
|
||||
this.props.onShowContextMenu(e, node);
|
||||
onUnFreezedItem = () => {
|
||||
this.setState({isItemFreezed: false});
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.props.treeData.root) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tree-view tree">
|
||||
<TreeNodeView
|
||||
paddingLeft={12}
|
||||
treeView={this}
|
||||
<TreeNodeView
|
||||
node={this.props.treeData.root}
|
||||
isNodeItemFrezee={this.props.isNodeItemFrezee}
|
||||
permission={this.props.permission}
|
||||
currentPath={this.props.currentPath}
|
||||
onShowContextMenu={this.props.onShowContextMenu}
|
||||
onDirCollapse={this.props.onDirCollapse}
|
||||
paddingLeft={PADDING_LEFT}
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
TreeView.propTypes = propTypes;
|
||||
|
||||
@@ -1,181 +1,82 @@
|
||||
import Node from './node';
|
||||
import moment from 'moment';
|
||||
import { Utils } from '../../utils/utils';
|
||||
|
||||
const lang = window.app.config.lang;
|
||||
moment.locale(lang);
|
||||
import TreeNode from './tree-node';
|
||||
|
||||
class Tree {
|
||||
|
||||
|
||||
constructor() {
|
||||
this.root = null;
|
||||
}
|
||||
|
||||
clone() {
|
||||
var t = new Tree();
|
||||
if (this.root)
|
||||
t.root = this.root.clone();
|
||||
return t;
|
||||
let tree = new Tree();
|
||||
if (this.root) {
|
||||
tree.root = this.root.clone();
|
||||
}
|
||||
return tree;
|
||||
}
|
||||
|
||||
setRoot(node) {
|
||||
this.root = node;
|
||||
}
|
||||
|
||||
addNodeToParent(node, parentNode) {
|
||||
node.parent = parentNode;
|
||||
parentNode.children.push(node);
|
||||
return node;
|
||||
}
|
||||
|
||||
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;
|
||||
getNodeByPath(path) {
|
||||
let findNode = null;
|
||||
function callback(currentNode) {
|
||||
if (currentNode.path === path) {
|
||||
findNode = currentNode;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
node.parent = null;
|
||||
parentNode.children.splice(index, 1);
|
||||
return removeNode ? removeNode : null;
|
||||
this.traverseDF(callback);
|
||||
return findNode;
|
||||
}
|
||||
|
||||
addNode(node) {
|
||||
let treeNodeParent = this.findNodeParentFromTree(node);
|
||||
if (treeNodeParent) {
|
||||
this.addNodeToParent(node, treeNodeParent);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
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 treeNodeParent = this.findNodeParentFromTree(node);
|
||||
if (treeNodeParent) {
|
||||
this.removeNodeFromParent(node, treeNodeParent);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
let parentNode = this.getNodeByPath(node.parentNode.path);
|
||||
parentNode.deleteChild(node);
|
||||
}
|
||||
|
||||
deleteNodeByPath(path) {
|
||||
let node = this.getNodeByPath(path);
|
||||
this.deleteNode(node);
|
||||
}
|
||||
|
||||
moveNode(node, moveToNode, isDestroy) {
|
||||
let moveNode = node.clone();
|
||||
this.addNodeToParent(moveNode, moveToNode);
|
||||
if (isDestroy) {
|
||||
deleteNodeList(nodeList) {
|
||||
nodeList.forEach(node => {
|
||||
this.deleteNode(node);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
moveNodeByPath(path, moveToPath, isDestroy) {
|
||||
let node = this.getNodeByPath(path);
|
||||
let moveToNode = this.getNodeByPath(moveToPath);
|
||||
this.moveNode(node, moveToNode, isDestroy);
|
||||
renameNode(node, newName) {
|
||||
node.rename(newName);
|
||||
}
|
||||
|
||||
updateNodeParam(node, param, newValue) {
|
||||
let treeNode = this.findNodeFromTree(node);
|
||||
if (treeNode && treeNode[param]) {
|
||||
treeNode[param] = newValue;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
updateNode(node, keys, newValues) {
|
||||
node.updateObjectParam(keys, newValues);
|
||||
}
|
||||
|
||||
updateNodeParamByPath(path, param, newValue) {
|
||||
let node = this.getNodeByPath(path);
|
||||
this.updateNodeParam(node, param, newValue);
|
||||
moveNode(node, destNode) {
|
||||
this.deleteNode(node);
|
||||
destNode.addChild(node);
|
||||
}
|
||||
|
||||
findNode(node) {
|
||||
return this.findNodeFromTree(node);
|
||||
copyNode(node, destNode) {
|
||||
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) {
|
||||
let stack = [];
|
||||
let found = false;
|
||||
@@ -204,82 +105,33 @@ class Tree {
|
||||
}
|
||||
}
|
||||
|
||||
parseModelToTree(model) {
|
||||
var node = new Node({
|
||||
name: model.name,
|
||||
type: model.type,
|
||||
size: Utils.bytesToSize(model.size),
|
||||
last_update_time: moment.unix(model.last_update_time).fromNow(),
|
||||
permission: model.permission,
|
||||
parent_path: model.parent_path,
|
||||
isExpanded: false
|
||||
});
|
||||
if (model.children instanceof Array) {
|
||||
for (let child of model.children) {
|
||||
this.addNodeToParent(this.parseNodeToTree(child), node);
|
||||
}
|
||||
expandNode(node) {
|
||||
node.isExpanded = true;
|
||||
while (node.parentNode) {
|
||||
node.parentNode.isExpanded = true;
|
||||
node = node.parentNode;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
collapseNode(node) {
|
||||
node.isExpanded = false;
|
||||
}
|
||||
|
||||
parseListToTree(nodeList) {
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
isNodeChild(node, parentNode) {
|
||||
return parentNode.children.some(item => {
|
||||
return item.path === node.path;
|
||||
});
|
||||
}
|
||||
|
||||
parseNodeToTree(node) {
|
||||
var newNode = new Node({
|
||||
name: node.name,
|
||||
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);
|
||||
}
|
||||
}
|
||||
return newNode;
|
||||
serializeToJson() {
|
||||
return this.root.serializeToJson();
|
||||
}
|
||||
|
||||
deserializefromJson(json) {
|
||||
let root = TreeNode.deserializefromJson(json);
|
||||
let tree = new Tree();
|
||||
tree.setRoot(root);
|
||||
return tree;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user