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
23 changes: 14 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 @@ -54,8 +54,11 @@ const DockedFeatureGrid = React.createClass({
selectAllToggle: React.PropTypes.func,
zoomToFeatureAction: React.PropTypes.func,
onClose: React.PropTypes.func,
onToggleDrawer: React.PropTypes.func,
openDrawer: React.PropTypes.func,
Copy link
Contributor

Choose a reason for hiding this comment

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

onBackToSearch, to replace both openDrawer and enableDrawer: the featuregrid is not aware of drawer existance, and should not be. Each component is independent. We can glue things together in the plugins.

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 we include also onClose in onBackToSearch?

function closeResponse() {
    return (dispatch, getState) => {
        dispatch(featureClose()); // old onClose
        if (getState().controls && getState().controls.drawer) {
            dispatch(setControlProperty('drawer', 'enabled', true)); // old openDrawer
            dispatch(setControlProperty('drawer', 'disabled', false)); // old enableDrawer
        }
    };
}

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, I think it's better

enableDrawer: React.PropTypes.func,
dockSize: React.PropTypes.number,
minDockSize: React.PropTypes.number,
maxDockSize: React.PropTypes.number,
setDockSize: React.PropTypes.func
},
contextTypes: {
Expand Down Expand Up @@ -93,8 +96,11 @@ const DockedFeatureGrid = React.createClass({
onQuery: () => {},
cleanError: () => {},
selectAllToggle: () => {},
onToggleDrawer: () => {},
openDrawer: () => {},
enableDrawer: () => {},
dockSize: 0.35,
minDockSize: 0.1,
maxDockSize: 1.0,
setDockSize: () => {}
};
},
Expand Down Expand Up @@ -299,16 +305,15 @@ const DockedFeatureGrid = React.createClass({
this.props.selectFeatures(features);
},
backToSearch() {
this.props.onToggleDrawer();
this.props.openDrawer();
Copy link
Contributor

Choose a reason for hiding this comment

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

this.onBackToSearch()

this.props.enableDrawer();
this.props.onClose();
},
limitDockHeight(size) {
const minSize = 0.25;
const maxSize = 0.85;
if (size >= maxSize) {
this.props.setDockSize(maxSize);
} else if (size <= minSize) {
this.props.setDockSize(minSize);
if (size >= this.props.maxDockSize) {
this.props.setDockSize(this.props.maxDockSize);
} else if (size <= this.props.minDockSize) {
this.props.setDockSize(this.props.minDockSize);
} 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 @@ -95,7 +95,8 @@ const QueryBuilder = React.createClass({
onQuery: () => {},
onReset: () => {},
onChangeDrawingStatus: () => {},
onToggleDrawer: () => {}
closeDrawer: () => {},
disableDrawer: () => {}
Copy link
Member

Choose a reason for hiding this comment

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

This functions be called into the onQuery action, if needed (using thunk)

}
};
},
Expand Down
6 changes: 4 additions & 2 deletions web/client/components/data/query/QueryToolbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@ const QueryToolbar = React.createClass({
onQuery: () => {},
onReset: () => {},
onChangeDrawingStatus: () => {},
onToggleDrawer: () => {}
closeDrawer: () => {},
disableDrawer: () => {}
}
};
},
Expand Down Expand Up @@ -104,7 +105,8 @@ const QueryToolbar = React.createClass({
sortOptions: this.props.sortOptions,
hits: this.props.hits
};
Copy link
Member

Choose a reason for hiding this comment

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

same here, there should be an thunk that opens the bottom table and closes the left menu.
Better if it happens when the search result arrives.

this.props.actions.onToggleDrawer();
this.props.actions.closeDrawer();
Copy link
Contributor

Choose a reason for hiding this comment

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

closeDrawer and disableDrawer should be handled in onQuery. QueryToolbar does not know it's included in a drawer

this.props.actions.disableDrawer();
this.props.actions.onQuery(this.props.searchUrl, filterObj, this.props.params);
},
reset() {
Expand Down
4 changes: 3 additions & 1 deletion web/client/localConfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,9 @@
},{
"name": "FeatureGrid",
"cfg": {
"pagination": true
"pagination": true,
"minDockSize": 0.1,
"maxDockSize":1.0
}
}, {
"name": "TOC",
Expand Down
21 changes: 5 additions & 16 deletions web/client/plugins/DrawerMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ const {toggleControl, setControlProperty} = require('../actions/controls');

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

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

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

const Section = require('./drawer/Section');
Expand Down Expand Up @@ -47,8 +45,7 @@ const DrawerMenu = React.createClass({
singleSection: React.PropTypes.bool,
buttonClassName: React.PropTypes.string,
menuButtonStyle: React.PropTypes.object,
featureClose: React.PropTypes.func,
queryIsOpen: React.PropTypes.bool
disabled: React.PropTypes.bool
},
contextTypes: {
messages: React.PropTypes.object,
Expand All @@ -64,8 +61,7 @@ const DrawerMenu = React.createClass({
menuOptions: {},
singleSection: false,
buttonClassName: "drawer-menu-button",
featureClose: () => {},
queryIsOpen: false
disabled: false
};
},
renderItems() {
Expand All @@ -92,28 +88,21 @@ 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.closeAll}><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.props.toggleMenu} disabled={this.props.disabled}><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,
queryIsOpen: state.query.open
disabled: state.controls && state.controls.drawer && state.controls.drawer.disabled
}), {
toggleMenu: toggleControl.bind(null, 'drawer', null),
featureClose
toggleMenu: toggleControl.bind(null, 'drawer', null)
})(DrawerMenu),
reducers: {}
};
7 changes: 4 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 @@ -9,7 +9,7 @@ const {connect} = require('react-redux');
const {selectFeatures} = require('../actions/featuregrid');
const {query, featureClose, queryDockSize} = require('../actions/wfsquery');
const {changeMapView} = require('../actions/map');
const {toggleControl} = require('../actions/controls');
const {setControlProperty} = require('../actions/controls');

module.exports = {
FeatureGridPlugin: connect((state) => ({
Expand All @@ -31,14 +31,15 @@ module.exports = {
query: state.query && state.query.queryObj,
isNew: state.query && state.query.isNew,
totalFeatures: state.query && state.query.result && state.query.result.totalFeatures,
dockSize: state.query.dockSize
dockSize: state.query && state.query.dockSize
}),
{
selectFeatures,
changeMapView,
onQuery: query,
onClose: featureClose,
onToggleDrawer: toggleControl.bind(null, 'drawer', null),
openDrawer: setControlProperty.bind(null, 'drawer', 'enabled', true),
enableDrawer: setControlProperty.bind(null, 'drawer', 'disabled', false),
setDockSize: queryDockSize
})(require('../components/data/featuregrid/DockedFeatureGrid')),
reducers: {highlight: require('../reducers/featuregrid')}
Expand Down
3 changes: 1 addition & 2 deletions web/client/plugins/QueryPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,7 @@ const SmartQueryForm = connect((state) => {
queryToolbarActions: bindActionCreators({
onQuery: createQuery,
onReset: reset,
onChangeDrawingStatus: changeDrawingStatus,
onToggleDrawer: toggleControl.bind(null, 'drawer', null)
onChangeDrawingStatus: changeDrawingStatus
}, 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 {setControlProperty} = require('../actions/controls');
const {groupsSelector} = require('../selectors/layers');

const LayersUtils = require('../utils/LayersUtils');
Expand Down Expand Up @@ -117,7 +117,8 @@ const SmartQueryForm = connect((state) => {
onQuery: createQuery,
onReset: reset,
onChangeDrawingStatus: changeDrawingStatus,
onToggleDrawer: toggleControl.bind(null, 'drawer', null)
closeDrawer: setControlProperty.bind(null, 'drawer', 'enabled', false),
Copy link
Member

Choose a reason for hiding this comment

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

for the reasons explained above of course these functions should not be passed here.

disableDrawer: setControlProperty.bind(null, 'drawer', 'disabled', true)
}, dispatch)
};
})(QueryBuilder);
Expand Down
2 changes: 1 addition & 1 deletion web/client/translations/data.de-DE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -691,7 +691,7 @@
"export": "Export",
"selectall": "Alle auswählen",
"deselectall": "Auswahl aufheben",
"backtosearch": "Back to search",
"backtosearch": "Zurück zur suche",
"pagination": {
"page": "Seite",
"of": "von",
Expand Down
2 changes: 1 addition & 1 deletion web/client/translations/data.fr-FR
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -693,7 +693,7 @@
"export": "Exporter",
"selectall": "Tout sélectionner",
"deselectall": "Tout désélectionner",
"backtosearch": "Back to search",
"backtosearch": "Retour à la recherche",
"pagination": {
"page": "Page",
"of": "de",
Expand Down