Minor fixes to result panel (#1381)

* Minor fixes to result panel * Reload records on search click (now 2 clicks are needed) * Improved style of the panel * fixed tools panel
geosolutions-it · Jan 11, 2017 · 1d0506e · 1d0506e
1 parent 9b3b6f5
commit 1d0506e
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 20 deletions.
diff --git a/web/client/components/data/featuregrid/DockedFeatureGrid.jsx b/web/client/components/data/featuregrid/DockedFeatureGrid.jsx
@@ -25,6 +25,7 @@ require("./featuregrid.css");
 
 const DockedFeatureGrid = React.createClass({
     propTypes: {
+        isNew: React.PropTypes.bool,
         open: React.PropTypes.bool,
         detailOpen: React.PropTypes.bool,
         expanded: React.PropTypes.bool,
@@ -68,7 +69,7 @@ const DockedFeatureGrid = React.createClass({
         messages: React.PropTypes.object
     },
     getInitialState() {
-        return {};
+        return {searchN: 0};
     },
     getDefaultProps() {
         return {
@@ -122,10 +123,13 @@ const DockedFeatureGrid = React.createClass({
         }, false);
     },
     componentWillUpdate(nextProps) {
+        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)) {
             this.dataSource = this.getDataSource(nextProps.dataSourceOptions);
         }
-        if (!nextProps.loadingGrid && this.featureLoaded && nextProps.features !== this.props.features) {
+        if (!nextProps.loadingGrid && (this.featureLoaded && nextProps.features !== this.props.features)) {
             let rowsThisPage = nextProps.features || [];
             if (rowsThisPage) {
                 this.featureLoaded.successCallback(rowsThisPage, nextProps.totalFeatures);
@@ -265,6 +269,7 @@ const DockedFeatureGrid = React.createClass({
                                 height: "100%"
                                 }}>
                             <FeatureGrid
+                                key={"search-results-" + (this.state && this.state.searchN)}
                                 className="featureGrid"
                                 changeMapView={this.props.changeMapView}
                                 srs="EPSG:4326"
@@ -273,7 +278,7 @@ const DockedFeatureGrid = React.createClass({
                                 style={{
                                     flex: "1 0 auto",
                                     width: "100%",
-                                    height: "calc(100% - 32px )"
+                                    height: "calc(100% - 300px )"
                                 }}
                                 maxZoom={16}
                                 selectFeatures={this.selectFeatures}

diff --git a/web/client/components/data/featuregrid/FeatureGrid.jsx b/web/client/components/data/featuregrid/FeatureGrid.jsx
@@ -9,15 +9,13 @@ const React = require('react');
 const {AgGridReact, reactCellRendererFactory} = require('ag-grid-react');
 const {keys, isEqual, isFunction} = require('lodash');
 const ZoomToRenderer = require("./ZoomToFeatureRenderer");
-const {ButtonToolbar} = require('react-bootstrap');
+const {ButtonToolbar, Button, Glyphicon} = require('react-bootstrap');
 const assign = require("object-assign");
 
 const mapUtils = require('../../../utils/MapUtils');
 const configUtils = require('../../../utils/ConfigUtils');
 const CoordinateUtils = require('../../../utils/CoordinatesUtils');
 
-const img = require('./images/magnifier.png');
-
 const I18N = require('../../I18N/I18N');
 const LocaleUtils = require('../../../utils/LocaleUtils');
 
@@ -50,7 +48,8 @@ const FeatureGrid = React.createClass({
         selectAll: React.PropTypes.func,
         selectAllActive: React.PropTypes.bool,
         zoomToFeatureAction: React.PropTypes.func,
-        exportAction: React.PropTypes.func
+        exportAction: React.PropTypes.func,
+        tools: React.PropTypes.array
     },
     contextTypes: {
         messages: React.PropTypes.object
@@ -80,6 +79,7 @@ const FeatureGrid = React.createClass({
             zoom: null,
             enableZoomToFeature: true,
             srs: "EPSG:4326",
+            tools: [],
             toolbar: {
                 zoom: true,
                 exporter: true,
@@ -132,21 +132,20 @@ const FeatureGrid = React.createClass({
         let isPagingOrVirtual = (this.props.virtualPaging || this.props.paging);
 
         let tools = [];
-
         if (this.props.toolbar.zoom) {
-            tools.push(<button key="zoom" onClick={this.zoomToFeatures}><img src={img} width={16}/></button>);
+            tools.push(<Button key="zoom" onClick={this.zoomToFeatures}><Glyphicon glyph="search"/></Button>);
         }
 
         if (this.props.toolbar.exporter) {
-            tools.push(<button key="exporter" onClick={() => this.props.exportAction(this.api)}>
-                <I18N.Message msgId={"featuregrid.export"}/>
-            </button>);
+            tools.push(<Button key="exporter" onClick={() => this.props.exportAction(this.api)}>
+                <Glyphicon glyph="download"/><I18N.Message msgId={"featuregrid.export"}/>
+            </Button>);
         }
 
         if (this.props.toolbar.toolPanel) {
-            tools.push(<button key="toolPanel" onClick={() => { this.api.showToolPanel(!this.api.isToolPanelShowing()); }}>
-                <I18N.Message msgId={"featuregrid.tools"}/>
-            </button>);
+            tools.push(<Button key="toolPanel" onClick={() => { this.api.showToolPanel(!this.api.isToolPanelShowing()); }}>
+                <Glyphicon glyph="cog"/><I18N.Message msgId={"featuregrid.tools"}/>
+            </Button>);
         }
 
         if (this.props.toolbar.selectAll) {
@@ -161,7 +160,7 @@ const FeatureGrid = React.createClass({
             }else {
                 allSelected = !(this.props.select.length < nOfFeatures);
             }
-            tools.push(<button key="allrowsselection" onClick={() => {
+            tools.push(<Button key="allrowsselection" onClick={() => {
                 if (this.props.selectAll) {
                     if (!allSelected && this.api) {
                         this.api.deselectAll();
@@ -170,15 +169,15 @@ const FeatureGrid = React.createClass({
                 } else {
                     this.selectAllRows(!allSelected);
                 }
-            }}>
+            }}><Glyphicon glyph="check"/>
                 {
                     (!allSelected) ? (
                         <I18N.Message msgId={"featuregrid.selectall"}/>
                     ) : (
                         <I18N.Message msgId={"featuregrid.deselectall"}/>
                     )
                 }
-            </button>);
+            </Button>);
         }
 
         return (
@@ -216,8 +215,7 @@ const FeatureGrid = React.createClass({
                         {...this.props.agGridOptions}
                     />
                 </div>
-
-                <ButtonToolbar style={{marginTop: "5px", marginLeft: "0px", flex: "none"}} bsSize="sm">
+                <ButtonToolbar className="featuregrid-tools" style={{marginTop: "5px", marginLeft: "0px", flex: "none"}} bsSize="sm">
                     {tools.map((tool) => tool)}
                 </ButtonToolbar>
             </div>);

diff --git a/web/client/components/data/featuregrid/featuregrid.css b/web/client/components/data/featuregrid/featuregrid.css
@@ -3,3 +3,17 @@
     color: white;
     font-family: Raleway;
 }
+.ag-fresh .ag-paging-button {
+    color: #078aa3;
+    background-color: #ffffff;
+    border: #078aa3 1px solid;
+    padding: 5px;
+}
+.ag-fresh .ag-paging-page-summary-panel {
+    color: #078aa3;
+}
+.featuregrid-tools {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
diff --git a/web/client/plugins/FeatureGrid.jsx b/web/client/plugins/FeatureGrid.jsx
@@ -27,6 +27,7 @@ module.exports = {
                 field: attr.attribute
             })),
         query: state.query && state.query.queryObj,
+        isNew: state.query && state.query.isNew,
         totalFeatures: state.query && state.query.result && state.query.result.totalFeatures
     }),
     {

diff --git a/web/client/reducers/query.js b/web/client/reducers/query.js
@@ -103,12 +103,14 @@ function query(state = initialState, action) {
         }
         case QUERY_CREATE: {
             return assign({}, state, {
+                isNew: true,
                 searchUrl: action.searchUrl,
                 filterObj: action.filterObj
             });
         }
         case QUERY_RESULT: {
             return assign({}, state, {
+                isNew: false,
                 result: action.result,
                 searchUrl: action.searchUrl,
                 filterObj: action.filterObj,
@@ -117,12 +119,14 @@ function query(state = initialState, action) {
         }
         case QUERY_ERROR: {
             return assign({}, state, {
+                isNew: false,
                 result: null,
                 resultError: action.error
             });
         }
         case QUERY_FORM_RESET:
             return assign({}, state, {
+                isNew: false,
                 result: null,
                 filterObj: null,
                 searchUrl: null