tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-07-30 17:25:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Ivan - Change name TicketAction => TicketEvent [skip ci]

Browse Source
This commit is contained in:
ivan 2016-10-18 20:47:36 -03:00
parent 3b8bcc8438
commit a876e83108
4 changed files with 70 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
client/src/app-components/ticket-action.js → client/src/app-components/ticket-event.js
View File

@ -4,7 +4,7 @@ import classNames from 'classnames';
import i18n from 'lib-app/i18n'; import i18n from 'lib-app/i18n';
import Icon from 'core-components/icon'; import Icon from 'core-components/icon';
class TicketAction extends React.Component { class TicketEvent extends React.Component {
static propTypes = { static propTypes = {
type: React.PropTypes.oneOf([ type: React.PropTypes.oneOf([
'COMMENT', 'COMMENT',
@ -31,12 +31,12 @@ class TicketAction extends React.Component {
return ( return (
<div className={this.getClass()}> <div className={this.getClass()}>
<span className="ticket-action__connector" /> <span className="ticket-event__connector" />
<div className="col-md-1"> <div className="col-md-1">
{iconNode} {iconNode}
</div> </div>
<div className="col-md-11"> <div className="col-md-11">
{this.renderActionDescription()} {this.renderEventDescription()}
</div> </div>
</div> </div>
); );
@ -44,21 +44,21 @@ class TicketAction extends React.Component {
renderStaffPic() { renderStaffPic() {
return ( return (
<div className="ticket-action__staff-pic"> <div className="ticket-event__staff-pic">
<img src={this.props.author.profilePic} className="ticket-action__staff-pic-img" /> <img src={this.props.author.profilePic} className="ticket-event__staff-pic-img" />
</div> </div>
); );
} }
renderIcon() { renderIcon() {
return ( return (
<div className="ticket-action__icon"> <div className="ticket-event__icon">
<Icon {...this.getIconProps()}/> <Icon {...this.getIconProps()}/>
</div> </div>
); );
} }
renderActionDescription() { renderEventDescription() {
const renders = { const renders = {
'COMMENT': this.renderComment.bind(this), 'COMMENT': this.renderComment.bind(this),
'ASSIGN': this.renderAssignment.bind(this), 'ASSIGN': this.renderAssignment.bind(this),
@ -74,14 +74,14 @@ class TicketAction extends React.Component {
renderComment() { renderComment() {
return ( return (
<div className="ticket-action__comment"> <div className="ticket-event__comment">
<span className="ticket-action__comment-pointer" /> <span className="ticket-event__comment-pointer" />
<div className="ticket-action__comment-author"> <div className="ticket-event__comment-author">
<span className="ticket-action__comment-author-name">{this.props.author.name}</span> <span className="ticket-event__comment-author-name">{this.props.author.name}</span>
<span className="ticket-action__comment-author-type">({i18n((this.props.author.staff) ? 'STAFF' : 'CUSTOMER')})</span> <span className="ticket-event__comment-author-type">({i18n((this.props.author.staff) ? 'STAFF' : 'CUSTOMER')})</span>
</div> </div>
<div className="ticket-action__comment-date">{this.props.date}</div> <div className="ticket-event__comment-date">{this.props.date}</div>
<div className="ticket-action__comment-content" dangerouslySetInnerHTML={{__html: this.props.content}}></div> <div className="ticket-event__comment-content" dangerouslySetInnerHTML={{__html: this.props.content}}></div>
{this.renderFileRow(this.props.file)} {this.renderFileRow(this.props.file)}
</div> </div>
); );
@ -89,62 +89,62 @@ class TicketAction extends React.Component {
renderAssignment() { renderAssignment() {
return ( return (
<div className="ticket-action__circled"> <div className="ticket-event__circled">
<span className="ticket-action__circled-author">{this.props.author.name}</span> <span className="ticket-event__circled-author">{this.props.author.name}</span>
<span className="ticket-action__circled-text"> assigned this ticket</span> <span className="ticket-event__circled-text"> assigned this ticket</span>
<span className="ticket-action__circled-date"> on {this.props.date}</span> <span className="ticket-event__circled-date"> on {this.props.date}</span>
</div> </div>
) )
} }
renderUnAssignment() { renderUnAssignment() {
return ( return (
<div className="ticket-action__circled"> <div className="ticket-event__circled">
<span className="ticket-action__circled-author">{this.props.author.name}</span> <span className="ticket-event__circled-author">{this.props.author.name}</span>
<span className="ticket-action__circled-text"> unassigned this ticket</span> <span className="ticket-event__circled-text"> unassigned this ticket</span>
<span className="ticket-action__circled-date"> on {this.props.date}</span> <span className="ticket-event__circled-date"> on {this.props.date}</span>
</div> </div>
) )
} }
renderClosed() { renderClosed() {
return ( return (
<div className="ticket-action__circled"> <div className="ticket-event__circled">
<span className="ticket-action__circled-author">{this.props.author.name}</span> <span className="ticket-event__circled-author">{this.props.author.name}</span>
<span className="ticket-action__circled-text"> closed this ticket</span> <span className="ticket-event__circled-text"> closed this ticket</span>
<span className="ticket-action__circled-date"> on {this.props.date}</span> <span className="ticket-event__circled-date"> on {this.props.date}</span>
</div> </div>
) )
} }
renderReOpened() { renderReOpened() {
return ( return (
<div className="ticket-action__circled"> <div className="ticket-event__circled">
<span className="ticket-action__circled-author">{this.props.author.name}</span> <span className="ticket-event__circled-author">{this.props.author.name}</span>
<span className="ticket-action__circled-text"> reopen this ticket</span> <span className="ticket-event__circled-text"> reopen this ticket</span>
<span className="ticket-action__circled-date"> on {this.props.date}</span> <span className="ticket-event__circled-date"> on {this.props.date}</span>
</div> </div>
); );
} }
renderDepartmentChange() { renderDepartmentChange() {
return ( return (
<div className="ticket-action__circled"> <div className="ticket-event__circled">
<span className="ticket-action__circled-author">{this.props.author.name}</span> <span className="ticket-event__circled-author">{this.props.author.name}</span>
<span className="ticket-action__circled-text"> change department to</span> <span className="ticket-event__circled-text"> change department to</span>
<span className="ticket-action__circled-indication"> {this.props.content}</span> <span className="ticket-event__circled-indication"> {this.props.content}</span>
<span className="ticket-action__circled-date"> on {this.props.date}</span> <span className="ticket-event__circled-date"> on {this.props.date}</span>
</div> </div>
); );
} }
renderPriorityChange() { renderPriorityChange() {
return ( return (
<div className="ticket-action__circled"> <div className="ticket-event__circled">
<span className="ticket-action__circled-author">{this.props.author.name}</span> <span className="ticket-event__circled-author">{this.props.author.name}</span>
<span className="ticket-action__circled-text"> change priority to</span> <span className="ticket-event__circled-text"> change priority to</span>
<span className="ticket-action__circled-indication"> {this.props.content}</span> <span className="ticket-event__circled-indication"> {this.props.content}</span>
<span className="ticket-action__circled-date"> on {this.props.date}</span> <span className="ticket-event__circled-date"> on {this.props.date}</span>
</div> </div>
); );
} }
@ -177,14 +177,14 @@ class TicketAction extends React.Component {
}; };
const classes = { const classes = {
'row': true, 'row': true,
'ticket-action': true, 'ticket-event': true,
'ticket-action_staff': this.props.author && this.props.author.staff, 'ticket-event_staff': this.props.author && this.props.author.staff,
'ticket-action_circled': circledTypes[this.props.type], 'ticket-event_circled': circledTypes[this.props.type],
'ticket-action_unassignment': this.props.type === 'UN_ASSIGN', 'ticket-event_unassignment': this.props.type === 'UN_ASSIGN',
'ticket-action_close': this.props.type === 'CLOSE', 'ticket-event_close': this.props.type === 'CLOSE',
'ticket-action_reopen': this.props.type === 'RE_OPEN', 'ticket-event_reopen': this.props.type === 'RE_OPEN',
'ticket-action_department': this.props.type === 'DEPARTMENT_CHANGED', 'ticket-event_department': this.props.type === 'DEPARTMENT_CHANGED',
'ticket-action_priority': this.props.type === 'PRIORITY_CHANGED' 'ticket-event_priority': this.props.type === 'PRIORITY_CHANGED'
}; };
return classNames(classes); return classNames(classes);
@ -225,4 +225,4 @@ class TicketAction extends React.Component {
} }
} }
export default TicketAction; export default TicketEvent;

26
client/src/app-components/ticket-action.scss → client/src/app-components/ticket-event.scss
View File

@ -1,6 +1,6 @@
@import "../scss/vars"; @import "../scss/vars";
.ticket-action { .ticket-event {
margin-top: 20px; margin-top: 20px;
text-align: left; text-align: left;
position: relative; position: relative;
@ -91,11 +91,11 @@
} }
&_staff { &_staff {
.ticket-action__icon { .ticket-event__icon {
background-color: $primary-blue; background-color: $primary-blue;
} }
.ticket-action__comment-author-type { .ticket-event__comment-author-type {
color: $primary-blue; color: $primary-blue;
} }
} }
@ -104,11 +104,11 @@
margin-top: 35px; margin-top: 35px;
margin-bottom: 30px; margin-bottom: 30px;
.ticket-action__connector { .ticket-event__connector {
top: 28px; top: 28px;
} }
.ticket-action__icon { .ticket-event__icon {
background-color: white; background-color: white;
color: $primary-black; color: $primary-black;
border: 3px solid $light-grey; border: 3px solid $light-grey;
@ -121,48 +121,48 @@
margin-top: -8px; margin-top: -8px;
} }
.ticket-action__circled { .ticket-event__circled {
color: $primary-black; color: $primary-black;
font-size: $font-size--sm; font-size: $font-size--sm;
margin-top: 1px; margin-top: 1px;
} }
.ticket-action__circled-author { .ticket-event__circled-author {
color: $secondary-blue; color: $secondary-blue;
} }
.ticket-action__circled-indication { .ticket-event__circled-indication {
color: $primary-green; color: $primary-green;
} }
} }
&_unassignment { &_unassignment {
.ticket-action__icon { .ticket-event__icon {
padding-left: 6px; padding-left: 6px;
} }
} }
&_close { &_close {
.ticket-action__icon { .ticket-event__icon {
padding-left: 9px; padding-left: 9px;
} }
} }
&_reopen { &_reopen {
.ticket-action__icon { .ticket-event__icon {
padding-left: 9px; padding-left: 9px;
padding-top: 5px; padding-top: 5px;
} }
} }
&_department { &_department {
.ticket-action__icon { .ticket-event__icon {
padding-left: 6px; padding-left: 6px;
} }
} }
&_priority { &_priority {
.ticket-action__icon { .ticket-event__icon {
padding-left: 11px; padding-left: 11px;
padding-top: 5px; padding-top: 5px;
} }

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

@ -7,7 +7,7 @@ import store from 'app/store';
import SessionStore from 'lib-app/session-store'; import SessionStore from 'lib-app/session-store';
import SessionActions from 'actions/session-actions'; import SessionActions from 'actions/session-actions';
import TicketAction from 'app-components/ticket-action'; import TicketEvent from 'app-components/ticket-event';
import AreYouSure from 'app-components/are-you-sure'; import AreYouSure from 'app-components/are-you-sure';
import Form from 'core-components/form'; import Form from 'core-components/form';
import FormField from 'core-components/form-field'; import FormField from 'core-components/form-field';
@ -49,10 +49,10 @@ class TicketViewer extends React.Component {
</div> </div>
{this.props.editable ? this.renderEditableHeaders() : this.renderHeaders()} {this.props.editable ? this.renderEditableHeaders() : this.renderHeaders()}
<div className="ticket-viewer__content"> <div className="ticket-viewer__content">
<TicketAction type="COMMENT" author={ticket.author} content={ticket.content} date={ticket.date} file={ticket.file}/> <TicketEvent type="COMMENT" author={ticket.author} content={ticket.content} date={ticket.date} file={ticket.file}/>
</div> </div>
<div className="ticket-viewer__comments"> <div className="ticket-viewer__comments">
{ticket.actions && ticket.actions.map(this.renderAction.bind(this))} {ticket.events && ticket.events.map(this.renderTicketEvent.bind(this))}
</div> </div>
<div className="ticket-viewer__response"> <div className="ticket-viewer__response">
<div className="ticket-viewer__response-title row">{i18n('RESPOND')}</div> <div className="ticket-viewer__response-title row">{i18n('RESPOND')}</div>
@ -162,9 +162,9 @@ class TicketViewer extends React.Component {
); );
} }
renderAction(action, index) { renderTicketEvent(options, index) {
return ( return (
<TicketAction {...action} key={index} /> <TicketEvent {...options} key={index} />
); );
} }

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

@ -159,7 +159,7 @@ module.exports = [
name: 'Steve Jobs', name: 'Steve Jobs',
email: 'steve@jobs.com' email: 'steve@jobs.com'
}, },
actions: [ events: [
{ {
type: 'ASSIGN', type: 'ASSIGN',
date: 20150409, date: 20150409,
@ -275,7 +275,7 @@ module.exports = [
owner: { owner: {
name: 'Steve Jobs' name: 'Steve Jobs'
}, },
actions: [ events: [
{ {
type: 'ASSIGN', type: 'ASSIGN',
date: 20150409, date: 20150409,
@ -391,7 +391,7 @@ module.exports = [
owner: { owner: {
name: 'Steve Jobs' name: 'Steve Jobs'
}, },
actions: [ events: [
{ {
type: 'ASSIGN', type: 'ASSIGN',
date: 20150409, date: 20150409,