2019-10-26 22:55:52 +02:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2020-08-05 21:36:28 +02:00
|
|
|
import { Button, Textfield } from 'react-mdl';
|
2019-10-26 22:55:52 +02:00
|
|
|
|
|
|
|
import { UPDATE_FEATURE } from '../../../permissions';
|
|
|
|
|
|
|
|
export default class UpdateDescriptionComponent extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = { editMode: false };
|
|
|
|
}
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
isFeatureView: PropTypes.bool.isRequired,
|
|
|
|
update: PropTypes.func,
|
|
|
|
featureToggle: PropTypes.object,
|
|
|
|
hasPermission: PropTypes.func.isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
onEditMode = (description, evt) => {
|
|
|
|
evt.preventDefault();
|
|
|
|
this.setState({ editMode: true, description });
|
|
|
|
};
|
|
|
|
|
|
|
|
updateValue = evt => {
|
|
|
|
evt.preventDefault();
|
|
|
|
this.setState({ description: evt.target.value });
|
|
|
|
};
|
|
|
|
|
|
|
|
onSave = evt => {
|
|
|
|
evt.preventDefault();
|
|
|
|
this.props.update(this.state.description);
|
|
|
|
this.setState({ editMode: false, description: undefined });
|
|
|
|
};
|
|
|
|
|
|
|
|
onCancel = evt => {
|
|
|
|
evt.preventDefault();
|
|
|
|
this.setState({ editMode: false, description: undefined });
|
|
|
|
};
|
|
|
|
|
|
|
|
renderRead({ description, isFeatureView, hasPermission }) {
|
|
|
|
return (
|
2020-08-05 21:36:28 +02:00
|
|
|
<div>
|
2019-10-26 22:55:52 +02:00
|
|
|
{description}
|
|
|
|
{isFeatureView && hasPermission(UPDATE_FEATURE) ? (
|
|
|
|
<a href="#edit" onClick={this.onEditMode.bind(this, description)}>
|
|
|
|
edit
|
|
|
|
</a>
|
|
|
|
) : null}
|
2020-08-05 21:36:28 +02:00
|
|
|
</div>
|
2019-10-26 22:55:52 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderEdit() {
|
|
|
|
const { description } = this.state;
|
|
|
|
return (
|
2020-08-05 21:36:28 +02:00
|
|
|
<div>
|
2019-10-26 22:55:52 +02:00
|
|
|
<Textfield
|
|
|
|
floatingLabel
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
label="Description"
|
|
|
|
required
|
|
|
|
value={description}
|
|
|
|
onChange={this.updateValue}
|
|
|
|
/>
|
|
|
|
<div>
|
|
|
|
<Button type="submit" raised accent onClick={this.onSave}>
|
|
|
|
Save
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
<Button type="cancel" raised onClick={this.onCancel}>
|
|
|
|
Cancel
|
|
|
|
</Button>
|
|
|
|
</div>
|
2020-08-05 21:36:28 +02:00
|
|
|
</div>
|
2019-10-26 22:55:52 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { editMode } = this.state;
|
|
|
|
return editMode ? this.renderEdit(this.props) : this.renderRead(this.props);
|
|
|
|
}
|
|
|
|
}
|