diff --git a/src/client/components/DatasetSelector.js b/src/client/components/DatasetSelector.js new file mode 100644 index 0000000000000000000000000000000000000000..84d0b2143f1aeca717abb8b8628e23ba332f981b --- /dev/null +++ b/src/client/components/DatasetSelector.js @@ -0,0 +1,70 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import ListItemText from '@material-ui/core/ListItemText'; +import Checkbox from '@material-ui/core/Checkbox'; +import IconButton from '@material-ui/core/IconButton'; +import CommentIcon from '@material-ui/icons/Comment'; +import ListSubheader from '@material-ui/core/ListSubheader'; + +const styles = theme => ({ + root: { + width: '100%', + //maxWidth: 360, + backgroundColor: theme.palette.background.default, + }, + listItem: { + paddingTop: 0, + paddingBottom: 0, + } +}); + +const DatasetSelector = props => { + + const { classes } = props; + //onClick={props.updateDatasets(dataset.id)} + + const handleOnChange = (value) => { + props.updateDatasets(value); + }; + + return ( + <div className={classes.root}> + <List subheader={<ListSubheader>Select data sources</ListSubheader>}> + {props.datasets.map(dataset => ( + <ListItem + key={dataset.id} + role={undefined} + dense + button + onClick={handleOnChange} + className={classes.listItem} + > + <Checkbox + checked={dataset.selected} + tabIndex={-1} + disableRipple + /> + <ListItemText primary={dataset.id} /> + <ListItemSecondaryAction> + <IconButton aria-label="Comments"> + <CommentIcon /> + </IconButton> + </ListItemSecondaryAction> + </ListItem> + ))} + </List> + </div> + ); +}; + +DatasetSelector.propTypes = { + classes: PropTypes.object.isRequired, + datasets: PropTypes.array.isRequired, + updateDatasets: PropTypes.func.isRequired +}; + +export default withStyles(styles)(DatasetSelector); diff --git a/src/client/components/IntegrationAutosuggest.js b/src/client/components/IntegrationAutosuggest.js index df39ad530dc76a6cdd3c5dbe3f2aa619c0cb4d99..8bf12a2c303225db643e0f4cded294c1f7874401 100644 --- a/src/client/components/IntegrationAutosuggest.js +++ b/src/client/components/IntegrationAutosuggest.js @@ -52,8 +52,8 @@ const styles = theme => ({ marginTop: theme.spacing.unit * 2, // paddingLeft: theme.spacing.unit * 15, // paddingRight: theme.spacing.unit * 15, - marginLeft: 'auto', - marginRight: 'auto', + marginLeft: 24, + //marginRight: 'auto', width: 280, }, suggestionsContainerOpen: { @@ -119,7 +119,7 @@ const IntegrationAutosuggest = (props) => { props.clearResults(); props.fetchResults(); } - } + }; // const handleOnBlur = (event, { highlightedSuggestion }) => { // // console.log(event); diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js index 4d2b90da9cf0efeac5cb5056a4b6c41be80cfa5e..a6c3c3d3079fb3194a409f30d8c9554cb4d3a826 100644 --- a/src/client/containers/MapApp.js +++ b/src/client/containers/MapApp.js @@ -17,11 +17,9 @@ import Tab from '@material-ui/core/Tab'; import IntegrationAutosuggest from '../components/IntegrationAutosuggest'; import LeafletMap from '../components/map/LeafletMap'; import Message from '../components/Message'; -//import ResultTable from '../components/result-table/ResultTable'; import VirtualizedTable from '../components/VirtualizedTable'; +import DatasetSelector from '../components/DatasetSelector'; import Immutable from 'immutable'; - - import { updateQuery, updateDatasets, @@ -148,7 +146,6 @@ let MapApp = (props) => { textColor="secondary" > <Tab label="Places" /> - <Tab label="Maps" disabled /> <Tab label="Options" disabled /> </Tabs> <IconButton onClick={props.closeDrawer}> @@ -156,6 +153,11 @@ let MapApp = (props) => { </IconButton> </div> <Divider /> + <DatasetSelector + datasets={props.search.datasets} + updateDatasets={props.updateDatasets} + /> + <Divider /> <IntegrationAutosuggest search={props.search} updateQuery={props.updateQuery} @@ -264,6 +266,7 @@ MapApp.propTypes = { openDrawer: PropTypes.func.isRequired, closeDrawer: PropTypes.func.isRequired, updateQuery: PropTypes.func.isRequired, + updateDatasets: PropTypes.func.isRequired, fetchSuggestions: PropTypes.func.isRequired, clearSuggestions: PropTypes.func.isRequired, fetchResults: PropTypes.func.isRequired, diff --git a/src/client/epics/index.js b/src/client/epics/index.js index f715b5d738ff67db7f32ee4da383e06c18329c7d..863375e1ce5e21fe3277b6a7a5890cef1dc5813d 100644 --- a/src/client/epics/index.js +++ b/src/client/epics/index.js @@ -28,7 +28,7 @@ const getSuggestionsEpic = (action$, store) => { if (query.length < 3) { return []; } - const dsParams = _.map(datasets, ds => `dataset=${ds}`).join('&'); + const dsParams = _.map(datasets, ds => `dataset=${ds.id}`).join('&'); const requestUrl = `${searchUrl}?q=${query}&${dsParams}`; return ajax.getJSON(requestUrl) .map(response => updateSuggestions({ suggestions: response })) @@ -48,7 +48,7 @@ const getResultsEpic = (action$, store) => { if (query.length < 3) { return []; } - const dsParams = _.map(datasets, ds => `dataset=${ds}`).join('&'); + const dsParams = _.map(datasets, ds => `dataset=${ds.id}`).join('&'); const requestUrl = `${searchUrl}?q=${query}&${dsParams}`; return ajax.getJSON(requestUrl) .map(response => updateResults({ results: response })) diff --git a/src/client/reducers/search.js b/src/client/reducers/search.js index c15f4e3712a318f510021b420df41f6d76d200ff..2262b4b55f54025219437ca8bdad604e947ac66c 100644 --- a/src/client/reducers/search.js +++ b/src/client/reducers/search.js @@ -13,7 +13,12 @@ import results from './results'; export const INITIAL_STATE = { query: '', - datasets: ['warsa_karelian_places', 'warsa_municipalities', 'kotus', 'pnr'], + datasets: [ + { id: 'kotus', selected: true}, + { id: 'pnr', selected: true}, + { id: 'warsa_karelian_places', selected: true}, + { id: 'warsa_municipalities', selected: true}, + ], suggestions: [], suggestionsQuery: '', fetchingSuggestions: false, @@ -27,7 +32,15 @@ const search = (state = INITIAL_STATE, action) => { case UPDATE_QUERY: return { ...state, query: action.query || '' }; case UPDATE_DATASETS: - return { ...state, datasets: action.datasets || [] }; + return { + ...state, + datasets: [ + { id: 'kotus', selected: true}, + { id: 'pnr', selected: true}, + { id: 'warsa_karelian_places', selected: false}, + { id: 'warsa_municipalities', selected: true}, + ], + }; case FETCH_SUGGESTIONS: return { ...state, fetchingSuggestions: true }; case FETCH_RESULTS: