public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Updates

Browse source
This commit is contained in:
Tomas Bures 2017-06-03 07:49:59 +02:00
parent cda93630ea
commit d0824fe724
3 changed files with 174 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

3
client/package.json
View file

@ -20,7 +20,8 @@
"prop-types": "^15.5.10",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-i18next": "^4.1.0"
"react-i18next": "^4.1.0",
"react-router-dom": "^4.1.1"
},
"devDependencies": {
"babel-cli": "^6.24.1",

134
client/src/namespaces.js
View file

@ -2,112 +2,76 @@
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import jQuery from 'jquery';
import '../public/jquery/jquery-ui-1.12.1.min.js';
import '../public/fancytree/jquery.fancytree-all.min.js';
import '../public/fancytree/skin-bootstrap/ui.fancytree.min.css';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
import { I18nextProvider, translate } from 'react-i18next';
import i18n from './i18n';
class TestTreeTable extends Component {
constructor(props) {
super(props);
import NamespacesTreeTable from './namespaces/NamespacesTreeTable';
this.state = {
treeData: [
{title: 'A', key: '1', expanded: true},
{title: 'B', key: '2', expanded: true, folder: true, children: [
{title: 'BA', key: '3', expanded: true, folder: true, children: [
{title: 'BAA', key: '4', expanded: true},
{title: 'BAB', key: '5', expanded: true}
]},
{title: 'BB', key: '6', expanded: true, folder: true, children: [
{title: 'BBA', key: '7', expanded: true},
{title: 'BBB', key: '8', expanded: true}
]}
]}
]
};
}
componentDidMount() {
const glyphOpts = {
map: {
expanderClosed: 'glyphicon glyphicon-menu-right',
expanderLazy: 'glyphicon glyphicon-menu-right', // glyphicon-plus-sign
expanderOpen: 'glyphicon glyphicon-menu-down', // glyphicon-collapse-down
}
};
this.tree = jQuery(this.domTable).fancytree({
extensions: ['glyph', 'table'],
glyph: glyphOpts,
selectMode: 1,
icon: false,
autoScroll: true,
scrollParent: jQuery(this.domTableContainer),
source: this.state.treeData,
table: {
nodeColumnIdx: 0
}
});
}
componentDidUpdate() {
this.tree.reload(this.state.treeData);
}
@translate()
class List extends Component {
render() {
const container =
<div ref={(domElem) => { this.domTableContainer = domElem; }} style={{ height: '100px', overflow: 'auto'}}>
<table ref={(domElem) => { this.domTable = domElem; }} className="table table-hover table-striped table-condensed">
<thead>
<tr>
<th>Name</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>;
console.log(this.props);
console.log(this.props.routes);
const t = this.props.t;
return (
container
<div>
<h2>{t('Namespaces')}</h2>
<hr />
<NamespacesTreeTable />
</div>
);
}
}
@translate()
class Create extends Component {
render() {
console.log(this.props);
console.log(this.props.routes);
const t = this.props.t;
return (
<div>
<h2>{t('Create Namespace')}</h2>
<hr />
</div>
);
}
}
@translate()
class Namespaces extends Component {
render() {
const t = this.props.t;
return (
<div>
<ol className="breadcrumb">
<li><a href="/">{t('Home')}</a></li>
<li className="active">{t('Namespaces')}</li>
</ol>
<Router>
<div>
<ol className="breadcrumb">
<li><a href="/">{t('Home')}</a></li>
<li className="active">{t('Namespaces')}</li>
</ol>
<div className="pull-right">
<a className="btn btn-primary" href="/reports/create" role="button"><i className="glyphicon glyphicon-plus"></i> {t('Create Namespace')}</a>
<div className="pull-right">
<Link to="/namespaces/create"><span className="btn btn-primary" role="button"><i className="glyphicon glyphicon-plus"></i> {t('Create Namespace')}</span></Link>
</div>
<Route exact path="/namespaces" component={List} />
<Route exact path="/namespaces/create" component={Create} />
</div>
<h2>{t('Namespaces')}</h2>
<hr />
<TestTreeTable />
</div>
</Router>
);
}
}

86
client/src/namespaces/NamespacesTreeTable.js Normal file
View file

@ -0,0 +1,86 @@
'use strict';
import React, { Component } from 'react';
import { translate } from 'react-i18next';
import jQuery from 'jquery';
import '../../public/jquery/jquery-ui-1.12.1.min.js';
import '../../public/fancytree/jquery.fancytree-all.min.js';
import '../../public/fancytree/skin-bootstrap/ui.fancytree.min.css';
translate();
class NamespacesTreeTable extends Component {
constructor(props) {
super(props);
this.state = {
treeData: [
{title: 'A', key: '1', expanded: true},
{title: 'B', key: '2', expanded: true, folder: true, children: [
{title: 'BA', key: '3', expanded: true, folder: true, children: [
{title: 'BAA', key: '4', expanded: true},
{title: 'BAB', key: '5', expanded: true}
]},
{title: 'BB', key: '6', expanded: true, folder: true, children: [
{title: 'BBA', key: '7', expanded: true},
{title: 'BBB', key: '8', expanded: true}
]}
]}
]
};
}
componentDidMount() {
const glyphOpts = {
map: {
expanderClosed: 'glyphicon glyphicon-menu-right',
expanderLazy: 'glyphicon glyphicon-menu-right', // glyphicon-plus-sign
expanderOpen: 'glyphicon glyphicon-menu-down', // glyphicon-collapse-down
}
};
this.tree = jQuery(this.domTable).fancytree({
extensions: ['glyph', 'table'],
glyph: glyphOpts,
selectMode: 1,
icon: false,
autoScroll: true,
scrollParent: jQuery(this.domTableContainer),
source: this.state.treeData,
table: {
nodeColumnIdx: 0
}
});
}
componentDidUpdate() {
this.tree.reload(this.state.treeData);
}
render() {
const container =
<div ref={(domElem) => { this.domTableContainer = domElem; }} style={{ height: '100px', overflow: 'auto'}}>
<table ref={(domElem) => { this.domTable = domElem; }} className="table table-hover table-striped table-condensed">
<thead>
<tr>
<th>Name</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>;
return (
container
);
}
}
export default NamespacesTreeTable;