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
Rex Dri
Rex Dri
Commits
22a5c7fe
Commit
22a5c7fe
authored
Sep 13, 2018
by
Florent Chehab
Browse files
Error helper texts added
parent
d5f79595
Changes
8
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/university/modules/editors/Editor.js
View file @
22a5c7fe
...
@@ -49,7 +49,7 @@ class Editor extends MyComponent {
...
@@ -49,7 +49,7 @@ class Editor extends MyComponent {
formFieldsHaveError
()
{
formFieldsHaveError
()
{
for
(
let
fieldKey
in
this
.
fields
)
{
for
(
let
fieldKey
in
this
.
fields
)
{
const
field
=
this
.
fields
[
fieldKey
];
const
field
=
this
.
fields
[
fieldKey
];
if
(
field
.
get
Has
Error
())
{
if
(
field
.
getError
()
.
status
)
{
return
true
;
return
true
;
}
}
}
}
...
...
frontend/src/components/university/modules/editors/fields/DateField.js
View file @
22a5c7fe
...
@@ -33,9 +33,13 @@ class DateField extends Field {
...
@@ -33,9 +33,13 @@ class DateField extends Field {
}
}
hasError
(
date
)
{
hasError
(
date
)
{
return
this
.
props
.
required
&&
!
date
;
let
messages
=
Array
();
if
(
this
.
props
.
required
&&
!
date
)
{
messages
.
push
(
"
Date requise !
"
);
};
return
this
.
buildError
(
messages
)
}
}
handleDateChange
=
(
date
)
=>
{
handleDateChange
=
(
date
)
=>
{
this
.
setState
({
this
.
setState
({
value
:
date
,
value
:
date
,
...
@@ -48,7 +52,8 @@ class DateField extends Field {
...
@@ -48,7 +52,8 @@ class DateField extends Field {
return
(
return
(
<
FieldWrapper
<
FieldWrapper
required
=
{
this
.
props
.
required
}
required
=
{
this
.
props
.
required
}
hasError
=
{
this
.
state
.
hasError
}
hasError
=
{
this
.
state
.
error
.
status
}
errors
=
{
this
.
state
.
error
.
messages
}
label
=
{
this
.
props
.
label
}
label
=
{
this
.
props
.
label
}
>
>
<
MuiPickersUtilsProvider
utils
=
{
LocalizedUtils
}
locale
=
{
frLocale
}
>
<
MuiPickersUtilsProvider
utils
=
{
LocalizedUtils
}
locale
=
{
frLocale
}
>
...
...
frontend/src/components/university/modules/editors/fields/Field.js
View file @
22a5c7fe
...
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
...
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
class
Field
extends
PureComponent
{
class
Field
extends
PureComponent
{
state
=
{
state
=
{
value
:
this
.
props
.
value
,
value
:
this
.
props
.
value
,
hasE
rror
:
this
.
hasError
(
this
.
props
.
value
)
e
rror
:
this
.
hasError
(
this
.
props
.
value
)
};
};
setState
(
newState
)
{
setState
(
newState
)
{
newState
.
hasE
rror
=
this
.
hasError
(
newState
.
value
);
newState
.
e
rror
=
this
.
hasError
(
newState
.
value
);
super
.
setState
(
newState
);
super
.
setState
(
newState
);
}
}
...
@@ -16,14 +16,18 @@ class Field extends PureComponent {
...
@@ -16,14 +16,18 @@ class Field extends PureComponent {
throw
Error
(
'
This methods has to be override in sub classes
'
)
throw
Error
(
'
This methods has to be override in sub classes
'
)
}
}
buildError
(
messages
)
{
return
{
status
:
messages
.
length
>
0
,
messages
}
}
getValue
()
{
getValue
()
{
// function to get the value, ready to send to server
// function to get the value, ready to send to server
// You might need to override this for weird formats such as Date.
// You might need to override this for weird formats such as Date.
return
this
.
state
.
value
;
return
this
.
state
.
value
;
}
}
get
Has
Error
()
{
getError
()
{
return
this
.
state
.
hasE
rror
;
return
this
.
state
.
e
rror
;
}
}
componentDidMount
()
{
componentDidMount
()
{
...
...
frontend/src/components/university/modules/editors/fields/FieldWrapper.js
View file @
22a5c7fe
...
@@ -6,6 +6,7 @@ import compose from 'recompose/compose';
...
@@ -6,6 +6,7 @@ import compose from 'recompose/compose';
import
FormControl
from
'
@material-ui/core/FormControl
'
;
import
FormControl
from
'
@material-ui/core/FormControl
'
;
import
FormLabel
from
'
@material-ui/core/FormLabel
'
;
import
FormLabel
from
'
@material-ui/core/FormLabel
'
;
import
FormHelperText
from
'
@material-ui/core/FormHelperText
'
;
const
styles
=
theme
=>
({
const
styles
=
theme
=>
({
formElement
:
{
formElement
:
{
...
@@ -20,6 +21,11 @@ class FieldWrapper extends PureComponent {
...
@@ -20,6 +21,11 @@ class FieldWrapper extends PureComponent {
return
(
return
(
<
FormControl
className
=
{
props
.
classes
.
formElement
}
required
=
{
props
.
required
}
error
=
{
props
.
hasError
}
fullWidth
=
{
true
}
>
<
FormControl
className
=
{
props
.
classes
.
formElement
}
required
=
{
props
.
required
}
error
=
{
props
.
hasError
}
fullWidth
=
{
true
}
>
<
FormLabel
>
{
props
.
label
}
<
/FormLabel
>
<
FormLabel
>
{
props
.
label
}
<
/FormLabel
>
{
props
.
errors
.
map
((
error
)
=>
(
<
FormHelperText
>
{
error
}
<
/FormHelperText
>
))
}
{
props
.
children
}
{
props
.
children
}
<
/FormControl
>
<
/FormControl
>
);
);
...
@@ -30,12 +36,14 @@ FieldWrapper.defaultProps = {
...
@@ -30,12 +36,14 @@ FieldWrapper.defaultProps = {
label
:
'
LABEL
'
,
label
:
'
LABEL
'
,
required
:
false
,
required
:
false
,
hasError
:
false
,
hasError
:
false
,
errors
:
[]
}
}
FieldWrapper
.
propTypes
=
{
FieldWrapper
.
propTypes
=
{
label
:
PropTypes
.
string
.
isRequired
,
label
:
PropTypes
.
string
.
isRequired
,
required
:
PropTypes
.
bool
.
isRequired
,
required
:
PropTypes
.
bool
.
isRequired
,
hasError
:
PropTypes
.
bool
.
isRequired
,
hasError
:
PropTypes
.
bool
.
isRequired
,
errors
:
PropTypes
.
arrayOf
(
PropTypes
.
string
.
isRequired
).
isRequired
,
};
};
...
...
frontend/src/components/university/modules/editors/fields/MarkdownField.js
View file @
22a5c7fe
...
@@ -20,13 +20,14 @@ const styles = theme => ({
...
@@ -20,13 +20,14 @@ const styles = theme => ({
class
MarkdownField
extends
Field
{
class
MarkdownField
extends
Field
{
hasError
(
value
)
{
hasError
(
value
)
{
let
messages
=
Array
();
if
(
this
.
props
.
required
&&
value
==
''
)
{
if
(
this
.
props
.
required
&&
value
==
''
)
{
return
true
;
messages
.
push
(
"
Ce champ est requis mais il est vide.
"
);
}
else
if
(
this
.
props
.
maxLength
&&
value
.
length
>
this
.
props
.
maxLength
)
{
return
true
;
}
else
{
return
false
;
}
}
if
(
this
.
props
.
maxLength
&&
value
.
length
>
this
.
props
.
maxLength
)
{
messages
.
push
(
"
Le texte est trop long.
"
);
}
return
this
.
buildError
(
messages
)
}
}
handleChangeValue
=
(
val
)
=>
{
handleChangeValue
=
(
val
)
=>
{
...
@@ -45,7 +46,8 @@ class MarkdownField extends Field {
...
@@ -45,7 +46,8 @@ class MarkdownField extends Field {
return
(
return
(
<
FieldWrapper
<
FieldWrapper
required
=
{
this
.
props
.
required
}
required
=
{
this
.
props
.
required
}
hasError
=
{
this
.
state
.
hasError
}
hasError
=
{
this
.
state
.
error
.
status
}
errors
=
{
this
.
state
.
error
.
messages
}
label
=
{
this
.
props
.
label
}
label
=
{
this
.
props
.
label
}
>
>
<
Grid
<
Grid
...
...
frontend/src/components/university/modules/editors/fields/SelectField.js
View file @
22a5c7fe
...
@@ -18,7 +18,11 @@ const styles = theme => ({
...
@@ -18,7 +18,11 @@ const styles = theme => ({
class
SelectField
extends
Field
{
class
SelectField
extends
Field
{
hasError
(
value
)
{
hasError
(
value
)
{
return
this
.
props
.
required
&&
(
value
==
null
);
let
messages
=
Array
();
if
(
this
.
props
.
required
&&
(
value
==
null
))
{
messages
.
push
(
"
Ce champ est requis.
"
);
}
return
this
.
buildError
(
messages
);
}
}
handleChangeValue
=
(
value
)
=>
{
handleChangeValue
=
(
value
)
=>
{
...
@@ -30,7 +34,8 @@ class SelectField extends Field {
...
@@ -30,7 +34,8 @@ class SelectField extends Field {
return
(
return
(
<
FieldWrapper
<
FieldWrapper
required
=
{
this
.
props
.
required
}
required
=
{
this
.
props
.
required
}
hasError
=
{
this
.
state
.
hasError
}
hasError
=
{
this
.
state
.
error
.
status
}
errors
=
{
this
.
state
.
error
.
messages
}
label
=
{
this
.
props
.
label
}
label
=
{
this
.
props
.
label
}
>
>
...
...
frontend/src/components/university/modules/editors/fields/TextField.js
View file @
22a5c7fe
...
@@ -15,13 +15,15 @@ const styles = theme => ({
...
@@ -15,13 +15,15 @@ const styles = theme => ({
class
TextField
extends
Field
{
class
TextField
extends
Field
{
hasError
(
value
)
{
hasError
(
value
)
{
let
messages
=
Array
();
if
(
this
.
props
.
required
&&
value
==
''
)
{
if
(
this
.
props
.
required
&&
value
==
''
)
{
return
true
;
messages
.
push
(
"
Ce champ est requis
"
);
}
else
if
(
this
.
props
.
maxLength
&&
value
.
length
>
this
.
props
.
maxLength
)
{
}
return
true
;
if
(
this
.
props
.
maxLength
&&
value
.
length
>
this
.
props
.
maxLength
)
{
}
else
{
messages
.
push
(
"
Il y a trop de caractères.
"
)
return
false
;
}
}
return
this
.
buildError
(
messages
);
}
}
handleChangeValue
=
(
val
)
=>
{
handleChangeValue
=
(
val
)
=>
{
...
@@ -42,7 +44,8 @@ class TextField extends Field {
...
@@ -42,7 +44,8 @@ class TextField extends Field {
return
(
return
(
<
FieldWrapper
<
FieldWrapper
required
=
{
this
.
props
.
required
}
required
=
{
this
.
props
.
required
}
hasError
=
{
this
.
state
.
hasError
}
hasError
=
{
this
.
state
.
error
.
status
}
errors
=
{
this
.
state
.
error
.
messages
}
label
=
{
this
.
props
.
label
}
label
=
{
this
.
props
.
label
}
>
>
...
...
frontend/src/components/university/modules/editors/fields/UsefulLinksField.js
View file @
22a5c7fe
...
@@ -33,8 +33,10 @@ const styles = theme => ({
...
@@ -33,8 +33,10 @@ const styles = theme => ({
class
UsefulLinksField
extends
Field
{
class
UsefulLinksField
extends
Field
{
hasError
(
usefulLinks
)
{
hasError
(
usefulLinks
)
{
let
messages
=
Array
();
if
(
this
.
props
.
required
&&
usefulLinks
.
length
==
0
)
{
if
(
this
.
props
.
required
&&
usefulLinks
.
length
==
0
)
{
return
true
;
messages
.
push
(
"
Au moins un lien doit être présent
"
)
}
}
const
notEmpty
=
usefulLinks
.
every
(
el
=>
{
const
notEmpty
=
usefulLinks
.
every
(
el
=>
{
...
@@ -46,7 +48,7 @@ class UsefulLinksField extends Field {
...
@@ -46,7 +48,7 @@ class UsefulLinksField extends Field {
}
}
return
true
;
return
true
;
});
});
if
(
!
notEmpty
)
{
return
true
}
if
(
!
notEmpty
)
{
messages
.
push
(
"
Les deux champs url et description doivent être saisis.
"
)
}
const
urlValid
=
usefulLinks
.
every
(
el
=>
{
const
urlValid
=
usefulLinks
.
every
(
el
=>
{
if
(
!
isUrl
(
el
.
url
))
{
if
(
!
isUrl
(
el
.
url
))
{
...
@@ -54,7 +56,7 @@ class UsefulLinksField extends Field {
...
@@ -54,7 +56,7 @@ class UsefulLinksField extends Field {
}
}
return
true
;
return
true
;
});
});
if
(
!
urlValid
)
{
return
true
}
if
(
!
urlValid
)
{
messages
.
push
(
"
Un url n'est pas reconnu dans le formulaire.
"
)
}
const
lengthOk
=
usefulLinks
.
every
(
el
=>
{
const
lengthOk
=
usefulLinks
.
every
(
el
=>
{
if
((
el
.
url
&&
el
.
url
.
length
>
this
.
props
.
urlMaxLength
)
||
if
((
el
.
url
&&
el
.
url
.
length
>
this
.
props
.
urlMaxLength
)
||
...
@@ -64,9 +66,9 @@ class UsefulLinksField extends Field {
...
@@ -64,9 +66,9 @@ class UsefulLinksField extends Field {
}
}
return
true
;
return
true
;
});
});
if
(
!
lengthOk
)
{
return
true
}
if
(
!
lengthOk
)
{
messages
.
push
(
"
Un url ou une description est trop longue.
"
)
}
return
false
;
return
this
.
buildError
(
messages
)
;
}
}
getValue
()
{
getValue
()
{
...
@@ -143,7 +145,8 @@ class UsefulLinksField extends Field {
...
@@ -143,7 +145,8 @@ class UsefulLinksField extends Field {
return
(
return
(
<
FieldWrapper
<
FieldWrapper
required
=
{
this
.
props
.
required
}
required
=
{
this
.
props
.
required
}
hasError
=
{
this
.
state
.
hasError
}
hasError
=
{
this
.
state
.
error
.
status
}
errors
=
{
this
.
state
.
error
.
messages
}
label
=
{
this
.
props
.
label
}
label
=
{
this
.
props
.
label
}
>
>
<
Typography
variant
=
'
caption
'
>
Tous
les
champs
doivent
être
remplis
et
les
URLs
doivent
commencer
par
'
http
'
ou
'
https
'
ou
'
ftp
'
.
<
/Typography
>
<
Typography
variant
=
'
caption
'
>
Tous
les
champs
doivent
être
remplis
et
les
URLs
doivent
commencer
par
'
http
'
ou
'
https
'
ou
'
ftp
'
.
<
/Typography
>
...
...
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