Error helper texts added

frontend/src/components/university/modules/editors/Editor.js

@@ -49,7 +49,7 @@ class Editor extends MyComponent {
   formFieldsHaveError() {
     for (let fieldKey in this.fields) {
       const field = this.fields[fieldKey];
-      if (field.getHasError()) {
+      if (field.getError().status) {
         return true;
       }
     }

frontend/src/components/university/modules/editors/fields/DateField.js

@@ -33,9 +33,13 @@ class DateField extends Field {
   }
 
   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) => {
     this.setState({
       value: date,
@@ -48,7 +52,8 @@ class DateField extends Field {
     return (
       <FieldWrapper
         required={this.props.required}
-        hasError={this.state.hasError}
+        hasError={this.state.error.status}
+        errors={this.state.error.messages}
         label={this.props.label}
       >
         <MuiPickersUtilsProvider utils={LocalizedUtils} locale={frLocale}>

frontend/src/components/university/modules/editors/fields/Field.js

@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 class Field extends PureComponent {
   state = {
     value: this.props.value,
-    hasError: this.hasError(this.props.value)
+    error: this.hasError(this.props.value)
   };
 
   setState(newState) {
-    newState.hasError = this.hasError(newState.value);
+    newState.error = this.hasError(newState.value);
     super.setState(newState);
   }
 
@@ -16,14 +16,18 @@ class Field extends PureComponent {
     throw Error('This methods has to be override in sub classes')
   }
 
+  buildError(messages) {
+    return { status: messages.length > 0, messages }
+  }
+
   getValue() {
     // function to get the value, ready to send to server
     // You might need to override this for weird formats such as Date.
     return this.state.value;
   }
 
-  getHasError() {
-    return this.state.hasError;
+  getError() {
+    return this.state.error;
   }
 
   componentDidMount() {

frontend/src/components/university/modules/editors/fields/FieldWrapper.js

@@ -6,6 +6,7 @@ import compose from 'recompose/compose';
 
 import FormControl from '@material-ui/core/FormControl';
 import FormLabel from '@material-ui/core/FormLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
 
 const styles = theme => ({
   formElement: {
@@ -20,6 +21,11 @@ class FieldWrapper extends PureComponent {
     return (
       <FormControl className={props.classes.formElement} required={props.required} error={props.hasError} fullWidth={true}>
         <FormLabel>{props.label}</FormLabel>
+        {
+          props.errors.map((error) => (
+            <FormHelperText>{error}</FormHelperText>
+          ))
+        }
         {props.children}
       </FormControl>
     );
@@ -30,12 +36,14 @@ FieldWrapper.defaultProps = {
   label: 'LABEL',
   required: false,
   hasError: false,
+  errors: []
 }
 
 FieldWrapper.propTypes = {
   label: PropTypes.string.isRequired,
   required: PropTypes.bool.isRequired,
   hasError: PropTypes.bool.isRequired,
+  errors: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
 };
 
 

frontend/src/components/university/modules/editors/fields/MarkdownField.js

@@ -20,13 +20,14 @@ const styles = theme => ({
 class MarkdownField extends Field {
 
   hasError(value) {
+    let messages = Array();
     if (this.props.required && value == '') {
-      return true;
-    } else if (this.props.maxLength && value.length > this.props.maxLength) {
-      return true;
-    } else {
-      return false;
+      messages.push("Ce champ est requis mais il est vide.");
     }
+    if (this.props.maxLength && value.length > this.props.maxLength) {
+      messages.push("Le texte est trop long.");
+    }
+    return this.buildError(messages)
   }
 
   handleChangeValue = (val) => {
@@ -45,7 +46,8 @@ class MarkdownField extends Field {
     return (
       <FieldWrapper
         required={this.props.required}
-        hasError={this.state.hasError}
+        hasError={this.state.error.status}
+        errors={this.state.error.messages}
         label={this.props.label}
       >
         <Grid

frontend/src/components/university/modules/editors/fields/SelectField.js

@@ -18,7 +18,11 @@ const styles = theme => ({
 
 class SelectField extends Field {
   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) => {
@@ -30,7 +34,8 @@ class SelectField extends Field {
     return (
       <FieldWrapper
         required={this.props.required}
-        hasError={this.state.hasError}
+        hasError={this.state.error.status}
+        errors={this.state.error.messages}
         label={this.props.label}
       >
 

frontend/src/components/university/modules/editors/fields/TextField.js

@@ -15,13 +15,15 @@ const styles = theme => ({
 
 class TextField extends Field {
   hasError(value) {
+    let messages = Array();
+
     if (this.props.required && value == '') {
-      return true;
-    } else if (this.props.maxLength && value.length > this.props.maxLength) {
-      return true;
-    } else {
-      return false;
+      messages.push("Ce champ est requis");
+    }
+    if (this.props.maxLength && value.length > this.props.maxLength) {
+      messages.push("Il y a trop de caractères.")
     }
+    return this.buildError(messages);
   }
 
   handleChangeValue = (val) => {
@@ -42,7 +44,8 @@ class TextField extends Field {
     return (
       <FieldWrapper
         required={this.props.required}
-        hasError={this.state.hasError}
+        hasError={this.state.error.status}
+        errors={this.state.error.messages}
         label={this.props.label}
       >
 

frontend/src/components/university/modules/editors/fields/UsefulLinksField.js

@@ -33,8 +33,10 @@ const styles = theme => ({
 class UsefulLinksField extends Field {
 
   hasError(usefulLinks) {
+    let messages = Array();
+
     if (this.props.required && usefulLinks.length == 0) {
-      return true;
+      messages.push("Au moins un lien doit être présent")
     }
 
     const notEmpty = usefulLinks.every(el => {
@@ -46,7 +48,7 @@ class UsefulLinksField extends Field {
       }
       return true;
     });
-    if (!notEmpty) { return true }
+    if (!notEmpty) { messages.push("Les deux champs url et description doivent être saisis.") }
 
     const urlValid = usefulLinks.every(el => {
       if (!isUrl(el.url)) {
@@ -54,7 +56,7 @@ class UsefulLinksField extends Field {
       }
       return true;
     });
-    if (!urlValid) { return true }
+    if (!urlValid) { messages.push("Un url n'est pas reconnu dans le formulaire.") }
 
     const lengthOk = usefulLinks.every(el => {
       if ((el.url && el.url.length > this.props.urlMaxLength) ||
@@ -64,9 +66,9 @@ class UsefulLinksField extends Field {
       }
       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() {
@@ -143,7 +145,8 @@ class UsefulLinksField extends Field {
     return (
       <FieldWrapper
         required={this.props.required}
-        hasError={this.state.hasError}
+        hasError={this.state.error.status}
+        errors={this.state.error.messages}
         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>