Ivan - Add editable ticket view [skip ci]

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

@@ -4,9 +4,11 @@ import _ from 'lodash';
 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 TicketAction       from 'app-components/ticket-action';
+import AreYouSure         from 'app-components/are-you-sure';
 import Form               from 'core-components/form';
 import FormField          from 'core-components/form-field';
 import SubmitButton       from 'core-components/submit-button';
@@ -20,7 +22,7 @@ class TicketViewer extends React.Component {
     };
 
     static defaultProps = {
-        editable: true,
+        editable: false,
         ticket: {
             author: {},
             department: {},
@@ -36,7 +38,6 @@ class TicketViewer extends React.Component {
         };
     }
 
-
     render() {
         const ticket = this.props.ticket;
 
@@ -68,6 +69,7 @@ class TicketViewer extends React.Component {
 
     renderEditableHeaders() {
         const ticket = this.props.ticket;
+        const departments = SessionStore.getDepartments();
         const priorities = {
             'low': 0,
             'medium': 1,
@@ -87,7 +89,12 @@ class TicketViewer extends React.Component {
                     <div className="col-md-4">{i18n('DATE')}</div>
                 </div>
                 <div className="ticket-viewer__info-row-values row">
-                    <div className="col-md-4">{ticket.department.name}</div>
+                    <div className="col-md-4">
+                        <DropDown className="ticket-viewer__editable-dropdown"
+                                  items={departments.map((department) => {return {content: department.name}})}
+                                  selectedIndex={_.findIndex(departments, {id: this.props.ticket.department.id})}
+                                  onChange={this.onDepartmentDropdownChanged.bind(this)} />
+                    </div>
                     <div className="col-md-4">{ticket.author.name}</div>
                     <div className="col-md-4">{ticket.date}</div>
                 </div>
@@ -98,15 +105,17 @@ class TicketViewer extends React.Component {
                 </div>
                 <div className="ticket-viewer__info-row-values row">
                     <div className="col-md-4">
-                        <DropDown className="ticket-viewer__editable-dropdown" items={priorityList} selectedIndex={priorities[ticket.priority]} />
+                        <DropDown className="ticket-viewer__editable-dropdown" items={priorityList} selectedIndex={priorities[ticket.priority]} onChange={this.onPriorityDropdownChanged.bind(this)} />
                     </div>
                     <div className="col-md-4">
-                        <Button type="secondary" size="small">
+                        <Button type={(ticket.owner) ? 'primary' : 'secondary'} size="extra-small" onClick={this.onAssignClick.bind(this)}>
-                            {i18n(ticket.owner ? 'ASSIGN' : 'UN_ASSIGN')}
+                            {i18n(ticket.owner ? 'UN_ASSIGN' : 'ASSIGN_TO_ME')}
                         </Button>
                     </div>
                     <div className="col-md-4">
-                        {i18n((ticket.closed) ? 'CLOSED' : 'OPEN')}
+                        <Button type={(ticket.closed) ? 'secondary' : 'primary'} size="extra-small" onClick={this.onCloseClick.bind(this)}>
+                            {i18n(ticket.closed ? 'RE_OPEN' : 'CLOSE')}
+                        </Button>
                     </div>
                 </div>
             </div>
@@ -146,7 +155,7 @@ class TicketViewer extends React.Component {
                         {(ticket.owner) ? ticket.owner.name : i18n('NONE')}
                     </div>
                     <div className="col-md-4">
-                        {i18n((ticket.closed) ? 'CLOSED' : 'OPEN')}
+                        {i18n((ticket.closed) ? 'CLOSED' : 'OPENED')}
                     </div>
                 </div>
             </div>
@@ -159,6 +168,62 @@ class TicketViewer extends React.Component {
         );
     }
 
+    onDepartmentDropdownChanged(event) {
+        AreYouSure.openModal(null, this.changeDepartment.bind(this, event.index));
+    }
+
+    onPriorityDropdownChanged(event) {
+        AreYouSure.openModal(null, this.changePriority.bind(this, event.index));
+    }
+
+    onAssignClick() {
+        API.call({
+            path: (this.props.ticket.owner) ? '/staff/un-assign-ticket' : '/staff/assign-ticket',
+            data: {
+                ticketNumber: this.props.ticket.ticketNumber
+            }
+        });
+    }
+
+    onCloseClick() {
+        AreYouSure.openModal(null, this.toggleClose);
+    }
+
+    toggleClose() {
+        API.call({
+            path: (this.props.ticket.closed) ? '/ticket/re-open' : '/ticket/close',
+            data: {
+                ticketNumber: this.props.ticket.ticketNumber
+            }
+        });
+    }
+
+    changeDepartment(index) {
+        API.call({
+            path: '/ticket/change-department',
+            data: {
+                ticketNumber: this.props.ticket.ticketNumber,
+                departmentId: SessionStore.getDepartments()[index].id
+            }
+        });
+    }
+
+    changePriority(index) {
+        const priorities = [
+            'low',
+            'medium',
+            'high'
+        ];
+
+        API.call({
+            path: '/ticket/change-priority',
+            data: {
+                ticketNumber: this.props.ticket.ticketNumber,
+                priority: priorities[index]
+            }
+        });
+    }
+
     onSubmit(formState) {
         this.setState({
             loading: true

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

@@ -28,10 +28,15 @@
     &__info-row-values {
         background-color: $light-grey;
         color: $secondary-blue;
+        padding-bottom: 10px;
     }
 
     &__editable-dropdown {
         margin: auto;
+
+        .drop-down__current-item {
+            background-color: $very-light-grey;
+        }
     }
 
     &__content {

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

@@ -42,8 +42,8 @@ class CreateTicketForm extends React.Component {
                     {(!this.props.userLogged) ? this.renderEmailAndName() : null}
                     <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="departmentId" field="select" fieldProps={{
+                        <FormField className="col-md-5" label="Department" name="departmentIndex" field="select" fieldProps={{
-                            items: SessionStore.getDepartments().map((department) => {return {content: department}}),
+                            items: SessionStore.getDepartments().map((department) => {return {content: department.name}}),
                             size: 'medium'
                         }} />
                     </div>
@@ -92,7 +92,7 @@ class CreateTicketForm extends React.Component {
         API.call({
             path: '/ticket/create',
             data: _.extend({}, formState, {
-                departmentId: formState.departmentId + 1
+                departmentId: SessionStore.getDepartments()[formState.departmentIndex].id
             })
         }).then(this.onTicketSuccess.bind(this)).catch(this.onTicketFail.bind(this));
     }

client/src/core-components/button.js

@@ -18,6 +18,7 @@ class Button extends React.Component {
     static propTypes = {
         children: React.PropTypes.node,
         size: React.PropTypes.oneOf([
+            'extra-small',
             'small',
             'medium',
             'large',
@@ -76,6 +77,7 @@ class Button extends React.Component {
             'button_clean': (this.props.type === 'clean'),
             'button_link': (this.props.type === 'link'),
 
+            'button_extra-small': (this.props.size === 'extra-small'),
             'button_small': (this.props.size === 'small'),
             'button_medium': (this.props.size === 'medium'),
             'button_large': (this.props.size === 'large'),

client/src/core-components/button.scss

@@ -47,6 +47,12 @@
         }
     }
 
+    &_extra-small {
+        text-transform: none;
+        width: 130px;
+        height: 30px;
+    }
+
     &_small {
         width: 100px;
         height: 47px;

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

@@ -9,9 +9,9 @@ module.exports = [
                     'language': 'en',
                     'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS',
                     'departments': [
-                        'Sales Support',
+                        {id: 1, name: 'Sales Support'},
-                        'Technical Issues',
+                        {id: 2, name: 'Technical Issues'},
-                        'System and Administration'
+                        {id: 3, name: 'System and Administration'}
                     ]
                 }
             };

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

@@ -141,7 +141,7 @@ module.exports = [
                             content: 'I had a problem with the installation of the php server',
                             department: {
                                 id: 2,
-                                name: 'Environment Setup'
+                                name: 'Technical Issues'
                             },
                             date: '15 Apr 2016',
                             file: 'http://www.opensupports.com/some_file.zip',
@@ -259,8 +259,8 @@ module.exports = [
                             title: 'Lorem ipsum door',
                             content: 'I had a problem with the installation of the php server',
                             department: {
-                                id: 2,
+                                id: 1,
-                                name: 'Environment Setup'
+                                name: 'Sales Support'
                             },
                             date: '15 Apr 2016',
                             file: 'http://www.opensupports.com/some_file.zip',
@@ -375,8 +375,8 @@ module.exports = [
                             title: 'Lorem ipsum door',
                             content: 'I had a problem with the installation of the php server',
                             department: {
-                                id: 2,
+                                id: 1,
-                                name: 'Environment Setup'
+                                name: 'Sales Support'
                             },
                             date: 20150409,
                             file: 'http://www.opensupports.com/some_file.zip',

client/src/data/languages/en.js

@@ -64,8 +64,12 @@ export default {
     'OWNED': 'Owned',
     'STATUS': 'Status',
     'NONE': 'None',
-    'OPEN': 'Open',
+    'OPENED': 'Opened',
     'CLOSED': 'Closed',
+    'CLOSE': 'Close',
+    'RE_OPEN': 'Re open',
+    'ASSIGN_TO_ME': 'Assign to me',
+    'UN_ASSIGN': 'Unassign',
 
     //VIEW DESCRIPTIONS
     'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',