Added infinite nesting to TOC

web/client/components/TOC/DefaultLayerOrGroup.jsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright 2017, 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');
+
+const DefaultLayerOrGroup = React.createClass({
+    propTypes: {
+        node: React.PropTypes.object,
+        groupElement: React.PropTypes.element.isRequired,
+        layerElement: React.PropTypes.element.isRequired
+    },
+    render() {
+        const {groupElement: DefaultGroup, layerElement: DefaultLayer, node, ...other} = this.props;
+        if (node.nodes) {
+            return React.cloneElement(DefaultGroup, {node, ...other}, (<DefaultLayerOrGroup groupElement={DefaultGroup} layerElement={DefaultLayer}/>));
+        }
+        return (React.cloneElement(DefaultLayer, {node, ...other}));
+    }
+});
+
+module.exports = DefaultLayerOrGroup;

web/client/components/TOC/fragments/GroupTitle.jsx

@@ -31,7 +31,7 @@ const GroupTitle = React.createClass({
         let expanded = (this.props.node.expanded !== undefined) ? this.props.node.expanded : true;
         let groupTitle = this.props.node && this.props.node.title || 'Default';
         return (
-            <div className="toc-group-title" onClick={() => this.props.onClick(this.props.node.name, expanded)} style={this.props.style}>
+            <div className="toc-group-title" onClick={() => this.props.onClick(this.props.node.id, expanded)} style={this.props.style}>
                 <StatusIcon expanded={expanded} node={this.props.node}/>{groupTitle}
             </div>
         );

web/client/components/TOC/fragments/settings/General.jsx

@@ -10,6 +10,8 @@ var React = require('react');
 const {Input} = require('react-bootstrap');
 const Message = require('../../../I18N/Message');
 const {SimpleSelect} = require('react-selectize');
+const {isObject} = require('lodash');
+
 require('react-selectize/themes/index.css');
 
 /**
@@ -27,6 +29,18 @@ const General = React.createClass({
             updateSettings: () => {}
         };
     },
+    getGroups(groups, idx = 0) {
+        return groups.filter((group) => group.nodes).reduce((acc, g) => {
+            acc.push({label: g.id.replace(/\./g, '/'), value: g.id});
+            if (g.nodes.length > 0) {
+                return acc.concat(this.getGroups(g.nodes, idx + 1));
+            }
+            return acc;
+        }, []);
+    },
+    getLabelName(groupLable = "") {
+        return groupLable.replace(/\./g, '/');
+    },
     render() {
         return (<form ref="settings">
                 <Input label={<Message msgId="layerProperties.title" />}
@@ -46,12 +60,15 @@ const General = React.createClass({
             <SimpleSelect
                     key="group-dropdown"
                     options={
-                        ((this.props.groups && this.props.groups.map((g) => g.name)) || (this.props.element && this.props.element.group) || []).map(function(item) {
-                            return {label: item, value: item};
+                        ((this.props.groups && this.getGroups(this.props.groups)) || (this.props.element && this.props.element.group) || []).map(function(item) {
+                            if (isObject(item)) {
+                                return item;
+                            }
+                            return {label: this.getLabelName(item), value: item};
                         })
                     }
-                    defaultValue={{label: this.props.element && this.props.element.group || "Default", value: this.props.element && this.props.element.group || "Default" }}
-                    placeholder={this.props.element && this.props.element.group || "Default"}
+                    defaultValue={{label: this.getLabelName((this.props.element && this.props.element.group || "Default")), value: this.props.element && this.props.element.group || "Default" }}
+                    placeholder={this.getLabelName((this.props.element && this.props.element.group || "Default"))}
                     onChange={(value) => {
                         this.updateEntry("group", {target: {value: value || "Default"}});
                     }}
@@ -64,7 +81,8 @@ const General = React.createClass({
                         })).indexOf(search) > -1) {
                             return null;
                         }
-                        return {label: search, value: search};
+                        const val = search.replace(/\//g, '.');
+                        return {label: val, value: val};
                     }}
 
                     onValueChange={function(item) {

web/client/plugins/TOC.jsx

@@ -138,6 +138,7 @@ const tocSelector = createSelector(
 const TOC = require('../components/TOC/TOC');
 const DefaultGroup = require('../components/TOC/DefaultGroup');
 const DefaultLayer = require('../components/TOC/DefaultLayer');
+const DefaultLayerOrGroup = require('../components/TOC/DefaultLayerOrGroup');
 
 const LayerTree = React.createClass({
     propTypes: {
@@ -194,19 +195,14 @@ const LayerTree = React.createClass({
         return group.name !== 'background';
     },
     renderTOC() {
-
-        return (
-            <div>
-                <TOC onSort={this.props.onSort} filter={this.getNoBackgroundLayers}
-                    nodes={this.props.groups}>
-                    <DefaultGroup onSort={this.props.onSort}
+        const Group = (<DefaultGroup onSort={this.props.onSort}
                                   propertiesChangeHandler={this.props.groupPropertiesChangeHandler}
                                   onToggle={this.props.onToggleGroup}
                                   style={this.props.groupStyle}
                                   groupVisibilityCheckbox={true}
                                   visibilityCheckType={this.props.visibilityCheckType}
-                                  >
-                    <DefaultLayer
+                                  />);
+        const Layer = (<DefaultLayer
                             settingsOptions={this.props.settingsOptions}
                             onToggle={this.props.onToggleLayer}
                             onToggleQuerypanel={this.props.onToggleQuery }
@@ -229,8 +225,12 @@ const LayerTree = React.createClass({
                             opacityText={<Message msgId="opacity"/>}
                             saveText={<Message msgId="save"/>}
                             closeText={<Message msgId="close"/>}
-                            groups={this.props.groups}/>
-                    </DefaultGroup>
+                            groups={this.props.groups}/>);
+        return (
+            <div>
+                <TOC onSort={this.props.onSort} filter={this.getNoBackgroundLayers}
+                    nodes={this.props.groups}>
+                    <DefaultLayerOrGroup groupElement={Group} layerElement={Layer}/>
                 </TOC>
             </div>
         );

web/client/reducers/__tests__/layers-test.js

@@ -79,7 +79,7 @@ describe('Test the layers reducer', () => {
             nodeType: 'groups'
         };
         let initialState = {
-            groups: [{name: 'sample1'}, {name: 'sample2'}],
+            groups: [{name: 'sample1', id: 'sample1'}, {name: 'sample2', id: 'sample2'}],
             flat: [{id: 'layer1', group: 'sample1'}, {id: 'layer2', group: 'sample2'}]
         };
         let state = layers(initialState, testAction);
@@ -94,7 +94,7 @@ describe('Test the layers reducer', () => {
             nodeType: 'layers'
         };
         let initialState = {
-            groups: [{name: 'sample1'}, {name: 'sample2'}],
+            groups: [{name: 'sample1', id: 'sample1'}, {name: 'sample2', id: 'sample2'}],
             flat: [{id: 'layer1', group: 'sample1'}, {id: 'layer2', group: 'sample2'}]
         };
         let state = layers(initialState, testAction);
@@ -109,7 +109,7 @@ describe('Test the layers reducer', () => {
             nodeType: 'groups'
         };
         let initialState = {
-            groups: [{name: 'sample1', nodes: [{name: 'sample1.nested'}]}, {name: 'sample2'}],
+            groups: [{name: 'sample1', id: 'sample1', nodes: [{name: 'nested', id: 'sample1.nested'}]}, {name: 'sample2', id: 'sample2'}],
             flat: [{id: 'layer1', group: 'sample1'}, {id: 'layer2', group: 'sample2'}, {id: 'layer3', group: 'sample1.nested'}]
         };
         let state = layers(initialState, testAction);