From 4702c3334207bb539c5e0e7208b27a9801b695ce Mon Sep 17 00:00:00 2001 From: Lorenzo Natali Date: Fri, 13 Jan 2017 14:06:39 +0100 Subject: [PATCH] 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 --- web/client/actions/wfsquery.js | 8 ++++++++ .../data/featuregrid/DockedFeatureGrid.jsx | 16 ++++++++++------ .../components/data/featuregrid/featuregrid.css | 5 ++++- web/client/plugins/FeatureGrid.jsx | 6 ++++-- web/client/reducers/query.js | 10 +++++++++- 5 files changed, 35 insertions(+), 10 deletions(-) diff --git a/web/client/actions/wfsquery.js b/web/client/actions/wfsquery.js index 43dbc01ca8..f79a56d649 100644 --- 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,6 +157,11 @@ 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, @@ -163,6 +169,7 @@ module.exports = { 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 index bb6d0fdf33..60c576e514 100644 --- 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 ( } 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 index c448d00e37..8abda7d31b 100644 --- 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 index 5ef42ecb11..3016376a02 100644 --- 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 index da5cecec7a..18ab40f77f 100644 --- 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; }