Alert when save error ok

frontend/generate/templates/actions.tpl

@@ -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 {
         type: {{obj.NAME}}_EL_SAVING_HAS_ERROR,
-        hasError: bool,
+        hasError: b,
         error
     };
 }

frontend/src/components/MyComponent.js

@@ -108,10 +108,10 @@ class MyComponent extends Component {
   }
   myComponentDidMount() { };
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps, prevState, snapshot) {
     // TODO ajouter expire date
     this.loadPropsIfNeeded();
-    this.myComponentDidUpdate();
+    this.myComponentDidUpdate(prevProps, prevState, snapshot);
   }
   myComponentDidUpdate() { };
 

frontend/src/components/university/modules/UniversitySemestersDates.js

@@ -115,23 +115,23 @@ class UniversitySemestersDates extends MyComponent {
               <TableRow key={1}>
                 <TableCell className={classes.tableCell} component="td">
                   <div className={classes.content}>
-                    <CloudQueueIcon color='disabled' className={classes.icon} />
-                    <div>Automne</div>
+                    <LocalFloristIcon color='disabled' className={classes.icon} />
+                    <div>Printemps</div>
                   </div>
                 </TableCell>
-                <TableCell className={classes.tableCell} component="td" >{autumn_begin}</TableCell>
-                <TableCell className={classes.tableCell} component="td" >{autumn_end}</TableCell>
+                <TableCell className={classes.tableCell} component="td" >{spring_begin}</TableCell>
+                <TableCell className={classes.tableCell} component="td" >{spring_end}</TableCell>
               </TableRow>
 
               <TableRow key={2}>
                 <TableCell className={classes.tableCell} component="td">
                   <div className={classes.content}>
-                    <LocalFloristIcon color='disabled' className={classes.icon} />
-                    <div>Printemps</div>
+                    <CloudQueueIcon color='disabled' className={classes.icon} />
+                    <div>Automne</div>
                   </div>
                 </TableCell>
-                <TableCell className={classes.tableCell} component="td" >{spring_begin}</TableCell>
-                <TableCell className={classes.tableCell} component="td" >{spring_end}</TableCell>
+                <TableCell className={classes.tableCell} component="td" >{autumn_begin}</TableCell>
+                <TableCell className={classes.tableCell} component="td" >{autumn_end}</TableCell>
               </TableRow>
 
             </TableBody>

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

+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

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

@@ -12,7 +12,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import Slide from '@material-ui/core/Slide';
 
 import MyComponent from '../../../MyComponent';
-
+import Alert from './Alert';
 import dateToDateStr from '../../../../utils/dateToDateStr';
 
 function Transition(props) {
@@ -20,11 +20,39 @@ function Transition(props) {
 }
 
 class Editor extends MyComponent {
-  constructor(props) {
-    super(props);
+  formData = {};
+  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 = {};
-    this.formError = {};
+  handleCloseAlert() {
+    console.log("closing")
+    this.setState({
+      alert: { open: false }
+    })
   }
 
   setFormDataAndError(field, data, type = null) {
@@ -51,6 +79,10 @@ class Editor extends MyComponent {
           onClose={this.props.handleClose}
           TransitionComponent={Transition}
         >
+          <Alert
+            {...this.state.alert}
+            handleClose={() => this.handleCloseAlert()}
+          />
           <AppBar className={classes.appBar}>
             <Toolbar>
               <IconButton color="inherit" onClick={this.props.handleClose} aria-label="Close">
@@ -75,6 +107,8 @@ class Editor extends MyComponent {
 
 Editor.propTypes = {
   classes: PropTypes.object.isRequired,
+  clearSaveError: PropTypes.func.isRequired,
+  savingHasError: PropTypes.bool.isRequired,
 };
 
 Editor.defaultProps = {

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

@@ -13,7 +13,8 @@ import UsefulLinksField from './fields/UsefulLinksField';
 import MarkdownField from './fields/MarkdownField';
 
 import {
-  universitiesSemestersDatesElSaveData
+  universitiesSemestersDatesElSaveData,
+  universitiesSemestersDatesElSavingHasError
 } from '../../../../generated/actions';
 
 const styles = theme => ({
@@ -71,15 +72,21 @@ UniversitySemestersDatesEditor.propTypes = {
 };
 
 
+const mapStateToProps = (state) => {
+  return {
+    savingHasError: state.universitiesSemestersDatesEl.savingHasError,
+  };
+};
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    saveData: (data) => dispatch(universitiesSemestersDatesElSaveData(data))
+    saveData: (data) => dispatch(universitiesSemestersDatesElSaveData(data)),
+    clearSaveError: () => dispatch(universitiesSemestersDatesElSavingHasError(false))
   };
 };
 
 
 export default compose(
   withStyles(styles, { withTheme: true }),
-  connect(null, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps)
 )(UniversitySemestersDatesEditor);
\ No newline at end of file