From 954f6c76ad6efb26776fb78e67964ea17526e4ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Mon, 3 Nov 2014 21:27:47 +0100
Subject: [PATCH] Strategies should also have description #34

---
 lib/strategyApi.js                            | 10 +++--
 public/js/components/form/TextInput.jsx       | 45 +++++++++++++++++++
 public/js/components/strategy/Strategy.jsx    |  5 ++-
 .../js/components/strategy/StrategyForm.jsx   | 31 +++++++------
 4 files changed, 72 insertions(+), 19 deletions(-)
 create mode 100644 public/js/components/form/TextInput.jsx

diff --git a/lib/strategyApi.js b/lib/strategyApi.js
index 83b8bfae57..0cf580be20 100644
--- a/lib/strategyApi.js
+++ b/lib/strategyApi.js
@@ -1,9 +1,13 @@
 var strategies = [
-    {name: "default"},
     {
-        name: "activeForUsers",
+        name: "default",
+        description: "Default on or off Strategy."
+    },
+    {
+        name: "usersWithEmail",
+        description: "Active for users defined  in the comma-separated emails-parameter.",
         parametersTemplate: {
-            userNames: "String"
+            emails: "String"
         }
     }
 ];
diff --git a/public/js/components/form/TextInput.jsx b/public/js/components/form/TextInput.jsx
new file mode 100644
index 0000000000..739a9bf429
--- /dev/null
+++ b/public/js/components/form/TextInput.jsx
@@ -0,0 +1,45 @@
+var React          = require('react');
+
+var TextInput = React.createClass({
+    propTypes: {
+        name: React.PropTypes.string.isRequired,
+        label: React.PropTypes.string.isRequired,
+        id: React.PropTypes.string.isRequired,
+        placeholder: React.PropTypes.string,
+        value: React.PropTypes.string,
+        required: React.PropTypes.bool
+    },
+
+    getDefaultProps: function() {
+        return {
+            required: false
+        };
+    },
+
+    getInitialState: function() {
+        return {};
+    },
+
+    getValue: function() {
+        return this.refs.input.getDOMNode().value.trim();
+    },
+
+
+    render: function() {
+        return (
+            <div className="formelement">
+                <label htmlFor="strategy_name" className="t4">{this.props.label}</label>
+                <div className="input">
+                    <input type="text"
+                        id={this.props.id}
+                        name={this.props.name}
+                        defaultValue={this.props.value}
+                        placeholder={this.props.placeholder}
+                        ref="input" />
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = TextInput;
\ No newline at end of file
diff --git a/public/js/components/strategy/Strategy.jsx b/public/js/components/strategy/Strategy.jsx
index d1fb019740..096a2f099c 100644
--- a/public/js/components/strategy/Strategy.jsx
+++ b/public/js/components/strategy/Strategy.jsx
@@ -8,8 +8,9 @@ var Strategy = React.createClass({
     render: function() {
         return (
             <div className="line mal">
-                <div className="unit r-size1of3">
-                    {this.props.strategy.name}
+                <div className="unit">
+                    <strong>{this.props.strategy.name}</strong><br />
+                    <em>{this.props.strategy.description}</em>
                 </div>
             </div>
         );
diff --git a/public/js/components/strategy/StrategyForm.jsx b/public/js/components/strategy/StrategyForm.jsx
index d153c0d339..2a46c3f790 100644
--- a/public/js/components/strategy/StrategyForm.jsx
+++ b/public/js/components/strategy/StrategyForm.jsx
@@ -1,4 +1,5 @@
 var React          = require('react');
+var TextInput      = require('../form/TextInput');
 
 var StrategyForm = React.createClass({
 
@@ -18,7 +19,8 @@ var StrategyForm = React.createClass({
         event.preventDefault();
 
         var strategy = {};
-        strategy.name = this.refs.strategy_name.getDOMNode().value.trim();
+        strategy.name = this.refs.name.getValue();
+        strategy.description = this.refs.description.getValue();
         strategy.parametersTemplate = {};
 
         var that = this;
@@ -55,23 +57,24 @@ var StrategyForm = React.createClass({
                     <form onSubmit={this.onSubmit}>
                         <fieldset>
                             <legend>Create strategy</legend>
-                            <div className="formelement">
-                                <label htmlFor="strategy_name" className="t4">Name</label>
-                                <div className="input">
-                                    <input
-                                        id="trategy_name"
-                                        ref="strategy_name"
-                                        type="text"
-                                        name="name"
-                                        placeholder="Strategy name"
-                                    />
-                                </div>
-                            </div>
+
+                            <TextInput
+                                id="name"
+                                name="name"
+                                label="Name"
+                                ref="name"
+                                placeholder="Strategy name" />
+
+                            <TextInput
+                                id="description"
+                                name="description"
+                                label="Description"
+                                ref="description"
+                                placeholder="Please write a short descriptio" />
 
                             {this.renderParameters()}
                             {this.renderRemoveLink()}
 
-
                             <div className="actions">
                                 <input type="submit" value="Save" className="primary mrs" />
                                 <button onClick={this.props.handleCancelNewStrategy} className="mrs">Cancel</button>