From f9bea27384f8004f4cd89633d94e7c5a8b636448 Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Thu, 3 Nov 2016 11:30:33 +0100
Subject: [PATCH] Fix #1194. First commits

---
 web/client/actions/catalog.js                 |  1 -
 web/client/actions/layers.js                  | 13 +++--
 web/client/api/WMS.js                         |  1 -
 web/client/components/TOC/DefaultLayer.jsx    |  3 ++
 .../TOC/fragments/SettingsModal.jsx           | 36 ++++++++++---
 .../TOC/fragments/settings/WMSStyle.jsx       | 54 +++++++++++++++++++
 web/client/components/catalog/RecordItem.jsx  |  2 +
 web/client/plugins/TOC.jsx                    |  6 ++-
 8 files changed, 100 insertions(+), 16 deletions(-)
 create mode 100644 web/client/components/TOC/fragments/settings/WMSStyle.jsx

diff --git a/web/client/actions/catalog.js b/web/client/actions/catalog.js
index 0f9c96f602..ce7a49045d 100644
--- a/web/client/actions/catalog.js
+++ b/web/client/actions/catalog.js
@@ -16,7 +16,6 @@ const RECORD_LIST_LOAD_ERROR = 'RECORD_LIST_LOAD_ERROR';
 const CHANGE_CATALOG_FORMAT = 'CHANGE_CATALOG_FORMAT';
 const ADD_LAYER_ERROR = 'ADD_LAYER_ERROR';
 const CATALOG_RESET = 'CATALOG_RESET';
