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 {
formFieldsHaveError() {
for (let fieldKey in this.fields) {
const field = this.fields[fieldKey];
if (field.getHasError()) {
if (field.getError().status) {
return true;
}
}
......
......@@ -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}>
......
......@@ -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() {
......
......@@ -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,
};
......
......@@ -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
......
......@@ -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}
>
......
......@@ -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}
>
......
......@@ -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>
......
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