Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #1398 Improve query panel behaviour #1413

Merged
merged 3 commits into from
Feb 7, 2017
Merged

Fix #1398 Improve query panel behaviour #1413

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
031c1ad
Improve query panel
allyoucanmap Jan 31, 2017
abcd66e
Changed logic of 'back to search'
allyoucanmap Jan 31, 2017
5d2fe4b
Moved and merged the actions of the panels
allyoucanmap Feb 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion web/client/actions/wfsquery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move this to another file? actions/featuregrid?


const axios = require('../libs/ajax');
const {toggleControl, setControlProperty} = require('./controls');
Expand Down Expand Up @@ -74,6 +75,13 @@ function queryError(error) {
};
}

function queryDockSize(dockSize) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move this to another file? actions/featuregrid?

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) => {
Expand Down Expand Up @@ -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
};
35 changes: 26 additions & 9 deletions web/client/components/data/featuregrid/DockedFeatureGrid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 || [],
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down Expand Up @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be configurable using a prop

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be configurable as a prop

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should they be also action and reducer or only props of the class? (minSize and maxSize)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

props of the component and of the plugin (to be customizable in localConfig cfg entry). Pass them from the FeatureGrid Plugin down to this component.

const maxSize = 0.85;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be configurable, 1 by default

if (size >= maxSize) {
this.props.setDockSize(maxSize);
} else if (size <= minSize) {
this.props.setDockSize(minSize);
} else {
this.props.setDockSize(size);
}
}
});

Expand Down
3 changes: 2 additions & 1 deletion web/client/components/data/query/QueryBuilder.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,8 @@ const QueryBuilder = React.createClass({
queryToolbarActions: {
onQuery: () => {},
onReset: () => {},
onChangeDrawingStatus: () => {}
onChangeDrawingStatus: () => {},
onToggleDrawer: () => {}
}
};
},
Expand Down
4 changes: 3 additions & 1 deletion web/client/components/data/query/QueryToolbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ const QueryToolbar = React.createClass({
actions: {
onQuery: () => {},
onReset: () => {},
onChangeDrawingStatus: () => {}
onChangeDrawingStatus: () => {},
onToggleDrawer: () => {}
}
};
},
Expand Down Expand Up @@ -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() {
Expand Down
24 changes: 19 additions & 5 deletions web/client/plugins/DrawerMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ const {toggleControl, setControlProperty} = require('../actions/controls');

const {changeMapStyle} = require('../actions/map');

const {featureClose} = require('../actions/wfsquery');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are putting querybuilder / featuregrid logic inside a generic container: it's not the right place.
We already have knowledge of querybuilder in the TOC. I don't want to mix stuff too much.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe the right place to trigger this action is inside the toggleMenu actionCreator, using thunk to dispatch both actions.


const {Button, Glyphicon, Panel} = require('react-bootstrap');

const Section = require('./drawer/Section');
Expand Down Expand Up @@ -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,
Expand All @@ -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() {
Expand All @@ -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: {}
};
10 changes: 7 additions & 3 deletions web/client/plugins/FeatureGrid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => ({
Expand All @@ -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')}
};
3 changes: 2 additions & 1 deletion web/client/plugins/QueryPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
5 changes: 3 additions & 2 deletions web/client/plugins/TOC.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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);
Expand Down
11 changes: 9 additions & 2 deletions web/client/reducers/query.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ const {
QUERY_RESULT,
QUERY_ERROR,
RESET_QUERY,
FEATURE_CLOSE
FEATURE_CLOSE,
QUERY_DOCK_SIZE
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reducers/featuregrid.js?

} = require('../actions/wfsquery');

const {QUERY_FORM_RESET} = require('../actions/queryform');
Expand Down Expand Up @@ -73,7 +74,8 @@ const initialState = {
featureTypes: {},
data: {},
result: null,
resultError: null
resultError: null,
dockSize: 0.35
};

function query(state = initialState, action) {
Expand Down Expand Up @@ -148,6 +150,11 @@ function query(state = initialState, action) {
open: false
});
}
case QUERY_DOCK_SIZE: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reducers/featuregrid.js?

return assign({}, state, {
dockSize: action.dockSize
});
}
default:
return state;
}
Expand Down
1 change: 1 addition & 0 deletions web/client/translations/data.de-DE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -691,6 +691,7 @@
"export": "Export",
"selectall": "Alle auswählen",
"deselectall": "Auswahl aufheben",
"backtosearch": "Back to search",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zurück zur Suche (?)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe the right place to trigger this action is inside the toggleMenu actionCreator, using thunk to dispatch both actions.

"pagination": {
"page": "Seite",
"of": "von",
Expand Down
1 change: 1 addition & 0 deletions web/client/translations/data.en-US
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -691,6 +691,7 @@
"export": "Export",
"selectall": "Select All",
"deselectall": "Clear Selection",
"backtosearch": "Back to search",
"pagination": {
"page": "Page",
"of": "of",
Expand Down
1 change: 1 addition & 0 deletions web/client/translations/data.fr-FR
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -693,6 +693,7 @@
"export": "Exporter",
"selectall": "Tout sélectionner",
"deselectall": "Tout désélectionner",
"backtosearch": "Back to search",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Retour à la recherche

"pagination": {
"page": "Page",
"of": "de",
Expand Down
1 change: 1 addition & 0 deletions web/client/translations/data.it-IT
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -691,6 +691,7 @@
"export": "Esporta risultati",
"selectall": "Seleziona tutti",
"deselectall": "Deseleziona tutti",
"backtosearch": "Ritorna alla ricerca",
"pagination": {
"page": "Pagina",
"of": "di",
Expand Down