Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Rex Dri
Rex Dri
Commits
4a42eb71
Commit
4a42eb71
authored
Apr 13, 2019
by
Solene Aboud
Committed by
Florent Chehab
Apr 13, 2019
Browse files
feat(recommendation list): frontend WIP
parent
8c211bfb
Pipeline
#38348
passed with stages
in 3 minutes and 12 seconds
Changes
8
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/app/App.js
View file @
4a42eb71
...
...
@@ -35,6 +35,7 @@ import PageUniversity from "../pages/PageUniversity";
import
PageSearch
from
"
../pages/PageSearch
"
;
import
PageSettings
from
"
../pages/PageSettings
"
;
import
PageUser
from
"
../pages/PageUser
"
;
import
PageLists
from
"
../pages/PageLists
"
;
const
DRAWER_WIDTH
=
240
;
...
...
@@ -120,6 +121,7 @@ class App extends CustomComponentForAPI {
<
Route
path
=
"
/app/search
"
component
=
{
PageSearch
}
/
>
<
Route
path
=
"
/app/map
"
component
=
{
PageMap
}
/
>
<
Route
path
=
"
/app/settings
"
component
=
{
PageSettings
}
/
>
<
Route
path
=
"
/app/lists
"
component
=
{
PageLists
}
/
>
<
Route
exact
path
=
"
/app/university/
"
...
...
frontend/src/components/app/listItems.js
View file @
4a42eb71
...
...
@@ -58,12 +58,14 @@ export const mainListItems = (
export
const
secondaryListItems
=
(
<>
<
ListItem
button
>
<
ListItemIcon
>
<
AssignmentIcon
/>
<
/ListItemIcon
>
<
ListItemText
primary
=
"
Mes listes
"
/>
<
/ListItem
>
<
NavLink
to
=
{
"
/app/lists
"
}
style
=
{{
textDecoration
:
"
none
"
}}
>
<
ListItem
button
>
<
ListItemIcon
>
<
AssignmentIcon
/>
<
/ListItemIcon
>
<
ListItemText
primary
=
"
Mes listes
"
/>
<
/ListItem
>
<
/NavLink
>
{
/* eslint-disable-next-line no-undef */
}
<
NavLink
to
=
{
`/app/user/
${
__AppUserId
}
`
}
style
=
{{
textDecoration
:
"
none
"
}}
>
...
...
frontend/src/components/pages/PageLists.js
0 → 100644
View file @
4a42eb71
import
React
from
"
react
"
;
import
PropTypes
from
"
prop-types
"
;
import
compose
from
"
recompose/compose
"
;
import
{
connect
}
from
"
react-redux
"
;
import
withStyles
from
"
@material-ui/core/styles/withStyles
"
;
import
Paper
from
"
@material-ui/core/Paper
"
;
import
Typography
from
"
@material-ui/core/Typography
"
;
import
AddIcon
from
"
@material-ui/icons/Add
"
;
import
Fab
from
"
@material-ui/core/Fab
"
;
import
Markdown
from
"
../common/Markdown
"
;
import
CustomComponentForAPI
from
"
../common/CustomComponentForAPI
"
;
import
getActions
from
"
../../redux/api/getActions
"
;
import
Recommendation
from
"
../recommendation/Recommendation
"
;
const
source
=
"
Ici vous pourrez bientôt voir toutes vos listes d'universités
"
;
const
RECOMMENDATIONS
=
{
content
:
[
{
name
:
"
List Test 1
"
,
public
:
true
,
user
:
"
UserTest
"
,
descriptive
:
{
id
:
"
1
"
,
type
:
"
field
"
,
text
:
"
\n
**Ajouter** un descriptif
"
},
content
:
[
{
type
:
"
univ
"
,
id
:
"
66
"
,
name
:
"
EPFL
"
,
city
:
"
Lausanne
"
,
country
:
"
Suisse
"
,
comment
:
{
id
:
"
2
"
,
type
:
"
field
"
,
text
:
"
\n
Ajouter un commentaire
"
}
},
{
type
:
"
univ
"
,
id
:
"
33
"
,
name
:
"
Seoul National University Of Science And Technology Seoultech
"
,
city
:
"
Seoul
"
,
country
:
"
République de Corée
"
,
comment
:
{
id
:
"
1
"
,
type
:
"
comment
"
,
text
:
"
\n
Commentaire pour l'**université de Séoul**. Ça à l'air cool comme univ ! :)
"
}
}
]
},
{
name
:
"
List Test 2
"
,
public
:
false
,
user
:
"
me
"
,
descriptive
:
{
id
:
"
1
"
,
type
:
"
comment
"
,
text
:
"
\n
Ceci est ma listes d'universités pour mes départs en A19
"
},
content
:
[
{
type
:
"
univ
"
,
id
:
"
66
"
,
name
:
"
EPFL
"
,
city
:
"
Lausanne
"
,
country
:
"
Suisse
"
,
comment
:
{
id
:
"
2
"
,
type
:
"
comment
"
,
text
:
"
\n
Une super **bonne univ**, mais il faudra **bosser**.... :/
"
}
},
{
type
:
"
univ
"
,
id
:
"
33
"
,
name
:
"
Seoul National University Of Science And Technology Seoultech
"
,
city
:
"
Seoul
"
,
country
:
"
République de Corée
"
,
comment
:
{
id
:
"
1
"
,
type
:
"
fiel
"
,
text
:
""
}
}
]
}
]
};
/**
* Component holding the page with the lists of universities
*
* @class PageLists
* @extends {React.Component}
*/
class
PageLists
extends
CustomComponentForAPI
{
customRender
()
{
const
{
theme
}
=
this
.
props
;
const
{
classes
}
=
this
.
props
;
return
(
<
Paper
style
=
{
theme
.
myPaper
}
>
<
Typography
variant
=
"
h4
"
gutterBottom
>
Mes
Listes
<
/Typography
>
<
Markdown
source
=
{
source
}
/
>
{
RECOMMENDATIONS
.
content
.
map
((
el
,
idx
)
=>
<
div
key
=
{
idx
}
>
<
Recommendation
list
=
{
el
}
/> </
div
>
)}
<
Fab
color
=
"
primary
"
className
=
{
classes
.
fab
}
>
<
AddIcon
/>
<
/Fab
>
<
/Paper
>
);
}
}
const
mapStateToProps
=
(
state
)
=>
{
return
{
universities
:
state
.
api
.
universitiesAll
,
};
};
const
mapDispatchToProps
=
(
dispatch
)
=>
{
return
{
api
:
{
universities
:
()
=>
dispatch
(
getActions
(
"
universities
"
).
readAll
()),
},
};
};
PageLists
.
propTypes
=
{
theme
:
PropTypes
.
object
.
isRequired
,
};
const
styles
=
theme
=>
({
fab
:
{
margin
:
theme
.
spacing
.
unit
,
position
:
"
fixed
"
,
bottom
:
"
1rem
"
,
right
:
"
1rem
"
,
},
extendedIcon
:
{
marginRight
:
theme
.
spacing
.
unit
,
},
});
export
default
compose
(
withStyles
(
styles
,
{
withTheme
:
true
}),
connect
(
mapStateToProps
,
mapDispatchToProps
)
)(
PageLists
);
frontend/src/components/pages/PageUniversity.js
View file @
4a42eb71
...
...
@@ -111,7 +111,7 @@ function renderFirstTimeHere() {
return (
<Paper>
<Typography >
C
'
est
la
première
fois
que
vous
utilis
é
cet
onglet
et
vous
n
'
avez pas encore util....
C
'
est
la
première
fois
que
vous
utilis
ez
cet
onglet
et
vous
n
'
avez pas encore util....
</Typography>
</Paper>
);
...
...
frontend/src/components/recommendation/Recommendation.js
0 → 100644
View file @
4a42eb71
import
React
from
"
react
"
;
import
PropTypes
from
"
prop-types
"
;
import
withStyles
from
"
@material-ui/core/styles/withStyles
"
;
import
{
Paper
}
from
"
@material-ui/core
"
;
import
Button
from
"
@material-ui/core/Button
"
;
import
AddIcon
from
"
@material-ui/icons/Add
"
;
// import {compose} from "redux";
// import getActions from "../../redux/api/getActions";
// import {connect} from "react-redux";
import
TextBlock
from
"
../recommendation/TextBlock
"
;
import
UnivBlock
from
"
../recommendation/UnivBlock
"
;
import
RecommendationEditor
from
"
../recommendation/RecommendationEditor
"
;
import
CustomComponentForAPI
from
"
../common/CustomComponentForAPI
"
;
// import editorStyle from "../university/editors/common/editorStyle.js";
// const RECOMMENDATION = {
// name: "List Test 1",
// public: true,
// user: "UserTest",
// descriptive: { id: "1", type: "field", text: "\n **Ajouter** un descriptif " },
// content: [
// {
// type: "univ",
// id: "66",
// name: "EPFL",
// city: "Lausanne",
// country: "Suisse",
// comment: { id: "2", type: "field", text: "\n Ajouter un commentaire" }
// },
// {
// type: "univ",
// id: "33",
// name: "Seoul National University Of Science And Technology Seoultech",
// city: "Seoul",
// country: "République de Corée",
// comment: { id: "1", type: "comment", text: "\n Commentaire pour l'**université de Séoul**. Ça à l'air cool comme univ ! :) " }
// }
// ]
// };
/**
* Liste de blocks
*
* @class Recommendation
* @extends {React.Component}
*/
class
Recommendation
extends
CustomComponentForAPI
{
state
=
{
editorOpen
:
false
};
openEditorPanel
()
{
this
.
setState
({
editorOpen
:
true
});
}
closeEditorPanel
()
{
this
.
setState
({
editorOpen
:
false
});
}
componentDidUpdate
(
prevProps
,
prevState
,
snapshot
)
{
super
.
componentDidUpdate
(
prevProps
,
prevState
,
snapshot
);
}
customRender
()
{
const
{
list
,
classes
}
=
this
.
props
,
recommendationModelData
=
list
;
return
(
<
Paper
style
=
{{
color
:
"
white
"
,
margin
:
"
1em
"
,
padding
:
"
1em
"
}}
>
<
h2
>
{
list
.
name
}
<
/h2
>
<
p
>
{
list
.
public
?
"
Liste publique
"
:
"
liste privée
"
}
créée
par
:
{
list
.
user
}
<
/p
>
<
div
id
=
"
Descriptive
"
>
<
TextBlock
id
=
{
list
.
descriptive
.
id
}
type
=
{
list
.
descriptive
.
type
}
text
=
{
list
.
descriptive
.
text
}
/
>
<
/div
>
{
list
.
content
.
map
((
el
,
idx
)
=>
<
div
key
=
{
idx
}
>
<
UnivBlock
univ
=
{
el
}
/> </
div
>
)}
<
Button
variant
=
{
"
contained
"
}
color
=
{
"
secondary
"
}
onClick
=
{()
=>
this
.
openEditorPanel
()}
>
<
AddIcon
className
=
{
classes
.
rightIcon
}
/
>
<
/Button
>
<
RecommendationEditor
open
=
{
this
.
state
.
editorOpen
}
closeEditorPanel
=
{()
=>
this
.
closeEditorPanel
()}
rawModelData
=
{
recommendationModelData
}
/
>
<
/Paper
>
);
}
}
Recommendation
.
propTypes
=
{
classes
:
PropTypes
.
object
.
isRequired
,
list
:
PropTypes
.
object
.
isRequired
,
};
Recommendation
.
defaultProps
=
{
};
const
styles
=
theme
=>
({
root
:
{
maxWidth
:
650
,
marginLeft
:
"
auto
"
,
marginRight
:
"
auto
"
,
flexGrow
:
1
,
},
header
:
{
display
:
"
flex
"
,
alignItems
:
"
center
"
,
height
:
50
,
paddingLeft
:
theme
.
spacing
.
unit
*
4
,
marginBottom
:
20
,
backgroundColor
:
theme
.
palette
.
background
.
default
,
},
});
export
default
withStyles
(
styles
,
{
withTheme
:
true
})(
Recommendation
);
frontend/src/components/recommendation/RecommendationEditor.js
0 → 100644
View file @
4a42eb71
import
React
from
"
react
"
;
import
withStyles
from
"
@material-ui/core/styles/withStyles
"
;
import
compose
from
"
recompose/compose
"
;
import
{
connect
}
from
"
react-redux
"
;
import
{
withSnackbar
}
from
"
notistack
"
;
import
Form
from
"
../form/Form
"
;
import
editorStyle
from
"
../editor/editorStyle
"
;
import
Editor
from
"
../editor/Editor
"
;
import
getMapStateToPropsForEditor
from
"
../editor/getMapStateToPropsForEditor
"
;
import
getMapDispatchToPropsForEditor
from
"
../editor/getMapDispatchToPropsForEditor
"
;
import
BooleanField
from
"
../form/fields/BooleanField
"
;
const
styles
=
theme
=>
({
...
editorStyle
(
theme
)
});
class
RecommendationForm
extends
Form
{
// /**
// * @override
// */
// formLevelErrors = [
// new FormLevelError(
// ["error_recommendation"],
// "Error in Recommendation Form")
// ];
render
()
{
return
(
<>
<
BooleanField
label
=
{
"
Liste Publique ou privée ?
"
}
{...
this
.
getReferenceAndValue
(
"
public
"
)}
required
=
{
true
}
labelIfTrue
=
"
(La liste est publique)
"
labelIfFalse
=
"
(La liste est privée)
"
/>
<
/
>
);
}
}
class
RecommendationEditor
extends
Editor
{
renderForm
()
{
return
<
RecommendationForm
modelData
=
{
this
.
props
.
rawModelData
}
ref
=
{
this
.
formRef
}
/>
;
}
}
export
default
compose
(
withSnackbar
,
withStyles
(
styles
,
{
withTheme
:
true
}),
connect
(
getMapStateToPropsForEditor
(
"
users
"
),
getMapDispatchToPropsForEditor
(
"
users
"
)
)
)(
RecommendationEditor
);
frontend/src/components/recommendation/TextBlock.js
0 → 100644
View file @
4a42eb71
import
React
from
"
react
"
;
import
withStyles
from
"
@material-ui/core/styles/withStyles
"
;
import
{
Paper
}
from
"
@material-ui/core
"
;
import
TextField
from
"
@material-ui/core/TextField
"
;
import
Markdown
from
"
../common/Markdown
"
;
import
PropTypes
from
"
prop-types
"
;
/**
* Bloc de commentaire Markdown
*
* @class TextBlock
* @extends React.Component
*/
class
TextBlock
extends
React
.
Component
{
render
()
{
let
{
id
,
type
,
text
}
=
this
.
props
;
return
(
<
Paper
style
=
{{
color
:
"
white
"
,
margin
:
"
1em
"
,
padding
:
"
1em
"
}}
>
{
type
===
"
comment
"
?
<
Markdown
id
=
{
id
}
source
=
{
text
}
/> : <TextField style={{ margin: 8 }} placeholder="Vous pouvez ajouter un commentaire ici" fullWidth margin="normal" InputLabelProps={{ shrink: true, }} /
>
}
<
/Paper
>
);
}
}
TextBlock
.
propTypes
=
{
id
:
PropTypes
.
string
.
isRequired
,
type
:
PropTypes
.
string
.
isRequired
,
text
:
PropTypes
.
string
.
isRequired
,
};
TextBlock
.
defaultProps
=
{
};
const
styles
=
theme
=>
({
root
:
{
maxWidth
:
650
,
marginLeft
:
"
auto
"
,
marginRight
:
"
auto
"
,
flexGrow
:
1
,
},
header
:
{
display
:
"
flex
"
,
alignItems
:
"
center
"
,
height
:
50
,
paddingLeft
:
theme
.
spacing
.
unit
*
4
,
marginBottom
:
20
,
backgroundColor
:
theme
.
palette
.
background
.
default
,
},
});
export
default
withStyles
(
styles
,
{
withTheme
:
true
})(
TextBlock
);
frontend/src/components/recommendation/UnivBlock.js
0 → 100644
View file @
4a42eb71
import
React
from
"
react
"
;
import
PropTypes
from
"
prop-types
"
;
import
withStyles
from
"
@material-ui/core/styles/withStyles
"
;
import
{
Paper
}
from
"
@material-ui/core
"
;
import
Markdown
from
"
../common/Markdown
"
;
import
TextBlock
from
"
../recommendation/TextBlock.js
"
;
/**
* Bloc de commentaire Markdown
*
* @class UnivBlock
* @extends CustomComponentForAPI
*/
class
UnivBlock
extends
React
.
Component
{
render
()
{
let
{
univ
}
=
this
.
props
,
comment
=
univ
.
comment
,
link
=
`/app/university/
${
univ
.
id
}
`
,
source
=
`# [
${
univ
.
name
}
](
${
link
}
) \n
${
univ
.
city
}
,
${
univ
.
country
}
`
;
return
(
<
Paper
style
=
{{
color
:
"
white
"
,
margin
:
"
1em
"
,
padding
:
"
1em
"
}}
>
<
Markdown
source
=
{
source
}
/
>
<
TextBlock
id
=
{
comment
.
id
}
type
=
{
comment
.
type
}
text
=
{
comment
.
text
}
/
>
<
/Paper
>
);
}
}
UnivBlock
.
propTypes
=
{
// coucou: PropTypes.string.isRequired,
univ
:
PropTypes
.
object
.
isRequired
,
};
UnivBlock
.
defaultProps
=
{
};
const
styles
=
theme
=>
({
root
:
{
maxWidth
:
650
,
marginLeft
:
"
auto
"
,
marginRight
:
"
auto
"
,
flexGrow
:
1
,
},
header
:
{
display
:
"
flex
"
,
alignItems
:
"
center
"
,
height
:
50
,
paddingLeft
:
theme
.
spacing
.
unit
*
4
,
marginBottom
:
20
,
backgroundColor
:
theme
.
palette
.
background
.
default
,
},
});
export
default
withStyles
(
styles
,
{
withTheme
:
true
})(
UnivBlock
);
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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