Fix #1320. First Result Panel implementation (#1383)

- Disable select all (not needed and not working) - Adjusted style for tool panel - Add panel close functionality - other minor fixes
geosolutions-it · Jan 13, 2017 · 4702c33 · 4702c33
1 parent 589b4b1
commit 4702c33
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/web/client/actions/wfsquery.js b/web/client/actions/wfsquery.js
@@ -10,6 +10,7 @@ const FEATURE_TYPE_LOADED = 'FEATURE_TYPE_LOADED';
 const FEATURE_LOADED = 'FEATURE_LOADED';
 const FEATURE_TYPE_ERROR = 'FEATURE_TYPE_ERROR';
 const FEATURE_ERROR = 'FEATURE_ERROR';
+const FEATURE_CLOSE = 'FEATURE_CLOSE';
 const QUERY_CREATE = 'QUERY_CREATE';
 const QUERY_RESULT = 'QUERY_RESULT';
 const QUERY_ERROR = 'QUERY_ERROR';
@@ -156,13 +157,19 @@ function toggleQueryPanel(url, name) {
         dispatch(setControlProperty('drawer', 'width', getState().controls.queryPanel.enabled ? 700 : 300));
     };
 }
+function featureClose() {
+    return {
+        type: FEATURE_CLOSE
+    };
+}
 
 module.exports = {
     FEATURE_TYPE_SELECTED,
     FEATURE_TYPE_LOADED,
     FEATURE_LOADED,
     FEATURE_TYPE_ERROR,
     FEATURE_ERROR,
+    FEATURE_CLOSE,
     QUERY_CREATE,
     QUERY_RESULT,
     QUERY_ERROR,
@@ -172,6 +179,7 @@ module.exports = {
     loadFeature,
     createQuery,
     query,
+    featureClose,
     resetQuery,
     toggleQueryPanel
 };
diff --git a/web/client/components/data/featuregrid/DockedFeatureGrid.jsx b/web/client/components/data/featuregrid/DockedFeatureGrid.jsx
@@ -3,7 +3,7 @@ const {connect} = require('react-redux');
 const {isObject} = require('lodash');
 const Dock = require('react-dock');
 
-const {Modal} = require('react-bootstrap');
+const {Modal, Button, Glyphicon} = require('react-bootstrap');
 
 const FilterUtils = require('../../../utils/FilterUtils');
 
@@ -63,6 +63,7 @@ const DockedFeatureGrid = React.createClass({
         selectAllToggle: React.PropTypes.func,
         templateProfile: React.PropTypes.string,
         zoomToFeatureAction: React.PropTypes.func,
+        onClose: React.PropTypes.func,
         style: React.PropTypes.object
     },
     contextTypes: {
@@ -73,7 +74,7 @@ const DockedFeatureGrid = React.createClass({
     },
     getDefaultProps() {
         return {
-            open: true,
+            open: false,
             detailOpen: true,
             loadingGrid: false,
             loadingGridError: null,
@@ -99,6 +100,7 @@ const DockedFeatureGrid = React.createClass({
             withMap: true,
             templateProfile: 'default',
             onDetail: () => {},
+            onClose: () => {},
             onShowDetail: () => {},
             changeMapView: () => {},
             // loadFeatureGridConfig: () => {},
@@ -115,6 +117,7 @@ const DockedFeatureGrid = React.createClass({
         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) => {
             if ( !prev && prop !== 'map' && prop !== 'columnsDef' && this.props[prop] !== nextProps[prop]) {
                 return true;
@@ -123,7 +126,7 @@ const DockedFeatureGrid = React.createClass({
         }, false);
     },
     componentWillUpdate(nextProps) {
-        if (!nextProps.loadingGrid && this.props.isNew && !nextProps.isNew) {
+        if (!nextProps.loadingGrid && !this.props.isNew && nextProps.isNew) {
             this.setState({searchN: this.state.searchN + 1});
         }
         if (!nextProps.loadingGrid && nextProps.pagination && (nextProps.dataSourceOptions !== this.props.dataSourceOptions)) {
@@ -135,7 +138,7 @@ const DockedFeatureGrid = React.createClass({
                 this.featureLoaded.successCallback(rowsThisPage, nextProps.totalFeatures);
             }
         }
-        if ((this.props.columnsDef && !nextProps.columnsDef) || (this.props.filterObj && !nextProps.filterObj)) {
+        if ((this.props.open && !nextProps.open) || (this.props.columnsDef && !nextProps.columnsDef) || (this.props.filterObj && !nextProps.filterObj)) {
             this.props.selectFeatures([]);
             this.props.selectAllToggle();
         }
@@ -243,7 +246,7 @@ const DockedFeatureGrid = React.createClass({
 
         let gridConf = this.props.pagination ? {dataSource: this.getDataSource(this.props.dataSourceOptions), features: []} : {features: this.props.features};
 
-        if (this.props.filterObj && cols) {
+        if (this.props.open && this.props.filterObj && cols) {
             return (
                 <Dock
                     position={"bottom" /* 'left', 'top', 'right', 'bottom' */}
@@ -269,6 +272,7 @@ const DockedFeatureGrid = React.createClass({
                                 height: "100%"
                                 }}>
                             <FeatureGrid
+                                tools={<Button onClick={this.props.onClose} ><Glyphicon glyph="1-close" /><I18N.Message msgId="close"/></Button>}
                                 key={"search-results-" + (this.state && this.state.searchN)}
                                 className="featureGrid"
                                 changeMapView={this.props.changeMapView}
@@ -291,7 +295,7 @@ const DockedFeatureGrid = React.createClass({
                                     zoom: this.props.withMap,
                                     exporter: true,
                                     toolPanel: true,
-                                    selectAll: true
+                                    selectAll: false
                                 }}
                                 {...gridConf}
                                 />

diff --git a/web/client/components/data/featuregrid/featuregrid.css b/web/client/components/data/featuregrid/featuregrid.css
@@ -1,8 +1,11 @@
-.ag-fresh .ag-header{
+.ag-fresh .ag-header, .ag-fresh .ag-tool-panel-container {
     background: #078AA3;
     color: white;
     font-family: Raleway;
 }
+.ag-fresh .ag-tool-panel-container .ag-list-selection{
+    color: black;
+}
 .ag-fresh .ag-paging-button {
     color: #078aa3;
     background-color: #ffffff;

diff --git a/web/client/plugins/FeatureGrid.jsx b/web/client/plugins/FeatureGrid.jsx
@@ -7,11 +7,12 @@
  */
 const {connect} = require('react-redux');
 const {selectFeatures} = require('../actions/featuregrid');
-const {query} = require('../actions/wfsquery');
+const {query, featureClose} = require('../actions/wfsquery');
 const {changeMapView} = require('../actions/map');
 
 module.exports = {
     FeatureGridPlugin: connect((state) => ({
+        open: state.query && state.query.open,
         features: state.query && state.query.result && state.query.result.features,
         filterObj: state.query && state.query.filterObj,
         searchUrl: state.query && state.query.searchUrl,
@@ -33,7 +34,8 @@ module.exports = {
     {
         selectFeatures,
         changeMapView,
-        onQuery: query
+        onQuery: query,
+        onClose: featureClose
     })(require('../components/data/featuregrid/DockedFeatureGrid')),
     reducers: {highlight: require('../reducers/featuregrid')}
 };
diff --git a/web/client/reducers/query.js b/web/client/reducers/query.js
@@ -15,7 +15,8 @@ const {
     QUERY_CREATE,
     QUERY_RESULT,
     QUERY_ERROR,
-    RESET_QUERY
+    RESET_QUERY,
+    FEATURE_CLOSE
 } = require('../actions/wfsquery');
 
 const {QUERY_FORM_RESET} = require('../actions/queryform');
@@ -103,6 +104,7 @@ function query(state = initialState, action) {
         }
         case QUERY_CREATE: {
             return assign({}, state, {
+                open: true,
                 isNew: true,
                 searchUrl: action.searchUrl,
                 filterObj: action.filterObj
@@ -126,6 +128,7 @@ function query(state = initialState, action) {
         }
         case QUERY_FORM_RESET:
             return assign({}, state, {
+                open: false,
                 isNew: false,
                 result: null,
                 filterObj: null,
@@ -137,6 +140,11 @@ function query(state = initialState, action) {
                 resultError: null
             });
         }
+        case FEATURE_CLOSE: {
+            return assign({}, state, {
+                open: false
+            });
+        }
         default:
             return state;
     }