Commit a42accc9 authored by Florent Chehab's avatar Florent Chehab
Browse files

Filter merged with map and search

parent 4264ef36
...@@ -14,7 +14,7 @@ import Chip from '@material-ui/core/Chip'; ...@@ -14,7 +14,7 @@ import Chip from '@material-ui/core/Chip';
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@material-ui/core/Avatar';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import SchoolIcon from '@material-ui/icons/School'; import SchoolIcon from '@material-ui/icons/School';
import { mainListItems, secondaryListItems } from './template/listItems'; import { mainListItems, secondaryListItems, thirdListItems } from './template/listItems';
import { connect } from "react-redux"; import { connect } from "react-redux";
import MyComponent from './MyComponent' import MyComponent from './MyComponent'
...@@ -34,7 +34,6 @@ import { ...@@ -34,7 +34,6 @@ import {
import PageMap from './pages/PageMap'; import PageMap from './pages/PageMap';
import PageHome from './pages/PageHome'; import PageHome from './pages/PageHome';
import PageUniversity from './pages/PageUniversity'; import PageUniversity from './pages/PageUniversity';
import PageFilter from './pages/PageFilter';
import PageSearch from './pages/PageSearch'; import PageSearch from './pages/PageSearch';
import PageSettings from './pages/PageSettings'; import PageSettings from './pages/PageSettings';
...@@ -161,6 +160,8 @@ class App extends MyComponent { ...@@ -161,6 +160,8 @@ class App extends MyComponent {
<List>{mainListItems}</List> <List>{mainListItems}</List>
<Divider /> <Divider />
<List>{secondaryListItems}</List> <List>{secondaryListItems}</List>
<Divider />
<List>{thirdListItems}</List>
</Drawer> </Drawer>
<main className={classNames(classes.content, classes.noPaddingTop)}> <main className={classNames(classes.content, classes.noPaddingTop)}>
...@@ -168,7 +169,6 @@ class App extends MyComponent { ...@@ -168,7 +169,6 @@ class App extends MyComponent {
<Route path="/app/" exact={true} component={PageHome} /> <Route path="/app/" exact={true} component={PageHome} />
<Route path="/app/search" component={PageSearch} /> <Route path="/app/search" component={PageSearch} />
<Route path="/app/map" component={PageMap} /> <Route path="/app/map" component={PageMap} />
<Route path="/app/filter" component={PageFilter} />
<Route path="/app/settings" component={PageSettings} /> <Route path="/app/settings" component={PageSettings} />
<Route <Route
exact exact
......
...@@ -5,6 +5,13 @@ import MyComponent from '../MyComponent' ...@@ -5,6 +5,13 @@ import MyComponent from '../MyComponent'
import { connect } from "react-redux"; import { connect } from "react-redux";
import _ from 'underscore'; import _ from 'underscore';
import { saveSelectedUniversities, saveFilterConfig } from '../../actions/filter'; import { saveSelectedUniversities, saveFilterConfig } from '../../actions/filter';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import { import {
universitiesFetchData, universitiesFetchData,
...@@ -13,25 +20,24 @@ import { ...@@ -13,25 +20,24 @@ import {
countriesFetchData countriesFetchData
} from '../../generated/actions'; } from '../../generated/actions';
const styles = theme => ({
root: {
width: '100%',
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
});
class Filter extends MyComponent { class Filter extends MyComponent {
saveContriesFilterConfig(state) { saveContriesFilterConfig(state) {
this.props.saveConfig({ contriesFilter: state }) this.props.saveConfig({ contriesFilter: state })
} }
// getUnivFromCampus(campus) {
// const { universities } = this.props;
// return universities[campus.univ]
// }
// getCountryFromUniversity(univ) {
// const { countries } = this.props;
// return countries[univ.country]
// }
// getCountryFromCampus(campus) {
// const univ = this.getUnivFromCampus(campus);
// return this.getCountryFromUniversity(univ);
// }
getCountriesWhereThereAreUniversities() { getCountriesWhereThereAreUniversities() {
const { mainCampuses } = this.getAllFetchedData(); const { mainCampuses } = this.getAllFetchedData();
...@@ -62,14 +68,21 @@ class Filter extends MyComponent { ...@@ -62,14 +68,21 @@ class Filter extends MyComponent {
myRender() { myRender() {
const options = _.map(this.getCountriesWhereThereAreUniversities(), const options = _.map(this.getCountriesWhereThereAreUniversities(),
(c) => { return { id: c.iso_alpha2_code, label: c.name } }) (c) => { return { id: c.iso_alpha2_code, label: c.name } })
const { classes } = this.props;
return ( return (
<DownshiftMultiple <ExpansionPanel>
options={options} <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
onChange={(selection) => this.updateSelectedUniversities(selection)} <Typography className={classes.heading}>Appliquer des filtres</Typography>
onComponentUnmount={(state) => this.saveContriesFilterConfig(state)} </ExpansionPanelSummary>
config={this.props.contriesFilterConfig} <ExpansionPanelDetails>
/> <DownshiftMultiple
options={options}
onChange={(selection) => this.updateSelectedUniversities(selection)}
onComponentUnmount={(state) => this.saveContriesFilterConfig(state)}
config={this.props.contriesFilterConfig}
/>
</ExpansionPanelDetails>
</ExpansionPanel>
); );
} }
} }
...@@ -100,4 +113,4 @@ const mapDispatchToProps = (dispatch) => { ...@@ -100,4 +113,4 @@ const mapDispatchToProps = (dispatch) => {
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Filter); export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Filter));
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Filter from '../filter/Filter';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
myPaper: {
padding: 16
}
});
class PageFilter extends React.Component {
render() {
const { classes } = this.props;
return (
<Paper className={classes.myPaper}>
<Grid container spacing={24}>
<Grid item xs={11}>
<Typography variant="display1" gutterBottom>
Filtrer
</Typography>
</Grid>
{/* <Grid item xs={1}>
<UnivMapReloadButton />
</Grid> */}
</Grid>
<Filter />
</Paper>
);
}
}
PageFilter.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(PageFilter);
...@@ -6,36 +6,38 @@ import Typography from '@material-ui/core/Typography'; ...@@ -6,36 +6,38 @@ import Typography from '@material-ui/core/Typography';
import UnivMap from '../map/UnivMap'; import UnivMap from '../map/UnivMap';
import UnivMapReloadButton from '../map/UnivMapReloadButton'; import UnivMapReloadButton from '../map/UnivMapReloadButton';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Filter from '../filter/Filter';
const styles = theme => ({ const styles = theme => ({
myPaper: { myPaper: {
padding: 16 padding: 16
} }
}); });
class PageMap extends React.Component { class PageMap extends React.Component {
render() { render() {
const { classes } = this.props; const { classes } = this.props;
return ( return (
<Paper className={classes.myPaper}> <Paper className={classes.myPaper}>
<Grid container spacing={24}> <Grid container spacing={24}>
<Grid item xs={11}> <Grid item xs={11}>
<Typography variant="display1" gutterBottom> <Typography variant="display1" gutterBottom>
Exploration Cartographique Exploration Cartographique
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={1}> <Grid item xs={1}>
<UnivMapReloadButton /> <UnivMapReloadButton />
</Grid> </Grid>
</Grid> </Grid>
<UnivMap /> <Filter />
</Paper> <UnivMap />
); </Paper>
} );
}
} }
PageMap.propTypes = { PageMap.propTypes = {
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
}; };
export default withStyles(styles)(PageMap); export default withStyles(styles)(PageMap);
...@@ -5,6 +5,7 @@ import Grid from '@material-ui/core/Grid'; ...@@ -5,6 +5,7 @@ import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Search from '../search/Search'; import Search from '../search/Search';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Filter from '../filter/Filter';
const styles = theme => ({ const styles = theme => ({
myPaper: { myPaper: {
...@@ -23,10 +24,8 @@ class PageSearch extends React.Component { ...@@ -23,10 +24,8 @@ class PageSearch extends React.Component {
Recherche d'une université Recherche d'une université
</Typography> </Typography>
</Grid> </Grid>
{/* <Grid item xs={1}>
<UnivMapReloadButton />
</Grid> */}
</Grid> </Grid>
<Filter />
<Search /> <Search />
</Paper> </Paper>
); );
......
...@@ -2,11 +2,9 @@ import React from 'react'; ...@@ -2,11 +2,9 @@ import React from 'react';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@material-ui/core/ListItemText';
import ListSubheader from '@material-ui/core/ListSubheader';
import MapIcon from '@material-ui/icons/Map'; import MapIcon from '@material-ui/icons/Map';
import LocationCityIcon from '@material-ui/icons/LocationCity'; import LocationCityIcon from '@material-ui/icons/LocationCity';
import PeopleIcon from '@material-ui/icons/People'; import PersonIcon from '@material-ui/icons/Person';
import BarChartIcon from '@material-ui/icons/BarChart';
import HomeIcon from '@material-ui/icons/Home'; import HomeIcon from '@material-ui/icons/Home';
import SearchIcon from '@material-ui/icons/Search'; import SearchIcon from '@material-ui/icons/Search';
import FilterIcon from '@material-ui/icons/FilterList'; import FilterIcon from '@material-ui/icons/FilterList';
...@@ -15,98 +13,75 @@ import AssignmentIcon from '@material-ui/icons/Assignment'; ...@@ -15,98 +13,75 @@ import AssignmentIcon from '@material-ui/icons/Assignment';
import { NavLink } from 'react-router-dom' import { NavLink } from 'react-router-dom'
export const mainListItems = ( export const mainListItems = (
<div> <div>
<NavLink to={'/app/'}> <NavLink to={'/app/'}>
{/* TODO add styling */} {/* TODO add styling */}
<ListItem button> <ListItem button>
<ListItemIcon> <ListItemIcon>
<HomeIcon /> <HomeIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Accueil" /> <ListItemText primary="Accueil" />
</ListItem> </ListItem>
</NavLink> </NavLink>
<NavLink to={'/app/search/'}> <NavLink to={'/app/search/'}>
<ListItem button> <ListItem button>
<ListItemIcon> <ListItemIcon>
<SearchIcon /> <SearchIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Rechercher" /> <ListItemText primary="Rechercher" />
</ListItem> </ListItem>
</NavLink> </NavLink>
<NavLink to={'/app/map/'}> <NavLink to={'/app/map/'}>
<ListItem button> <ListItem button>
<ListItemIcon> <ListItemIcon>
<MapIcon /> <MapIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Carte" /> <ListItemText primary="Carte" />
</ListItem> </ListItem>
</NavLink> </NavLink>
<NavLink to={'/app/filter/'}> <NavLink to={'/app/university/undefined'}>
<ListItem button> <ListItem button>
<ListItemIcon> <ListItemIcon>
<FilterIcon /> <LocationCityIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Filtrer" /> <ListItemText primary="Université" />
</ListItem> </ListItem>
</NavLink> </NavLink>
<NavLink to={'/app/university/undefined'}> </div>
<ListItem button> );
<ListItemIcon>
<LocationCityIcon />
</ListItemIcon>
<ListItemText primary="Université" />
</ListItem>
</NavLink>
<NavLink to={'/app/settings/'}>
<ListItem button>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary="Paramètres" />
</ListItem>
</NavLink>
<ListItem button> export const secondaryListItems = (
<ListItemIcon> <div>
<PeopleIcon /> <ListItem button>
</ListItemIcon> <ListItemIcon>
<ListItemText primary="????" /> <AssignmentIcon />
</ListItem> </ListItemIcon>
<ListItemText primary="Mes listes" />
</ListItem>
<ListItem button> <ListItem button>
<ListItemIcon> <ListItemIcon>
<BarChartIcon /> <PersonIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="???" /> <ListItemText primary="Informations" />
</ListItem> </ListItem>
</div> </div>
); );
export const secondaryListItems = (
<div> export const thirdListItems = (
<ListSubheader inset>Mes listes</ListSubheader> <div>
<ListItem button> <NavLink to={'/app/settings/'}>
<ListItemIcon> <ListItem button>
<AssignmentIcon /> <ListItemIcon>
</ListItemIcon> <SettingsIcon />
<ListItemText primary="Liste 1" /> </ListItemIcon>
</ListItem> <ListItemText primary="Paramètres" />
<ListItem button> </ListItem>
<ListItemIcon> </NavLink>
<AssignmentIcon /> </div>
</ListItemIcon>
<ListItemText primary="Liste 2" />
</ListItem>
<ListItem button>
<ListItemIcon>
<AssignmentIcon />
</ListItemIcon>
<ListItemText primary="Liste 3" />
</ListItem>
</div>
); );
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment