Skip to content
GitLab
Commit a42accc9 authored by Florent Chehab's avatar Florent Chehab
Browse files

Filter merged with map and search

parent 4264ef36
Hide whitespace changes
Inline Side-by-side
frontend/src/components/App.js
View file @ a42accc9
......@@ -14,7 +14,7 @@ import Chip from '@material-ui/core/Chip';
import Avatar from '@material-ui/core/Avatar';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
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 MyComponent from './MyComponent'
......@@ -34,7 +34,6 @@ import {
import PageMap from './pages/PageMap';
import PageHome from './pages/PageHome';
import PageUniversity from './pages/PageUniversity';
import PageFilter from './pages/PageFilter';
import PageSearch from './pages/PageSearch';
import PageSettings from './pages/PageSettings';
......@@ -161,6 +160,8 @@ class App extends MyComponent {
<List>{mainListItems}</List>
<Divider />
<List>{secondaryListItems}</List>
<Divider />
<List>{thirdListItems}</List>
</Drawer>
<main className={classNames(classes.content, classes.noPaddingTop)}>
......@@ -168,7 +169,6 @@ class App extends MyComponent {
<Route path="/app/" exact={true} component={PageHome} />
<Route path="/app/search" component={PageSearch} />
<Route path="/app/map" component={PageMap} />
<Route path="/app/filter" component={PageFilter} />
<Route path="/app/settings" component={PageSettings} />
<Route
exact
......
frontend/src/components/filter/Filter.js
View file @ a42accc9
......@@ -5,6 +5,13 @@ import MyComponent from '../MyComponent'
import { connect } from "react-redux";
import _ from 'underscore';
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 {
universitiesFetchData,
......@@ -13,25 +20,24 @@ import {
countriesFetchData
} from '../../generated/actions';
const styles = theme => ({
root: {
width: '100%',
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
});
class Filter extends MyComponent {
saveContriesFilterConfig(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() {
const { mainCampuses } = this.getAllFetchedData();
......@@ -62,14 +68,21 @@ class Filter extends MyComponent {
myRender() {
const options = _.map(this.getCountriesWhereThereAreUniversities(),
(c) => { return { id: c.iso_alpha2_code, label: c.name } })
const { classes } = this.props;
return (
<DownshiftMultiple
options={options}
onChange={(selection) => this.updateSelectedUniversities(selection)}
onComponentUnmount={(state) => this.saveContriesFilterConfig(state)}
config={this.props.contriesFilterConfig}
/>
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>Appliquer des filtres</Typography>
</ExpansionPanelSummary>
<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) => {
};
export default connect(mapStateToProps, mapDispatchToProps)(Filter);
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Filter));
frontend/src/components/pages/PageFilter.js deleted 100644 → 0
View file @ 4264ef36
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);
frontend/src/components/pages/PageMap.js
View file @ a42accc9
......@@ -6,36 +6,38 @@ import Typography from '@material-ui/core/Typography';
import UnivMap from '../map/UnivMap';
import UnivMapReloadButton from '../map/UnivMapReloadButton';
import Paper from '@material-ui/core/Paper';
import Filter from '../filter/Filter';
const styles = theme => ({
myPaper: {
padding: 16
}
myPaper: {
padding: 16
}
});
class PageMap 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>
Exploration Cartographique
</Typography>
</Grid>
<Grid item xs={1}>
<UnivMapReloadButton />
</Grid>
</Grid>
<UnivMap />
</Paper>
);
}
render() {
const { classes } = this.props;
return (
<Paper className={classes.myPaper}>
<Grid container spacing={24}>
<Grid item xs={11}>
<Typography variant="display1" gutterBottom>
Exploration Cartographique
</Typography>
</Grid>
<Grid item xs={1}>
<UnivMapReloadButton />
</Grid>
</Grid>
<Filter />
<UnivMap />
</Paper>
);
}
}
PageMap.propTypes = {
classes: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(PageMap);
frontend/src/components/pages/PageSearch.js
View file @ a42accc9
......@@ -5,6 +5,7 @@ import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Search from '../search/Search';
import Paper from '@material-ui/core/Paper';
import Filter from '../filter/Filter';
const styles = theme => ({
myPaper: {
......@@ -23,10 +24,8 @@ class PageSearch extends React.Component {
Recherche d'une université
</Typography>
</Grid>
{/* <Grid item xs={1}>
<UnivMapReloadButton />
</Grid> */}
</Grid>
<Filter />
<Search />
</Paper>
);
......
frontend/src/components/template/listItems.js
View file @ a42accc9
......@@ -2,11 +2,9 @@ import React from 'react';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import ListSubheader from '@material-ui/core/ListSubheader';
import MapIcon from '@material-ui/icons/Map';
import LocationCityIcon from '@material-ui/icons/LocationCity';
import PeopleIcon from '@material-ui/icons/People';
import BarChartIcon from '@material-ui/icons/BarChart';
import PersonIcon from '@material-ui/icons/Person';
import HomeIcon from '@material-ui/icons/Home';
import SearchIcon from '@material-ui/icons/Search';
import FilterIcon from '@material-ui/icons/FilterList';
......@@ -15,98 +13,75 @@ import AssignmentIcon from '@material-ui/icons/Assignment';
import { NavLink } from 'react-router-dom'
export const mainListItems = (
<div>
<NavLink to={'/app/'}>
{/* TODO add styling */}
<ListItem button>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
<ListItemText primary="Accueil" />
</ListItem>
</NavLink>
<div>
<NavLink to={'/app/'}>
{/* TODO add styling */}
<ListItem button>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
<ListItemText primary="Accueil" />
</ListItem>
</NavLink>
<NavLink to={'/app/search/'}>
<ListItem button>
<ListItemIcon>
<SearchIcon />
</ListItemIcon>
<ListItemText primary="Rechercher" />
</ListItem>
</NavLink>
<NavLink to={'/app/search/'}>
<ListItem button>
<ListItemIcon>
<SearchIcon />
</ListItemIcon>
<ListItemText primary="Rechercher" />
</ListItem>
</NavLink>
<NavLink to={'/app/map/'}>
<ListItem button>
<ListItemIcon>
<MapIcon />
</ListItemIcon>
<ListItemText primary="Carte" />
</ListItem>
</NavLink>
<NavLink to={'/app/map/'}>
<ListItem button>
<ListItemIcon>
<MapIcon />
</ListItemIcon>
<ListItemText primary="Carte" />
</ListItem>
</NavLink>
<NavLink to={'/app/filter/'}>
<ListItem button>
<ListItemIcon>
<FilterIcon />
</ListItemIcon>
<ListItemText primary="Filtrer" />
</ListItem>
</NavLink>
<NavLink to={'/app/university/undefined'}>
<ListItem button>
<ListItemIcon>
<LocationCityIcon />
</ListItemIcon>
<ListItemText primary="Université" />
</ListItem>
</NavLink>
<NavLink to={'/app/university/undefined'}>
<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>
</div>
);
<ListItem button>
<ListItemIcon>
<PeopleIcon />
</ListItemIcon>
<ListItemText primary="????" />
</ListItem>
export const secondaryListItems = (
<div>
<ListItem button>
<ListItemIcon>
<AssignmentIcon />
</ListItemIcon>
<ListItemText primary="Mes listes" />
</ListItem>
<ListItem button>
<ListItemIcon>
<BarChartIcon />
</ListItemIcon>
<ListItemText primary="???" />
</ListItem>
</div>
<ListItem button>
<ListItemIcon>
<PersonIcon />
</ListItemIcon>
<ListItemText primary="Informations" />
</ListItem>
</div>
);
export const secondaryListItems = (
<div>
<ListSubheader inset>Mes listes</ListSubheader>
<ListItem button>
<ListItemIcon>
<AssignmentIcon />
</ListItemIcon>
<ListItemText primary="Liste 1" />
</ListItem>
<ListItem button>
<ListItemIcon>
<AssignmentIcon />
</ListItemIcon>
<ListItemText primary="Liste 2" />
</ListItem>
<ListItem button>
<ListItemIcon>
<AssignmentIcon />
</ListItemIcon>
<ListItemText primary="Liste 3" />
</ListItem>
</div>
export const thirdListItems = (
<div>
<NavLink to={'/app/settings/'}>
<ListItem button>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary="Paramètres" />
</ListItem>
</NavLink>
</div>
);
Supports Markdown
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