Max - WIP people list and admin panel staff members [skip ci]

client/src/app-components/people-list.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import _ from 'lodash';
+import {StaggeredMotion, spring} from 'react-motion';
+import Menu from 'core-components/menu'
+
+import DateTransformer from 'lib-core/date-transformer';
+import i18n from 'lib-app/i18n';
+
+class PeopleList extends React.Component {
+    static propTypes = {
+        list: React.PropTypes.arrayOf(React.PropTypes.shape({
+            profilePic: React.PropTypes.string,
+            name: React.PropTypes.string,
+            assignedTickets: React.PropTypes.number,
+            closedTickets: React.PropTypes.number,
+            lastLogin: React.PropTypes.number
+        })),
+        pageSize: React.PropTypes.number
+    };
+
+    static defaultProps = {
+        pageSize: 4,
+        list: []
+    };
+
+    state = {
+        page: 1
+    };
+
+    render() {
+        const pages = _.range(1, this.getPages() + 1).map((index) => {return {content: index};});
+
+        return (
+            <div className="people-list">
+                <div className="people-list__list">
+                    <StaggeredMotion defaultStyles={_.times(this.props.pageSize).map(() => {return {offset: -100, alpha: 0};})} styles={(prevStyles) => prevStyles.map((_, i) => {
+                        return i === 0
+                          ? {offset: spring(0), alpha: spring(1)}
+                          : {offset: spring(prevStyles[i - 1].offset), alpha: spring(prevStyles[i - 1].alpha)}
+                      })}>
+                        {(styles) =>
+                            <div>
+                                {styles.map((style, index) =>
+                                    <div style={{transform: 'translateX('+style.offset+'px)', opacity: style.alpha}}>
+                                        {this.renderItem(index + this.props.pageSize * (this.state.page - 1))}
+                                    </div>
+                                )}
+                            </div>
+                        }
+                    </StaggeredMotion>
+                </div>
+                <div className="people-list__pagination">
+                    <Menu type="navigation" items={pages} selectedIndex={this.state.page - 1} onItemClick={(index) => this.setState({page: index+1})} tabbable/>
+                </div>
+            </div>
+        );
+    }
+
+    renderItem(index) {
+        if(index >= this.props.list.length) {
+            return null;
+        }
+
+        const item = this.props.list[index];
+        const minIndex = this.props.pageSize * (this.state.page - 1);
+        const maxIndex = this.props.pageSize * this.state.page;
+
+        return (minIndex <= index && index < maxIndex) ? (
+            <div className="people-list__item">
+                <div className="people-list__item-profile-pic-wrapper">
+                    <img className="people-list__item-profile-pic" src={item.profilePic} />
+                </div>
+                <div className="people-list__item-block people-list__item-name">{item.name}</div>
+                <div className="people-list__item-block people-list__item-assigned-tickets">
+                    {i18n('ASSIGNED_TICKETS', {tickets: item.assignedTickets})}
+                </div>
+                <div className="people-list__item-block people-list__item-closed-tickets">
+                    {i18n('CLOSED_TICKETS', {tickets: item.closedTickets})}
+                </div>
+                <div className="people-list__item-block people-list__item-last-login">
+                    <div>{i18n('LAST_LOGIN')}</div>
+                    <div>{DateTransformer.transformToString(item.lastLogin)}</div>
+                </div>
+            </div>
+        ) : null;
+    }
+
+    getRowsQuantity() {
+        console.log(this.state.page);
+        if(this.state.page == this.getPages()){
+            console.log("Ultima pagina");
+            console.log(this.props.list.length);
+            console.log(this.props.pageSize);
+            return this.props.list.length % this.props.pageSize;
+        }
+        else {
+            return this.props.pageSize;
+        }
+    }
+
+
+    getPages() {
+        return Math.ceil(this.props.list.length / this.props.pageSize);
+    }
+
+}
+
+export default PeopleList;

client/src/app-components/people-list.scss

@@ -0,0 +1,64 @@
+@import "../scss/vars";
+
+.people-list {
+    max-width: 800px;
+    margin: 0 auto;
+
+    &__list {
+    }
+
+    &__item {
+        border: 2px solid $grey;
+        border-radius: 4px;
+        margin-bottom: 12px;
+        position: relative;
+        height: 105px;
+        padding-left: 60px;
+        font-size: $font-size--md;
+
+        &-profile-pic-wrapper {
+            vertical-align: top;
+            background-color: $secondary-blue;
+            color: white;
+            border-radius: 5px;
+            width: 60px;
+            height: 60px;
+            top: 20px;
+            left: 20px;
+
+            overflow: hidden;
+            position: absolute;
+            border: 2px solid $light-grey;
+        }
+
+        &-profile-pic {
+            position: absolute;
+            height: 100%;
+            left: 50%;
+            transform: translate(-50%, 0)
+        }
+
+        &-block {
+            padding: 30px 0;
+            width: 25%;
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        &-assigned-tickets {
+
+        }
+
+        &-closed-tickets {
+
+        }
+
+        &-last-login {
+
+        }
+    }
+
+    &__pagination {
+
+    }
+}

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

@@ -1,14 +1,94 @@
 import React from 'react';
 
+import i18n from 'lib-app/i18n';
+
+import PeopleList from 'app-components/people-list';
+import Header from 'core-components/header';
+import DropDown from 'core-components/drop-down';
+
 class AdminPanelStaffMembers extends React.Component {
 
+    static propTypes = {
+        departments: React.PropTypes.array
+    };
+
+    static defaultProps = {
+        departments: []
+    };
+
     render() {
         return (
             <div>
-                /admin/panel/staff/staff-members
+                <Header title={i18n('STAFF_MEMBERS')} description={i18n('STAFF_MEMBERS_DESCRIPTION')} />
+                <DropDown {...this.getDepartmentDropdownProps()} />
+                <PeopleList list={this.getStaffList()}/>
             </div>
         );
     }
+
+    getDepartmentDropdownProps() {
+        return {
+            items: this.getDepartments(),
+            onChange: (event) => {
+                this.setState({
+                    selectedDepartment: event.index && this.props.departments[event.index - 1].id
+                });
+            },
+            size: 'medium'
+        };
+    }
+
+    getDepartments() {
+        let departments = this.props.departments.map((department) => {
+            return {content: department.name};
+        });
+
+        departments.unshift({
+            content: i18n('ALL_DEPARTMENTS')
+        });
+
+        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
+            }
+        ];
+    }
 }
 
 export default AdminPanelStaffMembers;

client/src/data/languages/en.js

@@ -94,6 +94,10 @@ export default {
     'EDIT': 'Edit',
     'NO_RESULTS': 'No results',
     'DELETE_AND_BAN': 'Delete and ban',
+    'ASSIGNED_TICKETS': '{tickets} assigned tickets',
+    'CLOSED_TICKETS': '{tickets} closed tickets',
+    'LAST_LOGIN': 'Last login',
+    'STAFF_MEMBERS': 'Staff members',
 
     //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.',
@@ -116,6 +120,7 @@ export default {
     'ADD_ARTICLE_DESCRIPTION': 'Here you can add an article that will be available for every user. It will be added inside the category {category}.',
     'LIST_ARTICLES_DESCRIPTION': 'This is a list of articles that includes information about our services.',
     'ADD_TOPIC_DESCRIPTION': 'Here you can add a topic that works as a category for articles.',
+    'STAFF_MEMBERS_DESCRIPTION': 'Here you can see who are your staff members.',
 
     //ERRORS
     'EMAIL_OR_PASSWORD': 'Email or password invalid',