From 53aa8cc7f68421c31b4fae22d39a44ad368145d1 Mon Sep 17 00:00:00 2001 From: ivan Date: Thu, 5 Jan 2017 15:45:46 -0300 Subject: [PATCH] Max Red - Created menu type 'horizontal-list-bright', modified fixtures and add button load more with functionality [skip ci] --- client/src/app-components/activity-row.js | 2 +- .../panel/dashboard/admin-panel-activity.js | 110 ++++++++++++------ .../panel/dashboard/admin-panel-activity.scss | 7 ++ client/src/core-components/menu.js | 5 +- client/src/core-components/menu.scss | 29 ++++- client/src/data/fixtures/staff-fixtures.js | 12 +- client/src/data/languages/en.js | 17 +-- 7 files changed, 135 insertions(+), 47 deletions(-) create mode 100644 client/src/app/admin/panel/dashboard/admin-panel-activity.scss diff --git a/client/src/app-components/activity-row.js b/client/src/app-components/activity-row.js index 9529cd99..f42734af 100644 --- a/client/src/app-components/activity-row.js +++ b/client/src/app-components/activity-row.js @@ -34,7 +34,7 @@ class ActivityRow extends React.Component { {this.props.author.name} - {i18n('ACTIVITY_' + this.props.type)} + {i18n('ACTIVITY_' + this.props.type)} #{this.props.ticketNumber} diff --git a/client/src/app/admin/panel/dashboard/admin-panel-activity.js b/client/src/app/admin/panel/dashboard/admin-panel-activity.js index 5b58fe2c..1c6fae4d 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-activity.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-activity.js @@ -1,58 +1,100 @@ import React from 'react'; -import Header from 'core-components/header'; - +import API from 'lib-app/api-call'; import i18n from 'lib-app/i18n'; + import ActivityRow from 'app-components/activity-row'; +import Header from 'core-components/header'; +import SubmitButton from 'core-components/submit-button'; +import Menu from 'core-components/menu'; class AdminPanelActivity extends React.Component { + static childContextTypes = { + loading: React.PropTypes.bool + }; + + getChildContext() { + return { + loading: this.state.loading + }; + } + + state = { + activities: [], + page: 1, + limit: false, + loading: false + }; + + componentDidMount() { + this.retrieveNextPage(); + } + render() { return ( -
+
- - - - + + {this.state.activities.map(this.renderRow.bind(this))} + {(!this.state.limit) ? this.renderButton() : null}
); } - getActivityRowProps() { + renderButton() { + return ( + + {i18n('LOAD_MORE')} + + ); + } + + renderRow(row) { + return ( + + ); + } + + getMenuProps() { return { - "type": "COMMENT", - "ticketNumber": "683061", - "author": { - "name": "Tyrion Lannister", - "staff": false, - "id": "10" - } + className: 'admin-panel-activity__menu', + type: 'horizontal-list-bright', + items: [ + { + content: i18n('MY_NOTIFICATIONS'), + icon: '' + }, + { + content: i18n('ALL_NOTIFICATIONS'), + icon: '' + } + ] } } - getActivityRowProps2() { - return { - "type": "RE_OPEN", - "ticketNumber": "683049", - "author": { - "name": "Emilia Clarke", - "staff": true, - "id": "1" + retrieveNextPage() { + this.setState({loading: true}); + + API.call({ + path: '/staff/last-events', + data: { + page: this.state.page } - } + }).then(this.onRetrieveSuccess.bind(this)).catch(this.onRetrieveFail.bind(this)) } - getActivityRowProps3() { - return { - "type": "UN_ASSIGN", - "ticketNumber": "683049", - "author": { - "name": "Emilia Clarke", - "staff": true, - "id": "1" - } - } + onRetrieveSuccess(result) { + this.setState({ + activities: this.state.activities.concat(result.data), + page: this.state.page + 1, + limit: (result.data.length !== 10), + loading: false + }); + } + + onRetrieveFail() { + } } diff --git a/client/src/app/admin/panel/dashboard/admin-panel-activity.scss b/client/src/app/admin/panel/dashboard/admin-panel-activity.scss new file mode 100644 index 00000000..ad8c10e7 --- /dev/null +++ b/client/src/app/admin/panel/dashboard/admin-panel-activity.scss @@ -0,0 +1,7 @@ +.admin-panel-activity { + + &__menu { + margin: 0 auto; + width: 300px; + } +} \ No newline at end of file diff --git a/client/src/core-components/menu.js b/client/src/core-components/menu.js index de7cd63e..25cd805d 100644 --- a/client/src/core-components/menu.js +++ b/client/src/core-components/menu.js @@ -11,7 +11,7 @@ class Menu extends React.Component { id: React.PropTypes.string, itemsRole: React.PropTypes.string, header: React.PropTypes.string, - type: React.PropTypes.oneOf(['primary', 'secondary', 'navigation', 'horizontal', 'horizontal-list']), + type: React.PropTypes.oneOf(['primary', 'secondary', 'navigation', 'horizontal', 'horizontal-list', 'horizontal-list-bright']), items: React.PropTypes.arrayOf(React.PropTypes.shape({ content: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number, React.PropTypes.node]), icon: React.PropTypes.string @@ -86,7 +86,8 @@ class Menu extends React.Component { 'menu_secondary': (this.props.type === 'secondary'), 'menu_navigation': (this.props.type === 'navigation'), 'menu_horizontal': (this.props.type === 'horizontal'), - 'menu_horizontal-list': (this.props.type === 'horizontal-list') + 'menu_horizontal-list': (this.props.type === 'horizontal-list'), + 'menu_horizontal-list-bright': (this.props.type === 'horizontal-list-bright') }; classes[this.props.className] = true; diff --git a/client/src/core-components/menu.scss b/client/src/core-components/menu.scss index 6fc7486a..64eab16c 100644 --- a/client/src/core-components/menu.scss +++ b/client/src/core-components/menu.scss @@ -132,7 +132,8 @@ $transition: background-color 0.3s ease, color 0.3s ease; } } - &_horizontal-list { + &_horizontal-list, + &_horizontal-list-bright { text-align: left; background-color: $secondary-blue; min-height: 45px; @@ -165,6 +166,32 @@ $transition: background-color 0.3s ease, color 0.3s ease; outline: none; } + .menu__list-item_selected, + .menu__list-item_selected:hover { + transition: $transition; + padding: 2px 13px; + border-radius: 30px; + background-color: $primary-blue; + color: white; + } + } + + &_horizontal-list-bright { + background-color: transparent; + + .menu__list-item { + transition: none; + background-color: transparent; + color: black; + cursor: pointer; + display: inline-block; + margin-top: 11px; + margin-bottom: 10px; + margin-left: 20px; + padding: 2px 13px; + } + + .menu__list-item_selected, .menu__list-item_selected:hover { transition: $transition; diff --git a/client/src/data/fixtures/staff-fixtures.js b/client/src/data/fixtures/staff-fixtures.js index d6a6ffa9..7aa87f0b 100644 --- a/client/src/data/fixtures/staff-fixtures.js +++ b/client/src/data/fixtures/staff-fixtures.js @@ -1060,8 +1060,16 @@ module.exports = [ }, { path: '/staff/last-events', - time: 30, - response: function() { + time: 430, + response: function(data) { + + if(data.page > 5) { + return { + status: 'success', + data: [] + }; + } + return { status: 'success', data: [ diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index e5345eb0..3526b799 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -119,13 +119,16 @@ export default { 'DELETE_STAFF_MEMBER': 'Delete staff member', 'MAINTENANCE_MODE': 'Maintenance mode', 'RECOVER_DEFAULT': 'Recover default', - 'ACTIVITY_COMMENT': ' commented ', - 'ACTIVITY_ASSIGN': ' assigned ', - 'ACTIVITY_UN_ASSIGN': ' unassigned ', - 'ACTIVITY_CLOSED': ' closed ', - 'ACTIVITY_RE_OPEN': ' reopened ', - 'ACTIVITY_DEPARTMENT_CHANGED': ' changed departments of ', - 'ACTIVITY_PRIORITY_CHANGED': ' changed priority of ', + 'LOAD_MORE': 'Load More', + 'ACTIVITY_COMMENT': 'commented', + 'ACTIVITY_ASSIGN': 'assigned', + 'ACTIVITY_UN_ASSIGN': 'unassigned', + 'ACTIVITY_CLOSE': 'closed', + 'ACTIVITY_RE_OPEN': 'reopened', + 'ACTIVITY_DEPARTMENT_CHANGED': 'changed department of', + 'ACTIVITY_PRIORITY_CHANGED': 'changed priority of', + 'MY_NOTIFICATIONS': 'My notifications', + 'ALL_NOTIFICATIONS': 'All notifications', //VIEW DESCRIPTIONS 'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',