) : null;
}
diff --git a/client/src/app/main/dashboard/dashboard-layout.scss b/client/src/app/main/dashboard/dashboard-layout.scss
new file mode 100644
index 00000000..a61782a9
--- /dev/null
+++ b/client/src/app/main/dashboard/dashboard-layout.scss
@@ -0,0 +1,9 @@
+.dashboard {
+ &__menu {
+
+ }
+
+ &__content {
+
+ }
+}
\ 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 720d4ec6..0fbec2cd 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
@@ -1,11 +1,96 @@
import React from 'react';
import Table from 'core-components/table';
+import Button from 'core-components/button';
+
+let mockTickets = [
+ {
+ ticketNumber: '445441',
+ title: 'Problem with installation',
+ content: 'I had a problem with the installation of the php server',
+ department: 'Environment Setup',
+ date: '15 Apr 2016',
+ file: 'http://www.opensupports.com/some_file.zip',
+ language: 'en',
+ unread: true,
+ closed: false,
+ author: {
+ name: 'John Smith',
+ email: 'john@smith.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: 'John Smith',
+ steve: 'john@smith.com',
+ staff: false
+ }
+ }
+ ]
+ },
+ {
+ ticketNumber: '87852',
+ title: 'Lorem ipsum door',
+ content: 'I had a problem with the installation of the php server',
+ department: 'Environment Setup',
+ date: '15 Apr 2016',
+ file: 'http://www.opensupports.com/some_file.zip',
+ language: 'en',
+ unread: false,
+ closed: false,
+ author: {
+ name: 'John Smith',
+ email: 'john@smith.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: 'John Smith',
+ steve: 'john@smith.com',
+ staff: false
+ }
+ }
+ ]
+ }
+];
+
class DashboardListTicketsPage extends React.Component {
+ static propTypes = {
+ tickets: React.PropTypes.arrayOf(React.PropTypes.object)
+ };
+
+ static defaultProps = {
+ tickets: mockTickets.concat([mockTickets[1], mockTickets[1]])
+ };
render() {
return (
-
+
);
@@ -21,12 +106,12 @@ class DashboardListTicketsPage extends React.Component {
{
key: 'title',
value: 'Title',
- className: 'dashboard-ticket-list__title col-md-7'
+ className: 'dashboard-ticket-list__title col-md-6'
},
{
key: 'department',
value: 'Department',
- className: 'dashboard-ticket-list__department col-md-2'
+ className: 'dashboard-ticket-list__department col-md-3'
},
{
key: 'date',
@@ -37,44 +122,19 @@ class DashboardListTicketsPage extends React.Component {
}
getTableRows() {
- return [
- {
- number: '#445441',
- title: 'Problem with installation',
- department: 'Environment Setup',
- date: '15 Apr 2016'
- },
- {
- number: '#445441',
- title: 'Problem with installation',
- department: 'Environment Setup',
- date: '15 Apr 2016'
- },
- {
- number: '#445441',
- title: 'Problem with installation',
- department: 'Environment Setup',
- date: '15 Apr 2016'
- },
- {
- number: '#445441',
- title: 'Problem with installation',
- department: 'Environment Setup',
- date: '15 Apr 2016'
- },
- {
- number: '#445441',
- title: 'Problem with installation',
- department: 'Environment Setup',
- date: '15 Apr 2016'
- },
- {
- number: '#445441',
- title: 'Problem with installation',
- department: 'Environment Setup',
- date: '15 Apr 2016'
- }
- ];
+ 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,
+ 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
index bb1b033c..d94fce42 100644
--- 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
@@ -1,4 +1,13 @@
+@import "../../../../scss/vars";
+
.dashboard-ticket-list {
+
+ &__header {
+ text-align: left;
+ font-variant: small-caps;
+ font-size: 16px;
+ }
+
&__number {
text-align: left;
}
diff --git a/client/src/app/main/dashboard/dashboard-menu.js b/client/src/app/main/dashboard/dashboard-menu.js
index 5066647f..74b8939d 100644
--- a/client/src/app/main/dashboard/dashboard-menu.js
+++ b/client/src/app/main/dashboard/dashboard-menu.js
@@ -4,10 +4,10 @@ import _ from 'lodash';
import Menu from 'core-components/menu';
let dashboardRoutes = [
- { path: '/app/dashboard', text: 'Ticket List' },
- { path: '/app/dashboard/create-ticket', text: 'Create Ticket' },
- { path: '/app/dashboard/articles', text: 'View Articles' },
- { path: '/app/dashboard/edit-profile', text: 'Edit Profile' }
+ { path: '/app/dashboard', text: 'Ticket List', icon: 'file-text-o' },
+ { path: '/app/dashboard/create-ticket', text: 'Create Ticket', icon: 'plus' },
+ { path: '/app/dashboard/articles', text: 'View Articles', icon: 'book' },
+ { path: '/app/dashboard/edit-profile', text: 'Edit Profile', icon: 'pencil' }
];
class DashboardMenu extends React.Component {
@@ -27,9 +27,11 @@ class DashboardMenu extends React.Component {
getProps() {
return {
+ header: 'Dashboard',
items: this.getMenuItems(),
selectedIndex: this.getSelectedIndex(),
- onItemClick: this.goToPathByIndex.bind(this)
+ onItemClick: this.goToPathByIndex.bind(this),
+ type: 'secondary'
};
}
@@ -39,7 +41,8 @@ class DashboardMenu extends React.Component {
getMenuItem(item) {
return {
- content: item.text
+ content: item.text,
+ icon: item.icon
};
}
diff --git a/client/src/core-components/menu.js b/client/src/core-components/menu.js
index 79740fb7..1b51f13f 100644
--- a/client/src/core-components/menu.js
+++ b/client/src/core-components/menu.js
@@ -7,6 +7,7 @@ import Icon from 'core-components/icon';
class Menu extends React.Component {
static propTypes = {
+ header: React.PropTypes.string,
type: React.PropTypes.oneOf(['primary', 'secondary']),
items: React.PropTypes.arrayOf(React.PropTypes.shape({
content: React.PropTypes.string.isRequired,
@@ -22,12 +23,25 @@ class Menu extends React.Component {
render() {
return (
-
- {this.props.items.map(this.renderListItem.bind(this))}
-
+
+ {this.renderHeader()}
+
+ {this.props.items.map(this.renderListItem.bind(this))}
+
+
)
}
+ renderHeader() {
+ let header = null;
+
+ if (this.props.header) {
+ header =
{this.props.header}
;
+ }
+
+ return header;
+ }
+
renderListItem(item, index) {
let iconNode = null;
@@ -45,8 +59,9 @@ class Menu extends React.Component {
getProps() {
var props = _.clone(this.props);
- props.className = this.getClass();
+ props.className = 'menu__list';
+ delete props.header;
delete props.items;
delete props.onItemClick;
delete props.selectedIndex;
diff --git a/client/src/core-components/menu.scss b/client/src/core-components/menu.scss
index a0beb93f..380a571f 100644
--- a/client/src/core-components/menu.scss
+++ b/client/src/core-components/menu.scss
@@ -1,12 +1,15 @@
@import "../scss/vars";
.menu {
- background-color: white;
- color: $dark-grey;
- margin: 0;
- padding: 0;
- list-style-type: none;
- cursor: pointer;
+
+ &__list {
+ background-color: white;
+ color: $dark-grey;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ cursor: pointer;
+ }
&__list-item {
padding: 8px;
@@ -28,5 +31,14 @@
.menu__list-item:hover {
background-color: $secondary-blue;
}
+
+ .menu__header {
+ padding: 8px;
+ background-color: $primary-blue;
+ color: white;
+ font-size: 16px;
+ border-top-right-radius: 4px;
+ border-top-left-radius: 4px;
+ }
}
}
\ No newline at end of file
diff --git a/client/src/core-components/table.js b/client/src/core-components/table.js
index 54f70401..806d1830 100644
--- a/client/src/core-components/table.js
+++ b/client/src/core-components/table.js
@@ -8,7 +8,7 @@ class Table extends React.Component {
value: React.PropTypes.string,
className: React.PropTypes.string
})),
- rows: React.PropTypes.arrayOf(React.PropTypes.objectOf(React.PropTypes.node)),
+ rows: React.PropTypes.arrayOf(React.PropTypes.object),
type: React.PropTypes.oneOf(['default'])
};
@@ -46,7 +46,7 @@ class Table extends React.Component {
let headersKeys = this.props.headers.map(header => header.key);
return (
-
+
{headersKeys.map(this.renderCell.bind(this, row))}
);
@@ -62,6 +62,15 @@ class Table extends React.Component {
{row[key]} |
);
}
+
+ getRowClass(row) {
+ let classes = {
+ 'table__row': true,
+ 'table__row-highlighted': row.highlighted
+ };
+
+ return classNames(classes);
+ }
}
export default Table;
\ No newline at end of file
diff --git a/client/src/core-components/table.scss b/client/src/core-components/table.scss
index adc661d5..2055d5dd 100644
--- a/client/src/core-components/table.scss
+++ b/client/src/core-components/table.scss
@@ -5,11 +5,11 @@
&__header {
background-color: $primary-blue;
color: white;
- font-variant: small-caps;
+ font-weight: normal;
}
&__header-column {
- padding: 10px;
+ font-weight: normal;
&:first-child {
border-top-left-radius: 4px;
@@ -21,6 +21,7 @@
}
&__row {
+ border: 0;
color: #B8B8B8;
&:nth-child(even) {
@@ -28,11 +29,18 @@
}
&:nth-child(odd) {
- background-color: $light-grey;
+ background-color: #F1F1F1;
+ }
+
+ &-highlighted {
+ color: $secondary-blue;
+ font-weight: bold;
+ background-color: white !important;
}
}
- &__cell {
+ &__cell00 {
+ border: 0;
padding: 10px;
}
}
\ No newline at end of file
diff --git a/client/src/scss/_reset.scss b/client/src/scss/_reset.scss
index 9fd96fcb..95e2b640 100644
--- a/client/src/scss/_reset.scss
+++ b/client/src/scss/_reset.scss
@@ -1473,11 +1473,11 @@ th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
- border-top: 1px solid #dddddd;
+ //border-top: 1px solid #dddddd;
}
.table > thead > tr > th {
vertical-align: bottom;
- border-bottom: 2px solid #dddddd;
+ //border-bottom: 2px solid #dddddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
@@ -1488,7 +1488,7 @@ th {
border-top: 0;
}
.table > tbody + tbody {
- border-top: 2px solid #dddddd;
+ //border-top: 2px solid #dddddd;
}
.table .table {
background-color: #ffffff;
@@ -1502,7 +1502,7 @@ th {
padding: 5px;
}
.table-bordered {
- border: 1px solid #dddddd;
+ //border: 1px solid #dddddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
@@ -1510,11 +1510,11 @@ th {
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
- border: 1px solid #dddddd;
+ //border: 1px solid #dddddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
- border-bottom-width: 2px;
+ //border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
@@ -1648,7 +1648,7 @@ table th[class*="col-"] {
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
- border: 1px solid #dddddd;
+ //border: 1px solid #dddddd;
}
.table-responsive > .table {
margin-bottom: 0;