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

Selectable List in place

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-03 11:24:48 -08:00
parent 7756963eb2
commit 3ef0a3bdc9
19 changed files with 312 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,14 @@
import React from 'react'
import React, { Component, Fragment } from 'react'
import { reactAutoBind } from 'auto-bind2'
import { UserList } from './UserList'
import { UserForm } from './UserForm'
import { UserFormPlaceholder } from './UserFormPlaceholder'
import { api } from 'src/API'
import { Row } from 'ui'
import { Row, Column, Box } from 'ui'
import { YesNoMessageModal, MessageModal, ChangeEmailModal, WaitModal } from '../Modal'
import { sizeInfo, colorInfo } from 'ui/style'
export class Users extends React.Component {
export class Users extends Component {
constructor() {
super()
reactAutoBind(this)
@@ -236,42 +237,53 @@ export class Users extends React.Component {
}
render() {
const { messageModal } = this.state
return (
<div>
<div>Users</div>
<Row>
<Row.Item width={5}>
<UserList users={this.state.users} selectedUser={this.state.selectedUser}
selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
onAddNewUser={this.handleAddNewUser} />
</Row.Item>
<Row.Item>
{
this.state.selectedUser
? <UserForm user={this.state.selectedUser} onSave={this.handleSave}
onRemove={this.handleRemove} onModifiedChanged={this.handleModifiedChanged}
onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} />
: <UserFormPlaceholder />
}
</Row.Item>
</Row>
<Fragment>
<Column.Item height={20} />
<Column.Item grow>
<Row fillParent>
<Row.Item width={20} />
<Row.Item width='25vw'>
<UserList users={this.state.users} selectedUser={this.state.selectedUser}
selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
onAddNewUser={this.handleAddNewUser} />
</Row.Item>
<Row.Item width={20} />
<Row.Item grow>
<Box border={`${sizeInfo.headerBorderWidth}px solid ${colorInfo.headerBorder}`} radius={sizeInfo.formBoxRadius}>
{
this.state.selectedUser
? <UserForm user={this.state.selectedUser} onSave={this.handleSave}
onRemove={this.handleRemove} onModifiedChanged={this.handleModifiedChanged}
onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} />
: <UserFormPlaceholder />
}
</Box>
</Row.Item>
<Row.Item width={20} />
</Row>
</Column.Item>
<Column.Item height={20}>
<ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
<ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
<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} />
<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} />
<MessageModal
open={!!messageModal}
icon={messageModal ? messageModal.icon : ''}
error={messageModal ? messageModal.error : false}
title={messageModal ? messageModal.title : ''}
message={messageModal ? messageModal.message : ''}
onDismiss={this.handleMessageModalDismiss} />
<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} />
<WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
</div>
<WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
</Column.Item>
</Fragment>
)
}
}