Merged in OS-102-user-view (pull request #83)

Ivan - Add user view [skip ci]

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-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/data/fixtures/user-fixtures.js

@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 module.exports = [
     {
         path: '/user/login',
@@ -124,6 +126,147 @@ 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,

client/src/data/languages/en.js

@@ -59,6 +59,7 @@ export default {
     'SAVE': 'Save',
     'DISCARD_CHANGES': 'Discard changes',
     'DELETE': 'Delete',
+    'DELETE_AND_BAN': 'Delete and ban',
     'LANGUAGE': 'Language',
     'OWNER': 'Owner',
     'OWNED': 'Owned',
@@ -78,7 +79,8 @@ export default {
     '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.',
@@ -92,6 +94,8 @@ 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',
     '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',
@@ -106,6 +110,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.',