Commit 22a5c7fe authored by Florent Chehab's avatar Florent Chehab
Browse files

Error helper texts added

parent d5f79595
...@@ -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.getHasError()) { if (field.getError().status) {
return true; return true;
} }
} }
......
...@@ -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}>
......
...@@ -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,
hasError: this.hasError(this.props.value) error: this.hasError(this.props.value)
}; };
setState(newState) { setState(newState) {
newState.hasError = this.hasError(newState.value); newState.error = 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;
} }
getHasError() { getError() {
return this.state.hasError; return this.state.error;
} }
componentDidMount() { componentDidMount() {
......
...@@ -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,
}; };
......
...@@ -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
......
...@@ -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}
> >
......
...@@ -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}
> >
......
...@@ -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>
......
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