Merge pull request #193 from mircobe87/issue-189-modularLayerTree

Fixes #189, modular layer tree

web/client/components/Group/Group.jsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var React = require('react');
+var {Glyphicon} = require('react-bootstrap');
+
+var Group = React.createClass({
+    propTypes: {
+        layers: React.PropTypes.array,
+        group: React.PropTypes.string
+    },
+    getDefaultProps() {
+        return {
+            layers: []
+        };
+    },
+    getOwnLayers() {
+        return this.props.layers.filter((layer) => {
+            return layer.group === this.props.group;
+        }, this);
+    },
+    render() {
+        let groupTitle = this.props.group || 'Default';
+        let content = [];
+
+        let ownLayers = this.getOwnLayers();
+        for (let i = 0; i < ownLayers.length; i++) {
+            content.push(React.cloneElement(this.props.children, {
+                layer: ownLayers[i]
+            }));
+        }
+        return (
+            <div key={groupTitle} style={{marginBottom: "16px"}} >
+                <div style={{
+                    background: "rgb(240,240,240)",
+                    padding: "4px",
+                    borderRadius: "4px"}}
+                >
+                    <Glyphicon style={{marginRight: "8px"}} glyph="folder-open" />{groupTitle}
+                </div>
+                <div style={{marginLeft: "15px"}}>
+                    {content}
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = Group;

web/client/components/Group/__tests__/Group-test.jsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var React = require('react/addons');
+var Group = require('../Group');
+
+var expect = require('expect');
+
+describe('test Group module component', () => {
+
+    afterEach((done) => {
+        React.unmountComponentAtNode(document.body);
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    it('test Group creation', () => {
+        const group = 'grp';
+        const layers = [{
+            name: 'layer01',
+            title: 'Layer 1',
+            visibility: true,
+            storeIndex: 0,
+            type: 'wms',
+            group: group
+        }, {
+            name: 'layer02',
+            title: 'Layer 2',
+            visibility: true,
+            storeIndex: 1,
+            type: 'wms',
+            group: ''
+        }];
+
+        const comp = React.render(<Group layers={layers} group={group}><div/></Group>, document.body);
+        expect(comp).toExist();
+
+        const domNode = React.findDOMNode(comp);
+        expect(domNode).toExist();
+
+        const children = domNode.children;
+        expect(children.length).toBe(2);
+
+        const container = children.item(1);
+        expect(container.children.length).toBe(1);
+    });
+});

web/client/components/Layer/Layer.jsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var React = require('react');
+var Legend = require('../Legend/Legend');
+var assign = require('object-assign');
+
+var Layer = React.createClass({
+    propTypes: {
+        layer: React.PropTypes.object,
+        propertiesChangeHandler: React.PropTypes.func
+    },
+    renderLayerLegend(layer) {
+        if (layer && layer.visibility && layer.type === "wms" && layer.group !== "background") {
+            return <div style={{marginLeft: "15px"}}><Legend layer={layer}/></div>;
+        }
+        return null;
+    },
+    render() {
+        return (
+            <div key={this.props.layer.name}>
+                <div>
+                    <input style={{marginRight: "2px"}} data-position={this.props.layer.storeIndex} type="checkbox" checked={this.props.layer.visibility ? "checked" : ""} onChange={this.changeLayerVisibility} />{this.props.layer.title || this.props.layer.name}
+                </div>
+                {this.renderLayerLegend(this.props.layer)}
+            </div>
+        );
+    },
+    changeLayerVisibility(eventObj) {
+        let position = parseInt(eventObj.currentTarget.dataset.position, 10);
+        var newLayer = assign({}, this.props.layer, {visibility: !this.props.layer.visibility});
+        this.props.propertiesChangeHandler(newLayer, position);
+    }
+});
+
+module.exports = Layer;

web/client/components/Layer/__tests__/Layer-test.jsx

@@ -0,0 +1,107 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var React = require('react/addons');
+var Layer = require('../Layer');
+
+var expect = require('expect');
+
+describe('test Layer module component', () => {
+
+    afterEach((done) => {
+        React.unmountComponentAtNode(document.body);
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    it('tests Layer component creation (wms)', () => {
+        const l = {
+            name: 'layer00',
+            title: 'Layer',
+            visibility: true,
+            storeIndex: 9,
+            type: 'wms'
+        };
+        const comp = React.render(<Layer layer={l} />, document.body);
+        expect(comp).toExist();
+
+        const domNode = React.findDOMNode(comp);
+        expect(domNode).toExist();
+
+        const checkbox = domNode.getElementsByTagName('input').item(0);
+        expect(checkbox).toExist();
+        expect(parseInt(checkbox.dataset.position, 10)).toBe(l.storeIndex);
+        expect(checkbox.checked).toBe(l.visibility);
+
+        const label = domNode.getElementsByTagName('span').item(0);
+        expect(label).toExist();
+        expect(label.innerHTML).toBe(l.title || l.name);
+    });
+
+    it('tests Layer component creation (no wms)', () => {
+        const l = {
+            name: 'layer00',
+            title: 'Layer',
+            visibility: false,
+            storeIndex: 9
+        };
+        const comp = React.render(<Layer layer={l} />, document.body);
+        expect(comp).toExist();
+
+        const domNode = React.findDOMNode(comp);
+        expect(domNode).toExist();
+
+        const checkbox = domNode.getElementsByTagName('input').item(0);
+        expect(checkbox).toExist();
+        expect(parseInt(checkbox.dataset.position, 10)).toBe(l.storeIndex);
+        expect(checkbox.checked).toBe(l.visibility);
+
+        const label = domNode.getElementsByTagName('span').item(0);
+        expect(label).toExist();
+        expect(label.innerHTML).toBe(l.title || l.name);
+    });
+
+    it('test change event', () => {
+        let newLayer;
+        let position;
+
+        let handler = (l, p) => {
+            newLayer = l;
+            position = p;
+        };
+
+        const l = {
+            name: 'layer00',
+            title: 'Layer',
+            visibility: false,
+            storeIndex: 9
+        };
+        const comp = React.render(
+            <Layer
+                propertiesChangeHandler={handler}
+                layer={l}
+            />, document.body);
+        expect(comp).toExist();
+
+        const domNode = React.findDOMNode(comp);
+        expect(domNode).toExist();
+
+        const checkbox = domNode.getElementsByTagName('input').item(0);
+        expect(checkbox).toExist();
+
+        checkbox.checked = !l.visibility;
+        React.addons.TestUtils.Simulate.change(checkbox, {
+            target: {
+                checked: !l.visibility
+            }
+        });
+        expect(newLayer.visibility).toBe(!l.visibility);
+        expect(position).toBe(l.storeIndex);
+    });
+
+});