From f817fcb2284968938bc2ee2dee7c7a6147194dd5 Mon Sep 17 00:00:00 2001
From: Mauro Bartolomeoli <maurobartolomeoli@gmail.com>
Date: Wed, 21 Dec 2016 15:41:39 +0100
Subject: [PATCH] Partial work for #1104, enabled search tool if layer has
 search property

---
 web/client/actions/wfsquery.js             | 15 ++++++++++++++-
 web/client/components/TOC/DefaultLayer.jsx |  4 ++--
 web/client/plugins/DrawerMenu.jsx          |  3 ++-
 web/client/plugins/TOC.jsx                 | 11 +++--------
 web/client/plugins/drawer/Menu.jsx         |  3 ++-
 5 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/web/client/actions/wfsquery.js b/web/client/actions/wfsquery.js
index 24542e4a3e..c046f1ad40 100644
--- a/web/client/actions/wfsquery.js
+++ b/web/client/actions/wfsquery.js
@@ -15,6 +15,9 @@ const QUERY_ERROR = 'QUERY_ERROR';
 const RESET_QUERY = 'RESET_QUERY';
 
 const axios = require('../libs/ajax');
+
+const {toggleControl, setControlProperty} = require('./controls');
+
 function featureTypeSelected(url, typeName) {
     return {
         type: FEATURE_TYPE_SELECTED,
@@ -127,6 +130,15 @@ function resetQuery() {
     };
 }
 
+
+function toggleQueryPanel(url, name) {
+    return (dispatch, getState) => {
+        dispatch(featureTypeSelected(url, name));
+        dispatch(toggleControl('queryPanel', null));
+        dispatch(setControlProperty('drawer', 'width', getState().controls.queryPanel.enabled ? 700 : 300));
+    };
+}
+
 module.exports = {
     FEATURE_TYPE_SELECTED,
     FEATURE_TYPE_LOADED,
@@ -140,5 +152,6 @@ module.exports = {
     describeFeatureType,
     loadFeature,
     query,
-    resetQuery
+    resetQuery,
+    toggleQueryPanel
 };
diff --git a/web/client/components/TOC/DefaultLayer.jsx b/web/client/components/TOC/DefaultLayer.jsx
index c83c200027..22e85ea6fa 100644
--- a/web/client/components/TOC/DefaultLayer.jsx
+++ b/web/client/components/TOC/DefaultLayer.jsx
@@ -121,7 +121,7 @@ var DefaultLayer = React.createClass({
                            groups={this.props.groups}/>
                );
         }
-        if (this.props.activateQueryTool) {
+        if (this.props.activateQueryTool && this.props.node.search) {
             tools.push(
                 <LayersTool key="toolquery"
                         tooltip="toc.searchFeatures"
@@ -130,7 +130,7 @@ var DefaultLayer = React.createClass({
                         ref="target"
                         style={{"float": "right", cursor: "pointer"}}
                         glyph="search"
-                        onClick={(node) => this.props.onToggleQuerypanel(node.url, node.name)}/>
+                        onClick={(node) => this.props.onToggleQuerypanel(node.search.url || node.url, node.name)}/>
                 );
         }
         return (<div position="collapsible" className="collapsible-toc">
diff --git a/web/client/plugins/DrawerMenu.jsx b/web/client/plugins/DrawerMenu.jsx
index 2bd835570d..670646e71e 100644
--- a/web/client/plugins/DrawerMenu.jsx
+++ b/web/client/plugins/DrawerMenu.jsx
@@ -23,7 +23,8 @@ const {partialRight} = require('lodash');
 
 const Menu = connect((state) => ({
     show: state.controls.drawer && state.controls.drawer.enabled,
-    activeKey: state.controls.drawer && state.controls.drawer.menu
+    activeKey: state.controls.drawer && state.controls.drawer.menu,
+    dynamicWidth: state.controls.drawer && state.controls.drawer.width || undefined
 }), {
     onToggle: toggleControl.bind(null, 'drawer', null),
     onChoose: partialRight(setControlProperty.bind(null, 'drawer', 'menu'), true),
diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx
index d47a341b7c..c4a5d1370f 100644
--- a/web/client/plugins/TOC.jsx
+++ b/web/client/plugins/TOC.jsx
@@ -13,7 +13,6 @@ const {Button, Glyphicon} = require('react-bootstrap');
 const {changeLayerProperties, changeGroupProperties, toggleNode,
        sortNode, showSettings, hideSettings, updateSettings, updateNode, removeNode, getLayerCapabilities} = require('../actions/layers');
 const {zoomToExtent} = require('../actions/map');
-const {toggleControl} = require('../actions/controls');
 
 const {groupsSelector} = require('../selectors/layers');
 
@@ -51,7 +50,7 @@ const {
     zoneChange
 } = require('../actions/queryform');
 
-const {query, featureTypeSelected, describeFeatureType} = require('../actions/wfsquery');
+const {query, toggleQueryPanel, describeFeatureType} = require('../actions/wfsquery');
 
 const {
     changeDrawingStatus,
@@ -184,6 +183,7 @@ const LayerTree = React.createClass({
             activateZoomTool: true,
             activateSettingsTool: true,
             activateRemoveLayer: true,
+            activateQueryTool: true,
             visibilityCheckType: "checkbox",
             settingsOptions: {},
             querypanelEnabled: false
@@ -257,12 +257,7 @@ const TOCPlugin = connect(tocSelector, {
     retrieveLayerData: getLayerCapabilities,
     onToggleGroup: LayersUtils.toggleByType('groups', toggleNode),
     onToggleLayer: LayersUtils.toggleByType('layers', toggleNode),
-    onToggleQuery: (url, name) => {
-        return (dispatch) => {
-            dispatch(featureTypeSelected(url, name));
-            dispatch(toggleControl('queryPanel', null));
-        };
-    },
+    onToggleQuery: toggleQueryPanel,
     onSort: LayersUtils.sortUsing(LayersUtils.sortLayers, sortNode),
     onSettings: showSettings,
     onZoomToExtent: zoomToExtent,
diff --git a/web/client/plugins/drawer/Menu.jsx b/web/client/plugins/drawer/Menu.jsx
index 8727f18c67..41c94cec0f 100644
--- a/web/client/plugins/drawer/Menu.jsx
+++ b/web/client/plugins/drawer/Menu.jsx
@@ -20,6 +20,7 @@ var Menu = React.createClass({
         onChoose: React.PropTypes.func,
         single: React.PropTypes.bool,
         width: React.PropTypes.number,
+        dynamicWidth: React.PropTypes.number,
         overlapMap: React.PropTypes.bool,
         changeMapStyle: React.PropTypes.func
     },
@@ -87,7 +88,7 @@ var Menu = React.createClass({
             <Sidebar styles={{
                     sidebar: {
                         zIndex: 1022,
-                        width: this.props.width
+                        width: this.props.dynamicWidth || this.props.width
                     },
                     overlay: {
                         zIndex: 1021