1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00

CreateStrategy form now supports multiple params #34

This commit is contained in:
ivaosthu 2014-11-01 17:17:07 +01:00
parent e9d12c5a8b
commit 806c9bcea7
2 changed files with 46 additions and 17 deletions

View File

@ -2,21 +2,52 @@ var React = require('react');
var CreateStrategy = React.createClass({
getInitialState: function() {
return {
parameters: []
};
},
onSubmit: function(event) {
event.preventDefault();
console.log(event);
},
handleAddParam: function(event) {
event.preventDefault();
var id = this.state.parameters.length + 1;
var params = this.state.parameters.concat([{id:id, name: "param_" + id, label: "Parameter " +id}]);
this.setState({parameters: params});
},
render: function() {
var parameters = (this.state.parameters.map(function(param) {
return <div className="formelement">
<label className="t4">{param.label}</label>
<div className="input">
<input type="text" name={param.name} />
</div>
</div>
}));
return (
<div className="line pam mhl bg-blue-xlt">
<div className="line pam bg-blue-xlt">
<div className="unit r-size1of2">
<form>
<form onSubmit={this.onSubmit}>
<fieldset>
<legend>New strategy</legend>
<legend>Create strategy</legend>
<div className="formelement">
<label for="strategy_name" className="t4">Name</label>
<div class="input">
<div className="input">
<input id="trategy_name" type="text" name="name" />
</div>
</div>
{parameters}
<div className="formelement">
<a href="#add">+ Add required parameter</a>
<a href="#add" onClick={this.handleAddParam}>+ Add required parameter</a>
</div>
<div className="actions">
<input type="submit" value="Save" className="primary mrs" />

View File

@ -43,21 +43,11 @@ var StrategyComponent = React.createClass({
render: function() {
return (
<div>
<div className="line">
<div className="unit r-size1of4">
<h2>Strategies</h2>
</div>
<div className="unit r-size3of4 rightify prl ptm">
<button className="" onClick={this.handleNewStrategy}>Create Strategy</button>
</div>
</div>
<ErrorMessages errors={this.state.errors} onClearErrors={this.clearErrors} />
<hr />
{this.state.createView ? this.renderCreateView() : this.renderCreateButton()}
{this.state.createView ? this.renderCreateView() : null}
<hr />
<StrategyList strategies={this.state.strategies} />
</div>
@ -66,6 +56,14 @@ var StrategyComponent = React.createClass({
renderCreateView: function() {
return (<CreateStrategy handleCancelNewStrategy={this.handleCancelNewStrategy} />)
},
renderCreateButton: function() {
return (
<p className="">
<button className="" onClick={this.handleNewStrategy}>Create strategy</button>
</p>
);
}
});