Add custom search services editor (#1841)

Fix #1820

docma-config.json

@@ -162,6 +162,7 @@
                 "web/client/plugins/ScaleBox.jsx",
                 "web/client/plugins/ScrollTop.jsx",
                 "web/client/plugins/Search.jsx",
+                "web/client/plugins/SearchServicesConfig.jsx",
                 "web/client/plugins/ZoomIn.jsx",
                 "web/client/plugins/ZoomOut.jsx"
             ]

web/client/actions/__tests__/searchconfig-test.js

@@ -0,0 +1,51 @@
+/*
+* 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 expect = require('expect');
+var {
+    SET_SEARCH_CONFIG_PROP,
+    RESET_SEARCH_CONFIG,
+    UPDATE_SERVICE,
+    setSearchConfigProp,
+    restServiceConfig,
+    updateService
+} = require('../searchconfig');
+
+describe('Test correctness of the searchconfig actions', () => {
+
+
+    it('resetServiceConfig', () => {
+        const testPage = 1;
+        var retval = restServiceConfig(testPage);
+
+        expect(retval).toExist();
+        expect(retval.type).toBe(RESET_SEARCH_CONFIG);
+        expect(retval.page).toBe(testPage);
+    });
+
+    it('setSearchConfigProp', () => {
+        const testProperty = 'prop';
+        const testValue = 'val';
+        var retval = setSearchConfigProp(testProperty, testValue);
+
+        expect(retval).toExist();
+        expect(retval.type).toBe(SET_SEARCH_CONFIG_PROP);
+        expect(retval.property).toBe(testProperty);
+        expect(retval.value).toBe(testValue);
+    });
+
+    it('updateService', () => {
+        const testService = "service";
+        const testIdx = 1;
+        var retval = updateService(testService, testIdx);
+        expect(retval).toExist();
+        expect(retval.type).toBe(UPDATE_SERVICE);
+        expect(retval.service).toBe(testService);
+        expect(retval.idx).toBe(testIdx);
+    });
+});

web/client/actions/searchconfig.js

@@ -0,0 +1,53 @@
+/*
+ * 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 SET_SEARCH_CONFIG_PROP = 'SET_SEARCH_CONFIG_PROP';
+const RESET_SEARCH_CONFIG = 'RESET_SEARCH_CONFIG';
+const UPDATE_SERVICE = 'UPDATE_SERVICE';
+
+/**
+* Sets a property
+* @memberof actions.search
+* @param {string} property the property to set
+* @param {string|number|boolean|object} value the value to set or to check for toggling
+* @return {object} of type `SET_SEARCH_CONFIG_PROP` with property and value params
+*/
+function setSearchConfigProp(property, value) {
+    return {
+        type: SET_SEARCH_CONFIG_PROP,
+        property,
+        value
+    };
+}
+
+function restServiceConfig(page = 0 ) {
+    return {
+        type: RESET_SEARCH_CONFIG,
+        page
+    };
+}
+function updateService(service, idx = -1) {
+    return {
+        type: UPDATE_SERVICE,
+        service,
+        idx
+    };
+}
+
+/**
+* Actions for search
+* @name actions.searchconfig
+*/
+module.exports = {
+    SET_SEARCH_CONFIG_PROP,
+    RESET_SEARCH_CONFIG,
+    UPDATE_SERVICE,
+    setSearchConfigProp,
+    restServiceConfig,
+    updateService
+};

web/client/api/Nominatim.js

