Skip to content
Snippets Groups Projects
Commit 8e3335cb authored by esikkala's avatar esikkala
Browse files

Add menu items for changing results view

parent b95ef029
No related branches found
No related tags found
No related merge requests found
This diff is collapsed.
......@@ -22,7 +22,7 @@
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-eslint": "^8.2.5",
"babel-jest": "^22.4.4",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
......@@ -34,10 +34,10 @@
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.19.1",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jest": "^21.17.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.9.1",
"eslint-plugin-react": "^7.10.0",
"eslint-watch": "^3.1.5",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.0.7",
......@@ -45,13 +45,13 @@
"jest-enzyme": "^6.0.2",
"react-test-renderer": "^16.4.1",
"style-loader": "^0.20.3",
"webpack": "^4.12.0",
"webpack": "^4.12.2",
"webpack-cli": "^2.1.5",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.3"
},
"dependencies": {
"@material-ui/core": "^1.2.1",
"@material-ui/core": "^1.3.0",
"@material-ui/icons": "^1.1.0",
"@material-ui/lab": "^1.0.0-alpha.5",
"autosuggest-highlight": "^3.1.1",
......@@ -63,7 +63,7 @@
"leaflet": "^1.3.1",
"leaflet.markercluster": "^1.3.0",
"lodash": "^4.17.10",
"mui-datatables": "^2.0.0-beta-8",
"mui-datatables": "^2.0.0-beta-9",
"node-fetch": "^2.1.2",
"react": "^16.4.1",
"react-alert-template-basic": "^1.0.0",
......@@ -79,7 +79,7 @@
"react-leaflet-markercluster": "^1.1.8",
"react-redux": "^5.0.7",
"react-redux-toastr": "^7.3.0",
"react-virtualized": "^9.19.1",
"react-virtualized": "^9.20.0",
"redux": "^4.0.0",
"redux-observable": "^0.18.0",
"superagent": "^3.8.3",
......
......@@ -13,6 +13,7 @@ export const UPDATE_RESULTS = 'UPDATE_RESULTS';
export const CLEAR_RESULTS = 'CLEAR_RESULTS';
export const CLEAR_ERROR = 'CLEAR_ERROR';
export const UPDATE_LANGUAGE = 'UPDATE_LANGUAGE';
export const UPDATE_RESULT_FORMAT = 'UPDATE_RESULT_FORMAT';
export const SET_MAP_READY = 'SET_MAP_READY';
export const GET_GEOJSON = 'GET_GEOJSON';
export const UPDATE_GEOJSON = 'UPDATE_GEOJSON';
......@@ -85,6 +86,11 @@ export const updateLanguage = (language) => ({
language
});
export const updateResultFormat = (resultFormat) => ({
type: UPDATE_RESULT_FORMAT,
resultFormat
});
export const setMapReady = () => ({
type: SET_MAP_READY,
});
......
......@@ -8,8 +8,6 @@ import SuggestionItem from './SuggestionItem';
import InputAdornment from '@material-ui/core/InputAdornment';
import CircularProgress from '@material-ui/core/CircularProgress';
import IconButton from '@material-ui/core/IconButton';
import SearchIcon from '@material-ui/icons/Search';
import MenuIcon from '@material-ui/icons/Menu';
import SearchButtons from './SearchButtons';
function renderInput(inputProps) {
......@@ -106,18 +104,6 @@ const IntegrationAutosuggest = (props) => {
}
};
const handleClickSearchButton = () => {
searchPlaces();
};
const handleClickOptionsButton = () => {
console.log('options')
};
const handleMouseDownButton = (event) => {
event.preventDefault();
};
const searchPlaces = () => {
if (props.search.query.length > 0) {
console.log('fetching results');
......@@ -165,7 +151,7 @@ const IntegrationAutosuggest = (props) => {
</IconButton>
</InputAdornment>;
} else {
adornment = <SearchButtons search={props.search} />;
adornment = <SearchButtons search={props.search} updateResultFormat={props.updateResultFormat} />;
}
return (
......@@ -207,7 +193,8 @@ IntegrationAutosuggest.propTypes = {
fetchSuggestions: PropTypes.func.isRequired,
clearSuggestions: PropTypes.func.isRequired,
fetchResults: PropTypes.func.isRequired,
clearResults: PropTypes.func.isRequired
clearResults: PropTypes.func.isRequired,
updateResultFormat: PropTypes.func.isRequired
};
export default withStyles(styles)(IntegrationAutosuggest);
......@@ -19,12 +19,23 @@ class SearchButtons extends React.Component {
handleClose = () => {
this.setState({ anchorEl: null });
};
handleClickSearchButton = () => {
console.log('places');
};
handleClickStats = () => {
this.handleClose();
this.props.updateResultFormat('stats');
}
handleClickTable = () => {
this.handleClose();
this.props.updateResultFormat('table');
}
handleMouseDownButton = (event) => {
event.preventDefault();
};
......@@ -61,14 +72,14 @@ class SearchButtons extends React.Component {
<CSVLink data={this.props.search.results}>Results as CSV</CSVLink>
</MenuItem>
<MenuItem
key='opt2'
onClick={this.handleClose}>
Option 2
key='stats'
onClick={this.handleClickStats}>
Results by place type
</MenuItem>
<MenuItem
key='otp3'
onClick={this.handleClose}>
Option 3
key='list'
onClick={this.handleClickTable}>
Results as a table
</MenuItem>
</Menu>
</InputAdornment>
......@@ -78,6 +89,7 @@ class SearchButtons extends React.Component {
SearchButtons.propTypes = {
search: PropTypes.object.isRequired,
updateResultFormat: PropTypes.func.isRequired
};
export default SearchButtons;
......@@ -31,7 +31,8 @@ import {
openDrawer,
closeDrawer,
setMapReady,
getGeoJSON
getGeoJSON,
updateResultFormat
} from '../actions';
const drawerWidth = 600;
......@@ -126,12 +127,20 @@ let MapApp = (props) => {
const { classes, error, theme, drawerIsOpen, mapReady } = props;
const anchor = 'left';
let resultList = [];
let resultsView = '';
if (props.search.results.length > 0) {
resultList = Immutable.List(props.search.results);
switch(props.resultFormat) {
case 'list':
resultsView = <VirtualizedTable list={Immutable.List(props.search.results)} />;
break;
case 'stats':
resultsView = <Pie data={props.search.results} />;
break;
default:
resultsView = <VirtualizedTable list={Immutable.List(props.search.results)} />;
}
}
const drawer = (
<Drawer
variant="persistent"
......@@ -171,14 +180,13 @@ let MapApp = (props) => {
clearSuggestions={props.clearSuggestions}
fetchResults={props.fetchResults}
clearResults={props.clearResults}
updateResultFormat={props.updateResultFormat}
/>
</div>
{props.search.results.length > 0 &&
<Pie data={props.search.results} />
}
{resultsView}
</Drawer>
);
//<VirtualizedTable list={resultList} />
//<
let before = null;
let after = null;
......@@ -248,7 +256,8 @@ const mapStateToProps = (state) => ({
mapReady: state.options.mapReady,
error: state.error,
geoJSON: state.map.geoJSON,
geoJSONKey: state.map.geoJSONKey
geoJSONKey: state.map.geoJSONKey,
resultFormat: state.options.resultFormat
});
const mapDispatchToProps = ({
......@@ -261,7 +270,8 @@ const mapDispatchToProps = ({
fetchResults,
clearResults,
setMapReady,
getGeoJSON
getGeoJSON,
updateResultFormat
});
MapApp.propTypes = {
......@@ -283,6 +293,8 @@ MapApp.propTypes = {
geoJSON: PropTypes.object.isRequired,
geoJSONKey: PropTypes.number,
getGeoJSON: PropTypes.func.isRequired,
updateResultFormat: PropTypes.func.isRequired,
resultFormat: PropTypes.string.isRequired
};
MapApp = connect(
......
import {
UPDATE_LANGUAGE,
UPDATE_RESULT_FORMAT,
OPEN_DRAWER,
CLOSE_DRAWER,
SET_MAP_READY
......@@ -7,9 +8,11 @@ import {
const DEFAULT_LANGUAGE = 'en';
const DEFAULT_DRAWER_IS_OPEN = false;
const DEFAULT_RESULT_FORMAT = 'table';
export const INITIAL_STATE = {
language: DEFAULT_LANGUAGE,
resultFormat: DEFAULT_RESULT_FORMAT,
drawerIsOpen: DEFAULT_DRAWER_IS_OPEN,
mapReady: false
};
......@@ -18,6 +21,8 @@ const options = (state = INITIAL_STATE, action) => {
switch (action.type) {
case UPDATE_LANGUAGE:
return { ...state, language: action.language || DEFAULT_LANGUAGE };
case UPDATE_RESULT_FORMAT:
return { ...state, resultFormat: action.resultFormat || DEFAULT_RESULT_FORMAT };
case OPEN_DRAWER:
return { ...state, drawerIsOpen: true };
case CLOSE_DRAWER:
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment