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

Ivan - Frontend - Dashboard Ticket viewer base [skip ci]

This commit is contained in:
ivan 2016-08-24 20:00:41 -03:00
parent 5972427cf2
commit 41a4a3f00d
4 changed files with 205 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js
View File

@ -1,14 +1,30 @@
import React from 'react';
import _ from 'lodash';
import {connect} from 'react-redux';
import TicketViewer from 'app/main/dashboard/dashboard-ticket/ticket-viewer';
class DashboardTicketPage extends React.Component {
static propTypes = {
tickets: React.PropTypes.array
};
render() {
return (
<div>
DASHBOARD TICKET PAGE
<div className="dashboard-ticket-page">
<TicketViewer ticket={this.getTicketData()} />
</div>
);
}
getTicketData() {
return _.find(this.props.tickets, {ticketNumber: this.props.params.ticketNumber});
}
}
export default DashboardTicketPage;
export default connect((store) => {
return {
tickets: store.session.userTickets
};
})(DashboardTicketPage);

3
client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.scss Normal file
View File

@ -0,0 +1,3 @@
.dashboard-ticket-page {
padding: 0 10px;
}

86
client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.js Normal file
View File

@ -0,0 +1,86 @@
import React from 'react';
import Icon from 'core-components/icon';
class TicketViewer extends React.Component {
static propTypes = {
ticket: React.PropTypes.object
};
static defaultProps = {
ticket: {
author: {},
department: {},
comments: []
}
};
render() {
return (
<div className="ticket-viewer">
<div className="ticket-viewer__header row">
<span className="ticket-viewer__number">#{this.props.ticket.ticketNumber}</span>
<span className="ticket-viewer__title">{this.props.ticket.title}</span>
</div>
<div className="ticket-viewer__info-row-header row">
<div className="ticket-viewer__department col-md-4">Department</div>
<div className="ticket-viewer__author col-md-4">Author</div>
<div className="ticket-viewer__date col-md-4">Date</div>
</div>
<div className="ticket-viewer__info-row-values row">
<div className="ticket-viewer__department col-md-4">{this.props.ticket.department.name}</div>
<div className="ticket-viewer__author col-md-4">{this.props.ticket.author.name}</div>
<div className="ticket-viewer__date col-md-4">{this.props.ticket.date}</div>
</div>
<div className="ticket-viewer__content row">{this.props.ticket.content}</div>
{this.renderFileRow(this.props.ticket.file)}
<div className="ticket-viewer__comments">
<div className="ticket-viewer__comments-title row">Responses</div>
{this.props.ticket.comments.map(this.renderComment.bind(this))}
</div>
<div className="ticket-viewer__response">
<div className="ticket-viewer__response-title row">Respond</div>
<div className="ticket-viewer__response-field row">Response field</div>
</div>
</div>
);
}
renderComment(comment, index) {
return (
<div className="ticket-viewer__comment" key={index}>
<div className="row">
<div className="ticket-viewer__comment-author">{comment.author.name}</div>
<div className="ticket-viewer__comment-date">{comment.date}</div>
</div>
<div className="ticket-viewer__comment-content row">{comment.content}</div>
{this.renderFileRow(comment.file)}
</div>
);
}
renderFileRow(file) {
let node = null;
if (file) {
node = <span> {this.getFileLink(this.props.ticket.file)} <Icon name="paperclip" /> </span>;
} else {
node = 'No file attachment';
}
return (
<div className="ticket-viewer__file row">
{node}
</div>
)
}
getFileLink(filePath = '') {
const fileName = filePath.replace(/^.*[\\\/]/, '');
return (
<a href={filePath} target="_blank">{fileName}</a>
)
}
}
export default TicketViewer;

97
client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.scss Normal file
View File

@ -0,0 +1,97 @@
@import "../../../../scss/vars";
.ticket-viewer {
&__header {
background-color: $primary-blue;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
color: white;
font-size: 16px;
padding: 6px 0;
}
&__number {
color: white;
margin-right: 10px;
font-size: 14px;
}
&__title {
display: inline-block;
}
&__info-row-header {
background-color: $light-grey;
font-weight: bold;
}
&__info-row-values {
background-color: $light-grey;
color: $secondary-blue;
}
&__date {
}
&__author {
}
&__department {
}
&__content {
background-color: white;
border: 2px solid $light-grey;
padding: 20px 10px;
text-align: left;
margin-top: 10px;
}
&__file {
background-color: $light-grey;
text-align: right;
padding: 5px 10px;
font-size: 12px;
}
&__comments {
margin-top: 10px;
}
&__comments-title {
text-align: left;
background-color: $dark-grey;
color: white;
padding: 5px;
}
&__comment {
margin-top: 5px;
&-author {
text-align: left;
float: left;
padding: 10px;
}
&-date {
text-align: right;
border: 2px solid $light-grey;
border-bottom: none;
padding: 10px;
background-color: $light-grey;
}
&-content {
background-color: white;
border: 2px solid $light-grey;
border-top: none;
padding: 20px 10px;
text-align: left;
}
}
}