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
geosolutions-it · Feb 7, 2017 · d39d13b · d39d13b
1 parent 78adf24
commit d39d13b
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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({
                 <Dock
                     zIndex={1030 /*below dialogs, above left menu*/}
                     position={"bottom" /* 'left', 'top', 'right', 'bottom' */}
-                    size={this.state.size}
+                    size={this.props.dockSize}
                     dimMode={"none" /*'transparent', 'none', 'opaque'*/}
                     isVisible={true}
                     onVisibleChange={this.handleVisibleChange}
+                    onSizeChange={(this.limitDockHeight)}
                     fluid={true}
                     dimStyle={{ background: 'rgba(0, 0, 100, 0.2)' }}
                     dockStyle={null}
@@ -247,7 +251,7 @@ const DockedFeatureGrid = React.createClass({
                                 }}>
                             <FeatureGrid
                                 useIcons={true}
-                                tools={[<Button onClick={this.props.onClose} ><Glyphicon glyph="1-close" /><I18N.Message msgId="close"/></Button>]}
+                                tools={[<Button onClick={this.props.onBackToSearch} ><Glyphicon glyph="arrow-left" /><I18N.Message msgId="featuregrid.backtosearch"/></Button>]}
                                 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
@@ -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
@@ -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 (
             <div id={this.props.id}>
-                <Button id="drawer-menu-button" style={this.props.menuButtonStyle} bsStyle={this.props.buttonStyle} key="menu-button" className={this.props.buttonClassName} onClick={this.props.toggleMenu}><Glyphicon glyph={this.props.glyph}/></Button>
+                <Button id="drawer-menu-button" style={this.props.menuButtonStyle} bsStyle={this.props.buttonStyle} key="menu-button" className={this.props.buttonClassName} onClick={this.props.toggleMenu} disabled={this.props.disabled}><Glyphicon glyph={this.props.glyph}/></Button>
                 <Menu single={this.props.singleSection} {...this.props.menuOptions} title={<Message msgId="menu" />} alignment="left">
                     {this.renderItems()}
                 </Menu>
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -691,6 +691,7 @@
             "export": "Esporta risultati",
             "selectall": "Seleziona tutti",
             "deselectall": "Deseleziona tutti",
+            "backtosearch": "Ritorna alla ricerca",
             "pagination": {
                 "page": "Pagina",
                 "of":   "di",