Commit b3022780 authored by Florent Chehab's avatar Florent Chehab
Browse files

Smarter error notifications

parent cf0fd2d2
......@@ -42,19 +42,18 @@ class Editor extends MyComponent {
lastUpdateTime: this.props.lastUpdateTime,
}
formIsValid() {
formHasError() {
// to override if you need to perform some checks at the form level
return true;
return { status: false, messages: Array() };
}
formFieldsHaveError() {
let messages = Array();
for (let fieldKey in this.fields) {
const field = this.fields[fieldKey];
if (field.getError().status) {
return true;
messages = messages.concat(field.getError().messages);
}
}
return false;
return { status: messages.length > 0, messages };
}
getDataFromFields() {
......@@ -86,7 +85,9 @@ class Editor extends MyComponent {
}
handleSaveEditor() {
if (this.formIsValid() && !this.formFieldsHaveError()) {
const formHasError = this.formHasError();
const formFieldsHaveError = this.formFieldsHaveError();
if ((!formHasError.status) && (!formFieldsHaveError.status)) {
const formData = this.getDataFromFields();
const { modelData } = this.props;
if (this.hasChangesToSave(formData, modelData)) {
......@@ -113,12 +114,15 @@ class Editor extends MyComponent {
}
} else {
const errors = formHasError.messages.concat(formFieldsHaveError.messages);
console.log(errors);
this.setState({
notification: {
open: true,
message: "Le formulaire semble incohérent, merci de vérifier son contenu.",
duration: 5000,
error: true,
errors,
handleClose: this.handleCloseNotification()
}
})
......
......@@ -12,6 +12,10 @@ const styles = theme => ({
width: theme.spacing.unit * 4,
height: theme.spacing.unit * 4,
},
error: {
color: 'red',
display: 'block'
}
});
class Notification extends React.Component {
......@@ -23,6 +27,17 @@ class Notification extends React.Component {
this.props.handleClose();
};
renderMessage() {
const { classes } = this.props;
return (
<div>
<span id="message-id">{this.props.message}</span>
{this.props.errors.map((error, idx) => (<span key={idx} className={classes.error}>{error}</span>))}
</div>
)
}
render() {
const { classes } = this.props;
let actions = Array();
......@@ -61,7 +76,7 @@ class Notification extends React.Component {
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id">{this.props.message}</span>}
message={this.renderMessage()}
action={actions}
/>
</div>
......@@ -76,6 +91,7 @@ Notification.defaultProps = {
preventClickAway: true,
success: false,
error: false,
errors: [],
isLoading: false,
handleClose: () => console.log("cloossee notif")
}
......@@ -88,6 +104,7 @@ Notification.propTypes = {
preventClickAway: PropTypes.bool.isRequired,
success: PropTypes.bool.isRequired,
error: PropTypes.bool.isRequired,
errors: PropTypes.arrayOf(PropTypes.string),
isLoading: PropTypes.bool.isRequired,
handleClose: PropTypes.func.isRequired,
};
......
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