Initial commit
This commit is contained in:
John Lyon-Smith
281
website/src/Users/Users.js
Normal file
281
website/src/Users/Users.js
Normal file
@@ -0,0 +1,281 @@
|
||||
import React from 'react'
|
||||
import { Container, Grid } from 'semantic-ui-react'
|
||||
import { autoBind } from 'auto-bind2'
|
||||
import { UserList } from './UserList'
|
||||
import { UserForm } from './UserForm'
|
||||
import { UserFormPlaceholder } from './UserFormPlaceholder'
|
||||
import { api } from '../helpers'
|
||||
import { YesNoMessageDialog, MessageDialog, ChangeEmailDialog, WaitDialog } from '../Dialog'
|
||||
|
||||
export class Users extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
autoBind(this, (name) => (name.startsWith('handle')))
|
||||
this.state = {
|
||||
selectedUser: null,
|
||||
users: [],
|
||||
yesNoDialog: null,
|
||||
messageDialog: null,
|
||||
waitDialog: null,
|
||||
changeEmailDialog: null
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
api.listUsers().then((list) => {
|
||||
list.items.sort((userA, userB) => (userA.lastName.localeCompare(userB.lastName)))
|
||||
this.setState({ users: list.items })
|
||||
}).catch((error) => {
|
||||
this.setState({
|
||||
messageDialog: {
|
||||
error: true,
|
||||
title: 'User List Error',
|
||||
message: `Unable to get the list of users. ${error.message}`
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
removeUnfinishedNewUser() {
|
||||
let users = this.state.users
|
||||
|
||||
if (users.length > 0 && !users[0]._id) {
|
||||
this.setState({ users: this.state.users.slice(1) })
|
||||
}
|
||||
}
|
||||
|
||||
handleUserListClick(e) {
|
||||
let user = this.state.users[Number(e.currentTarget.getAttribute('data-index'))]
|
||||
|
||||
if (this.state.modified) {
|
||||
this.nextSelectedUser = user
|
||||
this.setState({
|
||||
yesNoDialog: {
|
||||
title: 'User Modified',
|
||||
message: 'This user has been modified. Are you sure you would like to navigate away?',
|
||||
onDismiss: this.handleModifiedDialogDismiss
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.setState({ selectedUser: user })
|
||||
this.removeUnfinishedNewUser()
|
||||
}
|
||||
}
|
||||
|
||||
handleSave(user) {
|
||||
if (user._id) {
|
||||
this.setState({ waitDialog: { message: 'Updating User' } })
|
||||
api.updateUser(user).then((updatedUser) => {
|
||||
this.setState({
|
||||
waitDialog: null,
|
||||
users: this.state.users.map((user) => (user._id === updatedUser._id ? updatedUser : user)),
|
||||
modified: false,
|
||||
selectedUser: updatedUser
|
||||
})
|
||||
}).catch((error) => {
|
||||
this.setState({
|
||||
waitDialog: null,
|
||||
messageDialog: {
|
||||
error: true,
|
||||
title: 'Update Error',
|
||||
message: `Unable to save the user changes. ${error.message}`
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.setState({ waitDialog: { message: 'Creating User' } })
|
||||
api.createUser(user).then((createdUser) => {
|
||||
this.setState({
|
||||
waitDialog: false,
|
||||
users: this.state.users.map((user) => (!user._id ? createdUser : user)),
|
||||
modified: false,
|
||||
selectedUser: createdUser
|
||||
})
|
||||
}).catch((error) => {
|
||||
this.setState({
|
||||
waitDialog: null,
|
||||
messageDialog: {
|
||||
error: true,
|
||||
title: 'Create Error',
|
||||
message: `Unable to create the user. ${error.message}`
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleChangeEmail() {
|
||||
this.setState({ changeEmailDialog: {} })
|
||||
}
|
||||
|
||||
handleResendEmail() {
|
||||
this.setState({
|
||||
waitDialog: { message: 'Resending Email...' }
|
||||
})
|
||||
api.sendConfirmEmail({ existingEmail: this.state.selectedUser.email }).then(() => {
|
||||
this.setState({
|
||||
waitDialog: null,
|
||||
messageDialog: {
|
||||
error: false,
|
||||
title: "We've Re-Sent the Email...",
|
||||
message: `An email has been sent to '${this.state.selectedUser.email}'. This user will need to follow that email's included link to verify their account.`
|
||||
}
|
||||
})
|
||||
}).catch((error) => {
|
||||
this.setState({
|
||||
error: true,
|
||||
waitDialog: null,
|
||||
messageDialog: {
|
||||
error: true,
|
||||
title: 'Email Change Error...',
|
||||
message: `Unable to request email change. ${error ? error.message : ''}`
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
handleChangeEmailDismiss(newEmail) {
|
||||
this.setState({ changeEmailDialog: null })
|
||||
if (!newEmail) {
|
||||
return
|
||||
}
|
||||
this.setState({
|
||||
waitDialog: { message: 'Requesting Email Change...' }
|
||||
})
|
||||
api.sendConfirmEmail({ existingEmail: this.state.selectedUser.email, newEmail }).then(() => {
|
||||
this.setState({
|
||||
waitDialog: null,
|
||||
messageDialog: {
|
||||
error: false,
|
||||
title: 'Email Change Requested...',
|
||||
message: `An email has been sent to '${newEmail}'. This user will need to follow that email's included link to finish changing their email.`
|
||||
}
|
||||
})
|
||||
}).catch((error) => {
|
||||
this.setState({
|
||||
error: true,
|
||||
waitDialog: null,
|
||||
messageDialog: {
|
||||
error: true,
|
||||
title: 'Email Change Error...',
|
||||
message: `Unable to request email change. ${error ? error.message : ''}`
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
handleRemove() {
|
||||
this.setState({
|
||||
yesNoDialog: {
|
||||
title: 'Permanently Delete User?',
|
||||
message: 'You are about to delete this user from the system. This includes references to this user in Projects, Packages, and so on. Are you sure you want to remove this user?',
|
||||
onDismiss: this.handleRemoveDialogDismiss
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
handleRemoveDialogDismiss(yes) {
|
||||
if (yes) {
|
||||
// TODO: Pass the _id back from the dialog input data
|
||||
const selectedUserId = this.state.selectedUser._id
|
||||
const selectedIndex = this.state.users.findIndex((user) => (user._id === selectedUserId))
|
||||
|
||||
if (selectedIndex >= 0) {
|
||||
this.setState({ waitDialog: { message: 'Removing User' } })
|
||||
api.deleteUser(selectedUserId).then(() => {
|
||||
this.setState({
|
||||
waitDialog: null,
|
||||
users: [...this.state.users.slice(0, selectedIndex), ...this.state.users.slice(selectedIndex + 1)],
|
||||
selectedUser: null
|
||||
})
|
||||
}).catch((error) => {
|
||||
this.setState({
|
||||
waitDialog: null,
|
||||
messageDialog: {
|
||||
error: true,
|
||||
title: 'Remove Error',
|
||||
message: `Unable to remove the user. ${error.message}`
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
yesNoDialog: null
|
||||
})
|
||||
}
|
||||
|
||||
handleModifiedDialogDismiss(yes) {
|
||||
if (yes) {
|
||||
this.setState({
|
||||
selectedUser: this.nextSelectedUser,
|
||||
modified: false
|
||||
})
|
||||
this.removeUnfinishedNewUser()
|
||||
delete this.nextSelectedUser
|
||||
}
|
||||
|
||||
this.setState({
|
||||
yesNoDialog: null
|
||||
})
|
||||
}
|
||||
|
||||
handleMessageDialogDismiss() {
|
||||
this.setState({ messageDialog: null })
|
||||
}
|
||||
|
||||
handleModifiedChanged(modified) {
|
||||
this.setState({ modified: modified })
|
||||
}
|
||||
|
||||
handleAddNewUser() {
|
||||
let newUser = {}
|
||||
let newUsers = [newUser].concat(this.state.users)
|
||||
this.setState({ users: newUsers, selectedUser: newUser })
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<div>Users</div>
|
||||
|
||||
<Grid stackable>
|
||||
{/* User List - Displayed on left hand side. */}
|
||||
<Grid.Column width={5}>
|
||||
<UserList users={this.state.users} selectedUser={this.state.selectedUser}
|
||||
selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
|
||||
onAddNewUser={this.handleAddNewUser} />
|
||||
</Grid.Column>
|
||||
|
||||
{/* User Info - Displayed on right hand side. */}
|
||||
<Grid.Column width={11}>
|
||||
{
|
||||
this.state.selectedUser
|
||||
? <UserForm user={this.state.selectedUser} onSave={this.handleSave}
|
||||
onRemove={this.handleRemove} onModifiedChanged={this.handleModifiedChanged}
|
||||
onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} />
|
||||
: <UserFormPlaceholder />
|
||||
}
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
|
||||
<ChangeEmailDialog open={!!this.state.changeEmailDialog} onDismiss={this.handleChangeEmailDismiss} />
|
||||
|
||||
<YesNoMessageDialog open={!!this.state.yesNoDialog}
|
||||
title={this.state.yesNoDialog ? this.state.yesNoDialog.title : ''}
|
||||
message={this.state.yesNoDialog ? this.state.yesNoDialog.message : ''}
|
||||
onDismiss={this.state.yesNoDialog ? this.state.yesNoDialog.onDismiss : null} />
|
||||
|
||||
<MessageDialog
|
||||
open={!!this.state.messageDialog}
|
||||
error={this.state.messageDialog ? this.state.messageDialog.error : false}
|
||||
title={this.state.messageDialog ? this.state.messageDialog.title : ''}
|
||||
message={this.state.messageDialog ? this.state.messageDialog.message : ''}
|
||||
onDismiss={this.handleMessageDialogDismiss} />
|
||||
|
||||
<WaitDialog active={!!this.state.waitDialog} message={this.state.waitDialog ? this.state.waitDialog.message : ''} />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user