1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00

admin - Edit button for existing features

This commit is contained in:
Gard Rimestad 2014-11-12 15:00:11 +01:00 committed by Ivar Conradi Østhus
parent 28e1705b9c
commit ff4beac7f7
2 changed files with 54 additions and 14 deletions

View File

@ -1,22 +1,42 @@
var React = require('react');
var FeatureForm = require('./FeatureForm');
var Feature = React.createClass({
onChange: function(event) {
getInitialState: function() {
return {
editMode: false
};
},
toggleEditMode: function() {
this.setState({editMode: !this.state.editMode});
},
saveFeature: function(feature) {
this.props.onChange({
name: this.props.feature.name,
name: feature.name,
field: 'enabled',
value: event.target.checked
value: feature.enabled
});
this.toggleEditMode();
},
render: function() {
return (
<div className='line mal'>
<div className='unit r-size1of5'>
<input type='checkbox' checked={this.props.feature.enabled} onChange={this.onChange} />
</div>
return (<div className='line mal'>
{this.state.editMode ? this.renderEditMode() : this.renderViewMode()}
</div>);
},
<div className='unit r-size1of5'>
renderEditMode: function() {
return (<FeatureForm feature={this.props.feature} onSubmit={this.saveFeature} onCancel={this.toggleEditMode} />);
},
renderViewMode: function() {
var strikeThrough = this.props.feature.enabled ? '' : 'strikethrough';
return (
<div>
<div className={'unit r-size1of5 ' + strikeThrough}>
{this.props.feature.name}
</div>
@ -24,9 +44,13 @@ var Feature = React.createClass({
{this.props.feature.description || '\u00a0'}
</div>
<div className='unit'>
<div className='unit r-size1of5'>
{this.props.feature.strategy}
</div>
<div className='unit r-size1of5'>
<input type='button' value='Edit' onClick={this.toggleEditMode}/>
</div>
</div>
);
}

View File

@ -6,7 +6,7 @@ var FeatureForm = React.createClass({
return {strategyOptions: []};
},
componentDidMount: function() {
componentWillMount: function() {
strategyStore.getStrategies().then(this.handleStrategyResponse);
},
@ -19,16 +19,27 @@ var FeatureForm = React.createClass({
},
render: function() {
var currentStrategy = this.props.feature ? this.props.feature.strategy : "";
var strategyNodes = this.state.strategyOptions.map(function(name) {
return <option value={name}>{name}</option>;
return (
<option value={name} selected={name === currentStrategy}>
{name}
</option>
);
});
var feature = this.props.feature || {
name: '',
strategy: 'default',
enabled: false
};
return (
<form ref="form" className="bg-blue-xlt">
<div className="line mal ptl pbl">
<div className="unit prl r-size1of6">
<input ref="enabled" type="checkbox" defaultValue={false} />
<input ref="enabled" type="checkbox" defaultChecked={feature.enabled} />
</div>
<div className="unit r-size2of5">
@ -37,11 +48,15 @@ var FeatureForm = React.createClass({
className="mbs"
id="name"
ref="name"
disabled={feature.name.length}
defaultValue={feature.name}
placeholder="Enter name" />
<input className=""
type="text"
ref="description"
defaultValue={feature.description}
disabled={feature.name.length}
placeholder="Enter description" />
</div>
@ -49,7 +64,8 @@ var FeatureForm = React.createClass({
<select id="strategy"
ref="strategy"
className=""
defaultValue="default">
disabled={feature.name.length}
defaultValue={feature.strategy}>
{strategyNodes}
</select>
</div>