From 3b8bcc84388279eab0b5bbe31bd20ecf63fe2d0e Mon Sep 17 00:00:00 2001 From: ivan Date: Tue, 18 Oct 2016 20:42:49 -0300 Subject: [PATCH] Ivan - Add editable ticket view [skip ci] --- client/src/app-components/ticket-viewer.js | 81 +++++++++++++++++-- client/src/app-components/ticket-viewer.scss | 5 ++ .../create-ticket-form.js | 6 +- client/src/core-components/button.js | 2 + client/src/core-components/button.scss | 6 ++ client/src/data/fixtures/system-fixtures.js | 6 +- client/src/data/fixtures/user-fixtures.js | 10 +-- client/src/data/languages/en.js | 6 +- 8 files changed, 102 insertions(+), 20 deletions(-) diff --git a/client/src/app-components/ticket-viewer.js b/client/src/app-components/ticket-viewer.js index 50d9eb30..89237ab3 100644 --- a/client/src/app-components/ticket-viewer.js +++ b/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 {
{i18n('DATE')}
-
{ticket.department.name}
+
+ {return {content: department.name}})} + selectedIndex={_.findIndex(departments, {id: this.props.ticket.department.id})} + onChange={this.onDepartmentDropdownChanged.bind(this)} /> +
{ticket.author.name}
{ticket.date}
@@ -98,15 +105,17 @@ class TicketViewer extends React.Component {
- +
-
- {i18n((ticket.closed) ? 'CLOSED' : 'OPEN')} +
@@ -146,7 +155,7 @@ class TicketViewer extends React.Component { {(ticket.owner) ? ticket.owner.name : i18n('NONE')}
- {i18n((ticket.closed) ? 'CLOSED' : 'OPEN')} + {i18n((ticket.closed) ? 'CLOSED' : 'OPENED')}
@@ -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 diff --git a/client/src/app-components/ticket-viewer.scss b/client/src/app-components/ticket-viewer.scss index b6e68e54..c4ec3865 100644 --- a/client/src/app-components/ticket-viewer.scss +++ b/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 { 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 17dd484b..ca2543cd 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 @@ -42,8 +42,8 @@ class CreateTicketForm extends React.Component { {(!this.props.userLogged) ? this.renderEmailAndName() : null}
- {return {content: department}}), + {return {content: department.name}}), size: 'medium' }} />
@@ -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)); } diff --git a/client/src/core-components/button.js b/client/src/core-components/button.js index 222bedab..3b2d52c6 100644 --- a/client/src/core-components/button.js +++ b/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'), diff --git a/client/src/core-components/button.scss b/client/src/core-components/button.scss index 12ecc71b..33f1cb7b 100644 --- a/client/src/core-components/button.scss +++ b/client/src/core-components/button.scss @@ -47,6 +47,12 @@ } } + &_extra-small { + text-transform: none; + width: 130px; + height: 30px; + } + &_small { width: 100px; height: 47px; diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index a0b3b168..b630d7be 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -9,9 +9,9 @@ module.exports = [ 'language': 'en', 'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS', 'departments': [ - 'Sales Support', - 'Technical Issues', - 'System and Administration' + {id: 1, name: 'Sales Support'}, + {id: 2, name: 'Technical Issues'}, + {id: 3, name: 'System and Administration'} ] } }; diff --git a/client/src/data/fixtures/user-fixtures.js b/client/src/data/fixtures/user-fixtures.js index bbd87aa0..04cf2cd5 100644 --- a/client/src/data/fixtures/user-fixtures.js +++ b/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, - name: 'Environment Setup' + id: 1, + 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, - name: 'Environment Setup' + id: 1, + name: 'Sales Support' }, date: 20150409, file: 'http://www.opensupports.com/some_file.zip', diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 9f0d1c59..5f2f4fdd 100644 --- a/client/src/data/languages/en.js +++ b/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.',