From d67d9ebfb12f89e0d4e00ec80c7fe6073143c264 Mon Sep 17 00:00:00 2001 From: ivan Date: Wed, 7 Dec 2016 20:19:07 -0300 Subject: [PATCH] Max - WIP people list and admin panel staff members [skip ci] --- client/src/app-components/people-list.js | 108 ++++++++++++++++++ client/src/app-components/people-list.scss | 64 +++++++++++ .../panel/staff/admin-panel-staff-members.js | 82 ++++++++++++- client/src/data/languages/en.js | 5 + 4 files changed, 258 insertions(+), 1 deletion(-) create mode 100644 client/src/app-components/people-list.js create mode 100644 client/src/app-components/people-list.scss diff --git a/client/src/app-components/people-list.js b/client/src/app-components/people-list.js new file mode 100644 index 00000000..d0c1c0ff --- /dev/null +++ b/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 ( +
+
+ {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) => +
+ {styles.map((style, index) => +
+ {this.renderItem(index + this.props.pageSize * (this.state.page - 1))} +
+ )} +
+ } + +
+
+ this.setState({page: index+1})} tabbable/> +
+
+ ); + } + + 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) ? ( +
+
+ +
+
{item.name}
+
+ {i18n('ASSIGNED_TICKETS', {tickets: item.assignedTickets})} +
+
+ {i18n('CLOSED_TICKETS', {tickets: item.closedTickets})} +
+
+
{i18n('LAST_LOGIN')}
+
{DateTransformer.transformToString(item.lastLogin)}
+
+
+ ) : 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; \ No newline at end of file diff --git a/client/src/app-components/people-list.scss b/client/src/app-components/people-list.scss new file mode 100644 index 00000000..8c52b03d --- /dev/null +++ b/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 { + + } +} \ No newline at end of file diff --git a/client/src/app/admin/panel/staff/admin-panel-staff-members.js b/client/src/app/admin/panel/staff/admin-panel-staff-members.js index f869fc8b..58061cbd 100644 --- a/client/src/app/admin/panel/staff/admin-panel-staff-members.js +++ b/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 (
- /admin/panel/staff/staff-members +
+ +
); } + + 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; \ No newline at end of file diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index e60a8f4e..cb3b2980 100644 --- a/client/src/data/languages/en.js +++ b/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',