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