tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Add editable ticket view [skip ci]

This commit is contained in:
ivan 2016-10-18 20:42:49 -03:00
parent 5e25905e3c
commit 3b8bcc8438
8 changed files with 102 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
client/src/app-components/ticket-viewer.js
View File

@ -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">
{i18n(ticket.owner ? 'ASSIGN' : 'UN_ASSIGN')}
<Button type={(ticket.owner) ? 'primary' : 'secondary'} size="extra-small" onClick={this.onAssignClick.bind(this)}>
{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

5
client/src/app-components/ticket-viewer.scss
View File

@ -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 {

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

@ -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={{
items: SessionStore.getDepartments().map((department) => {return {content: department}}),
<FormField className="col-md-5" label="Department" name="departmentIndex" field="select" fieldProps={{
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));
}

2
client/src/core-components/button.js
View File

@ -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'),

6
client/src/core-components/button.scss
View File

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

6
client/src/data/fixtures/system-fixtures.js
View File

@ -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'}
]
}
};

10
client/src/data/fixtures/user-fixtures.js
View File

@ -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',

6
client/src/data/languages/en.js
View File

@ -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.',