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
geosolutions-it · Jan 31, 2017 · 031c1ad · 031c1ad
1 parent e908ce2
commit 031c1ad
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 25 deletions.
diff --git a/web/client/actions/wfsquery.js b/web/client/actions/wfsquery.js
@@ -15,6 +15,7 @@ const QUERY_CREATE = 'QUERY_CREATE';
 const QUERY_RESULT = 'QUERY_RESULT';
 const QUERY_ERROR = 'QUERY_ERROR';
 const RESET_QUERY = 'RESET_QUERY';
+const QUERY_DOCK_SIZE = 'QUERY_DOCK_SIZE';
 
 const axios = require('../libs/ajax');
 const {toggleControl, setControlProperty} = require('./controls');
@@ -74,6 +75,13 @@ function queryError(error) {
     };
 }
 
+function queryDockSize(dockSize) {
+    return {
+        type: QUERY_DOCK_SIZE,
+        dockSize: dockSize
+    };
+}
+
 function describeFeatureType(baseUrl, typeName) {
     return (dispatch) => {
         return axios.get(baseUrl + '?service=WFS&version=1.1.0&request=DescribeFeatureType&typeName=' + typeName + '&outputFormat=application/json').then((response) => {
@@ -174,12 +182,14 @@ module.exports = {
     QUERY_RESULT,
     QUERY_ERROR,
     RESET_QUERY,
+    QUERY_DOCK_SIZE,
     featureTypeSelected,
     describeFeatureType,
     loadFeature,
     createQuery,
     query,
     featureClose,
     resetQuery,
-    toggleQueryPanel
+    toggleQueryPanel,
+    queryDockSize
 };
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,10 @@ const DockedFeatureGrid = React.createClass({
         cleanError: React.PropTypes.func,
         selectAllToggle: React.PropTypes.func,
         zoomToFeatureAction: React.PropTypes.func,
-        onClose: React.PropTypes.func
+        onClose: React.PropTypes.func,
+        onToggleDrawer: React.PropTypes.func,
+        dockSize: React.PropTypes.number,
+        setDockSize: React.PropTypes.func
     },
     contextTypes: {
         messages: React.PropTypes.object
@@ -90,13 +92,12 @@ const DockedFeatureGrid = React.createClass({
             selectFeatures: () => {},
             onQuery: () => {},
             cleanError: () => {},
-            selectAllToggle: () => {}
+            selectAllToggle: () => {},
+            onToggleDrawer: () => {},
+            dockSize: 0.35,
+            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 +225,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 +249,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.backToSearch} ><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 +297,21 @@ const DockedFeatureGrid = React.createClass({
     selectFeatures(features) {
         this.props.selectAllToggle();
         this.props.selectFeatures(features);
+    },
+    backToSearch() {
+        this.props.onToggleDrawer();
+        this.props.onClose();
+    },
+    limitDockHeight(size) {
+        const minSize = 0.25;
+        const maxSize = 0.85;
+        if (size >= maxSize) {
+            this.props.setDockSize(maxSize);
+        } else if (size <= minSize) {
+            this.props.setDockSize(minSize);
+        } else {
+            this.props.setDockSize(size);
+        }
     }
 });
 

diff --git a/web/client/components/data/query/QueryBuilder.jsx b/web/client/components/data/query/QueryBuilder.jsx
@@ -94,7 +94,8 @@ const QueryBuilder = React.createClass({
             queryToolbarActions: {
                 onQuery: () => {},
                 onReset: () => {},
-                onChangeDrawingStatus: () => {}
+                onChangeDrawingStatus: () => {},
+                onToggleDrawer: () => {}
             }
         };
     },

diff --git a/web/client/components/data/query/QueryToolbar.jsx b/web/client/components/data/query/QueryToolbar.jsx
@@ -50,7 +50,8 @@ const QueryToolbar = React.createClass({
             actions: {
                 onQuery: () => {},
                 onReset: () => {},
-                onChangeDrawingStatus: () => {}
+                onChangeDrawingStatus: () => {},
+                onToggleDrawer: () => {}
             }
         };
     },
@@ -103,6 +104,7 @@ const QueryToolbar = React.createClass({
             sortOptions: this.props.sortOptions,
             hits: this.props.hits
         };
+        this.props.actions.onToggleDrawer();
         this.props.actions.onQuery(this.props.searchUrl, filterObj, this.props.params);
     },
     reset() {

diff --git a/web/client/plugins/DrawerMenu.jsx b/web/client/plugins/DrawerMenu.jsx
@@ -15,6 +15,8 @@ const {toggleControl, setControlProperty} = require('../actions/controls');
 
 const {changeMapStyle} = require('../actions/map');
 
+const {featureClose} = require('../actions/wfsquery');
+
 const {Button, Glyphicon, Panel} = require('react-bootstrap');
 
 const Section = require('./drawer/Section');
@@ -44,7 +46,9 @@ const DrawerMenu = React.createClass({
         menuOptions: React.PropTypes.object,
         singleSection: React.PropTypes.bool,
         buttonClassName: React.PropTypes.string,
-        menuButtonStyle: React.PropTypes.object
+        menuButtonStyle: React.PropTypes.object,
+        featureClose: React.PropTypes.func,
+        queryIsOpen: React.PropTypes.bool
     },
     contextTypes: {
         messages: React.PropTypes.object,
@@ -59,7 +63,9 @@ const DrawerMenu = React.createClass({
             buttonStyle: "default",
             menuOptions: {},
             singleSection: false,
-            buttonClassName: "drawer-menu-button"
+            buttonClassName: "drawer-menu-button",
+            featureClose: () => {},
+            queryIsOpen: false
         };
     },
     renderItems() {
@@ -86,20 +92,28 @@ 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.closeAll}><Glyphicon glyph={this.props.glyph}/></Button>
                 <Menu single={this.props.singleSection} {...this.props.menuOptions} title={<Message msgId="menu" />} alignment="left">
                     {this.renderItems()}
                 </Menu>
             </div>
         );
+    },
+    closeAll() {
+        this.props.toggleMenu();
+        if (this.props.queryIsOpen) {
+            this.props.featureClose();
+        }
     }
 });
 
 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,
+        queryIsOpen: state.query.open
     }), {
-        toggleMenu: toggleControl.bind(null, 'drawer', null)
+        toggleMenu: toggleControl.bind(null, 'drawer', null),
+        featureClose
     })(DrawerMenu),
     reducers: {}
 };
diff --git a/web/client/plugins/FeatureGrid.jsx b/web/client/plugins/FeatureGrid.jsx
@@ -7,8 +7,9 @@
  */
 const {connect} = require('react-redux');
 const {selectFeatures} = require('../actions/featuregrid');
-const {query, featureClose} = require('../actions/wfsquery');
+const {query, featureClose, queryDockSize} = require('../actions/wfsquery');
 const {changeMapView} = require('../actions/map');
+const {toggleControl} = require('../actions/controls');
 
 module.exports = {
     FeatureGridPlugin: connect((state) => ({
@@ -29,13 +30,16 @@ 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.query.dockSize
     }),
     {
         selectFeatures,
         changeMapView,
         onQuery: query,
-        onClose: featureClose
+        onClose: featureClose,
+        onToggleDrawer: toggleControl.bind(null, 'drawer', null),
+        setDockSize: queryDockSize
     })(require('../components/data/featuregrid/DockedFeatureGrid')),
     reducers: {highlight: require('../reducers/featuregrid')}
 };
diff --git a/web/client/plugins/QueryPanel.jsx b/web/client/plugins/QueryPanel.jsx
@@ -106,7 +106,8 @@ const SmartQueryForm = connect((state) => {
         queryToolbarActions: bindActionCreators({
             onQuery: createQuery,
             onReset: reset,
-            onChangeDrawingStatus: changeDrawingStatus
+            onChangeDrawingStatus: changeDrawingStatus,
+            onToggleDrawer: toggleControl.bind(null, 'drawer', null)
         }, dispatch)
     };
 })(QueryBuilder);

diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx
@@ -14,7 +14,7 @@ const {changeLayerProperties, changeGroupProperties, toggleNode,
        sortNode, showSettings, hideSettings, updateSettings, updateNode, removeNode} = require('../actions/layers');
 const {getLayerCapabilities} = require('../actions/layerCapabilities');
 const {zoomToExtent} = require('../actions/map');
-
+const {toggleControl} = require('../actions/controls');
 const {groupsSelector} = require('../selectors/layers');
 
 const LayersUtils = require('../utils/LayersUtils');
@@ -116,7 +116,8 @@ const SmartQueryForm = connect((state) => {
         queryToolbarActions: bindActionCreators({
             onQuery: createQuery,
             onReset: reset,
-            onChangeDrawingStatus: changeDrawingStatus
+            onChangeDrawingStatus: changeDrawingStatus,
+            onToggleDrawer: toggleControl.bind(null, 'drawer', null)
         }, dispatch)
     };
 })(QueryBuilder);

diff --git a/web/client/reducers/query.js b/web/client/reducers/query.js
@@ -16,7 +16,8 @@ const {
     QUERY_RESULT,
     QUERY_ERROR,
     RESET_QUERY,
-    FEATURE_CLOSE
+    FEATURE_CLOSE,
+    QUERY_DOCK_SIZE
 } = require('../actions/wfsquery');
 
 const {QUERY_FORM_RESET} = require('../actions/queryform');
@@ -73,7 +74,8 @@ const initialState = {
     featureTypes: {},
     data: {},
     result: null,
-    resultError: null
+    resultError: null,
+    dockSize: 0.35
 };
 
 function query(state = initialState, action) {
@@ -148,6 +150,11 @@ function query(state = initialState, action) {
                 open: false
             });
         }
+        case QUERY_DOCK_SIZE: {
+            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": "Back to search",
             "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": "Back to search",
             "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",