From d39d13b11936fece783e9adb9e11ecf84c2e37ad Mon Sep 17 00:00:00 2001 From: stefano Date: Tue, 7 Feb 2017 15:47:31 +0100 Subject: [PATCH] Fix #1398 Improve query panel behaviour (#1413) * Improve query panel * close drawer menu on search * close query results on back to search * close query results on toggle drawer control * limit the movement of height of query results dock * Changed logic of 'back to search' * Set max and min height of dock query in props/localConfig * Add disabled control on drawer menu * Update FR and DE translation * Moved and merged the actions of the panels --- web/client/actions/featuregrid.js | 12 ++++++- web/client/actions/wfsquery.js | 21 ++++++++++-- .../data/featuregrid/DockedFeatureGrid.jsx | 33 +++++++++++++------ web/client/localConfig.json | 4 ++- web/client/plugins/DrawerMenu.jsx | 11 ++++--- web/client/plugins/FeatureGrid.jsx | 10 +++--- web/client/plugins/TOC.jsx | 1 - web/client/reducers/featuregrid.js | 7 ++-- web/client/translations/data.de-DE | 1 + web/client/translations/data.en-US | 1 + web/client/translations/data.fr-FR | 1 + web/client/translations/data.it-IT | 1 + 12 files changed, 78 insertions(+), 25 deletions(-) diff --git a/web/client/actions/featuregrid.js b/web/client/actions/featuregrid.js index f7f1c9a658..8d724ffd8e 100644 --- a/web/client/actions/featuregrid.js +++ b/web/client/actions/featuregrid.js @@ -8,6 +8,7 @@ const SELECT_FEATURES = 'SELECT_FEATURES'; const SET_FEATURES = 'SET_FEATURES'; +const DOCK_SIZE_FEATURES = 'DOCK_SIZE_FEATURES'; function selectFeatures(features) { return { @@ -23,9 +24,18 @@ function setFeatures(features) { }; } +function dockSizeFeatures(dockSize) { + return { + type: DOCK_SIZE_FEATURES, + dockSize: dockSize + }; +} + module.exports = { SELECT_FEATURES, SET_FEATURES, + DOCK_SIZE_FEATURES, selectFeatures, - setFeatures + setFeatures, + dockSizeFeatures }; diff --git a/web/client/actions/wfsquery.js b/web/client/actions/wfsquery.js index f79a56d649..17e96d2181 100644 --- a/web/client/actions/wfsquery.js +++ b/web/client/actions/wfsquery.js @@ -131,7 +131,12 @@ function query(searchUrl, filterObj) { FilterUtils.toOGCFilter(filterObj.featureTypeName, filterObj, filterObj.ogcVersion, filterObj.sortOptions, filterObj.hits) : FilterUtils.toCQLFilter(filterObj); } - return (dispatch) => { + return (dispatch, getState) => { + let state = getState(); + if (state.controls && state.controls.queryPanel && state.controls.drawer && state.controls.drawer.enabled && state.query && state.query.open) { + dispatch(setControlProperty('drawer', 'enabled', false)); + dispatch(setControlProperty('drawer', 'disabled', true)); + } return axios.post(searchUrl + '?service=WFS&&outputFormat=json', data, { timeout: 60000, headers: {'Accept': 'application/json', 'Content-Type': 'application/json'} @@ -163,6 +168,17 @@ function featureClose() { }; } +function closeResponse() { + return (dispatch, getState) => { + dispatch(featureClose()); + let state = getState(); + if (state.controls && state.controls.queryPanel && state.controls.drawer && !state.controls.drawer.enabled) { + dispatch(setControlProperty('drawer', 'enabled', true)); + dispatch(setControlProperty('drawer', 'disabled', false)); + } + }; +} + module.exports = { FEATURE_TYPE_SELECTED, FEATURE_TYPE_LOADED, @@ -181,5 +197,6 @@ module.exports = { query, featureClose, resetQuery, - toggleQueryPanel + toggleQueryPanel, + closeResponse }; diff --git a/web/client/components/data/featuregrid/DockedFeatureGrid.jsx b/web/client/components/data/featuregrid/DockedFeatureGrid.jsx index 1d65c5c926..389d07a12d 100644 --- a/web/client/components/data/featuregrid/DockedFeatureGrid.jsx +++ b/web/client/components/data/featuregrid/DockedFeatureGrid.jsx @@ -7,7 +7,6 @@ const {Modal, Button, Glyphicon} = require('react-bootstrap'); const FilterUtils = require('../../../utils/FilterUtils'); -const {getWindowSize} = require('../../../utils/AgentUtils'); const FeatureGrid = connect((state) => { return { select: state.featuregrid && state.featuregrid.select || [], @@ -54,7 +53,11 @@ const DockedFeatureGrid = React.createClass({ cleanError: React.PropTypes.func, selectAllToggle: React.PropTypes.func, zoomToFeatureAction: React.PropTypes.func, - onClose: React.PropTypes.func + onBackToSearch: React.PropTypes.func, + dockSize: React.PropTypes.number, + minDockSize: React.PropTypes.number, + maxDockSize: React.PropTypes.number, + setDockSize: React.PropTypes.func }, contextTypes: { messages: React.PropTypes.object @@ -83,20 +86,20 @@ const DockedFeatureGrid = React.createClass({ }, initWidth: 600, withMap: true, - onClose: () => {}, + onBackToSearch: () => {}, changeMapView: () => {}, // loadFeatureGridConfig: () => {}, onExpandFilterPanel: () => {}, selectFeatures: () => {}, onQuery: () => {}, cleanError: () => {}, - selectAllToggle: () => {} + selectAllToggle: () => {}, + dockSize: 0.35, + minDockSize: 0.1, + maxDockSize: 1.0, + setDockSize: () => {} }; }, - componentWillMount() { - let height = getWindowSize().maxHeight - 108; - this.setState({width: `calc( ${this.props.initWidth} - 30px)`, height}); - }, shouldComponentUpdate(nextProps) { // this is mandatory to avoid infinite looping. TODO externalize pagination return Object.keys(this.props).reduce((prev, prop) => { @@ -224,10 +227,11 @@ const DockedFeatureGrid = React.createClass({ ]} + tools={[]} key={"search-results-" + (this.state && this.state.searchN)} className="featureGrid" changeMapView={this.props.changeMapView} @@ -295,6 +299,15 @@ const DockedFeatureGrid = React.createClass({ selectFeatures(features) { this.props.selectAllToggle(); this.props.selectFeatures(features); + }, + limitDockHeight(size) { + if (size >= this.props.maxDockSize) { + this.props.setDockSize(this.props.maxDockSize); + } else if (size <= this.props.minDockSize) { + this.props.setDockSize(this.props.minDockSize); + } else { + this.props.setDockSize(size); + } } }); diff --git a/web/client/localConfig.json b/web/client/localConfig.json index 8d5a096dd2..2c0d9911a2 100644 --- a/web/client/localConfig.json +++ b/web/client/localConfig.json @@ -303,7 +303,9 @@ },{ "name": "FeatureGrid", "cfg": { - "pagination": true + "pagination": true, + "minDockSize": 0.1, + "maxDockSize":1.0 } }, { "name": "TOC", diff --git a/web/client/plugins/DrawerMenu.jsx b/web/client/plugins/DrawerMenu.jsx index 555d9f3273..f5b2d4731a 100644 --- a/web/client/plugins/DrawerMenu.jsx +++ b/web/client/plugins/DrawerMenu.jsx @@ -44,7 +44,8 @@ const DrawerMenu = React.createClass({ menuOptions: React.PropTypes.object, singleSection: React.PropTypes.bool, buttonClassName: React.PropTypes.string, - menuButtonStyle: React.PropTypes.object + menuButtonStyle: React.PropTypes.object, + disabled: React.PropTypes.bool }, contextTypes: { messages: React.PropTypes.object, @@ -59,7 +60,8 @@ const DrawerMenu = React.createClass({ buttonStyle: "default", menuOptions: {}, singleSection: false, - buttonClassName: "drawer-menu-button" + buttonClassName: "drawer-menu-button", + disabled: false }; }, renderItems() { @@ -86,7 +88,7 @@ const DrawerMenu = React.createClass({ render() { return (
- + } alignment="left"> {this.renderItems()} @@ -97,7 +99,8 @@ const DrawerMenu = React.createClass({ module.exports = { DrawerMenuPlugin: connect((state) => ({ - active: state.controls && state.controls.drawer && state.controls.drawer.active + active: state.controls && state.controls.drawer && state.controls.drawer.active, + disabled: state.controls && state.controls.drawer && state.controls.drawer.disabled }), { toggleMenu: toggleControl.bind(null, 'drawer', null) })(DrawerMenu), diff --git a/web/client/plugins/FeatureGrid.jsx b/web/client/plugins/FeatureGrid.jsx index 3016376a02..303b70a672 100644 --- a/web/client/plugins/FeatureGrid.jsx +++ b/web/client/plugins/FeatureGrid.jsx @@ -6,8 +6,8 @@ * LICENSE file in the root directory of this source tree. */ const {connect} = require('react-redux'); -const {selectFeatures} = require('../actions/featuregrid'); -const {query, featureClose} = require('../actions/wfsquery'); +const {selectFeatures, dockSizeFeatures} = require('../actions/featuregrid'); +const {query, closeResponse} = require('../actions/wfsquery'); const {changeMapView} = require('../actions/map'); module.exports = { @@ -29,13 +29,15 @@ module.exports = { })), query: state.query && state.query.queryObj, isNew: state.query && state.query.isNew, - totalFeatures: state.query && state.query.result && state.query.result.totalFeatures + totalFeatures: state.query && state.query.result && state.query.result.totalFeatures, + dockSize: state.highlight && state.highlight.dockSize }), { selectFeatures, changeMapView, onQuery: query, - onClose: featureClose + onBackToSearch: closeResponse, + setDockSize: dockSizeFeatures })(require('../components/data/featuregrid/DockedFeatureGrid')), reducers: {highlight: require('../reducers/featuregrid')} }; diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx index 20801b2c11..7611e27227 100644 --- a/web/client/plugins/TOC.jsx +++ b/web/client/plugins/TOC.jsx @@ -14,7 +14,6 @@ const {changeLayerProperties, changeGroupProperties, toggleNode, sortNode, showSettings, hideSettings, updateSettings, updateNode, removeNode} = require('../actions/layers'); const {getLayerCapabilities} = require('../actions/layerCapabilities'); const {zoomToExtent} = require('../actions/map'); - const {groupsSelector} = require('../selectors/layers'); const LayersUtils = require('../utils/LayersUtils'); diff --git a/web/client/reducers/featuregrid.js b/web/client/reducers/featuregrid.js index 61d2e593dd..6dc40675a1 100644 --- a/web/client/reducers/featuregrid.js +++ b/web/client/reducers/featuregrid.js @@ -6,11 +6,12 @@ * LICENSE file in the root directory of this source tree. */ const assign = require("object-assign"); -const {SELECT_FEATURES, SET_FEATURES} = require('../actions/featuregrid'); +const {SELECT_FEATURES, SET_FEATURES, DOCK_SIZE_FEATURES} = require('../actions/featuregrid'); const emptyResultsState = { select: [], - features: [] + features: [], + dockSize: 0.35 }; function featuregrid(state = emptyResultsState, action) { @@ -19,6 +20,8 @@ function featuregrid(state = emptyResultsState, action) { return assign({}, state, {select: action.features}); case SET_FEATURES: return assign({}, state, {features: action.features}); + case DOCK_SIZE_FEATURES: + return assign({}, state, {dockSize: action.dockSize}); default: return state; } diff --git a/web/client/translations/data.de-DE b/web/client/translations/data.de-DE index a4b00ee9e1..2d253061ab 100644 --- a/web/client/translations/data.de-DE +++ b/web/client/translations/data.de-DE @@ -691,6 +691,7 @@ "export": "Export", "selectall": "Alle auswählen", "deselectall": "Auswahl aufheben", + "backtosearch": "Zurück zur suche", "pagination": { "page": "Seite", "of": "von", diff --git a/web/client/translations/data.en-US b/web/client/translations/data.en-US index 7b93a5496a..8674304f9c 100644 --- a/web/client/translations/data.en-US +++ b/web/client/translations/data.en-US @@ -691,6 +691,7 @@ "export": "Export", "selectall": "Select All", "deselectall": "Clear Selection", + "backtosearch": "Back to search", "pagination": { "page": "Page", "of": "of", diff --git a/web/client/translations/data.fr-FR b/web/client/translations/data.fr-FR index 43f01215ff..5fa2c5b424 100644 --- a/web/client/translations/data.fr-FR +++ b/web/client/translations/data.fr-FR @@ -693,6 +693,7 @@ "export": "Exporter", "selectall": "Tout sélectionner", "deselectall": "Tout désélectionner", + "backtosearch": "Retour à la recherche", "pagination": { "page": "Page", "of": "de", diff --git a/web/client/translations/data.it-IT b/web/client/translations/data.it-IT index 0d10c36823..c49ef3fc09 100644 --- a/web/client/translations/data.it-IT +++ b/web/client/translations/data.it-IT @@ -691,6 +691,7 @@ "export": "Esporta risultati", "selectall": "Seleziona tutti", "deselectall": "Deseleziona tutti", + "backtosearch": "Ritorna alla ricerca", "pagination": { "page": "Pagina", "of": "di",