diff --git a/client/package.json b/client/package.json index 97e5359d..2cf86903 100644 --- a/client/package.json +++ b/client/package.json @@ -65,7 +65,7 @@ "react": "^15.0.1", "react-document-title": "^1.0.2", "react-dom": "^15.0.1", - "react-google-recaptcha": "^0.5.4", + "react-google-recaptcha": "^0.5.2", "react-motion": "^0.3.0", "react-redux": "^4.4.5", "react-router": "^2.4.0", diff --git a/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js b/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js index 1235aeb9..fb322cc1 100644 --- a/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js +++ b/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js @@ -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 ( -
- DASHBOARD TICKET PAGE +
+
); } + + getTicketData() { + return _.find(this.props.tickets, {ticketNumber: this.props.params.ticketNumber}); + } } -export default DashboardTicketPage; +export default connect((store) => { + return { + tickets: store.session.userTickets + }; +})(DashboardTicketPage); \ No newline at end of file diff --git a/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.scss b/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.scss new file mode 100644 index 00000000..4caad9b2 --- /dev/null +++ b/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.scss @@ -0,0 +1,3 @@ +.dashboard-ticket-page { + padding: 0 10px; +} \ No newline at end of file diff --git a/client/src/app/main/dashboard/dashboard-ticket/ticket-action.js b/client/src/app/main/dashboard/dashboard-ticket/ticket-action.js new file mode 100644 index 00000000..345a3840 --- /dev/null +++ b/client/src/app/main/dashboard/dashboard-ticket/ticket-action.js @@ -0,0 +1,105 @@ +import React from 'react'; +import classNames from 'classnames'; + +import i18n from 'lib-app/i18n'; +import Icon from 'core-components/icon'; + +class TicketAction extends React.Component { + static propTypes = { + type: React.PropTypes.oneOf(['comment', 'assign']), + config: React.PropTypes.object + }; + + static defaultProps = { + type: 'comment' + }; + + render() { + return ( +
+ +
+
+ +
+
+
+ {this.renderActionDescription()} +
+
+ ); + } + + renderActionDescription() { + const renders = { + 'comment': this.renderComment.bind(this), + 'assign': this.renderAssignment.bind(this) + }; + + return renders[this.props.type](); + } + + renderComment() { + const {config} = this.props; + + return ( +
+ +
+ {config.author.name} + ({i18n((config.author.staff) ? 'STAFF' : 'CUSTOMER')}) +
+
{config.date}
+
{config.content}
+ {this.renderFileRow(config.file)} +
+ ); + } + + renderAssignment() { + // TODO: Add actions architecture instead of just comments + + return ( +
+
+ ) + } + + renderFileRow(file) { + let node = null; + + if (file) { + node = {this.getFileLink(file)} ; + } else { + node = i18n('NO_ATTACHMENT'); + } + + return ( +
+ {node} +
+ ) + } + + getClass() { + const {config} = this.props; + + let classes = { + 'row': true, + 'ticket-action': true, + 'ticket-action_staff': config.author && config.author.staff + }; + + return classNames(classes); + } + + getFileLink(filePath = '') { + const fileName = filePath.replace(/^.*[\\\/]/, ''); + + return ( + {fileName} + ) + } +} + +export default TicketAction; \ No newline at end of file diff --git a/client/src/app/main/dashboard/dashboard-ticket/ticket-action.scss b/client/src/app/main/dashboard/dashboard-ticket/ticket-action.scss new file mode 100644 index 00000000..4b39970b --- /dev/null +++ b/client/src/app/main/dashboard/dashboard-ticket/ticket-action.scss @@ -0,0 +1,83 @@ +@import "../../../../scss/vars"; + +.ticket-action { + margin-top: 20px; + text-align: left; + position: relative; + + &__connector { + position: absolute; + background-color: $light-grey; + width: 3px; + height: 100%; + top: 38px; + left: 33px; + z-index: 0; + } + + &__icon { + vertical-align: top; + background-color: $secondary-blue; + color: white; + border-radius: 5px; + width: 42px; + height: 42px; + padding-left: 8px; + padding-top: 4px; + } + + &__comment { + position: relative; + + &-pointer { + right: 100%; + border: solid transparent; + position: absolute; + border-right-color: $light-grey; + border-width: 13px; + margin-top: 8px; + } + + &-author { + text-align: left; + float: left; + position: relative; + padding: 12px; + color: $primary-black; + + &-type { + font-size: 10px; + padding-left: 10px; + color: $secondary-blue; + font-variant: small-caps; + } + } + + &-date { + text-align: right; + border: 2px solid $light-grey; + border-bottom: none; + padding: 12px; + background-color: $light-grey; + + } + + &-content { + background-color: white; + border: 2px solid $very-light-grey; + border-top: none; + padding: 20px 10px; + text-align: left; + } + } + + &_staff { + .ticket-action__icon { + background-color: $primary-blue; + } + + .ticket-action__comment-author-type { + color: $primary-blue; + } + } +} \ No newline at end of file diff --git a/client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.js b/client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.js new file mode 100644 index 00000000..857cecd4 --- /dev/null +++ b/client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.js @@ -0,0 +1,65 @@ +import React from 'react'; + +import i18n from 'lib-app/i18n'; +import TicketAction from 'app/main/dashboard/dashboard-ticket/ticket-action'; +import Form from 'core-components/form'; +import FormField from 'core-components/form-field'; +import SubmitButton from 'core-components/submit-button'; + +class TicketViewer extends React.Component { + static propTypes = { + ticket: React.PropTypes.object + }; + + static defaultProps = { + ticket: { + author: {}, + department: {}, + comments: [] + } + }; + + render() { + return ( +
+
+ #{this.props.ticket.ticketNumber} + {this.props.ticket.title} +
+
+
{i18n('DEPARTMENT')}
+
{i18n('AUTHOR')}
+
{i18n('DATE')}
+
+
+
{this.props.ticket.department.name}
+
{this.props.ticket.author.name}
+
{this.props.ticket.date}
+
+
+ +
+
+ {this.props.ticket.comments.map(this.renderComment.bind(this))} +
+
+
{i18n('RESPOND')}
+
+
+ + {i18n('RESPOND_TICKET')} + +
+
+
+ ); + } + + renderComment(comment, index) { + return ( + + ); + } +} + +export default TicketViewer; \ No newline at end of file diff --git a/client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.scss b/client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.scss new file mode 100644 index 00000000..f133235c --- /dev/null +++ b/client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.scss @@ -0,0 +1,79 @@ +@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 { + margin-top: 10px; + } + + &__file { + background-color: $very-light-grey; + text-align: right; + padding: 5px 10px; + font-size: 12px; + } + + &__comments { + position: relative; + } + + &__response { + margin-top: 20px; + position: relative; + + &-title { + background-color: $primary-blue; + text-align: left; + padding: 5px; + color: white; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + } + + &-field { + background-color: $very-light-grey; + padding: 20px; + text-align: left; + } + } +} \ No newline at end of file diff --git a/client/src/core-components/text-editor.scss b/client/src/core-components/text-editor.scss index c1536d01..f54f43c2 100644 --- a/client/src/core-components/text-editor.scss +++ b/client/src/core-components/text-editor.scss @@ -3,6 +3,7 @@ .text-editor { &__editor { + background-color: white; border: 1px solid $grey; border-radius: 3px; padding: 8px; diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index ece39332..5edfc3fa 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -22,6 +22,14 @@ export default { 'TICKETS_DESCRIPTION': 'A random text about tickets', 'ARTICLES_DESCRIPTION': 'A random text about articles', 'ACCOUNT_DESCRIPTION': 'A random text about account', + 'DEPARTMENT': 'Department', + 'AUTHOR': 'Author', + 'DATE': 'Date', + 'RESPOND': 'Respond', + 'RESPOND_TICKET': 'Respond Ticket', + 'NO_ATTACHMENT': 'No file attachment', + 'STAFF': 'Staff', + 'CUSTOMER': 'Customer', //ERRORS 'EMAIL_NOT_EXIST': 'Email does not exist', diff --git a/client/src/index.html b/client/src/index.html index 6aff3455..d6e6adbb 100644 --- a/client/src/index.html +++ b/client/src/index.html @@ -6,7 +6,7 @@ - App Name + OS4 diff --git a/client/src/scss/_vars.scss b/client/src/scss/_vars.scss index 956a56d9..dbae3a5c 100644 --- a/client/src/scss/_vars.scss +++ b/client/src/scss/_vars.scss @@ -6,6 +6,8 @@ $primary-blue: #414A59; $secondary-blue: #20B8c5; $primary-green: #82CA9C; + +$very-light-grey: #F7F7F7; $light-grey: #EEEEEE; $grey: #E7E7E7; $medium-grey: #D9D9D9;