Ivan - Create Ticket Form - Add /ticket/create fixture and add ticket create form logic [skip ci]

client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js

@@ -1,5 +1,6 @@
 import React              from 'react';
 import ReCAPTCHA          from 'react-google-recaptcha';
+import { browserHistory } from 'react-router';
 
 import i18n               from 'lib-app/i18n';
 import API                from 'lib-app/api-call';
@@ -10,14 +11,24 @@ import Form               from 'core-components/form';
 import FormField          from 'core-components/form-field';
 
 class CreateTicketForm extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: false,
+            message: null
+        };
+    }
+
     render() {
         return (
-            <div>
+            <div className="create-ticket-form">
                 <h2>Create Ticket</h2>
-                <Form onSubmit={this.onSubmit.bind(this)}>
+                <Form loading={this.state.loading} onSubmit={this.onSubmit.bind(this)}>
                     <div className="row">
                         <FormField className="col-md-7" label="Title" name="title" validation="TITLE" required field="input" fieldProps={{size: 'large'}}/>
-                        <FormField className="col-md-5" label="Department" name="department" field="select" fieldProps={{
+                        <FormField className="col-md-5" label="Department" name="departmentId" field="select" fieldProps={{
                             items: [
                                 {content: 'Sales Support'},
                                 {content: 'Technical Issues'},
@@ -29,12 +40,47 @@ class CreateTicketForm extends React.Component {
                     <FormField label="Content" name="content" validation="TEXT_AREA" required field="textarea" />
                     <SubmitButton>Create Ticket</SubmitButton>
                 </Form>
+                {this.renderMessage()}
             </div>
         );
     }
 
+    renderMessage() {
+        switch (this.state.message) {
+            case 'success':
+                return <Message className="create-ticket-form__message" type="success">{i18n('TICKET_SENT')}</Message>;
+            case 'fail':
+                return <Message className="create-ticket-form__message" type="error">{i18n('TICKET_SENT_ERROR')}</Message>;
+            default:
+                return null;
+        }
+    }
+
     onSubmit(formState) {
-        console.log(formState);
+        this.setState({
+            loading: true
+        });
+
+        API.call({
+            path: '/ticket/create',
+            data: formState
+        }).then(this.onTicketSuccess.bind(this)).catch(this.onTicketFail.bind(this));
+    }
+
+    onTicketSuccess() {
+        this.setState({
+            loading: false,
+            message: 'success'
+        });
+
+        setTimeout(() => {browserHistory.push('/dashboard')}, 2000);
+    }
+
+    onTicketFail() {
+        this.setState({
+            loading: false,
+            message: 'fail'
+        });
     }
 }
 

client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.scss

@@ -0,0 +1,6 @@
+.create-ticket-form {
+
+    &__message {
+        margin-top: 20px;
+    }
+}

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

@@ -0,0 +1,25 @@
+module.exports = [
+    {
+        path: '/ticket/create',
+        time: 2000,
+        response: function (data) {
+            let response;
+
+            if (data.title !== 'error') {
+                response = {
+                    status: 'success',
+                    data: {
+                        'ticketNumber': 121444
+                    }
+                };
+            } else {
+                response = {
+                    status: 'fail',
+                    message: 'Ticket could not be created'
+                };
+            }
+
+            return response;
+        }
+    }
+];

client/src/data/languages/en.js

@@ -25,9 +25,11 @@ export default {
     'ERROR_CONTENT_SHORT': 'Content too short',
     'PASSWORD_NOT_MATCH': 'Password does not match',
     'INVALID_RECOVER': 'Invalid recover data',
+    'TICKET_SENT_ERROR': 'An error occurred while trying to create the ticket.',
 
     //MESSAGES
     'SIGNUP_SUCCESS': 'You have registered successfully in our support system.',
+    'TICKET_SENT': 'Ticket has been created successfully.',
     'VALID_RECOVER': 'Password recovered successfully',
     'EMAIL_EXISTS': 'Email already exists, please try to log in or recover password'
 };

client/src/lib-app/fixtures-loader.js

@@ -17,6 +17,7 @@ let fixtures = (function () {
 
 // FIXTURES
 fixtures.add(require('data/fixtures/user-fixtures'));
+fixtures.add(require('data/fixtures/ticket-fixtures'));
 fixtures.add(require('data/fixtures/system-fixtures'));
 
 _.each(fixtures.getAll(), function (fixture) {