Ivan - Add custom response field [skip ci]

client/src/app-components/ticket-event.js

@@ -17,7 +17,7 @@ class TicketEvent extends React.Component {
         ]),
         author: React.PropTypes.object,
         content: React.PropTypes.string,
-        date: React.PropTypes.number
+        date: React.PropTypes.string
     };
 
     render() {

client/src/app-components/ticket-viewer.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import _ from 'lodash';
+import RichTextEditor from 'react-rte-browserify';
 
 import i18n  from 'lib-app/i18n';
 import API   from 'lib-app/api-call';
-import store from 'app/store';
 import SessionStore       from 'lib-app/session-store';
-import SessionActions     from 'actions/session-actions';
 
 import TicketEvent        from 'app-components/ticket-event';
 import AreYouSure         from 'app-components/are-you-sure';
@@ -33,13 +32,11 @@ class TicketViewer extends React.Component {
         }
     };
 
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            loading: false
-        };
-    }
+    state = {
+        loading: false,
+        commentValue: RichTextEditor.createEmptyValue(),
+        commentEdited: false
+    };
 
     render() {
         const ticket = this.props.ticket;
@@ -61,7 +58,7 @@ class TicketViewer extends React.Component {
                     <div className="ticket-viewer__response-title row">{i18n('RESPOND')}</div>
                     {this.renderCustomResponses()}
                     <div className="ticket-viewer__response-field row">
-                        <Form onSubmit={this.onSubmit.bind(this)} loading={this.state.loading}>
+                        <Form {...this.getCommentFormProps()}>
                             <FormField name="content" validation="TEXT_AREA" required field="textarea" />
                             <SubmitButton>{i18n('RESPOND_TICKET')}</SubmitButton>
                         </Form>
@@ -204,7 +201,7 @@ class TicketViewer extends React.Component {
 
             customResponsesNode = (
                 <div className="ticket-viewer__response-custom row">
-                    <DropDown items={customResponses} size="medium" />
+                    <DropDown items={customResponses} size="medium" onChange={this.onCustomResponsesChanged.bind(this)}/>
                 </div>
             );
         }
@@ -212,6 +209,20 @@ class TicketViewer extends React.Component {
         return customResponsesNode;
     }
 
+    getCommentFormProps() {
+        return {
+            onSubmit: this.onSubmit.bind(this),
+            loading: this.state.loading,
+            onChange: (formState) => {this.setState({
+                commentValue: formState.content,
+                commentEdited: true
+            })},
+            values: {
+                'content': this.state.commentValue
+            }
+        };
+    }
+
     onDepartmentDropdownChanged(event) {
         AreYouSure.openModal(null, this.changeDepartment.bind(this, event.index));
     }
@@ -268,6 +279,21 @@ class TicketViewer extends React.Component {
         }).then(this.onTicketModification.bind(this));
     }
 
+    onCustomResponsesChanged({index}) {
+        let replaceContentWithCustomResponse = () => {
+            this.setState({
+                commentValue: RichTextEditor.createValueFromString(this.props.customResponses[index-1].content || '', 'html'),
+                commentEdited: false
+            });
+        };
+
+        if (this.state.commentEdited && index) {
+            AreYouSure.openModal(null, replaceContentWithCustomResponse);
+        } else {
+            replaceContentWithCustomResponse();
+        }
+    }
+
     onSubmit(formState) {
         this.setState({
             loading: true

client/src/data/fixtures/ticket-fixtures.js

@@ -39,11 +39,11 @@ module.exports = [
             return {
                 status: 'success',
                 data: [
-                    {name: 'Common issue #1', language: 'en', content: 'some content'},
-                    {name: 'Common issue #2', language: 'en', content: 'some content'},
-                    {name: 'Common issue #3', language: 'en', content: 'some content'},
-                    {name: 'Häufiges Problem #1', language: 'de', content: 'einige Inhalte'},
-                    {name: 'Häufiges Problem #2', language: 'de', content: 'einige Inhalte'}
+                    {name: 'Common issue #1', language: 'en', content: 'some content 1'},
+                    {name: 'Common issue #2', language: 'en', content: 'some content 2'},
+                    {name: 'Common issue #3', language: 'en', content: 'some content 3'},
+                    {name: 'Häufiges Problem #1', language: 'de', content: 'einige Inhalte 1'},
+                    {name: 'Häufiges Problem #2', language: 'de', content: 'einige Inhalte 2'}
                 ]
             };
         }