Commit 1fb02f19 authored by Matija Obreza's avatar Matija Obreza
Browse files

Confirmation dialog on deleting a Crop

parent 61183cb7
Pipeline #4004 passed with stages
in 2 minutes and 43 seconds
......@@ -7,87 +7,96 @@ import Paper from 'material-ui/Paper';
import { loadCrop, saveCrop, deleteCrop } from 'actions/crop';
import { Crop } from 'model/crop.model';
import confirm from 'utilities/confirmAlert';
import CropForm from './c/CropForm';
interface IDescriptorEditPageProps extends React.ClassAttributes<any> {
classes: any;
uuid?: string;
loadCrop: (uuid: string) => void;
saveCrop: (crop: Crop) => void;
deleteCrop: (crop: Crop) => void;
crop: Crop;
classes: any;
uuid?: string;
loadCrop: (uuid: string) => void;
saveCrop: (crop: Crop) => void;
deleteCrop: (crop: Crop) => void;
crop: Crop;
}
const styles = (theme) => ({
contentContainer: {
backgroundColor: '#E8E5E0',
padding: '1rem',
},
form: {
padding: '20px',
margin: '0 0 1rem 0',
},
contentContainer: {
backgroundColor: '#E8E5E0',
padding: '1rem',
},
form: {
padding: '20px',
margin: '0 0 1rem 0',
},
});
class CropEditPage extends React.Component<IDescriptorEditPageProps, any> {
protected static needs = [
({params: {uuid}}) => loadCrop(uuid),
];
public componentDidMount() {
const {crop, loadCrop, uuid} = this.props;
if (uuid && (!crop || crop.uuid !== uuid)) {
loadCrop(uuid);
}
}
private onSave = (updatedCrop: Crop) => {
const { saveCrop } = this.props;
saveCrop(updatedCrop);
}
private onDelete = () => {
const { crop, deleteCrop } = this.props;
deleteCrop(crop);
}
public render() {
const {classes, uuid} = this.props;
let {crop} = this.props;
if (!crop && !uuid) {
crop = new Crop();
}
if (!crop) {
console.log('No crop.');
return null;
}
return (
<Grid container className={ classes.contentContainer }>
<Grid item xs={ 12 }>
<Paper className={ classes.form }>
<CropForm initialValues={ crop } onSubmit={ this.onSave } onDelete={ this.onDelete } />
</Paper>
</Grid>
</Grid>
);
}
protected static needs = [
({params: {uuid}}) => loadCrop(uuid),
];
public componentDidMount() {
const {crop, loadCrop, uuid} = this.props;
if (uuid && (!crop || crop.uuid !== uuid)) {
loadCrop(uuid);
}
}
private onSave = (updatedCrop: Crop) => {
const { saveCrop } = this.props;
saveCrop(updatedCrop);
}
private onDelete = () => {
const { crop, deleteCrop } = this.props;
confirm(`Delete crop '${crop.title}'?`, {
description: `Note, deleting any crop causes mayhem.`,
confirmLabel: 'Delete',
abortLabel: 'Cancel',
}).then(() => {
deleteCrop(crop);
});
}
public render() {
const {classes, uuid} = this.props;
let {crop} = this.props;
if (!crop && !uuid) {
crop = new Crop();
}
if (!crop) {
console.log('No crop.');
return null;
}
return (
<Grid container className={ classes.contentContainer }>
<Grid item xs={ 12 }>
<Paper className={ classes.form }>
<CropForm initialValues={ crop } onSubmit={ this.onSave } onDelete={ this.onDelete } />
</Paper>
</Grid>
</Grid>
);
}
}
const mapStateToProps = (state, ownProps) => ({
uuid: ownProps.params.uuid,
crop: state.crop.currentCrop,
uuid: ownProps.params.uuid,
crop: state.crop.currentCrop,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
loadCrop,
saveCrop,
deleteCrop,
loadCrop,
saveCrop,
deleteCrop,
}, dispatch);
const styled = withStyles(styles)(CropEditPage);
......
......@@ -57,12 +57,12 @@ class Confirm extends React.Component<IConfirmProps, any> {
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={ this.resolve } color="primary">
{ confirmLabel }
</Button>
<Button onClick={ this.reject } color="primary" autoFocus>
<Button onClick={ this.reject } autoFocus>
{ abortLabel }
</Button>
<Button onClick={ this.resolve } color="primary">
{ confirmLabel }
</Button>
</DialogActions>
</Dialog>
);
......
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