Max - WIP [skip ci]

client/src/app/admin/panel/staff/admin-panel-staff-members.js

@@ -1,10 +1,15 @@
 import React from 'react';
 
 import i18n from 'lib-app/i18n';
-
+import API from 'lib-app/api-call';
+import SessionStore from 'lib-app/session-store';
 import PeopleList from 'app-components/people-list';
+
 import Header from 'core-components/header';
 import DropDown from 'core-components/drop-down';
+import Button from 'core-components/button';
+import Icon from 'core-components/icon';
+import Loading from 'core-components/loading';
 
 class AdminPanelStaffMembers extends React.Component {
 
@@ -16,12 +21,28 @@ class AdminPanelStaffMembers extends React.Component {
         departments: []
     };
 
+    state = {
+        selectedDepartment: 0,
+        staffList: [],
+        loading: true
+    };
+
+    componentDidMount() {
+        API.call({
+            path: '/staff/get-all',
+            data: {}
+        }).then(this.onStaffRetrieved.bind(this));
+    }
+
     render() {
         return (
             <div>
                 <Header title={i18n('STAFF_MEMBERS')} description={i18n('STAFF_MEMBERS_DESCRIPTION')} />
                 <DropDown {...this.getDepartmentDropdownProps()} />
-                <PeopleList list={this.getStaffList()}/>
+                <Button size="medium" onClick={() => {}} type="secondary" className="">
+                    <Icon name="user-plus" className=""/> {i18n('ADD_NEW_STAFF')}
+                </Button>
+                {(this.state.loading) ? <Loading backgrounded /> : <PeopleList list={this.state.staffList} />}
             </div>
         );
     }
@@ -31,7 +52,7 @@ class AdminPanelStaffMembers extends React.Component {
             items: this.getDepartments(),
             onChange: (event) => {
                 this.setState({
-                    selectedDepartment: event.index && this.props.departments[event.index - 1].id
+                    selectedDepartment: event.index  && this.props.departments[event.index - 1].id
                 });
             },
             size: 'medium'
@@ -39,7 +60,7 @@ class AdminPanelStaffMembers extends React.Component {
     }
 
     getDepartments() {
-        let departments = this.props.departments.map((department) => {
+        let departments = SessionStore.getDepartments().map((department) => {
             return {content: department.name};
         });
 
@@ -50,44 +71,13 @@ class AdminPanelStaffMembers extends React.Component {
         return departments;
     }
 
-    getStaffList() {
-        return [
-            {
-                profilePic: 'http://www.opensupports.com/profilepic.jpg',
-                name: 'Emilia Clarke',
-                assignedTickets: 4,
-                closedTickets: 21,
-                lastLogin: 20161212
-            },
-            {
-                profilePic: 'http://www.opensupports.com/profilepic.jpg',
-                name: 'Yulian A GUI Yermo',
-                assignedTickets: 9,
-                closedTickets: 0,
-                lastLogin: 20161212
-            },
-            {
-                profilePic: 'http://www.opensupports.com/profilepic.jpg',
-                name: 'Miltona Costa',
-                assignedTickets: -1,
-                closedTickets: -1,
-                lastLogin: 20160212
-            },
-            {
-                profilePic: 'http://www.opensupports.com/profilepic.jpg',
-                name: 'Emiliasnikova Rusachestkvuy',
-                assignedTickets: 100,
-                closedTickets: 21,
-                lastLogin: 20130101
-            },
-            {
-                profilePic: 'http://www.opensupports.com/profilepic.jpg',
-                name: 'Laurita Morrechaga Rusachestkvuy',
-                assignedTickets: 1,
-                closedTickets: 1,
-                lastLogin: 2012050
-            }
-        ];
+    onStaffRetrieved(result) {
+        if(result.status == 'success'){
+            this.setState({
+                loading: false,
+                staffList: result.data
+            });
+        }
     }
 }
 

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

@@ -577,5 +577,57 @@ module.exports = [
                 }
             }
         }
+    },
+    {
+        path: '/staff/get-all',
+        time: 100,
+        response: function() {
+            return {
+                status: 'success',
+                data: [
+                    {
+                        profilePic: 'http://www.opensupports.com/profilepic.jpg',
+                        name: 'Emilia Clarke',
+                        departments: [{id: 2, name: 'Technical issues'}],
+                        assignedTickets: 4,
+                        closedTickets: 21,
+                        lastLogin: 20161212
+                    },
+                    {
+                        profilePic: 'http://www.opensupports.com/profilepic.jpg',
+                        name: 'Yulian A GUI Yermo',
+                        departments: [{id: 2, name: 'Technical issues'}, {id: 1, name: 'Sales Support'}],
+                        assignedTickets: 9,
+                        closedTickets: 0,
+                        lastLogin: 20161212
+                    },
+                    {
+                        profilePic: 'http://www.opensupports.com/profilepic.jpg',
+                        name: 'Miltona Costa',
+                        departments: [{id: 1, name: 'Sales Support'}],
+                        assignedTickets: -1,
+                        closedTickets: -1,
+                        lastLogin: 20160212
+                    },
+                    {
+                        profilePic: 'http://www.opensupports.com/profilepic.jpg',
+                        name: 'Emiliasnikova Rusachestkvuy',
+                        departments: [{id: 1, name: 'Sales Support'}, {id: 3, name: 'System and Administration'}],
+                        assignedTickets: 100,
+                        closedTickets: 21,
+                        lastLogin: 20130101
+                    },
+                    {
+                        profilePic: 'http://www.opensupports.com/profilepic.jpg',
+                        name: 'Laurita Morrechaga Rusachestkvuy',
+                        departments: [{id: 3, name: 'System and Administration'}],
+                        assignedTickets: 1,
+                        closedTickets: 1,
+                        lastLogin: 2012050
+                    }
+                ]
+            };
+        }
+
     }
 ];

client/src/data/languages/en.js

@@ -98,6 +98,7 @@ export default {
     'CLOSED_TICKETS': '{tickets} closed tickets',
     'LAST_LOGIN': 'Last login',
     'STAFF_MEMBERS': 'Staff members',
+    'ADD_NEW_STAFF': 'Add new staff',
 
     //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.',