Notification on save

frontend/src/components/other/Loading.js

@@ -36,7 +36,7 @@ class Loading extends React.Component {
         <CircularProgress
           className={classes.progress}
           variant="determinate"
-          size={50}
+          size={this.props.size}
           value={this.state.completed}
         />
       </div>
@@ -46,6 +46,10 @@ class Loading extends React.Component {
 
 Loading.propTypes = {
   classes: PropTypes.object.isRequired,
+  size: PropTypes.number.isRequired
 };
 
+Loading.defaultProps = {
+  size: 50
+}
 export default withStyles(styles)(Loading);
\ No newline at end of file

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

@@ -90,7 +90,7 @@ class GenericModule extends MyComponent {
       <div>
         <this.props.editor
           open={this.state.fullScreenDialogOpen}
-          handleClose={this.handleCloseFullScreenDialog}
+          handleCloseEditor={this.handleCloseFullScreenDialog}
           modelData={this.props.modelData}
           userData={this.props.userDataEl}
         />

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

 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '@material-ui/core/styles/withStyles';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import Paper from '@material-ui/core/Paper';
@@ -13,6 +12,7 @@ import Slide from '@material-ui/core/Slide';
 
 import MyComponent from '../../../MyComponent';
 import Alert from './Alert';
+import Notification from './Notification';
 import getObjModerationLevel from '../../../../utils/getObjModerationLevels';
 import SelectField from './fields/SelectField';
 
@@ -35,6 +35,9 @@ class Editor extends MyComponent {
     alert: {
       open: false,
     },
+    notification: {
+      open: false,
+    },
     lastSave: this.props.lastSave,
   }
 
@@ -77,10 +80,29 @@ class Editor extends MyComponent {
     if (this.formIsValid()) {
       const formData = this.getDataFromFields();
       const { modelData } = this.props;
-      console.log("send required", this.hasChangesToSave(formData, modelData));
+      if (this.hasChangesToSave(formData, modelData)) {
+        const tmp = Object.assign({}, this.props.modelData, formData)
+        this.setState({
+          notification: {
+            open: true,
+            message: "Enregistrement en cours",
+            isLoading: true,
+            duration: null
+          }
+        })
+        this.props.saveData(tmp);
+      } else {
+        this.setState({
+          notification: {
+            open: true,
+            message: "Aucun changement n'a été repéré.",
+            success: true,
+            duration: 5000
+          }
+        })
+        this.props.handleCloseEditor();
+      }
 
-      const tmp = Object.assign({}, this.props.modelData, formData)
-      this.props.saveData(tmp);
     } else {
       console.log("ici")
     }
@@ -100,13 +122,23 @@ class Editor extends MyComponent {
             handleResponse: () => this.props.clearSaveError()
           }
         })
+        this.handleCloseNotification();
       }
     }
 
     if (this.state.lastSave < this.props.lastSave) {
       //saving data was successfull
       this.setState({ lastSave: this.props.lastSave });
-      this.props.handleClose();
+      this.setState({
+        notification: {
+          open: true,
+          message: "Les données ont été enregistrées avec succès !",
+          success: true,
+          duration: 5000,
+          preventClickAway: false
+        }
+      })
+      this.props.handleCloseEditor();
     }
   };
 
@@ -117,6 +149,12 @@ class Editor extends MyComponent {
     })
   }
 
+  handleCloseNotification() {
+    this.setState({
+      notification: { open: false }
+    })
+  }
+
   renderEditor() {
     return (<div>No editor set</div>)
   }
@@ -146,19 +184,23 @@ class Editor extends MyComponent {
     const { classes } = this.props;
     return (
       <div>
+        <Notification
+          {...this.state.notification}
+          handleClose={() => this.handleCloseNotification()}
+        />
         <Dialog
           fullScreen
           open={this.props.open}
-          onClose={this.props.handleClose}
+          onClose={this.props.handleCloseEditor}
           TransitionComponent={Transition}
         >
           <Alert
             {...this.state.alert}
             handleClose={() => this.handleCloseAlert()}
           />
-          <AppBar className={classes.appBar}>
+          <AppBar className={classes.appBar} >
             <Toolbar>
-              <IconButton color="inherit" onClick={this.props.handleClose} aria-label="Close">
+              <IconButton color="inherit" onClick={this.props.handleCloseEditor} aria-label="Close">
                 <CloseIcon />
               </IconButton>
               <Typography variant="title" color="inherit" className={classes.flex}>
@@ -181,13 +223,13 @@ class Editor extends MyComponent {
 Editor.propTypes = {
   classes: PropTypes.object.isRequired,
   clearSaveError: PropTypes.func.isRequired,
-  savingHasError: PropTypes.bool.isRequired,
+  savingHasError: PropTypes.object.isRequired,
   saveData: PropTypes.func.isRequired,
 };
 
 Editor.defaultProps = {
   open: false,
-  handleClose: () => console.log("Dev forgot something...")
+  handleCloseEditor: () => console.log("Dev forgot something...")
 };
 
 export default Editor;
\ No newline at end of file

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

+import React from 'react';
+import PropTypes, { array } from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import DoneIcon from '@material-ui/icons/Done';
+import Loading from '../../../../components/other/Loading'
+
+const styles = theme => ({
+  close: {
+    width: theme.spacing.unit * 4,
+    height: theme.spacing.unit * 4,
+  },
+});
+
+class Notification extends React.Component {
+
+  handleClose = (event, reason) => {
+    if (reason === 'clickaway' && this.props.preventClickAway) {
+      return;
+    }
+    this.props.handleClose();
+  };
+
+  render() {
+    const { classes } = this.props;
+    let actions = Array();
+    if (this.props.isLoading) {
+      actions.push(
+        <Loading size={20} />
+      )
+    } else if (this.props.success) {
+      actions.push(
+        <DoneIcon color='primary' />
+      )
+    }
+
+    return (
+      <div>
+        <Snackbar
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          open={this.props.open}
+          autoHideDuration={this.props.duration}
+          onClose={this.handleClose}
+          ContentProps={{
+            'aria-describedby': 'message-id',
+          }}
+          message={<span id="message-id">{this.props.message}</span>}
+          action={actions}
+        />
+      </div>
+    );
+  }
+}
+
+Notification.defaultProps = {
+  open: false,
+  duration: null,
+  message: "",
+  preventClickAway: true,
+  success: false,
+  isLoading: false,
+  handleClose: () => console.log("cloossee notif")
+}
+
+Notification.propTypes = {
+  classes: PropTypes.object.isRequired,
+  open: PropTypes.bool.isRequired,
+  duration: PropTypes.number,
+  message: PropTypes.string.isRequired,
+  preventClickAway: PropTypes.bool.isRequired,
+  success: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  handleClose: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(Notification);
\ No newline at end of file

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

 export default function editorStyle(theme) {
   return {
     appBar: {
-      position: 'relative',
+      position: 'sticky',
     },
     flex: {
       flex: 1,