tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Max Red - Ivan changed some things (problems with userId in my-account) and I kept abstacting the component, and applied it to staff-editor [skip ci]

This commit is contained in:
ivan 2017-01-15 19:46:08 -03:00
parent da928f9b6f
commit 371b7973b2
11 changed files with 106 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app-components/stats-chart.js
View File

@ -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() {

27
client/src/app-components/stats.js
View File

@ -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 (
<div>
<div className={this.getClass()}>
<DropDown {...this.getDropDownProps()}/>
<ToggleList {...this.getToggleListProps()} />
<StatsChart {...this.getStatsChartProps()} />
@ -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:
<div className={this.getClassPrefix() + '__toggle-list-item'}>
<div className={this.getClassPrefix() + '__toggle-list-item-value'}>{this.state.stats[name]}</div>
<div className={this.getClassPrefix() + '__toggle-list-item-name'}>{i18n('CHART_' + name)}</div>
<div className="stats__toggle-list-item">
<div className="stats__toggle-list-item-value">{this.state.stats[name]}</div>
<div className="stats__toggle-list-item-name">{i18n('CHART_' + name)}</div>
</div>
}
})
@ -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};
}

53
client/src/app-components/stats.scss
View File

@ -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;
}
}
}
}
}

1
client/src/app/admin/panel/dashboard/admin-panel-my-account.js
View File

@ -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,

4
client/src/app/admin/panel/staff/staff-editor.js
View File

@ -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 {
</div>
<div className="col-md-8">
<div className="staff-editor__activity">
ACTIVITY
<div className="staff-editor__activity-title">{i18n('ACTIVITY')}</div>
<Stats staffId={this.props.staffId} type="staff"/>
</div>
</div>
</div>

9
client/src/app/admin/panel/staff/staff-editor.scss
View File

@ -156,4 +156,13 @@
color: $dark-grey;
}
}
&__activity {
&-title {
margin-bottom: 10px;
text-align: left;
}
}
}

4
client/src/core-components/toggle-list.js
View File

@ -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)
};

9
client/src/core-components/toggle-list.scss
View File

@ -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;
}
}
}

12
client/src/data/fixtures/system-fixtures.js
View File

@ -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()

1
client/src/data/languages/en.js
View File

@ -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',

6
client/src/reducers/session-reducer.js
View File

@ -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
});
}