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

Notification on save

parent 3060798e
......@@ -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
......@@ -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}
/>
......
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
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
export default function editorStyle(theme) {
return {
appBar: {
position: 'relative',
position: 'sticky',
},
flex: {
flex: 1,
......
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