Closes geosolutions-it#2418 Added spatial fitler customizable methods

web/client/components/data/query/ComboField.jsx

@@ -24,6 +24,7 @@ class ComboField extends React.Component {
         valueField: PropTypes.string,
         textField: PropTypes.string,
         placeholder: PropTypes.object,
+        itemComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
         fieldOptions: PropTypes.array,
         fieldName: PropTypes.string,
         fieldRowId: PropTypes.number,
@@ -74,6 +75,7 @@ class ComboField extends React.Component {
         textField: null,
         fieldOptions: [],
         fieldName: null,
+        itemComponent: null,
         fieldRowId: null,
         fieldValue: null,
         fieldException: null,
@@ -100,6 +102,7 @@ class ComboField extends React.Component {
                 {...this.props.options}
                 busy={this.props.busy}
                 disabled={this.props.disabled}
+                itemComponent={this.props.itemComponent}
                 valueField={this.props.valueField}
                 textField={this.props.textField}
                 data={this.props.fieldOptions}
@@ -119,6 +122,7 @@ class ComboField extends React.Component {
                 {...this.props.options}
                 busy={this.props.busy}
                 disabled={this.props.disabled}
+                itemComponent={this.props.itemComponent}
                 data={this.props.fieldOptions}
                 value={this.props.fieldValue}
                 caseSensitive={false}

web/client/components/data/query/ComboFieldListItem.jsx

@@ -0,0 +1,27 @@
+/*
+ * 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.
+*/
+
+
+const React = require('react');
+const PropTypes = require('prop-types');
+class ComboFieldListItem extends React.Component {
+    static propTypes = {
+        item: PropTypes.string,
+        textField: PropTypes.string,
+        customItemClassName: PropTypes.string,
+        valueField: PropTypes.string
+    };
+
+    render() {
+        return (
+            <span className={this.props.customItemClassName ? this.props.customItemClassName : ""}>{this.props.item}</span>
+        );
+    }
+}
+
+module.exports = ComboFieldListItem;

web/client/components/data/query/SpatialFilter.jsx

@@ -1,4 +1,3 @@
-const PropTypes = require('prop-types');
 /**
  * Copyright 2016, GeoSolutions Sas.
  * All rights reserved.
@@ -7,12 +6,16 @@ const PropTypes = require('prop-types');
  * LICENSE file in the root directory of this source tree.
  */
 const React = require('react');
+const PropTypes = require('prop-types');
 
 const {Row, Col, Panel, Button, Glyphicon, FormControl} = require('react-bootstrap');
 const ComboField = require('./ComboField');
 const GeometryDetails = require('./GeometryDetails');
+const AutocompleteWFSComboboxContainer = require('../../misc/AutocompleteWFSComboboxContainer');
+const ComboFieldListItem = require('./ComboFieldListItem');
 
 const ZoneField = require('./ZoneField');
+const {find} = require('lodash');
 
 const LocaleUtils = require('../../../utils/LocaleUtils');
 const I18N = require('../../I18N/I18N');
@@ -59,6 +62,9 @@ class SpatialFilter extends React.Component {
         }
     };
 
+    getMethodFromId = (id) => {
+        return find(this.props.spatialMethodOptions, method => method && method.id === id) || null;
+    };
     renderHeader = () => {
         const spatialFilterHeader = LocaleUtils.getMessageById(this.context.messages, "queryform.spatialfilter.spatial_filter_header");
 
@@ -75,21 +81,23 @@ class SpatialFilter extends React.Component {
     };
 
     renderSpatialHeader = () => {
-        const selectedMethod = this.props.spatialMethodOptions.filter((opt) => this.props.spatialField.method === opt.id)[0];
+        const selectedMethod = this.getMethodFromId(this.props.spatialField.method);
+        // const selectedMethod = this.props.spatialMethodOptions.filter((opt) => this.props.spatialField.method === opt.id)[0];
 
         const methodCombo =
             (<ComboField
                 fieldOptions={
                     this.props.spatialMethodOptions.map((opt) => {
-                        return LocaleUtils.getMessageById(this.context.messages, opt.name);
+                        return LocaleUtils.getMessageById(this.context.messages, opt.name) || opt.name;
                     })
                 }
+                itemComponent={(other) => <ComboFieldListItem customItemClassName={this.getMethodFromId(other.item) && this.getMethodFromId(other.item).customItemClassName || ""} {...other}/>}
                 placeholder={LocaleUtils.getMessageById(this.context.messages, "queryform.spatialfilter.combo_placeholder")}
                 fieldName="method"
                 style={{width: "140px"}}
                 fieldRowId={new Date().getTime()}
                 fieldValue={
-                    LocaleUtils.getMessageById(this.context.messages, selectedMethod ? selectedMethod.name : "")
+                    LocaleUtils.getMessageById(this.context.messages, selectedMethod ? selectedMethod.name : "") || selectedMethod && selectedMethod.name || ""
                 }
                 onUpdateField={this.updateSpatialMethod}/>)
         ;
@@ -181,11 +189,36 @@ class SpatialFilter extends React.Component {
                 }) : <span/>;
     };
 
+    renderRoiPanel = () => {
+        const selectedMethod = this.getMethodFromId(this.props.spatialField.method);
+        return (<Panel>
+            <div className="container-fluid">
+                <Row className="filter-field-row">
+                    <Col xs={5}>
+                        <span>{this.props.spatialField.method}</span>
+                    </Col>
+                    <Col xs={7}>
+                        <div style={{width: "140px"}}>
+                            <AutocompleteWFSComboboxContainer
+                                valueField={selectedMethod && selectedMethod.filterProps && selectedMethod.filterProps.valueField}
+                                textField={selectedMethod && selectedMethod.filterProps && selectedMethod.filterProps.valueField}
+                                url={selectedMethod && selectedMethod.url}
+                                onChangeDrawingStatus={this.props.actions.onChangeDrawingStatus}
+                                filterProps={selectedMethod && selectedMethod.filterProps}
+                                />
+                        </div>
+
+                    </Col>
+                </Row>
+            </div>
+        </Panel>);
+    };
     renderSpatialPanel = (operationRow, drawLabel) => {
         return (
             <Panel>
                 {this.props.spatialMethodOptions.length > 1 ? this.renderSpatialHeader() : <span/>}
                 {this.renderZoneFields()}
+                {this.props.spatialField.method && this.getMethodFromId(this.props.spatialField.method) && this.getMethodFromId(this.props.spatialField.method).type === "wfsGeocoder" ? this.renderRoiPanel() : <span/>}
                 {this.props.spatialOperations.length > 1 ?
                     <Panel>
                         <div className="container-fluid">
@@ -208,7 +241,8 @@ class SpatialFilter extends React.Component {
         const selectedOperation = this.props.spatialOperations.filter((opt) => this.props.spatialField.operation === opt.id)[0];
 
         let drawLabel = <span/>;
-        if (this.props.spatialField.method && this.props.spatialField.method !== "ZONE" && this.props.spatialField.method !== "Viewport") {
+        if (this.props.spatialField.method !== "ZONE" && this.props.spatialField.method !== "Viewport" &&
+        this.getMethodFromId(this.props.spatialField.method) && this.getMethodFromId(this.props.spatialField.method).type !== "wfsGeocoder") {
             drawLabel = !this.props.spatialField.geometry ?
                 (<span>
                     <hr width="100%"/>
@@ -305,25 +339,29 @@ class SpatialFilter extends React.Component {
         this.props.actions.onShowSpatialSelectionDetails(false);
 
         const method = this.props.spatialMethodOptions.filter((opt) => {
-            if (value === LocaleUtils.getMessageById(this.context.messages, opt.name)) {
+            if (value === (LocaleUtils.getMessageById(this.context.messages, opt.name) || opt.name)) {
                 return opt;
             }
-        })[0].id;
+        })[0].id; // TODO change id with a type, change also localConfig objects?
 
         this.props.actions.onSelectSpatialMethod(method, name);
 
-        switch (method) {
-            case "ZONE": {
-                this.changeDrawingStatus('clean', null, "queryform", []); break;
-            }
-            case "Viewport": {
-                this.changeDrawingStatus('clean', null, "queryform", []);
-                this.props.actions.onSelectViewportSpatialMethod();
-                break;
-            }
-            default: {
-                this.changeDrawingStatus('start', method, "queryform", [], {stopAfterDrawing: true});
+        if (this.getMethodFromId(method).type !== "wfsGeocoder") {
+            switch (method.id) {
+                case "ZONE": {
+                    this.changeDrawingStatus('clean', null, "queryform", []); break;
+                }
+                case "Viewport": {
+                    this.changeDrawingStatus('clean', null, "queryform", []);
+                    this.props.actions.onSelectViewportSpatialMethod();
+                    break;
+                }
+                default: {
+                    this.changeDrawingStatus('start', method, "queryform", [], {stopAfterDrawing: true});
+                }
             }
+        } else {
+            this.changeDrawingStatus('clean', null, "queryform", []);
         }
     };
 
@@ -346,7 +384,7 @@ class SpatialFilter extends React.Component {
     changeDrawingStatus = (status, method, owner, features, options) => {
         this.props.actions.onChangeDrawingStatus(
             status,
-            method !== undefined ? method : this.props.spatialField.method,
+            method !== undefined ? method : this.props.spatialField.method && this.props.spatialField.method.id,
             owner,
             features,
             options);

web/client/components/map/leaflet/DrawSupport.jsx

@@ -345,6 +345,10 @@ class DrawSupport extends React.Component {
         if (newProps.options.drawEnabled) {
             this.addDrawInteraction(props);
         }
+        if (newProps.options.updateSpatialField) {
+            const feature = this.fromLeafletFeature();
+            this.props.onEndDrawing(feature, this.props.drawOwner);
+        }
     };
 
     addEditInteraction = (newProps) => {
@@ -459,6 +463,30 @@ class DrawSupport extends React.Component {
         }
         return assign({}, featureEdited.toGeoJSON(), {geometry: geom});
     };
+    fromLeafletFeature = () => {
+        const layer = this.drawLayer;
+        // let drawn geom stay on the map
+        let geoJesonFt = layer.toGeoJSON();
+        let bounds = layer.getBounds();
+        // const newGeoJsonFt = this.convertFeaturesToGeoJson([feature], props);
+        let extent = this.boundsToOLExtent(bounds);
+        let center = bounds.getCenter();
+        let radius = layer.getRadius ? layer.getRadius() : 0;
+        let coordinates = geoJesonFt.features[0].geometry.coordinates;
+        let projection = "EPSG:4326";
+        let type = geoJesonFt.features[0].geometry.type;
+        // We always draw geoJson feature
+        // this.drawLayer.addData(geoJesonFt);
+        // Geometry respect query form panel needs
+        return {
+            type,
+            extent,
+            center,
+            coordinates,
+            radius,
+            projection
+        };
+    };
 }
 
 

web/client/components/map/openlayers/DrawSupport.jsx

@@ -429,6 +429,13 @@ class DrawSupport extends React.Component {
         if (newProps.options.drawEnabled) {
             this.handleDrawAndEdit(newProps.drawMethod, newProps.options.startingPoint, newProps.options.maxPoints);
         }
+        if (newProps.options.updateSpatialField) {
+            this.sketchFeature = this.drawSource.getFeatures()[0];
+            this.sketchFeature.set('id', uuid.v1());
+            const feature = this.fromOLFeature(this.sketchFeature);
+
+            this.props.onEndDrawing(feature, this.props.drawOwner);
+        }
     };
 
     addSelectInteraction = () => {