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

Merge branch 'master' into os-103-ban-users 

# Conflicts:
#	client/src/core-components/search-box.js
#	client/src/data/languages/en.js
This commit is contained in:
ivan 2016-11-29 19:50:04 -03:00
parent d7eb9f702f 5c4eef12e5
commit 793c11fe0f
13 changed files with 614 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/Routes.js
View File

@ -90,7 +90,7 @@ export default (
<Route path="users">
<IndexRedirect to="list-users" />
<Route path="list-users" component={AdminPanelListUsers} />
<Route path="view-user" component={AdminPanelViewUser} />
<Route path="view-user/:userId" component={AdminPanelViewUser} />
<Route path="ban-users" component={AdminPanelBanUsers} />
</Route>

152
client/src/app/admin/panel/users/admin-panel-list-users.js
View File

@ -1,14 +1,162 @@
import React from 'react';
import i18n from 'lib-app/i18n';
import API from 'lib-app/api-call';
import DateTransformer from 'lib-core/date-transformer';
import Header from 'core-components/header';
import Table from 'core-components/table';
import SearchBox from 'core-components/search-box';
import Button from 'core-components/button';
class AdminPanelListUsers extends React.Component {
state = {
loading: true,
users: [],
orderBy: 'id',
desc: true,
page: 1,
pages: 1
};
componentDidMount() {
this.retrieveUsers({
page: 1,
orderBy: 'id',
desc: true,
search: ''
});
}
render() {
return (
<div>
/admin/panel/users/list-users
<div className="admin-panel-list-users">
<Header title={i18n('LIST_USERS')} description={i18n('LIST_USERS_DESCRIPTION')} />
<SearchBox className="admin-panel-list-users__search-box" placeholder={i18n('SEARCH_USERS')} onSearch={this.onSearch.bind(this)} />
<Table {...this.getTableProps()} />
</div>
);
}
getTableProps() {
return {
className: 'admin-panel-list-users__table',
loading: this.state.loading,
headers: this.getTableHeaders(),
rows: this.state.users.map(this.getUserRow.bind(this)),
pageSize: 10,
page: this.state.page,
pages: this.state.pages,
onPageChange: this.onPageChange.bind(this)
};
}
getTableHeaders() {
return [
{
key: 'name',
value: i18n('NAME'),
className: 'admin-panel-list-users__table-name col-md-3'
},
{
key: 'email',
value: i18n('EMAIL'),
className: 'admin-panel-list-users__table-email col-md-5'
},
{
key: 'tickets',
value: i18n('TICKETS'),
className: 'admin-panel-list-users__table-tickets col-md-2',
order: true,
onOrderUp: this.orderByTickets.bind(this, false),
onOrderDown: this.orderByTickets.bind(this, true)
},
{
key: 'signupDate',
value: i18n('SIGNUP_DATE'),
className: 'admin-panel-list-users__table-date col-md-2',
order: true,
onOrderUp: this.orderById.bind(this, false),
onOrderDown: this.orderById.bind(this, true)
}
];
}
getUserRow(user) {
return {
name: (
<Button className="admin-panel-list-users__name-link" type="link" route={{to: '/admin/panel/users/view-user/' + user.id}}>
{user.name}
</Button>
),
email: user.email,
tickets: (
<span className="admin-panel-list-users__tickets-number">
{user.tickets}
</span>
),
signupDate: DateTransformer.transformToString(user.signupDate)
};
}
onSearch(query) {
this.retrieveUsers({
page: 1,
orderBy: 'id',
desc: true,
search: query
});
}
onPageChange(event) {
this.retrieveUsers({
page: event.target.value,
orderBy: this.state.orderBy,
desc: this.state.desc,
search: this.state.search
});
}
orderByTickets(desc) {
this.retrieveUsers({
page: 1,
orderBy: 'tickets',
desc: desc,
search: this.state.search
});
}
orderById(desc) {
this.retrieveUsers({
page: 1,
orderBy: 'id',
desc: desc,
search: this.state.search
});
}
retrieveUsers(data) {
this.setState({
loading: true
});
API.call({
path: '/user/get-users',
data: data
}).then(this.onUsersRetrieved.bind(this));
}
onUsersRetrieved(result) {
this.setState({
page: result.data.page,
pages: result.data.pages,
users: result.data.users,
orderBy: result.data.orderBy,
desc: result.data.desc,
loading: false
});
}
}
export default AdminPanelListUsers;

24
client/src/app/admin/panel/users/admin-panel-list-users.scss Normal file
View File

@ -0,0 +1,24 @@
@import '../../../../scss/vars';
.admin-panel-list-users {
&__search-box {
margin: 20px;
}
&__table {
text-align: left;
}
&__name-link {
color: $secondary-blue;
}
&__tickets-number {
background-color: white;
border-radius: 10px;
width: 70px;
display: inline-block;
text-align: center;
}
}

111
client/src/app/admin/panel/users/admin-panel-view-user.js
View File

@ -1,14 +1,119 @@
import React from 'react';
import {connect} from 'react-redux';
import {browserHistory} from 'react-router';
import i18n from 'lib-app/i18n';
import API from 'lib-app/api-call';
import Header from 'core-components/header';
import Button from 'core-components/button';
import TicketList from 'app-components/ticket-list';
import AreYouSure from 'app-components/are-you-sure';
class AdminPanelViewUser extends React.Component {
state = {
name: '',
email: '',
tickets: [],
invalid: false,
loading: true
};
componentDidMount() {
API.call({
path: '/user/get-user',
data: {
userId: this.props.params.userId
}
}).then(this.onUserRetrieved.bind(this)).catch(() => this.setState({
invalid: true
}));
}
render() {
return (
<div>
/admin/panel/users/view-user
<div className="admin-panel-view-user">
<Header title={i18n('USER_VIEW_TITLE', {userId: this.props.params.userId})} description={i18n('USER_VIEW_DESCRIPTION')} />
{(this.state.invalid) ? this.renderInvalid() : this.renderUserInfo()}
</div>
);
}
renderInvalid() {
return (
<div className="admin-panel-view-user__invalid">
{i18n('INVALID_USER')}
</div>
);
}
renderUserInfo() {
return (
<div className="admin-panel-view-user__content">
<div className="admin-panel-view-user__info">
<div className="admin-panel-view-user__info-item">
{i18n('NAME')}
<div className="admin-panel-view-user__info-box">
{this.state.name}
</div>
</div>
<div className="admin-panel-view-user__info-item">
{i18n('EMAIL')}
<div className="admin-panel-view-user__info-box">
{this.state.email}
</div>
</div>
<div className="admin-panel-view-user__delete-button">
<Button onClick={this.onDeleteClick.bind(this)} size="medium">{i18n('DELETE_AND_BAN')}</Button>
</div>
</div>
<span className="admin-panel-view-user__separator" />
<div className="admin-panel-view-user__tickets">
<div className="admin-panel-view-user__tickets-title">{i18n('TICKETS')}</div>
<TicketList {...this.getTicketListProps()}/>
</div>
</div>
);
}
getTicketListProps() {
return {
type: 'secondary',
tickets: this.state.tickets,
loading: this.state.loading,
departments: this.props.departments,
ticketPath: '/admin/panel/tickets/view-ticket/'
};
}
onUserRetrieved(result) {
this.setState({
name: result.data.name,
email: result.data.email,
tickets: result.data.tickets,
loading: false
});
}
onDeleteClick() {
AreYouSure.openModal(i18n('DELETE_USER_DESCRIPTION'), this.deleteUser.bind(this))
}
deleteUser() {
API.call({
path: '/user/delete',
data: {
userId: this.props.params.userId
}
}).then(() => {
browserHistory.push('/admin/panel/user/list-users');
});
}
}
export default AdminPanelViewUser;
export default connect((store) => {
return {
departments: store.session.userDepartments
};
})(AdminPanelViewUser);

40
client/src/app/admin/panel/users/admin-panel-view-user.scss Normal file
View File

@ -0,0 +1,40 @@
@import '../../../../scss/vars';
.admin-panel-view-user {
&__info {
text-align: left;
&-item {
display: inline-block;
margin-right: 20px;
width: 200px;
}
&-box {
background-color: $grey;
color: $primary-black;
font-size: $font-size--sm;
padding: 5px 15px;
text-align: center;
}
}
&__delete-button {
margin-top: 20px;
}
&__separator {
background-color: $grey;
display: block;
margin: 30px 0;
height: 1px;
width: 100%;
}
&__tickets-title {
font-size: $font-size--md;
margin-bottom: 20px;
text-align: left;
}
}

2
client/src/core-components/button.js
View File

@ -41,7 +41,7 @@ class Button extends React.Component {
static defaultProps = {
type: 'primary',
size: 'medium'
size: 'large'
};
render() {

7
client/src/core-components/button.scss
View File

@ -59,11 +59,14 @@
}
&_medium {
width: 239px;
width: auto;
padding: 5px 15px;
height: 35px;
text-transform: none;
}
&_large {
//width: 239px;
width: 239px;
}
&_auto {

3
client/src/core-components/search-box.js
View File

@ -31,6 +31,7 @@ class SearchBox extends React.Component {
static propTypes = {
onSearch: React.PropTypes.func,
placeholder: React.PropTypes.string,
searchOnType: React.PropTypes.bool
};
@ -42,7 +43,7 @@ class SearchBox extends React.Component {
render() {
return (
<div className={this.getClass()}>
<Input className="search-box__text" value={this.state.value} onChange={this.onChange.bind(this)} onKeyDown={this.onKeyDown.bind(this)} />
<Input className="search-box__text" value={this.state.value} placeholder={this.props.placeholder} onChange={this.onChange.bind(this)} onKeyDown={this.onKeyDown.bind(this)} />
<span className="search-box__icon">
<Icon name="search" />
</span>

33
client/src/core-components/table.js
View File

@ -3,6 +3,7 @@ import _ from 'lodash';
import classNames from 'classnames';
import Menu from 'core-components/menu';
import Icon from 'core-components/icon';
import Loading from 'core-components/loading';
class Table extends React.Component {
@ -32,7 +33,7 @@ class Table extends React.Component {
render() {
return (
<div className="table__wrapper">
<div className={this.getClass()}>
<table className="table table-responsive">
<thead>
<tr className="table__header">
@ -56,7 +57,23 @@ class Table extends React.Component {
};
return (
<th className={classNames(classes)} key={header.key}>{header.value}</th>
<th className={classNames(classes)} key={header.key}>
{header.value}
{(header.order) ? this.renderHeaderArrows(header.onOrderUp, header.onOrderDown) : null}
</th>
);
}
renderHeaderArrows(onArrowUp, onArrowDown) {
return (
<span className="table__header-arrows">
<span className="table__header-arrow-up" onClick={onArrowUp}>
<Icon name="arrow-up"/>
</span>
<span className="table__header-arrow-down" onClick={onArrowDown}>
<Icon name="arrow-down"/>
</span>
</span>
);
}
@ -92,7 +109,7 @@ class Table extends React.Component {
const items = _.range(1, this.getPages()).map((index) => {return {content: index};});
return (
<Menu className="table__navigation" type="navigation" items={items} selectedIndex={this.getPageNumber() - 1} onItemClick={this.onNavigationItemClick.bind(this)} />
<Menu className="table__navigation" type="navigation" items={items} selectedIndex={this.getPageNumber() - 1} onItemClick={this.onNavigationItemClick.bind(this)} tabbable/>
);
}
@ -104,6 +121,16 @@ class Table extends React.Component {
)
}
getClass() {
let classes = {
'table__wrapper': true
};
classes[this.props.className] = (this.props.className);
return classNames(classes);
}
onNavigationItemClick(index) {
this.setState({
page: index + 1

12
client/src/core-components/table.scss
View File

@ -7,6 +7,18 @@
background-color: $primary-blue;
color: white;
font-weight: normal;
&-arrow-up {
cursor: pointer;
font-size: $font-size--xs;
margin-left: 10px;
}
&-arrow-down {
cursor: pointer;
font-size: $font-size--xs;
margin-left: 3px;
}
}
&__header-column {

231
client/src/data/fixtures/user-fixtures.js
View File

@ -1,3 +1,5 @@
import _ from 'lodash';
module.exports = [
{
path: '/user/login',
@ -124,6 +126,235 @@ module.exports = [
};
}
},
{
path: '/user/delete',
time: 1000,
response: function () {
return {
status: 'success',
data: {}
};
}
},
{
path: '/user/get-user',
time: 100,
response: function () {
return {
status: 'success',
data: {
name: 'Kurt Gödel',
email: 'kurt@currycurrylady.hs',
tickets: _.times(13).map(() => {
return {
ticketNumber: '118551',
title: 'Lorem ipsum door',
content: 'I had a problem with the installation of the php server',
department: {
id: 1,
name: 'Sales Support'
},
date: '20150409',
file: 'http://www.opensupports.com/some_file.zip',
language: 'en',
unread: false,
closed: false,
priority: 'low',
author: {
name: 'Haskell Curry',
email: 'haskell@lambda.com'
},
owner: {
name: 'Steve Jobs'
},
events: [
{
type: 'ASSIGN',
date: '20150409',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150409',
content: 'Do you have apache installed? It generally happens if you dont have apache.',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'UN_ASSIGN',
date: '20150410',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'DEPARTMENT_CHANGED',
date: '20150411',
content: 'System support',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150412',
content: 'I have already installed apache, but the problem persists',
author: {
name: 'Haskell Curry',
steve: 'haskell@lambda.com',
staff: false
}
},
{
type: 'PRIORITY_CHANGED',
date: '20150413',
content: 'MEDIUM',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150511',
content: 'Thanks!, I soved it by myself',
author: {
name: 'Haskell Curry',
steve: 'haskell@lambda.com',
staff: false
}
},
{
type: 'CLOSE',
date: '20150513',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'RE_OPEN',
date: '20151018',
author: {
name: 'Haskell Curry',
email: 'haskell@lambda.com',
staff: false
}
}
]
};
})
}
}
}
},
{
path: '/user/get-users',
time: 100,
response: function (data) {
return {
status: 'success',
data: {
page: data.page,
pages: 10,
orderBy: 'date',
desc: true,
search: '',
users: [
{
id: 101,
name: 'Haskell Curry',
email: 'haskell@currycurrylady.com',
tickets: 5,
signupDate: 20160415
},
{
id: 97,
name: 'Alan Turing',
email: 'turing@currycurrylady.com',
tickets: 1,
signupDate: 20160401
},
{
id: 89,
name: 'David Hilbert',
email: 'hilbert@currycurrylady.com',
tickets: 2,
signupDate: 20160208
},
{
id: 83,
name: 'Kurt Gödel',
email: 'kurt@currycurrylady.com',
tickets: 10,
signupDate: 20160110
},
{
id: 79,
name: 'Mojzesz Presburger',
email: 'presburger@currycurrylady.com',
tickets: 6,
signupDate: 20150415
},
{
id: 73,
name: 'Haskell Curry',
email: 'haskell@currycurrylady.com',
tickets: 5,
signupDate: 20160415
},
{
id: 71,
name: 'Alan Turing',
email: 'turing@currycurrylady.com',
tickets: 1,
signupDate: 20160401
},
{
id: 67,
name: 'David Hilbert',
email: 'hilbert@currycurrylady.com',
tickets: 2,
signupDate: 20160208
},
{
id: 61,
name: 'Kurt Gödel',
email: 'kurt@currycurrylady.com',
tickets: 10,
signupDate: 20160110
},
{
id: 59,
name: 'Mojzesz Presburger',
email: 'presburger@currycurrylady.com',
tickets: 6,
signupDate: 20150415
}
]
}
};
}
},
{
path: '/user/get',
time: 100,

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

@ -79,7 +79,11 @@ export default {
'UN_BAN': 'Disable ban',
'BAN_NEW_EMAIL': 'Ban new email',
'BAN_EMAIL': 'Ban email',
'NAME': 'Name',
'SIGNUP_DATE': 'Sign up date',
'SEARCH_USERS': 'Search users...',
'USER_VIEW_TITLE': 'User #{userId}',
//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.',
'TICKET_LIST_DESCRIPTION': 'Here you can find a list of all tickets you have sent to our support team.',
@ -93,6 +97,9 @@ export default {
'ALL_TICKETS_DESCRIPTION': 'Here you can view the tickets of the departments you are assigned.',
'TICKET_VIEW_DESCRIPTION': 'This ticket has been sent by a customer. Here you can respond or assign the ticket',
'BAN_USERS_DESCRIPTION': 'Here you can see a list of banned emails, you can un-ban them or add more emails to the list.',
'LIST_USERS_DESCRIPTION': 'This is the list of users that are registered in this platform. You can search for someone in particular, delete it or ban it.',
'USER_VIEW_DESCRIPTION': 'Here you can find all the information about an user and all the tickets sent by the user. You can also delete or ban it.',
'DELETE_USER_DESCRIPTION': 'The user will not be able to log in aging and all its tickets will be erased. Also, the email can not be used any more.',
//ERRORS
'EMAIL_OR_PASSWORD': 'Email or password invalid',
@ -107,6 +114,7 @@ export default {
'INVALID_RECOVER': 'Invalid recover data',
'TICKET_SENT_ERROR': 'An error occurred while trying to create the ticket.',
'NO_PERMISSION': 'You\'ve no permission to access to this page.',
'INVALID_USER': 'User id is invalid',
//MESSAGES
'SIGNUP_SUCCESS': 'You have registered successfully in our support system.',

1
client/src/lib-core/date-transformer.js
View File

@ -2,6 +2,7 @@ let month = ["", "Jan", "Feb", "Mar", "May", "Jun", "Jul", "Aug", "Sep", "Oct",
export default {
transformToString (date) {
date += ''; //Transform to string
let y = date.substring(0, 4);
let m = date.substring(4, 6);
let d = date.substring(6, 8);