@@ -13,7 +13,8 @@ const DEFAULT_REVERSE_URL = 'nominatim.openstreetmap.org/reverse';
 const defaultOptions = {
     format: 'json',
     bounded: 0,
-    polygon_geojson: 1
+    polygon_geojson: 1,
+    priority: 5
 };
 /**
  * API for local config

web/client/components/mapcontrols/searchservicesconfig/ResultsProps.jsx

@@ -0,0 +1,76 @@
+/*
+ * 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 {FormGroup, ControlLabel, FormControl, Label} = require('react-bootstrap');
+const Message = require('../../I18N/Message');
+const Slider = require('react-nouislider');
+const assign = require('object-assign');
+function validate(service = {}) {
+    return service.displayName && service.displayName.length > 0;
+}
+const ResultsProps = React.createClass({
+    propTypes: {
+        service: React.PropTypes.object,
+        onPropertyChange: React.PropTypes.func
+    },
+    getDefaultProps() {
+        return {
+            service: {},
+            onPropertyChange: () => {}
+        };
+    },
+    render() {
+        const {service} = this.props;
+        return (
+            <form>
+                <span className="wfs-required-props-title"><Message msgId="search.s_result_props_label" /></span>
+                <FormGroup>
+                    <ControlLabel>
+                        <Message msgId="search.s_title" />
+                    </ControlLabel>
+                    <FormControl
+                    value={service.displayName}
+                    key="displayName"
+                    type="text"
+                    placeholder={'e.g. "${properties.name}\"'}
+                    onChange={this.updateProp.bind(null, "displayName")}/>
+                </FormGroup>
+                <FormGroup>
+                    <ControlLabel>
+                        <Message msgId="search.s_description" />
+                    </ControlLabel>
+                    <FormControl
+                    value={service.subTitle}
+                    key="subTitle"
+                    type="text"
+                    onChange={this.updateProp.bind(null, "subTitle")}/>
+                </FormGroup>
+                <FormGroup>
+                    <ControlLabel>
+                        <Message msgId="search.s_priority" />
+                        <Label key="priority-labeel" className="slider-label">{parseInt(service.priority || 1, 10)}</Label>
+                    </ControlLabel>
+                    <Slider key="priority" start={[service.priority || 1]}
+                        range={{min: 1, max: 10}}
+                        onSlide={this.updatePriority}
+                        />
+                    <span className="priority-info"><Message msgId="search.s_priority_info" /></span>
+                </FormGroup>
+            </form>);
+    },
+    updateProp(prop, event) {
+        const value = event.target.value;
+        this.props.onPropertyChange("service", assign({}, this.props.service, {[prop]: value}));
+    },
+    updatePriority(val) {
+        this.props.onPropertyChange("service", assign({}, this.props.service, {priority: parseFloat(val[0], 10)}));
+    }
+});
+
+module.exports = { Element: ResultsProps, validate};

web/client/components/mapcontrols/searchservicesconfig/SearchServices.css

@@ -0,0 +1,129 @@
+
+.services-config-editor .noUi-background {
+    background:#CCC;
+}
+
+.services-config-editor .noUi-horizontal {
+    height: 2px;
+    width: 260px;
+    margin:auto;
+}
+.services-config-editor .noUi-target {
+    position: relative;
+    direction: ltr;
+}
+
+.services-config-editor .noUi-base {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+}
+
+.services-config-editor .noUi-horizontal .noUi-handle {
+    width: 23px;
+    height: 23px;
+    top: -10px;
+}
+
+.services-config-editor .noUi-handle {
+    background: #078AA3;
+    cursor: default;
+    border-radius:50px;
+}
+
+.services-config-editor .noUi-handle {
+    position: relative;
+    z-index: 1;
+}
+.services-config-editor .noUi-target, .noUi-target * {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -ms-touch-action: none;
+    touch-action: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.services-config-editor .noUi-target {
+    position: relative;
+    direction: ltr;
+}
+
+.services-config-editor .noUi-target {
+    width: 94%;
+    margin-bottom: 10px;
+    margin-top: 10px
+}
+.services-config-editor  .noUi-handle:before {
+    width: 0px;
+}
+.services-config-editor .noUi-handle:after {
+    background: none;
+}
+.services-config-editor .service-radio{
+    padding-left: 0
+}
+.services-config-editor .services-list{
+    height: 130px;
+    border-radius: 6px;
+    overflow: auto;
+    border: 1px solid rgba(128, 128, 128, 0.55);
+}
+.services-config-editor .search-service-btn-group {
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+.services-config-editor .services-panel .panel-body{
+    padding-top: 0px;
+}
+.services-config-editor .services-list .glyphicon{
+    cursor: pointer;
+    padding: 2px;
+    color: #078aa3;
+    float: right;
+}
+.services-config-editor .services-list .search-serivce-name{
+    text-transform: capitalize;
+    padding-left: 4px;
+}
+.services-config-editor .search-service-item {
+   margin: 4px;
+   margin-left: 6px;
+   margin-right: 10px;
+}
+.services-config-editor .checkbox{
+    padding-left: 0px;
+}
+.services-config-editor .wfs-required-props-title{
+    margin-bottom: 15px;
+    display: inline-block;
+    margin-left: -10px;
+    margin-right: -10px;
+    width: calc(100% + 20px);
+    border-bottom: 1px solid gray;
+    font-size: larger;
+}
+.services-config-editor-confirm-close{
+    position: absolute;
+    right: 10px;
+    top: 4px;
+    border-radius: 6px;
+}
+.services-config-editor .slider-label {
+    margin-left: 10px;
+    width: 20px;
+}
+.services-config-editor .list-remove-btn {
+    float: right;
+    border: 0px;
+    background-color: transparent;
+}
+.services-config-editor .priority-info {
+    font-size: smaller;
+    display: inline-block;
+    padding-left: 2px;
+    width: 370px;
+}