Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Julien Jerphanion
Rex Dri
Commits
a42accc9
Commit
a42accc9
authored
Sep 07, 2018
by
Florent Chehab
Browse files
Filter merged with map and search
parent
4264ef36
Changes
6
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
>
<
Filter
Icon
/>
<
/ListItemIcon
>
<
ListItemText
primary
=
"
Filtrer
"
/>
<
/ListItem
>
<
/NavLink
>
<
NavLink
to
=
{
'
/app/
university/undefined
'
}
>
<
ListItem
button
>
<
ListItemIcon
>
<
LocationCity
Icon
/>
<
/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
>
<
BarChart
Icon
/>
<
/ListItemIcon
>
<
ListItemText
primary
=
"
???
"
/>
<
/ListItem
>
<
/div
>
<
ListItem
button
>
<
ListItemIcon
>
<
Person
Icon
/>
<
/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
>
);
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment