diff --git a/client/src/app-components/stats-chart.js b/client/src/app-components/stats-chart.js index ca6ddb1c..9b0d9111 100644 --- a/client/src/app-components/stats-chart.js +++ b/client/src/app-components/stats-chart.js @@ -64,7 +64,7 @@ class StatsChart extends React.Component { } getBorderWidth() { - return (this.props.period <= 90) ? 4 : 2; + return (this.props.period <= 90) ? 3 : 2; } getLabels() { diff --git a/client/src/app-components/stats.js b/client/src/app-components/stats.js index 408376a1..c112cd7f 100644 --- a/client/src/app-components/stats.js +++ b/client/src/app-components/stats.js @@ -1,5 +1,6 @@ import React from 'react'; import _ from 'lodash'; +import classNames from 'classnames'; import i18n from 'lib-app/i18n'; import API from 'lib-app/api-call'; @@ -44,7 +45,7 @@ class Stats extends React.Component { render() { return ( -
+
@@ -52,17 +53,27 @@ class Stats extends React.Component { ); } + getClass() { + let classes = { + 'stats': true, + 'stats_staff': this.props.type === 'staff' + }; + + return classNames(classes); + } + getToggleListProps() { return { values: this.state.showed, - className: this.getClassPrefix() + '__toggle-list', + className: 'stats__toggle-list', onChange: this.onToggleListChange.bind(this), + type: this.props.type === 'general' ? 'default' : 'small', items: this.getStrokes().map((name) => { return { content: -
-
{this.state.stats[name]}
-
{i18n('CHART_' + name)}
+
+
{this.state.stats[name]}
+
{i18n('CHART_' + name)}
} }) @@ -96,7 +107,7 @@ class Stats extends React.Component { } ], onChange: this.onDropDownChange.bind(this), - className: this.getClassPrefix() + '__dropdown' + className: 'stats__dropdown' } } @@ -193,10 +204,6 @@ class Stats extends React.Component { }; } - getClassPrefix() { - return this.props.type === 'general' ? 'admin-panel-stats' : 'ANOTHER_ONE'; /// IMPORTANTE... - } - getApiCallData(periodName) { return this.props.type === 'general' ? {period: periodName} : {period: periodName, staffId: this.props.staffId}; } diff --git a/client/src/app-components/stats.scss b/client/src/app-components/stats.scss index e69de29b..f7539577 100644 --- a/client/src/app-components/stats.scss +++ b/client/src/app-components/stats.scss @@ -0,0 +1,53 @@ +@import '../scss/vars'; + +.stats { + + &__dropdown { + margin-left: auto; + margin-bottom: 20px; + } + + &__toggle-list { + margin-bottom: 20px; + + &-item { + + &-value { + font-size: $font-size--lg; + line-height: 80px; + } + + &-name { + font-size: $font-size--md; + line-height: 20px; + } + } + } + + &_staff { + .stats__dropdown { + margin-left: auto; + margin-bottom: 20px; + float: left; + } + + .stats__toggle-list { + margin-bottom: 20px; + float: right; + + &-item { + + &-value { + font-size: $font-size--md; + line-height: 40px; + } + + &-name { + font-size: $font-size--sm; + line-height: 20px; + } + } + } + } + +} \ No newline at end of file diff --git a/client/src/app/admin/panel/dashboard/admin-panel-my-account.js b/client/src/app/admin/panel/dashboard/admin-panel-my-account.js index 0cd165e3..165db779 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-my-account.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-my-account.js @@ -23,6 +23,7 @@ class AdminPanelMyAccount extends React.Component { getEditorProps() { return { myAccount: true, + staffId: this.props.userId, name: this.props.userName, email: this.props.userEmail, profilePic: this.props.userProfilePic, diff --git a/client/src/app/admin/panel/staff/staff-editor.js b/client/src/app/admin/panel/staff/staff-editor.js index fdca49f0..1581698f 100644 --- a/client/src/app/admin/panel/staff/staff-editor.js +++ b/client/src/app/admin/panel/staff/staff-editor.js @@ -6,6 +6,7 @@ import API from 'lib-app/api-call'; import SessionStore from 'lib-app/session-store'; import TicketList from 'app-components/ticket-list'; import AreYouSure from 'app-components/are-you-sure'; +import Stats from 'app-components/stats'; import Form from 'core-components/form'; import FormField from 'core-components/form-field'; @@ -97,7 +98,8 @@ class StaffEditor extends React.Component {
- ACTIVITY +
{i18n('ACTIVITY')}
+
diff --git a/client/src/app/admin/panel/staff/staff-editor.scss b/client/src/app/admin/panel/staff/staff-editor.scss index 8e29ab3c..2f601ddd 100644 --- a/client/src/app/admin/panel/staff/staff-editor.scss +++ b/client/src/app/admin/panel/staff/staff-editor.scss @@ -156,4 +156,13 @@ color: $dark-grey; } } + + &__activity { + + &-title { + margin-bottom: 10px; + text-align: left; + } + } + } \ No newline at end of file diff --git a/client/src/core-components/toggle-list.js b/client/src/core-components/toggle-list.js index d057a6f1..edf16ada 100644 --- a/client/src/core-components/toggle-list.js +++ b/client/src/core-components/toggle-list.js @@ -7,7 +7,8 @@ class ToggleList extends React.Component { items: React.PropTypes.arrayOf(React.PropTypes.shape({ content: React.PropTypes.node })), - onChange: React.PropTypes.func + onChange: React.PropTypes.func, + type: React.PropTypes.oneOf(['default', 'small']) }; state = { @@ -25,6 +26,7 @@ class ToggleList extends React.Component { getClass() { let classes = { 'toggle-list': true, + 'toggle-list_small': this.props.type == 'small', [this.props.className]: (this.props.className) }; diff --git a/client/src/core-components/toggle-list.scss b/client/src/core-components/toggle-list.scss index a016f8a3..1fdd82e5 100644 --- a/client/src/core-components/toggle-list.scss +++ b/client/src/core-components/toggle-list.scss @@ -12,7 +12,7 @@ } &__selected { - box-shadow: inset 0 -5px 40px 10px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 -5px 40px 10px rgba(0, 0, 0, 0.08); } &__first-item { @@ -23,4 +23,11 @@ &__last-item { border-radius: 0 4px 4px 0; } + + &_small { + .toggle-list__item { + height: 80px; + width: 120px; + } + } } diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index bf5b7c3d..658e4ad7 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -176,13 +176,13 @@ module.exports = [ for (let i = 0; i < k; i++) { if(generalVal){ DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 103) % 100, type: 'ASSIGN', general: generalVal, value: (Math.floor((Math.random() + 17) * i)).toString() }); DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 109) % 100, type: 'CLOSE', general: generalVal, value: (Math.floor((Math.random() + 12) * i )).toString() @@ -190,25 +190,25 @@ module.exports = [ } else { DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 107) % 100, type: 'COMMENT', general: generalVal, value: (Math.floor((Math.random() + 5) * i)).toString() }); DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 104) % 100, type: 'SIGNUP', general: generalVal, value: (Math.floor(Math.random() * (i - 180) * (i - 185) / 400)).toString() }); DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 103) % 100, type: 'CLOSE', general: generalVal, value: (Math.floor((Math.random() + 12) * i )).toString() }); DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 99) % 100, type: 'CREATE_TICKET', general: generalVal, value: (Math.floor((Math.random() + 7) * i)).toString() diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 94a18a34..c79a2ae8 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -153,6 +153,7 @@ export default { 'VERIFY_SUCCESS': 'User verified', 'VERIFY_FAILED': 'Could not verify', 'TICKET_ACTIVITY': 'Ticket Activity', + 'ACTIVITY': 'Activity', 'CHART_CREATE_TICKET': 'Tickets created', diff --git a/client/src/reducers/session-reducer.js b/client/src/reducers/session-reducer.js index be4323cc..c1eca34f 100644 --- a/client/src/reducers/session-reducer.js +++ b/client/src/reducers/session-reducer.js @@ -44,7 +44,8 @@ class SessionReducer extends Reducer { logged: true, pending: false, failed: false, - staff: payload.data.staff + staff: payload.data.staff, + userId: payload.data.userId }); } @@ -75,7 +76,8 @@ class SessionReducer extends Reducer { initDone: true, logged: true, pending: false, - failed: false + failed: false, + userId: payload.data.userId }); }