Max - WIP people list and admin panel staff members [skip ci]
This commit is contained in:
ivan
parent
7954a1a12a
commit
d67d9ebfb1
|
|
@ -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;
|
||||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue