70 lines
2.3 KiB
JavaScript
70 lines
2.3 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Dropdown, List, Icon, Button, Image } from 'semantic-ui-react'
|
|
import { Constants, api } from '../helpers'
|
|
import './UserList.scss'
|
|
|
|
const selectionOptions = Constants.accessLevels.concat([{ value: 'all', text: 'All Levels' }])
|
|
|
|
export class UserList extends React.Component {
|
|
static propTypes = {
|
|
users: PropTypes.array,
|
|
onUserListClick: PropTypes.func,
|
|
selectedUser: PropTypes.object,
|
|
selectionModified: PropTypes.bool,
|
|
onAddNewUser: PropTypes.func
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
users: null
|
|
}
|
|
this.filterUsers = this.filterUsers.bind(this)
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
// This ensures that the original list is populated with 'all' by default,
|
|
// due to the component mounting before users are returned (by api)
|
|
if (nextProps.users !== this.props.users) {
|
|
this.setState({ users: nextProps.users })
|
|
}
|
|
}
|
|
|
|
filterUsers(e, data) {
|
|
e.preventDefault()
|
|
let users = this.props.users
|
|
if (data.value !== 'all') {
|
|
users = users.filter(user => data.value === user.role)
|
|
}
|
|
this.setState({ users })
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<Dropdown placeholder='All Registered Users' selection fluid
|
|
options={selectionOptions} onChange={this.filterUsers} />
|
|
<List className='user-list' size='big' selection verticalAlign='middle'>
|
|
{
|
|
this.state.users
|
|
? this.state.users.map((user, index) =>
|
|
(<List.Item className='user-list-item' key={user._id || '0'} onClick={this.props.onUserListClick}
|
|
active={user === this.props.selectedUser} data-index={index}>
|
|
<Image avatar src={api.makeImageUrl(user.thumbnailImageId, Constants.smallUserImageSize)} />
|
|
<List.Content>
|
|
{ user._id ? user.firstName + ' ' + user.lastName : '[New User]' }
|
|
{ user === this.props.selectedUser && this.props.selectionModified ? <Icon className='user-update'
|
|
name='edit' /> : null }
|
|
</List.Content>
|
|
</List.Item>)
|
|
)
|
|
: null
|
|
}
|
|
</List>
|
|
<Button className='add-new-user' content='Add New User' primary onClick={this.props.onAddNewUser} />
|
|
</div>
|
|
)
|
|
}
|
|
}
|