From c9c9d7c80c5af2ccc88eabe84448ed07376234ef Mon Sep 17 00:00:00 2001 From: ivan Date: Tue, 16 Aug 2016 19:41:14 -0300 Subject: [PATCH] Ivan - Table Component - Working table in dashboard [skip ci] --- .../app/main/dashboard/dashboard-layout.js | 9 +- .../app/main/dashboard/dashboard-layout.scss | 9 ++ .../dashboard-list-tickets-page.js | 142 +++++++++++++----- .../dashboard-list-tickets-page.scss | 9 ++ .../src/app/main/dashboard/dashboard-menu.js | 15 +- client/src/core-components/menu.js | 23 ++- client/src/core-components/menu.scss | 24 ++- client/src/core-components/table.js | 13 +- client/src/core-components/table.scss | 16 +- client/src/scss/_reset.scss | 14 +- 10 files changed, 201 insertions(+), 73 deletions(-) create mode 100644 client/src/app/main/dashboard/dashboard-layout.scss diff --git a/client/src/app/main/dashboard/dashboard-layout.js b/client/src/app/main/dashboard/dashboard-layout.js index 89f9c0a7..93e66076 100644 --- a/client/src/app/main/dashboard/dashboard-layout.js +++ b/client/src/app/main/dashboard/dashboard-layout.js @@ -2,14 +2,17 @@ import React from 'react'; import {connect} from 'react-redux'; import DashboardMenu from 'app/main/dashboard/dashboard-menu'; +import Widget from 'core-components/widget'; class DashboardLayout extends React.Component { render() { return (this.props.session.logged) ? ( -
-
-
{this.props.children}
+
+
+ + {this.props.children} +
) : 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 ( -
+
+
Tickets
); @@ -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 { ); } + + 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;
{row[key]}