From 99e9392c4511ca2650745100a12a2fa0e8fe864f Mon Sep 17 00:00:00 2001
From: Ivan Diaz <ivan@opensupports.com>
Date: Thu, 18 Aug 2016 14:16:19 -0300
Subject: [PATCH] Ivan - Add text editor to text area [skip ci]

---
 .../create-ticket-form.js                     |  4 ++--
 client/src/app/main/main-layout-header.js     |  2 +-
 client/src/core-components/form.js            | 13 ++++++++++--
 client/src/core-components/text-area.js       | 20 +++++--------------
 client/src/core-components/text-area.scss     |  3 ---
 client/src/core-components/text-editor.js     |  4 ++++
 client/src/core-components/text-editor.scss   |  6 ++++++
 7 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js b/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js
index 44f62ffa..207e94ac 100644
--- a/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js
+++ b/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js
@@ -8,7 +8,7 @@ import SubmitButton       from 'core-components/submit-button';
 import Message            from 'core-components/message';
 import Form               from 'core-components/form';
 import Input              from 'core-components/input';
-import TextEditor         from 'core-components/text-editor';
+import TextArea           from 'core-components/text-area';
 import DropDown           from 'core-components/drop-down';
 import Widget             from 'core-components/widget';
 
@@ -23,7 +23,7 @@ class CreateTicketForm extends React.Component {
                     {content: 'Department3'}
                     ]} />
                     <Input label="Title" name="title" required />
-                    <TextEditor label="Content" name="content" required />
+                    <TextArea label="Content" name="content" required />
                 </Form>
             </div>
         );
diff --git a/client/src/app/main/main-layout-header.js b/client/src/app/main/main-layout-header.js
index 43bc7e45..e636d73c 100644
--- a/client/src/app/main/main-layout-header.js
+++ b/client/src/app/main/main-layout-header.js
@@ -55,7 +55,7 @@ class MainLayoutHeader extends React.Component {
         return {
             className: 'main-layout-header__languages',
             items: this.getLanguageList(),
-            selectedIndex: Object.values(codeLanguages).indexOf(this.props.config.language),
+            selectedIndex: Object.keys(codeLanguages).map((key) => codeLanguages[key]).indexOf(this.props.config.language),
             onChange: this.changeLanguage.bind(this)
         };
     }
diff --git a/client/src/core-components/form.js b/client/src/core-components/form.js
index 54ec26e3..2b4f7589 100644
--- a/client/src/core-components/form.js
+++ b/client/src/core-components/form.js
@@ -7,6 +7,12 @@ import ValidationFactory from 'lib-app/validations/validations-factory';
 
 import Input from 'core-components/input';
 import Checkbox from 'core-components/checkbox';
+//import TextArea from 'core-components/text-area';
+
+const validFieldTypes = [
+    Input,
+    CheckBox
+];
 
 class Form extends React.Component {
 
@@ -75,7 +81,7 @@ class Form extends React.Component {
     getFieldProps({props, type}) {
         let additionalProps = {};
 
-        if (type === Input || type === Checkbox) {
+        if (this.isValidFieldType({type})) {
             let fieldName = props.name;
 
             additionalProps = {
@@ -145,6 +151,9 @@ class Form extends React.Component {
                 else if (child.type === Checkbox) {
                     form[child.props.name] = child.props.checked || false;
                 }
+  //              else if (child.type === TextArea) {
+                    // DO SOMETHING
+  //            }
 
                 if (child.props.required) {
                     validations[child.props.name] = ValidationFactory.getValidator(child.props.validation || 'DEFAULT');
@@ -183,7 +192,7 @@ class Form extends React.Component {
     }
 
     isValidFieldType(child) {
-        return child.type === Input || child.type === Checkbox;
+        return _.includes(validFieldTypes, child.type);
     }
 
     hasFormErrors() {
diff --git a/client/src/core-components/text-area.js b/client/src/core-components/text-area.js
index 8f2f6e94..c17ae440 100644
--- a/client/src/core-components/text-area.js
+++ b/client/src/core-components/text-area.js
@@ -18,22 +18,13 @@ class TextArea extends React.Component {
         error: React.PropTypes.string
     };
 
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            editorState: EditorState.createEmpty()
-        };
-        this.onChange = (editorState) => this.setState({editorState});
-    }
-
     render() {
         return (
-            <label className={this.getClass()}>
+            <span className={this.getClass()}>
                 <span className="text-area__label">{this.props.label}</span>
-                    <TextEditor />
+                <TextEditor {...this.getEditorProps()}/>
                 {this.renderError()}
-            </label>
+            </span>
         );
     }
 
@@ -47,7 +38,7 @@ class TextArea extends React.Component {
         return error;
     }
 
-    /*getEditorProps() {
+    getEditorProps() {
         let props = _.clone(this.props);
 
         props['aria-required'] = this.props.required;
@@ -57,11 +48,10 @@ class TextArea extends React.Component {
 
         delete props.required;
         delete props.validation;
-        delete props.error;
         delete props.password;
 
         return props;
-    }*/
+    }
 
     getClass() {
         let classes = {
diff --git a/client/src/core-components/text-area.scss b/client/src/core-components/text-area.scss
index e51bea62..546205f3 100644
--- a/client/src/core-components/text-area.scss
+++ b/client/src/core-components/text-area.scss
@@ -34,9 +34,6 @@
             display: block;
             position: absolute;
         }
-        .text-area__text {
-            border: 1px solid $primary-red;
-        }
     }
 
 }
\ No newline at end of file
diff --git a/client/src/core-components/text-editor.js b/client/src/core-components/text-editor.js
index 83f5f6c1..120988cd 100644
--- a/client/src/core-components/text-editor.js
+++ b/client/src/core-components/text-editor.js
@@ -6,6 +6,9 @@ import {Editor, EditorState, RichUtils} from 'draft-js';
 import Button from 'core-components/button';
 
 class TextEditor extends React.Component {
+    static propTypes = {
+        error: React.PropTypes.bool
+    };
 
     constructor(props) {
         super(props);
@@ -54,6 +57,7 @@ class TextEditor extends React.Component {
     getClass() {
         let classes = {
             'text-editor': true,
+            'text-editor_errored': (this.props.error),
             'text-editor_focused': (this.state.focused),
 
             [this.props.className]: (this.props.className)
diff --git a/client/src/core-components/text-editor.scss b/client/src/core-components/text-editor.scss
index ce50e4bf..c1536d01 100644
--- a/client/src/core-components/text-editor.scss
+++ b/client/src/core-components/text-editor.scss
@@ -30,4 +30,10 @@
             border-color: $primary-blue;
         }
     }
+
+    &_errored {
+        .text-editor__editor {
+            border: 1px solid $primary-red;
+        }
+    }
 }
\ No newline at end of file