{element.title}
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 f033fb93..91263de0 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
@@ -20,7 +20,7 @@ class DashboardListTicketsPage extends React.Component {
return (
);
}
diff --git a/client/src/core-components/checkbox.js b/client/src/core-components/checkbox.js
index 4c4bfe32..c148783a 100644
--- a/client/src/core-components/checkbox.js
+++ b/client/src/core-components/checkbox.js
@@ -58,7 +58,7 @@ class CheckBox extends React.Component {
getClass() {
let classes = {
'checkbox': true,
- 'checkbox_checked': this.state.checked,
+ 'checkbox_checked': this.getValue(),
[this.props.className]: (this.props.className)
};
diff --git a/client/src/core-components/menu.js b/client/src/core-components/menu.js
index ff837dbb..18158405 100644
--- a/client/src/core-components/menu.js
+++ b/client/src/core-components/menu.js
@@ -11,9 +11,9 @@ class Menu extends React.Component {
id: React.PropTypes.string,
itemsRole: React.PropTypes.string,
header: React.PropTypes.string,
- type: React.PropTypes.oneOf(['primary', 'secondary']),
+ type: React.PropTypes.oneOf(['primary', 'secondary', 'navigation']),
items: React.PropTypes.arrayOf(React.PropTypes.shape({
- content: React.PropTypes.string.isRequired,
+ content: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
icon: React.PropTypes.string
})).isRequired,
selectedIndex: React.PropTypes.number,
@@ -22,10 +22,13 @@ class Menu extends React.Component {
static defaultProps = {
type: 'primary',
- selectedIndex: 0,
tabbable: false
};
+ state = {
+ selectedIndex: this.props.selectedIndex || 0
+ };
+
render() {
return (
@@ -80,7 +83,8 @@ class Menu extends React.Component {
getClass() {
let classes = {
'menu': true,
- 'menu_secondary': (this.props.type === 'secondary')
+ 'menu_secondary': (this.props.type === 'secondary'),
+ 'menu_navigation': (this.props.type === 'navigation')
};
classes[this.props.className] = true;
@@ -90,7 +94,7 @@ class Menu extends React.Component {
getItemProps(index) {
return {
- id: this.props.id + '__' + index,
+ id: (this.props.id) ? this.props.id + '__' + index : null,
className: this.getItemClass(index),
onClick: this.onItemClick.bind(this, index),
tabIndex: (this.props.tabbable) ? '0' : null,
@@ -103,7 +107,7 @@ class Menu extends React.Component {
getItemClass(index) {
let classes = {
'menu__list-item': true,
- 'menu__list-item_selected': (this.props.selectedIndex === index)
+ 'menu__list-item_selected': (this.getSelectedIndex() === index)
};
return classNames(classes);
@@ -118,7 +122,15 @@ class Menu extends React.Component {
}
}
+ getSelectedIndex() {
+ return (this.props.selectedIndex !== undefined) ? this.props.selectedIndex : this.state.selectedIndex;
+ }
+
onItemClick(index) {
+ this.setState({
+ selectedIndex: index
+ });
+
if (this.props.onItemClick) {
this.props.onItemClick(index);
}
diff --git a/client/src/core-components/menu.scss b/client/src/core-components/menu.scss
index a5f45593..ab2c661b 100644
--- a/client/src/core-components/menu.scss
+++ b/client/src/core-components/menu.scss
@@ -42,4 +42,40 @@
border-top-left-radius: 4px;
}
}
+
+ &_navigation {
+ text-align: center;
+ background-color: transparent;
+
+ .menu__list {
+ background-color: transparent;
+ display: inline-block;
+ }
+
+ .menu__list-item {
+ background-color: white;
+ cursor: pointer;
+ display: inline-block;
+ padding: 8px;
+
+ &:first-child {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+
+ &:last-child {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+ }
+
+ .menu__list-item_selected {
+ background-color: $grey;
+ color: $primary-blue;
+ }
+
+ .menu__list-item:hover {
+ color: $primary-blue;
+ }
+ }
}
\ No newline at end of file
diff --git a/client/src/core-components/table.js b/client/src/core-components/table.js
index 806d1830..9dad0856 100644
--- a/client/src/core-components/table.js
+++ b/client/src/core-components/table.js
@@ -1,6 +1,9 @@
import React from 'react';
+import _ from 'lodash';
import classNames from 'classnames';
+import Menu from 'core-components/menu';
+
class Table extends React.Component {
static propTypes = {
headers: React.PropTypes.arrayOf(React.PropTypes.shape({
@@ -9,6 +12,7 @@ class Table extends React.Component {
className: React.PropTypes.string
})),
rows: React.PropTypes.arrayOf(React.PropTypes.object),
+ pageSize: React.PropTypes.number,
type: React.PropTypes.oneOf(['default'])
};
@@ -16,18 +20,25 @@ class Table extends React.Component {
type: 'default'
};
+ state = {
+ page: 1
+ };
+
render() {
return (
-
-
-
- {this.props.headers.map(this.renderHeaderColumn.bind(this))}
-
-
-
- {this.props.rows.map(this.renderRow.bind(this))}
-
-
+
+
+
+
+ {this.props.headers.map(this.renderHeaderColumn.bind(this))}
+
+
+
+ {this.props.rows.map(this.renderRow.bind(this))}
+
+
+ {(this.props.pageSize && this.props.rows.length > this.props.pageSize) ? this.renderNavigation() : null}
+
);
}
@@ -43,13 +54,19 @@ class Table extends React.Component {
}
renderRow(row, index) {
- let headersKeys = this.props.headers.map(header => header.key);
+ const headersKeys = this.props.headers.map(header => header.key);
+ let renderCurrentRow = true;
- return (
+ if (this.props.pageSize && (index >= this.props.pageSize * this.state.page || index < this.props.pageSize * (this.state.page - 1))) {
+ renderCurrentRow = false;
+ }
+
+
+ return (renderCurrentRow) ? (
{headersKeys.map(this.renderCell.bind(this, row))}
- );
+ ) : null;
}
renderCell(row, key, index) {
@@ -62,6 +79,21 @@ class Table extends React.Component {
{row[key]} |
);
}
+
+ renderNavigation() {
+ const pages = Math.ceil(this.props.rows.length / this.props.pageSize) + 1;
+ const items = _.range(1, pages).map((index) => {return {content: index};});
+
+ return (
+