john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Basic UI elements in place

Browse Source
This commit is contained in:
John Lyon-Smith
2018-02-27 12:16:27 -08:00
parent 5faa4600f5
commit 73b5cf6caa
49 changed files with 525 additions and 937 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
website/src/Users/Users.js
View File

@@ -5,7 +5,7 @@ import { UserForm } from './UserForm'
import { UserFormPlaceholder } from './UserFormPlaceholder'
import { api } from '../helpers'
import { Row } from 'ui'
import { YesNoMessageDialog, MessageDialog, ChangeEmailDialog, WaitDialog } from '../Dialog'
import { YesNoMessageModal, MessageModal, ChangeEmailModal, WaitModal } from '../Modal'
export class Users extends React.Component {
constructor() {
@@ -14,10 +14,10 @@ export class Users extends React.Component {
this.state = {
selectedUser: null,
users: [],
yesNoDialog: null,
messageDialog: null,
waitDialog: null,
changeEmailDialog: null
yesNoModal: null,
messageModal: null,
waitModal: null,
changeEmailModal: null
}
}
@@ -27,7 +27,7 @@ export class Users extends React.Component {
this.setState({ users: list.items })
}).catch((error) => {
this.setState({
messageDialog: {
messageModal: {
error: true,
title: 'User List Error',
message: `Unable to get the list of users. ${error.message}`
@@ -50,10 +50,10 @@ export class Users extends React.Component {
if (this.state.modified) {
this.nextSelectedUser = user
this.setState({
yesNoDialog: {
yesNoModal: {
title: 'User Modified',
message: 'This user has been modified. Are you sure you would like to navigate away?',
onDismiss: this.handleModifiedDialogDismiss
onDismiss: this.handleModifiedModalDismiss
}
})
} else {
@@ -64,18 +64,18 @@ export class Users extends React.Component {
handleSave(user) {
if (user._id) {
this.setState({ waitDialog: { message: 'Updating User' } })
this.setState({ waitModal: { message: 'Updating User' } })
api.updateUser(user).then((updatedUser) => {
this.setState({
waitDialog: null,
waitModal: null,
users: this.state.users.map((user) => (user._id === updatedUser._id ? updatedUser : user)),
modified: false,
selectedUser: updatedUser
})
}).catch((error) => {
this.setState({
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
error: true,
title: 'Update Error',
message: `Unable to save the user changes. ${error.message}`
@@ -83,18 +83,18 @@ export class Users extends React.Component {
})
})
} else {
this.setState({ waitDialog: { message: 'Creating User' } })
this.setState({ waitModal: { message: 'Creating User' } })
api.createUser(user).then((createdUser) => {
this.setState({
waitDialog: false,
waitModal: false,
users: this.state.users.map((user) => (!user._id ? createdUser : user)),
modified: false,
selectedUser: createdUser
})
}).catch((error) => {
this.setState({
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
error: true,
title: 'Create Error',
message: `Unable to create the user. ${error.message}`
@@ -105,17 +105,17 @@ export class Users extends React.Component {
}
handleChangeEmail() {
this.setState({ changeEmailDialog: {} })
this.setState({ changeEmailModal: {} })
}
handleResendEmail() {
this.setState({
waitDialog: { message: 'Resending Email...' }
waitModal: { message: 'Resending Email...' }
})
api.sendConfirmEmail({ existingEmail: this.state.selectedUser.email }).then(() => {
this.setState({
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
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.`
@@ -124,8 +124,8 @@ export class Users extends React.Component {
}).catch((error) => {
this.setState({
error: true,
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
error: true,
title: 'Email Change Error...',
message: `Unable to request email change. ${error ? error.message : ''}`
@@ -135,17 +135,17 @@ export class Users extends React.Component {
}
handleChangeEmailDismiss(newEmail) {
this.setState({ changeEmailDialog: null })
this.setState({ changeEmailModal: null })
if (!newEmail) {
return
}
this.setState({
waitDialog: { message: 'Requesting Email Change...' }
waitModal: { message: 'Requesting Email Change...' }
})
api.sendConfirmEmail({ existingEmail: this.state.selectedUser.email, newEmail }).then(() => {
this.setState({
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
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.`
@@ -154,8 +154,8 @@ export class Users extends React.Component {
}).catch((error) => {
this.setState({
error: true,
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
error: true,
title: 'Email Change Error...',
message: `Unable to request email change. ${error ? error.message : ''}`
@@ -166,32 +166,32 @@ export class Users extends React.Component {
handleRemove() {
this.setState({
yesNoDialog: {
yesNoModal: {
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
onDismiss: this.handleRemoveModalDismiss
}
})
}
handleRemoveDialogDismiss(yes) {
handleRemoveModalDismiss(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' } })
this.setState({ waitModal: { message: 'Removing User' } })
api.deleteUser(selectedUserId).then(() => {
this.setState({
waitDialog: null,
waitModal: null,
users: [...this.state.users.slice(0, selectedIndex), ...this.state.users.slice(selectedIndex + 1)],
selectedUser: null
})
}).catch((error) => {
this.setState({
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
error: true,
title: 'Remove Error',
message: `Unable to remove the user. ${error.message}`
@@ -202,11 +202,11 @@ export class Users extends React.Component {
}
this.setState({
yesNoDialog: null
yesNoModal: null
})
}
handleModifiedDialogDismiss(yes) {
handleModifiedModalDismiss(yes) {
if (yes) {
this.setState({
selectedUser: this.nextSelectedUser,
@@ -217,12 +217,12 @@ export class Users extends React.Component {
}
this.setState({
yesNoDialog: null
yesNoModal: null
})
}
handleMessageDialogDismiss() {
this.setState({ messageDialog: null })
handleMessageModalDismiss() {
this.setState({ messageModal: null })
}
handleModifiedChanged(modified) {
@@ -260,21 +260,21 @@ export class Users extends React.Component {
</Row.Item>
</Row>
<ChangeEmailDialog open={!!this.state.changeEmailDialog} onDismiss={this.handleChangeEmailDismiss} />
<ChangeEmailModal open={!!this.state.changeEmailModal} 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} />
<YesNoMessageModal open={!!this.state.yesNoModal}
title={this.state.yesNoModal ? this.state.yesNoModal.title : ''}
message={this.state.yesNoModal ? this.state.yesNoModal.message : ''}
onDismiss={this.state.yesNoModal ? this.state.yesNoModal.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} />
<MessageModal
open={!!this.state.messageModal}
error={this.state.messageModal ? this.state.messageModal.error : false}
title={this.state.messageModal ? this.state.messageModal.title : ''}
message={this.state.messageModal ? this.state.messageModal.message : ''}
onDismiss={this.handleMessageModalDismiss} />
<WaitDialog active={!!this.state.waitDialog} message={this.state.waitDialog ? this.state.waitDialog.message : ''} />
<WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
</div>
)
}