diff --git a/client/src/app-components/ticket-list.js b/client/src/app-components/ticket-list.js
new file mode 100644
index 00000000..6bf7f885
--- /dev/null
+++ b/client/src/app-components/ticket-list.js
@@ -0,0 +1,136 @@
+import React from 'react';
+
+import i18n from 'lib-app/i18n';
+
+import Table from 'core-components/table';
+import Button from 'core-components/button';
+import Tooltip from 'core-components/tooltip';
+
+class TicketList extends React.Component {
+ static propTypes = {
+ tickets: React.PropTypes.arrayOf(React.PropTypes.object),
+ type: React.PropTypes.oneOf([
+ 'primary',
+ 'secondary'
+ ])
+ };
+
+ static defaultProps = {
+ tickets: [],
+ type: 'primary'
+ };
+
+ render() {
+ return (
+
+ );
+ }
+
+ getTableHeaders() {
+ if (this.props.type == 'primary' ) {
+ return [
+ {
+ key: 'number',
+ value: i18n('NUMBER'),
+ className: 'ticket-list__number col-md-1'
+ },
+ {
+ key: 'title',
+ value: i18n('TITLE'),
+ className: 'ticket-list__title col-md-6'
+ },
+ {
+ key: 'department',
+ value: i18n('DEPARTMENT'),
+ className: 'ticket-list__department col-md-3'
+ },
+ {
+ key: 'date',
+ value: i18n('DATE'),
+ className: 'ticket-list__date col-md-2'
+ }
+ ];
+ } else if (this.props.type == 'secondary') {
+ return [
+ {
+ key: 'number',
+ value: i18n('NUMBER'),
+ className: 'ticket-list__number col-md-1'
+ },
+ {
+ key: 'title',
+ value: i18n('TITLE'),
+ className: 'ticket-list__title col-md-4'
+ },
+ {
+ key: 'priority',
+ value: i18n('PRIORITY'),
+ className: 'ticket-list__priority col-md-1'
+ },
+ {
+ key: 'department',
+ value: i18n('DEPARTMENT'),
+ className: 'ticket-list__department col-md-2'
+ },
+ {
+ key: 'author',
+ value: i18n('AUTHOR'),
+ className: 'ticket-list__author col-md-2'
+ },
+ {
+ key: 'date',
+ value: i18n('DATE'),
+ className: 'ticket-list__date col-md-2'
+ }
+ ];
+ }
+ }
+
+ getTableRows() {
+ return this.props.tickets.map(this.gerTicketTableObject.bind(this));
+ }
+
+ gerTicketTableObject(ticket) {
+ let titleText = (ticket.unread) ? ticket.title + ' (1)' : ticket.title;
+
+ return {
+ number: (
+
+ {'#' + ticket.ticketNumber}
+
+ ),
+ title: (
+
+ ),
+ priority: this.getTicketPriority(ticket.priority),
+ department: ticket.department.name,
+ author: ticket.author.name,
+ date: ticket.date,
+ highlighted: ticket.unread
+ };
+ }
+ getTicketPriority(priority){
+ if(priority == 'high'){
+ return (
+ {i18n('HIGH')}
+ );
+ }
+ if(priority == 'medium'){
+ return (
+ {i18n('MEDIUM')}
+ );
+ }
+ if(priority == 'low'){
+ return (
+ {i18n('LOW')}
+ );
+ }
+ }
+}
+
+
+export default TicketList;
diff --git a/client/src/app-components/tiket-list.scss b/client/src/app-components/tiket-list.scss
new file mode 100644
index 00000000..2355c6e4
--- /dev/null
+++ b/client/src/app-components/tiket-list.scss
@@ -0,0 +1,47 @@
+@import "../scss/vars";
+
+.ticket-list {
+
+ &__number {
+ text-align: left;
+ }
+
+ &__title {
+ text-align: left;
+ }
+
+ &__department {
+ text-align: right;
+ }
+
+ &__date {
+ text-align: right;
+ }
+
+ &__title-link:hover,
+ &__title-link:focus {
+ outline: none;
+ text-decoration: underline;
+ }
+
+ &__priority-low,
+ &__priority-medium,
+ &__priority-high {
+ display: inline-block;
+ border-radius: 10px;
+ width: 70px;
+ color: white;
+ }
+
+ &__priority-low {
+ background-color: $primary-green;
+ }
+
+ &__priority-medium {
+ background-color: $secondary-blue;
+ }
+
+ &__priority-high {
+ background-color: $primary-red;
+ }
+}
\ No newline at end of file
diff --git a/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js b/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js
index 40707fa8..1623df49 100644
--- a/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js
+++ b/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js
@@ -4,9 +4,7 @@ import {connect} from 'react-redux';
import i18n from 'lib-app/i18n';
import Header from 'core-components/header';
-import Table from 'core-components/table';
-import Button from 'core-components/button';
-import Tooltip from 'core-components/tooltip';
+import TicketList from 'app-components/ticket-list';
class DashboardListTicketsPage extends React.Component {
static propTypes = {
@@ -21,59 +19,10 @@ class DashboardListTicketsPage extends React.Component {
return (
);
}
-
- getTableHeaders() {
- return [
- {
- key: 'number',
- value: 'Number',
- className: 'dashboard-ticket-list__number col-md-1'
- },
- {
- key: 'title',
- value: 'Title',
- className: 'dashboard-ticket-list__title col-md-6'
- },
- {
- key: 'department',
- value: 'Department',
- className: 'dashboard-ticket-list__department col-md-3'
- },
- {
- key: 'date',
- value: 'Date',
- className: 'dashboard-ticket-list__date col-md-2'
- }
- ];
- }
-
- getTableRows() {
- return this.props.tickets.map(this.gerTicketTableObject.bind(this));
- }
-
- gerTicketTableObject(ticket) {
- let titleText = (ticket.unread) ? ticket.title + ' (1)' : ticket.title;
-
- return {
- number: (
-
- {'#' + ticket.ticketNumber}
-
- ),
- title: (
-
- ),
- department: ticket.department.name,
- date: ticket.date,
- highlighted: ticket.unread
- };
- }
}
diff --git a/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.scss b/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.scss
deleted file mode 100644
index 3c9439e1..00000000
--- a/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "../../../../scss/vars";
-
-.dashboard-ticket-list {
-
- &__number {
- text-align: left;
- }
-
- &__title {
- text-align: left;
- }
-
- &__department {
- text-align: right;
- }
-
- &__date {
- text-align: right;
- }
-
- &__title-link:hover,
- &__title-link:focus {
- outline: none;
- text-decoration: underline;
- }
-}
\ No newline at end of file
diff --git a/client/src/data/fixtures/user-fixtures.js b/client/src/data/fixtures/user-fixtures.js
index dd72ae59..529789bc 100644
--- a/client/src/data/fixtures/user-fixtures.js
+++ b/client/src/data/fixtures/user-fixtures.js
@@ -148,6 +148,7 @@ module.exports = [
language: 'en',
unread: true,
closed: false,
+ priority: 'low',
author: {
id: 12,
name: 'Haskell Curry',
@@ -196,6 +197,47 @@ module.exports = [
language: 'en',
unread: false,
closed: false,
+ priority: 'medium',
+ author: {
+ name: 'Haskell Curry',
+ email: 'haskell@lambda.com'
+ },
+ owner: {
+ name: 'Steve Jobs'
+ },
+ comments: [
+ {
+ content: 'Do you have apache installed? It generally happens if you dont have apache.',
+ author: {
+ name: 'Steve Jobs',
+ email: 'jobs@steve.com',
+ staff: true
+ }
+ },
+ {
+ content: 'I have already installed apache, but the problem persists',
+ author: {
+ name: 'Haskell Curry',
+ steve: 'haskell@lambda.com',
+ staff: false
+ }
+ }
+ ]
+ },
+ {
+ ticketNumber: '878552',
+ title: 'Lorem ipsum door',
+ content: 'I had a problem with the installation of the php server',
+ department: {
+ id: 2,
+ name: 'Environment Setup'
+ },
+ date: '15 Apr 2016',
+ file: 'http://www.opensupports.com/some_file.zip',
+ language: 'en',
+ unread: false,
+ closed: false,
+ priority: 'high',
author: {
name: 'Haskell Curry',
email: 'haskell@lambda.com'
diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js
index 8335a733..d76fc07d 100644
--- a/client/src/data/languages/en.js
+++ b/client/src/data/languages/en.js
@@ -55,6 +55,12 @@ export default {
'USER_SYSTEM': 'User System',
'EMAIL_TEMPLATES': 'Email Templates',
'FILTERS_CUSTOM_FIELDS': 'Filters and Custom Fields',
+ 'PRIORITY': 'Priority',
+ 'NUMBER': 'Number',
+ 'HIGH': 'High',
+ 'MEDIUM': 'Medium',
+ 'LOW': 'Low',
+ 'TITLE': 'Title',
//ERRORS
'EMAIL_OR_PASSWORD': 'Email or password invalid',