Commit 30fb58ff authored by Florent Chehab's avatar Florent Chehab
Browse files

Alert when save error ok

parent a6c0ea70
...@@ -207,10 +207,10 @@ export function {{obj.name}}ElIsSaving(bool) { ...@@ -207,10 +207,10 @@ export function {{obj.name}}ElIsSaving(bool) {
}; };
} }
export function {{obj.name}}ElSavingHasError(bool, error=null) { export function {{obj.name}}ElSavingHasError(b, error=null) {
return { return {
type: {{obj.NAME}}_EL_SAVING_HAS_ERROR, type: {{obj.NAME}}_EL_SAVING_HAS_ERROR,
hasError: bool, hasError: b,
error error
}; };
} }
......
...@@ -108,10 +108,10 @@ class MyComponent extends Component { ...@@ -108,10 +108,10 @@ class MyComponent extends Component {
} }
myComponentDidMount() { }; myComponentDidMount() { };
componentDidUpdate() { componentDidUpdate(prevProps, prevState, snapshot) {
// TODO ajouter expire date // TODO ajouter expire date
this.loadPropsIfNeeded(); this.loadPropsIfNeeded();
this.myComponentDidUpdate(); this.myComponentDidUpdate(prevProps, prevState, snapshot);
} }
myComponentDidUpdate() { }; myComponentDidUpdate() { };
......
...@@ -115,23 +115,23 @@ class UniversitySemestersDates extends MyComponent { ...@@ -115,23 +115,23 @@ class UniversitySemestersDates extends MyComponent {
<TableRow key={1}> <TableRow key={1}>
<TableCell className={classes.tableCell} component="td"> <TableCell className={classes.tableCell} component="td">
<div className={classes.content}> <div className={classes.content}>
<CloudQueueIcon color='disabled' className={classes.icon} /> <LocalFloristIcon color='disabled' className={classes.icon} />
<div>Automne</div> <div>Printemps</div>
</div> </div>
</TableCell> </TableCell>
<TableCell className={classes.tableCell} component="td" >{autumn_begin}</TableCell> <TableCell className={classes.tableCell} component="td" >{spring_begin}</TableCell>
<TableCell className={classes.tableCell} component="td" >{autumn_end}</TableCell> <TableCell className={classes.tableCell} component="td" >{spring_end}</TableCell>
</TableRow> </TableRow>
<TableRow key={2}> <TableRow key={2}>
<TableCell className={classes.tableCell} component="td"> <TableCell className={classes.tableCell} component="td">
<div className={classes.content}> <div className={classes.content}>
<LocalFloristIcon color='disabled' className={classes.icon} /> <CloudQueueIcon color='disabled' className={classes.icon} />
<div>Printemps</div> <div>Automne</div>
</div> </div>
</TableCell> </TableCell>
<TableCell className={classes.tableCell} component="td" >{spring_begin}</TableCell> <TableCell className={classes.tableCell} component="td" >{autumn_begin}</TableCell>
<TableCell className={classes.tableCell} component="td" >{spring_end}</TableCell> <TableCell className={classes.tableCell} component="td" >{autumn_end}</TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
......
import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
class Alert extends React.Component {
render() {
console.log("alert props", this.props)
return (
<Dialog
open={this.props.open}
>
<DialogTitle>{this.props.title}</DialogTitle>
<DialogContent>
<DialogContentText>
{this.props.description}
</DialogContentText>
</DialogContent>
<DialogActions>
{
this.props.info ?
<Button onClick={() => { console.log("click"); this.props.handleClose(); this.props.handleResponse() }} color="primary">
{this.props.infoText}
</Button>
:
<div>
<Button onClick={() => { this.props.handleClose(); this.props.handleResponse(false) }} color="primary">
{this.props.disagreeText}
</Button>
<Button onClick={() => { this.props.handleClose(); this.props.handleResponse(true) }} color="primary" autoFocus>
{this.props.agreeText}
</Button>
</div>
}
</DialogActions>
</Dialog >
);
}
}
Alert.defaultProps = {
open: false,
title: "Mon titre",
description: "",
info: false,
agreeText: "OK",
disagreeText: "Annuler",
infoText: "J'ai compris",
handleClose: () => { Console.log("Missing function for closing alert.") },
handleResponse: () => { Console.log("Missing function for handling post close.") }
}
Alert.propTypes = {
open: PropTypes.bool.isRequired,
info: PropTypes.bool.isRequired,
title: PropTypes.string.isRequired,
agreeText: PropTypes.string.isRequired,
disagreeText: PropTypes.string.isRequired,
infoText: PropTypes.string.isRequired,
description: PropTypes.string,
handleClose: PropTypes.func.isRequired,
handleResponse: PropTypes.func.isRequired,
};
export default Alert;
\ No newline at end of file
...@@ -12,7 +12,7 @@ import CloseIcon from '@material-ui/icons/Close'; ...@@ -12,7 +12,7 @@ import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide'; import Slide from '@material-ui/core/Slide';
import MyComponent from '../../../MyComponent'; import MyComponent from '../../../MyComponent';
import Alert from './Alert';
import dateToDateStr from '../../../../utils/dateToDateStr'; import dateToDateStr from '../../../../utils/dateToDateStr';
function Transition(props) { function Transition(props) {
...@@ -20,11 +20,39 @@ function Transition(props) { ...@@ -20,11 +20,39 @@ function Transition(props) {
} }
class Editor extends MyComponent { class Editor extends MyComponent {
constructor(props) { formData = {};
super(props); formError = {};
state = {
alert: {
open: false,
}
}
myComponentDidUpdate() {
const { savingHasError } = this.props;
if (savingHasError.status) {
if (!this.state.alert.open) {
this.setState({
alert: {
open: true,
info: true,
title: "L'enregistrement sur le serveur a échoué.",
description: savingHasError.error + "\n \n Vous pourrez réessayer après avoir fermer cette alerte. Si l'erreur persiste, vérifier votre connexion internet ou contacter les administrateurs du site.",
infoText: "J'ai compris",
handleResponse: () => this.props.clearSaveError()
}
})
}
}
};
this.formData = {}; handleCloseAlert() {
this.formError = {}; console.log("closing")
this.setState({
alert: { open: false }
})
} }
setFormDataAndError(field, data, type = null) { setFormDataAndError(field, data, type = null) {
...@@ -51,6 +79,10 @@ class Editor extends MyComponent { ...@@ -51,6 +79,10 @@ class Editor extends MyComponent {
onClose={this.props.handleClose} onClose={this.props.handleClose}
TransitionComponent={Transition} TransitionComponent={Transition}
> >
<Alert
{...this.state.alert}
handleClose={() => this.handleCloseAlert()}
/>
<AppBar className={classes.appBar}> <AppBar className={classes.appBar}>
<Toolbar> <Toolbar>
<IconButton color="inherit" onClick={this.props.handleClose} aria-label="Close"> <IconButton color="inherit" onClick={this.props.handleClose} aria-label="Close">
...@@ -75,6 +107,8 @@ class Editor extends MyComponent { ...@@ -75,6 +107,8 @@ class Editor extends MyComponent {
Editor.propTypes = { Editor.propTypes = {
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
clearSaveError: PropTypes.func.isRequired,
savingHasError: PropTypes.bool.isRequired,
}; };
Editor.defaultProps = { Editor.defaultProps = {
......
...@@ -13,7 +13,8 @@ import UsefulLinksField from './fields/UsefulLinksField'; ...@@ -13,7 +13,8 @@ import UsefulLinksField from './fields/UsefulLinksField';
import MarkdownField from './fields/MarkdownField'; import MarkdownField from './fields/MarkdownField';
import { import {
universitiesSemestersDatesElSaveData universitiesSemestersDatesElSaveData,
universitiesSemestersDatesElSavingHasError
} from '../../../../generated/actions'; } from '../../../../generated/actions';
const styles = theme => ({ const styles = theme => ({
...@@ -71,15 +72,21 @@ UniversitySemestersDatesEditor.propTypes = { ...@@ -71,15 +72,21 @@ UniversitySemestersDatesEditor.propTypes = {
}; };
const mapStateToProps = (state) => {
return {
savingHasError: state.universitiesSemestersDatesEl.savingHasError,
};
};
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {
saveData: (data) => dispatch(universitiesSemestersDatesElSaveData(data)) saveData: (data) => dispatch(universitiesSemestersDatesElSaveData(data)),
clearSaveError: () => dispatch(universitiesSemestersDatesElSavingHasError(false))
}; };
}; };
export default compose( export default compose(
withStyles(styles, { withTheme: true }), withStyles(styles, { withTheme: true }),
connect(null, mapDispatchToProps) connect(mapStateToProps, mapDispatchToProps)
)(UniversitySemestersDatesEditor); )(UniversitySemestersDatesEditor);
\ No newline at end of file
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