-
 function recordsLoaded(options, result) {
     return {
         type: RECORD_LIST_LOADED,
diff --git a/web/client/actions/layers.js b/web/client/actions/layers.js
index 4e1dedeea1..d8d497866e 100644
--- a/web/client/actions/layers.js
+++ b/web/client/actions/layers.js
@@ -185,7 +185,7 @@ function getDescribeLayer(url, layer, options) {
 }
 
 function getLayerCapabilities(layer, options) {
-    // geoserver's specific.
+    // geoserver's specific. TODO parse layer.capabilitiesURL.
     let reqUrl = layer.url;
     let urlParts = reqUrl.split("/geoserver/");
     if (urlParts.length === 2) {
@@ -193,7 +193,6 @@ function getLayerCapabilities(layer, options) {
         if (layerParts.length === 2) {
             reqUrl = urlParts[0] + "/geoserver/" + layerParts [0] + "/" + layerParts[1] + "/" + urlParts[1];
         }
-
     }
     return (dispatch) => {
         // TODO, look ad current cached capabilities;
@@ -202,9 +201,9 @@ function getLayerCapabilities(layer, options) {
             let layerCapability;
 
             layerCapability = _.head(layers.filter( ( capability ) => {
-                if (layer.name.split(":").length === 2 && capability.name.split(":").length === 2 ) {
+                if (layer.name.split(":").length === 2 && capability.name && capability.name.split(":").length === 2 ) {
                     return layer.name === capability.name;
-                } else if (capability.name.split(":").length === 2) {
+                } else if (capability.name && capability.name.split(":").length === 2) {
                     return (layer.name === capability.name.split(":")[1]);
                 } else if (layer.name.split(":").length === 2) {
                     return layer.name.split(":")[1] === capability.name;
@@ -212,7 +211,11 @@ function getLayerCapabilities(layer, options) {
                 return layer.name === capability.name;
             }));
             if (layerCapability) {
-                dispatch(updateNode(layer.id, "id", {capabilities: layerCapability, boundingBox: layerCapability.latLonBoundingBox}));
+                dispatch(updateNode(layer.id, "id", {
+                    capabilities: layerCapability,
+                    boundingBox: layerCapability.latLonBoundingBox,
+                    availableStyles: Array.isArray(layerCapability.style) ? layerCapability.style : [layerCapability.style]
+                }));
             }
             // return dispatch(updateNode(layer.id, "id", {capabilities: capabilities || {"error": "no describe Layer found"}}));
 
diff --git a/web/client/api/WMS.js b/web/client/api/WMS.js
index 49cf4b032f..095fb91c93 100644
--- a/web/client/api/WMS.js
+++ b/web/client/api/WMS.js
@@ -67,7 +67,6 @@ const Api = {
                 resolve(axios.get(parseUrl(getCapabilitiesUrl)).then((response) => {
                     let json = unmarshaller.unmarshalString(response.data);
                     return json && json.value;
-
                 }));
             });
         });
diff --git a/web/client/components/TOC/DefaultLayer.jsx b/web/client/components/TOC/DefaultLayer.jsx
index c9b3d8559e..25767f74af 100644
--- a/web/client/components/TOC/DefaultLayer.jsx
+++ b/web/client/components/TOC/DefaultLayer.jsx
@@ -23,6 +23,7 @@ var DefaultLayer = React.createClass({
         node: React.PropTypes.object,
         settings: React.PropTypes.object,
         propertiesChangeHandler: React.PropTypes.func,
+        retrieveLayerData: React.PropTypes.func,
         onToggle: React.PropTypes.func,
         onZoom: React.PropTypes.func,
         onSettings: React.PropTypes.func,
@@ -56,6 +57,7 @@ var DefaultLayer = React.createClass({
             onToggle: () => {},
             onZoom: () => {},
             onSettings: () => {},
+            retrieveLayerData: () => {},
             activateRemoveLayer: false,
             activateLegendTool: false,
             activateSettingsTool: false,
@@ -106,6 +108,7 @@ var DefaultLayer = React.createClass({
                 tools.push(
                     <SettingsModal key="toolsettingsmodal" options={this.props.modalOptions}
                                {...this.props.settingsOptions}
+                               retrieveLayerData={this.props.retrieveLayerData}
                                hideSettings={this.props.hideSettings}
                                settings={this.props.settings}
                                element={this.props.node}
diff --git a/web/client/components/TOC/fragments/SettingsModal.jsx b/web/client/components/TOC/fragments/SettingsModal.jsx
index e74da2f912..9f2ed17440 100644
--- a/web/client/components/TOC/fragments/SettingsModal.jsx
+++ b/web/client/components/TOC/fragments/SettingsModal.jsx
@@ -15,6 +15,7 @@ const Dialog = require('../../misc/Dialog');
 const ConfirmButton = require('../../buttons/ConfirmButton');
 const General = require('./settings/General');
 const Display = require('./settings/Display');
+const WMSStyle = require('./settings/WMSStyle');
 const {Portal} = require('react-overlays');
 const assign = require('object-assign');
 const Message = require('../../I18N/Message');
@@ -28,6 +29,7 @@ const SettingsModal = React.createClass({
         hideSettings: React.PropTypes.func,
         updateNode: React.PropTypes.func,
         removeNode: React.PropTypes.func,
+        retrieveLayerData: React.PropTypes.func,
         titleText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         opacityText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         saveText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
@@ -54,6 +56,7 @@ const SettingsModal = React.createClass({
             hideSettings: () => {},
             updateNode: () => {},
             removeNode: () => {},
+            retrieveLayerData: () => {},
             asModal: true,
             buttonSize: "large",
             closeGlyph: "",
@@ -98,22 +101,39 @@ const SettingsModal = React.createClass({
         );
         this.props.hideSettings();
     },
-    render() {
-        const general = (<General
+    renderGeneral() {
+        return (<General
             updateSettings={this.updateParams}
             element={this.props.element}
             groups={this.props.groups}
             key="general"
             on/>);
-        const display = (<Display
-            opacityText={this.props.opacityText}
-            element={this.props.element}
-            settings={this.props.settings}
-            onChange={(key, value) => this.updateParams({[key]: value}, this.props.realtimeUpdate)} />);
+    },
+    renderDisplay() {
+        return (<Display
+           opacityText={this.props.opacityText}
+           element={this.props.element}
+           settings={this.props.settings}
+           onChange={(key, value) => this.updateParams({[key]: value}, this.props.realtimeUpdate)} />);
+    },
+    renderStyleTab() {
+        if (this.props.element.type === "wms") {
+            return (<WMSStyle
+                    retrieveLayerData={this.props.retrieveLayerData}
+                    updateSettings={this.updateParams}
+                    element={this.props.element}
+                    key="style"
+                    o/>);
+        }
+    },
+    render() {
+        const general = this.renderGeneral();
+        const display = this.renderDisplay();
+        const style = this.renderStyleTab();
         const tabs = (<Tabs defaultActiveKey={1} id="layerProperties-tabs">
             <Tab eventKey={1} title={<Message msgId="layerProperties.general" />}>{general}</Tab>
             <Tab eventKey={2} title={<Message msgId="layerProperties.display" />}>{display}</Tab>
-            <Tab eventKey={3} title={<Message msgId="layerProperties.style" />} disabled>Tab 3 content</Tab>
+            <Tab eventKey={3} title={<Message msgId="layerProperties.style" />} disabled={!style} >{style}</Tab>
           </Tabs>);
         const footer = (<span role="footer">
             {this.props.includeCloseButton ? <Button bsSize={this.props.buttonSize} onClick={this.onClose}>{this.props.closeText}</Button> : <span/>}
diff --git a/web/client/components/TOC/fragments/settings/WMSStyle.jsx b/web/client/components/TOC/fragments/settings/WMSStyle.jsx
new file mode 100644
index 0000000000..e404d5f60b
--- /dev/null
+++ b/web/client/components/TOC/fragments/settings/WMSStyle.jsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright 2016, 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 Message = require('../../../I18N/Message');
+const Select = require('react-select');
+const {Button, Glyphicon} = require('react-bootstrap');
+
+/**
+ * General Settings form for layer
+ */
+const WMSStyle = React.createClass({
+    propTypes: {
+        retrieveLayerData: React.PropTypes.func,
+        updateSettings: React.PropTypes.func,
+        element: React.PropTypes.object,
+        groups: React.PropTypes.array
+    },
+    getDefaultProps() {
+        return {
+            element: {},
+            retrieveLayerData: () => {},
+            updateSettings: () => {}
+        };
+    },
+    render() {
+        return (<form ref="style">
+            <Select
+                    key="styles-dropdown"
+                    options={[{label: "Default Style", value: ""}].concat((this.props.element.availableStyles && this.props.element.availableStyles || []).map((item) => {
+                        return {label: item.title || item.name, value: item.name};
+                    }))}
+                    value={this.props.element.style || ""}
+                    onChange={(selected) => {
+                        this.updateEntry("style", {target: {value: selected.value || ""}});
+                    }}
+                    />
+                <br />
+                <Button bsStyle="primary" style={{"float": "right"}} onClick={() => this.props.retrieveLayerData(this.props.element)}><Glyphicon glyph="refresh" />Refresh Styles List</Button>
+                <br />
+            </form>);
+    },
+    updateEntry(key, event) {
+        let value = event.target.value;
+        this.props.updateSettings({[key]: value});
+    }
+});
+
+module.exports = WMSStyle;
diff --git a/web/client/components/catalog/RecordItem.jsx b/web/client/components/catalog/RecordItem.jsx
index e4b2e1f31d..0431f6c149 100644
--- a/web/client/components/catalog/RecordItem.jsx
+++ b/web/client/components/catalog/RecordItem.jsx
@@ -83,12 +83,14 @@ const RecordItem = React.createClass({
         let links = [];
         if (wmsGetCap) {
             links.push({
+                type: "WMS_GET_CAPABILITIES",
                 url: wmsGetCap.url,
                 labelId: 'catalog.wmsGetCapLink'
             });
         }
         if (wfsGetCap) {
             links.push({
+                type: "WFS_GET_CAPABILITIES",
                 url: wfsGetCap.url,
                 labelId: 'catalog.wfsGetCapLink'
             });
diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx
index 69f376dfa8..d6314b6dae 100644
--- a/web/client/plugins/TOC.jsx
+++ b/web/client/plugins/TOC.jsx
@@ -9,7 +9,7 @@ const React = require('react');
 const {connect} = require('react-redux');
 const {createSelector} = require('reselect');
 const {changeLayerProperties, changeGroupProperties, toggleNode,
-       sortNode, showSettings, hideSettings, updateSettings, updateNode, removeNode} = require('../actions/layers');
+       sortNode, showSettings, hideSettings, updateSettings, updateNode, removeNode, getLayerCapabilities} = require('../actions/layers');
 const {zoomToExtent} = require('../actions/map');
 
 const {groupsSelector} = require('../selectors/layers');
@@ -49,6 +49,7 @@ const LayerTree = React.createClass({
         onToggleGroup: React.PropTypes.func,
         onToggleLayer: React.PropTypes.func,
         onZoomToExtent: React.PropTypes.func,
+        retrieveLayerData: React.PropTypes.func,
         onSort: React.PropTypes.func,
         onSettings: React.PropTypes.func,
         hideSettings: React.PropTypes.func,
@@ -66,6 +67,7 @@ const LayerTree = React.createClass({
         return {
             groupPropertiesChangeHandler: () => {},
             layerPropertiesChangeHandler: () => {},
+            retrieveLayerData: () => {},
             onToggleGroup: () => {},
             onToggleLayer: () => {},
             onZoomToExtent: () => {},
@@ -115,6 +117,7 @@ const LayerTree = React.createClass({
                             activateLegendTool={this.props.activateLegendTool}
                             activateZoomTool={this.props.activateZoomTool}
                             activateSettingsTool={this.props.activateSettingsTool}
+                            retrieveLayerData={this.props.retrieveLayerData}
                             settingsText={<Message msgId="layerProperties.windowTitle"/>}
                             opacityText={<Message msgId="opacity"/>}
                             saveText={<Message msgId="save"/>}
@@ -130,6 +133,7 @@ const LayerTree = React.createClass({
 const TOCPlugin = connect(tocSelector, {
     groupPropertiesChangeHandler: changeGroupProperties,
     layerPropertiesChangeHandler: changeLayerProperties,
+    retrieveLayerData: getLayerCapabilities,
     onToggleGroup: LayersUtils.toggleByType('groups', toggleNode),
     onToggleLayer: LayersUtils.toggleByType('layers', toggleNode),
     onSort: LayersUtils.sortUsing(LayersUtils.sortLayers, sortNode),