Updates

client/package.json

@@ -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",

client/src/namespaces.js

@@ -2,96 +2,62 @@
 
 import ReactDOM from 'react-dom';
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import {
-
+    BrowserRouter as Router,
-import jQuery from 'jquery';
+    Route,
-import '../public/jquery/jquery-ui-1.12.1.min.js';
+    Link
-import '../public/fancytree/jquery.fancytree-all.min.js';
+} from 'react-router-dom'
-import '../public/fancytree/skin-bootstrap/ui.fancytree.min.css';
 
 import { I18nextProvider, translate } from 'react-i18next';
 import i18n from './i18n';
 
-class TestTreeTable extends Component {
+import NamespacesTreeTable from './namespaces/NamespacesTreeTable';
-    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);
-    }
 
+@translate()
+class List extends Component {
     render() {
-        const container =
+        console.log(this.props);
-            <div ref={(domElem) => { this.domTableContainer = domElem; }} style={{ height: '100px', overflow: 'auto'}}>
+        console.log(this.props.routes);
-                <table ref={(domElem) => { this.domTable = domElem; }} className="table table-hover table-striped table-condensed">
+        const t = this.props.t;
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>B</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td></td>
-                        <td></td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>;
 
         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 (
+            <Router>
                 <div>
                     <ol className="breadcrumb">
                         <li><a href="/">{t('Home')}</a></li>
@@ -99,15 +65,13 @@ class Namespaces extends Component {
                     </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>
+                        <Link to="/namespaces/create"><span className="btn btn-primary" role="button"><i className="glyphicon glyphicon-plus"></i> {t('Create Namespace')}</span></Link>
                     </div>
 
-                <h2>{t('Namespaces')}</h2>
+                    <Route exact path="/namespaces" component={List} />
-
+                    <Route exact path="/namespaces/create" component={Create} />
-                <hr />
-
-                <TestTreeTable />
                 </div>
+            </Router>
         );
     }
 }

client/src/namespaces/NamespacesTreeTable.js

@@ -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;