Skip to content

Commit

Permalink
results panel layout refactor (#1361)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gnafu @offtherailz
Gnafu authored and offtherailz committed Dec 22, 2016
1 parent 9b926c1 commit 03eb0c5
Show file tree
Hide file tree
Showing 8 changed files with 103 additions and 107 deletions.
113 changes: 46 additions & 67 deletions web/client/components/data/featuregrid/DockedFeatureGrid.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const {connect} = require('react-redux');
const {isObject} = require('lodash');
const Dock = require('react-dock');

const {Modal, Panel, Grid, Row, Col, Button} = require('react-bootstrap');
const {Modal} = require('react-bootstrap');

const FilterUtils = require('../../../utils/FilterUtils');

Expand All @@ -15,11 +15,12 @@ const FeatureGrid = connect((state) => {
};
}, {})(require('./FeatureGrid'));

const LocaleUtils = require('../../../utils/LocaleUtils');
const I18N = require('../../../components/I18N/I18N');
const Spinner = require('react-spinkit');
const assign = require('object-assign');

require("./featuregrid.css");

const DockedFeatureGrid = React.createClass({
propTypes: {
open: React.PropTypes.bool,
Expand Down Expand Up @@ -60,7 +61,8 @@ const DockedFeatureGrid = React.createClass({
cleanError: React.PropTypes.func,
selectAllToggle: React.PropTypes.func,
templateProfile: React.PropTypes.string,
zoomToFeatureAction: React.PropTypes.func
zoomToFeatureAction: React.PropTypes.func,
style: React.PropTypes.object
},
contextTypes: {
messages: React.PropTypes.object
Expand Down Expand Up @@ -129,10 +131,6 @@ const DockedFeatureGrid = React.createClass({
}, false);
},
componentWillUpdate(nextProps) {
if (nextProps.initWidth !== this.props.initWidth) {
let height = getWindowSize().maxHeight - 108;
this.setState({width: `calc( ${this.props.initWidth} - 30px)`, height});
}
if (!nextProps.loadingGrid && nextProps.pagination && (nextProps.dataSourceOptions !== this.props.dataSourceOptions)) {
this.dataSource = this.getDataSource(nextProps.dataSourceOptions);
}
Expand Down Expand Up @@ -193,24 +191,6 @@ const DockedFeatureGrid = React.createClass({
overflowSize: 20
};
},
renderHeader() {
const header = LocaleUtils.getMessageById(this.context.messages, this.props.header);

return (
<div className="handle_featuregrid">
<Grid className="featuregrid-title" fluid={true}>
<Row>
<Col xs={11} sm={11} md={11} lg={11}>
<span>{header}</span>
</Col>
<Col xs={1} sm={1} md={1} lg={1}>
<button onClick={() => this.onGridClose(false)} className="close grid-close"><span>X</span></button>
</Col>
</Row>
</Grid>
</div>
);
},
renderLoadingException(loadingError, msg) {
let exception;
if (isObject(loadingError)) {
Expand Down Expand Up @@ -269,54 +249,53 @@ const DockedFeatureGrid = React.createClass({
position={"bottom" /* 'left', 'top', 'right', 'bottom' */}
size={this.state.size}
dimMode={"none" /*'transparent', 'none', 'opaque'*/}
isVisible={this.state.isVisible || true}
isVisible={true}
onVisibleChange={this.handleVisibleChange}
onSizeChange={this.handleSizeChange}
fluid={true}
dimStyle={{ background: 'rgba(0, 0, 100, 0.2)' }}
dockStyle={null}
dockHiddenStyle={null} >
<Panel className="featuregrid-container sidepanel-featuregrid" collapsible expanded={this.props.expanded} header={this.renderHeader()} bsStyle="primary">
<div style={this.props.loadingGrid ? {display: "none"} : {height: this.state.height, width: this.state.width}}>
<Button
style={{marginBottom: "12px"}}
onClick={() => this.onGridClose(true)}><span>Torna al pannello di ricerca</span>
</Button>
<h5>Risultati - {this.props.totalFeatures !== -1 ? this.props.totalFeatures : (<I18N.Message msgId={"sira.noQueryResult"}/>)}</h5>

<FeatureGrid
changeMapView={this.props.changeMapView}
srs="EPSG:4326"
map={this.props.map}
columnDefs={cols}
style={{height: this.state.height - 120, width: this.state.width}}
maxZoom={16}
selectFeatures={this.selectFeatures}
selectAll={this.selectAll}
paging={this.props.pagination}
zoom={15}
enableZoomToFeature={this.props.withMap}
agGridOptions={{enableServerSideSorting: true, suppressMultiSort: true}}
zoomToFeatureAction={this.props.zoomToFeatureAction}
toolbar={{
zoom: this.props.withMap,
exporter: true,
toolPanel: true,
selectAll: true
}}
{...gridConf}
/>
{this.props.loadingGrid ?
<div style={{height: "300px", width: this.state.width}}>
<div style={{
position: "relative",
width: "60px",
top: "50%",
left: "45%"}}>
<Spinner style={{width: "60px"}} spinnerName="three-bounce" noFadeIn/>
</div>
{this.props.loadingGrid ? (<div style={{height: "300px", width: this.state.width}}>
<div style={{
position: "relative",
width: "60px",
top: "50%",
left: "45%"}}>
<Spinner style={{width: "60px"}} spinnerName="three-bounce" noFadeIn/>
</div>
</div>) : null}
</Panel>
</div> :
<div style={{
height: "100%"
}}>
<FeatureGrid
className="featureGrid"
changeMapView={this.props.changeMapView}
srs="EPSG:4326"
map={this.props.map}
columnDefs={cols}
style={{
flex: "1 0 auto",
width: "100%",
height: "calc(100% - 32px )"
}}
maxZoom={16}
selectFeatures={this.selectFeatures}
selectAll={this.selectAll}
paging={this.props.pagination}
zoom={15}
enableZoomToFeature={this.props.withMap}
agGridOptions={{enableServerSideSorting: true, suppressMultiSort: true}}
zoomToFeatureAction={this.props.zoomToFeatureAction}
toolbar={{
zoom: this.props.withMap,
exporter: true,
toolPanel: true,
selectAll: true
}}
{...gridConf}
/>
</div>}
</Dock>
);
}
Expand Down
75 changes: 41 additions & 34 deletions web/client/components/data/featuregrid/FeatureGrid.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,10 @@ const FeatureGrid = React.createClass({
columnDefs: null,
changeMapView: () => {},
selectFeatures: () => {},
style: {height: "400px", width: "800px"},
style: {
height: "400px",
width: "800px"
},
virtualPaging: false,
paging: false,
overflowSize: 10,
Expand Down Expand Up @@ -179,40 +182,44 @@ const FeatureGrid = React.createClass({
}

return (
<div>
<div fluid={false} style={this.props.style} className="ag-fresh">
<AgGridReact
virtualPaging={this.props.virtualPaging}
columnDefs={this.setColumnDefs()}
rowData={(!isPagingOrVirtual) ? this.props.features : null}
datasource={(isPagingOrVirtual) ? this.setDataSource() : null}
enableServerSideSorting={(isPagingOrVirtual)}
// or provide props the old way with no binding
onSelectionChanged={this.selectFeatures}
rowSelection="multiple"
enableColResize={true}
enableSorting={(!isPagingOrVirtual)}
toolPanelSuppressValues={true}
toolPanelSuppressGroups={true}
showToolPanel={false}
rowDeselection={true}
localeText={{
page: LocaleUtils.getMessageById(this.context.messages, "featuregrid.pagination.page") || 'Page',
of: LocaleUtils.getMessageById(this.context.messages, "featuregrid.pagination.of") || 'of',
to: LocaleUtils.getMessageById(this.context.messages, "featuregrid.pagination.to") || 'to',
more: LocaleUtils.getMessageById(this.context.messages, "featuregrid.pagination.more") || 'more',
next: '>',
last: '>|',
first: '|<',
previous: '<'}}
onGridReady={this.onGridReady}
{...this.props.agGridOptions}
/>
</div>
<div style={{
display: "flex",
flexDirection: "column",
height: "100%"
}}>
<div fluid={false} style={this.props.style} className="ag-fresh">
<AgGridReact
virtualPaging={this.props.virtualPaging}
columnDefs={this.setColumnDefs()}
rowData={(!isPagingOrVirtual) ? this.props.features : null}
datasource={(isPagingOrVirtual) ? this.setDataSource() : null}
enableServerSideSorting={(isPagingOrVirtual)}
// or provide props the old way with no binding
onSelectionChanged={this.selectFeatures}
rowSelection="multiple"
enableColResize={true}
enableSorting={(!isPagingOrVirtual)}
toolPanelSuppressValues={true}
toolPanelSuppressGroups={true}
showToolPanel={false}
rowDeselection={true}
localeText={{
page: LocaleUtils.getMessageById(this.context.messages, "featuregrid.pagination.page") || 'Page',
of: LocaleUtils.getMessageById(this.context.messages, "featuregrid.pagination.of") || 'of',
to: LocaleUtils.getMessageById(this.context.messages, "featuregrid.pagination.to") || 'to',
more: LocaleUtils.getMessageById(this.context.messages, "featuregrid.pagination.more") || 'more',
next: '>',
last: '>|',
first: '|<',
previous: '<'}}
onGridReady={this.onGridReady}
{...this.props.agGridOptions}
/>
</div>

<ButtonToolbar style={{marginTop: "5px", marginLeft: "0px"}}bsSize="sm">
{tools.map((tool) => tool)}
</ButtonToolbar>
<ButtonToolbar style={{marginTop: "5px", marginLeft: "0px", flex: "none"}} bsSize="sm">
{tools.map((tool) => tool)}
</ButtonToolbar>
</div>);
},
// If props.columnDefs is missing try to generate from features, add zoomTo as first column
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/data/featuregrid/ZoomToFeatureRenderer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ZoomToFeatureRenderer = React.createClass({
params: React.PropTypes.object
},
render() {
const geometry = this.props.params.data.geometry;
const geometry = this.props.params && this.props.params.data && this.props.params.data.geometry;
return geometry && geometry.coordinates ? (
<img src={img} width={16}/>
) : null;
Expand Down
5 changes: 5 additions & 0 deletions web/client/components/data/featuregrid/featuregrid.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.featuregrid .ag-header-cell, .ag-header-row{
background-color: #078AA3;
color: white;
font-family: Raleway;
}
1 change: 1 addition & 0 deletions web/client/components/data/query/queryform.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@
overflow-x: hidden;
overflow-y: auto;
border: none;
min-width: 700px;
}

.queryFormToolbar{
Expand Down
2 changes: 1 addition & 1 deletion web/client/examples/queryform/components/Results.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const JSONViewer = require('../../../components/data/identify/viewers/JSONViewer
const {Panel} = require('react-bootstrap');
const Draggable = require('react-draggable');

const {resetQuery} = require('../actions/wfsquery');
const {resetQuery} = require('../actions/query');

const Results = React.createClass({
propTypes: {
Expand Down
6 changes: 5 additions & 1 deletion web/client/plugins/FeatureGrid.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* LICENSE file in the root directory of this source tree.
*/
const {connect} = require('react-redux');
const {updateHighlighted} = require('../actions/highlight');

module.exports = {
FeatureGridPlugin: connect((state) => ({
Expand All @@ -21,5 +22,8 @@ module.exports = {
field: attr.attribute
})),
totalFeatures: state.query && state.query.result && state.query.result.totalFeatures
}))(require('../components/data/featuregrid/DockedFeatureGrid'))
}),
{
selectFeatures: updateHighlighted
})(require('../components/data/featuregrid/DockedFeatureGrid'))
};
6 changes: 3 additions & 3 deletions web/client/reducers/query.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const extractData = (feature) => {
const initialState = {
featureTypes: {},
data: {},
result: '',
result: null,
resultError: null
};

Expand Down Expand Up @@ -108,14 +108,14 @@ function query(state = initialState, action) {
}
case QUERY_ERROR: {
return assign({}, state, {
result: '',
result: null,
resultError: action.error
});
}
case QUERY_FORM_RESET:
case RESET_QUERY: {
return assign({}, state, {
result: '',
result: null,
resultError: null
});
}
Expand Down

0 comments on commit 03eb0c5

Please sign in to comment.