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

# Conflicts:
#	client/src/core-components/search-box.js
#	client/src/data/languages/en.js

client/src/app/Routes.js

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

client/src/app/admin/panel/users/admin-panel-list-users.js

@@ -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>
+            <div className="admin-panel-list-users">
-                /admin/panel/users/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;

client/src/app/admin/panel/users/admin-panel-list-users.scss

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

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

@@ -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>
+            <div className="admin-panel-view-user">
-                /admin/panel/users/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);

client/src/app/admin/panel/users/admin-panel-view-user.scss

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

client/src/core-components/button.js

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

client/src/core-components/button.scss

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

client/src/core-components/search-box.js

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

client/src/core-components/table.js

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

client/src/core-components/table.scss

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

client/src/data/fixtures/user-fixtures.js

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

client/src/data/languages/en.js

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

client/src/lib-core/date-transformer.js

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