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

Basic team page

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-26 12:56:45 -07:00
parent 4c4f899c6a
commit ad32653633
5 changed files with 63 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
website/src/Teams/TeamForm.js
View File

@@ -1,55 +1,25 @@
import React from 'react'
import PropTypes from 'prop-types'
import autobind from 'autobind-decorator'
import { regExpPattern } from 'regexp-pattern'
import { api } from 'src/API'
import { Row, Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon, DropdownList } from 'ui'
import { Row, Column, BoundInput, BoundButton, List } from 'ui'
import { FormBinder } from 'react-form-binder'
import { sizeInfo } from 'ui/style'
export class TeamForm extends React.Component {
static propTypes = {
user: PropTypes.object,
team: PropTypes.object,
onSave: PropTypes.func,
onRemove: PropTypes.func,
onModifiedChanged: PropTypes.func,
onChangeEmail: PropTypes.func,
onResendEmail: PropTypes.func
}
static bindings = {
email: {
isValid: (r, v) => (regExpPattern.email.test(v)),
isDisabled: (r) => (r._id)
},
emailValidated: {
initValue: false,
isDisabled: (r) => (!r._id)
},
changeEmail: {
noValue: true,
isDisabled: (r) => (!r._id)
},
resendEmail: {
noValue: true,
isDisabled: (r) => (!r._id || !!r.getFieldValue('emailValidated'))
},
firstName: {
name: {
isValid: (r, v) => (v !== '')
},
lastName: {
isValid: (r, v) => (v !== '')
},
administrator: {
isValid: (r, v) => true,
initValue: false,
isDisabled: (r) => (api.loggedInTeam._id === r._id), // Adding a new user
alwaysGet: true,
},
remove: {
noValue: true,
isVisible: (r) => (r._id),
isDisabled: (r) => (api.loggedInTeam._id === r._id)
},
reset: {
noValue: true,
@@ -66,14 +36,14 @@ export class TeamForm extends React.Component {
constructor(props) {
super(props)
this.state = {
binder: new FormBinder(this.props.user, TeamForm.bindings, this.props.onModifiedChanged)
binder: new FormBinder(this.props.team, TeamForm.bindings, this.props.onModifiedChanged)
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.user !== this.props.user) {
if (nextProps.team !== this.props.team) {
this.setState({
binder: new FormBinder(nextProps.user, TeamForm.bindings, nextProps.onModifiedChanged)
binder: new FormBinder(nextProps.team, TeamForm.bindings, nextProps.onModifiedChanged)
})
}
}
@@ -91,40 +61,21 @@ export class TeamForm extends React.Component {
@autobind
handleReset() {
const { user, onModifiedChanged } = this.props
const { team, onModifiedChanged } = this.props
this.setState({ binder: new FormBinder(user, TeamForm.bindings, onModifiedChanged) })
this.setState({ binder: new FormBinder(team, TeamForm.bindings, onModifiedChanged) })
if (onModifiedChanged) {
onModifiedChanged(false)
}
}
@autobind
handleChangeEmail() {
this.props.onChangeEmail()
}
@autobind
handleResendEmail() {
this.props.onResendEmail()
}
render() {
const { team } = this.props
const { binder } = this.state
const teams = [
{ id: 1, name: 'Sign of the Times' },
{ id: 2, name: 'Trash Monsters' },
{ id: 3, name: 'The Bigger Picker Uppers' },
{ id: 4, name: 'Carcass Masters' },
{ id: 5, name: 'Dust Bunnies' },
{ id: 6, name: 'Pavement Busters' },
{ id: 7, name: 'Don\'t Hug That Tree' },
{ id: 8, name: 'Broken Swingers' },
]
return (
<form style={{ width: '100%', height: '100%', overflow: 'scroll' }} id='userForm' onSubmit={this.handleSubmit}>
<form style={{ width: '100%', height: '100%', overflow: 'scroll' }} id='teamForm' onSubmit={this.handleSubmit}>
<Column>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Row>
@@ -132,60 +83,18 @@ export class TeamForm extends React.Component {
<Row.Item grow>
<Column.Item>
<Column>
<Column.Item>
<Row>
<Row.Item grow>
<BoundInput label='First Name' name='firstName' message='Must not be empty' binder={binder} />
</Row.Item>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item grow>
<BoundInput label='Last Name' name='lastName' binder={binder} />
</Row.Item>
</Row>
<Column.Item grow>
<BoundInput label='Name' name='name' message='Must not be empty' binder={binder} />
</Column.Item>
<Column.Item>
<Row>
<Row.Item grow>
<BoundInput label='Email' name='email' message='Must be a valid email address. Required.' binder={binder} />
</Row.Item>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<BoundEmailIcon name='emailValidated' binder={binder} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item>
<DropdownList items={teams} render={(item) => (
<DropdownList.Item key={item.id}>
<DropdownList.Icon name='team' size={sizeInfo.dropdownIconSize} />
<DropdownList.Text>{item.name}</DropdownList.Text>
</DropdownList.Item>
<List items={team.users} render={(item) => (
<List.Item key={item.id}>
<List.Icon name='team' size={sizeInfo.dropdownIconSize} />
<List.Text>{item.name}</List.Text>
</List.Item>
)} />
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item minHeight={sizeInfo.buttonHeight}>
<Row>
<Row.Item>
<BoundButton text='Change Email' name='changeEmail' binder={binder}
width={sizeInfo.buttonWideWidth} onClick={this.handleChangeEmail} />
</Row.Item>
<Row.Item grow />
<Row.Item>
<BoundButton text='Resend Confirmation Email' name='resendEmail' binder={binder}
width={sizeInfo.buttonWideWidth} onClick={this.handleResendEmail} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Row>
<Row.Item>
<BoundCheckbox label={'Administrator'} name='administrator' binder={this.state.binder} />
</Row.Item>
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item minHeight={sizeInfo.buttonHeight}>
<Row>
<Row.Item>
@@ -197,7 +106,7 @@ export class TeamForm extends React.Component {
</Row.Item>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<BoundButton submit='userForm' text={binder._id ? 'Save' : 'Add'} name='submit' binder={binder} />
<BoundButton submit='teamForm' text={binder._id ? 'Save' : 'Add'} name='submit' binder={binder} />
</Row.Item>
</Row>
</Column.Item>

30
website/src/Teams/TeamList.js
View File

@@ -5,49 +5,49 @@ import { sizeInfo } from 'ui/style'
export class TeamList extends React.Component {
static propTypes = {
users: PropTypes.array,
onUserListClick: PropTypes.func,
selectedUser: PropTypes.object,
teams: PropTypes.array,
onTeamListClick: PropTypes.func,
selectedTeam: PropTypes.object,
selectionModified: PropTypes.bool,
onAddNewUser: PropTypes.func
onAddNewTeam: PropTypes.func
}
constructor(props) {
super(props)
this.state = {
users: null
teams: null
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.users !== this.props.users) {
this.setState({ users: nextProps.users })
if (nextProps.teams !== this.props.teams) {
this.setState({ teams: nextProps.teams })
}
}
render() {
const { selectedUser, selectionModified } = this.props
const { users } = this.state
const { selectedTeam, selectionModified } = this.props
const { teams } = this.state
return (
<Column fillParent>
<Column.Item grow>
<List data={users} render={(user, index) => {
<List items={teams} render={(user, index) => {
return (
<List.Item key={user._id || '0'} onClick={(e) => (this.props.onUserListClick(e, index))}
active={user === this.props.selectedUser}>
<List.Item key={user._id || '0'} onClick={(e) => (this.props.onTeamListClick(e, index))}
active={user === this.props.selectedTeam}>
<List.Icon name={user.administrator ? 'admin' : 'profile'} size={sizeInfo.listIcon} />
<List.Text>
{ user._id ? user.firstName + ' ' + user.lastName : '[New User]' }
{ user._id ? user.firstName + ' ' + user.lastName : '[New Team]' }
</List.Text>
{ user === selectedUser && selectionModified ? <List.Icon name='edit' size={sizeInfo.listIcon} /> : null }
{ user === selectedTeam && selectionModified ? <List.Icon name='edit' size={sizeInfo.listIcon} /> : null }
</List.Item>
)
}} />
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}>
<Button width='100%' color='inverse' onClick={this.props.onAddNewUser} text='Add New User' />
<Button width='100%' color='inverse' onClick={this.props.onAddNewTeam} text='Add New Team' />
</Column.Item>
</Column>
)

52
website/src/Teams/Teams.js
View File

@@ -19,7 +19,7 @@ export class Teams extends Component {
this.state = {
modified: false,
selectedTeam: null,
users: [],
teams: [],
yesNoModal: null,
messageModal: null,
waitModal: null,
@@ -31,8 +31,8 @@ export class Teams extends Component {
this.props.changeTitle('Teams')
api.listTeams().then((list) => {
list.items.sort((userA, userB) => (userA.lastName.localeCompare(userB.lastName)))
this.setState({ users: list.items, selectedTeam: list.items[0] }) // TODO: <- Remove
list.items.sort((teamA, teamB) => (teamA.lastName.localeCompare(teamB.lastName)))
this.setState({ teams: list.items, selectedTeam: list.items[0] }) // TODO: <- Remove
}).catch((error) => {
this.setState({
messageModal: {
@@ -49,39 +49,39 @@ export class Teams extends Component {
}
removeUnfinishedNewTeam() {
let users = this.state.users
let teams = this.state.teams
if (users.length > 0 && !users[0]._id) {
this.setState({ users: this.state.users.slice(1) })
if (teams.length > 0 && !teams[0]._id) {
this.setState({ teams: this.state.teams.slice(1) })
}
}
@autobind
handleTeamListClick(e, index) {
let user = this.state.users[index]
let team = this.state.teams[index]
if (this.state.modified) {
this.nextSelectedTeam = user
this.nextSelectedTeam = team
this.setState({
yesNoModal: {
question: 'This user has been modified. Are you sure you would like to navigate away?',
question: 'This team has been modified. Are you sure you would like to navigate away?',
onDismiss: this.handleModifiedModalDismiss
}
})
} else {
this.setState({ selectedTeam: user })
this.setState({ selectedTeam: team })
this.removeUnfinishedNewTeam()
}
}
@autobind
handleSave(user) {
if (user._id) {
handleSave(team) {
if (team._id) {
this.setState({ waitModal: { message: 'Updating Team' } })
api.updateTeam(user).then((updatedTeam) => {
api.updateTeam(team).then((updatedTeam) => {
this.setState({
waitModal: null,
users: this.state.users.map((user) => (user._id === updatedTeam._id ? updatedTeam : user)),
teams: this.state.teams.map((team) => (team._id === updatedTeam._id ? updatedTeam : team)),
modified: false,
selectedTeam: updatedTeam
})
@@ -90,17 +90,17 @@ export class Teams extends Component {
waitModal: null,
messageModal: {
icon: 'hand',
message: 'Unable to save the user changes',
message: 'Unable to save the team changes',
detail: error.message,
}
})
})
} else {
this.setState({ waitModal: { message: 'Creating Team' } })
api.createTeam(user).then((createdTeam) => {
api.createTeam(team).then((createdTeam) => {
this.setState({
waitModal: false,
users: this.state.users.map((user) => (!user._id ? createdTeam : user)).sort((a, b) => (
teams: this.state.teams.map((team) => (!team._id ? createdTeam : team)).sort((a, b) => (
a.lastName < b.lastName ? -1 : a.lastName > b.lastName : 0
)),
modified: false,
@@ -111,7 +111,7 @@ export class Teams extends Component {
waitModal: null,
messageModal: {
icon: 'hand',
message: 'Unable to create the user.',
message: 'Unable to create the team.',
detail: error.message,
}
})
@@ -186,7 +186,7 @@ export class Teams extends Component {
handleRemove() {
this.setState({
yesNoModal: {
question: 'Are you sure you want to remove this user? This will also remove them from any teams they belong to.',
question: 'Are you sure you want to remove this team? This will also remove them from any teams they belong to.',
onDismiss: this.handleRemoveModalDismiss
}
})
@@ -196,14 +196,14 @@ export class Teams extends Component {
handleRemoveModalDismiss(yes) {
if (yes) {
const selectedTeamId = this.state.selectedTeam._id
const selectedIndex = this.state.users.findIndex((user) => (user._id === selectedTeamId))
const selectedIndex = this.state.teams.findIndex((team) => (team._id === selectedTeamId))
if (selectedIndex >= 0) {
this.setState({ waitModal: { message: 'Removing Team' } })
api.deleteTeam(selectedTeamId).then(() => {
this.setState({
waitModal: null,
users: [...this.state.users.slice(0, selectedIndex), ...this.state.users.slice(selectedIndex + 1)],
teams: [...this.state.teams.slice(0, selectedIndex), ...this.state.teams.slice(selectedIndex + 1)],
selectedTeam: null
})
}).catch((error) => {
@@ -211,7 +211,7 @@ export class Teams extends Component {
waitModal: null,
messageModal: {
icon: 'hand',
message: 'Unable to remove the user.',
message: 'Unable to remove the team.',
detail: error.message,
}
})
@@ -253,8 +253,8 @@ export class Teams extends Component {
@autobind
handleAddNewTeam() {
let newTeam = {}
let newTeams = [newTeam].concat(this.state.users)
this.setState({ users: newTeams, selectedTeam: newTeam })
let newTeams = [newTeam].concat(this.state.teams)
this.setState({ teams: newTeams, selectedTeam: newTeam })
}
render() {
@@ -267,7 +267,7 @@ export class Teams extends Component {
<Row fillParent>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item width='25vw'>
<TeamList users={this.state.users} selectedTeam={this.state.selectedTeam}
<TeamList teams={this.state.teams} selectedTeam={this.state.selectedTeam}
selectionModified={this.state.modified} onTeamListClick={this.handleTeamListClick}
onAddNewTeam={this.handleAddNewTeam} />
</Row.Item>
@@ -276,7 +276,7 @@ export class Teams extends Component {
<Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
{
this.state.selectedTeam
? <TeamForm user={this.state.selectedTeam} onSave={this.handleSave}
? <TeamForm team={this.state.selectedTeam} onSave={this.handleSave}
onRemove={this.handleRemove} onModifiedChanged={this.handleModifiedChanged}
onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} />
: <TeamFormPlaceholder />

2
website/src/Users/UserList.js
View File

@@ -32,7 +32,7 @@ export class UserList extends React.Component {
return (
<Column fillParent>
<Column.Item grow>
<List data={users} render={(user, index) => {
<List items={users} render={(user, index) => {
return (
<List.Item key={user._id || '0'} onClick={(e) => (this.props.onUserListClick(e, index))}
active={user === this.props.selectedUser}>

6
website/src/ui/List.js
View File

@@ -7,12 +7,12 @@ import { sizeInfo, colorInfo, fontInfo } from './style'
@Radium
export class List extends Component {
static propTypes = {
data: PropTypes.array,
items: PropTypes.array,
render: PropTypes.func.isRequired,
}
render() {
const { data, render } = this.props
const { items, render } = this.props
return (
<Box
@@ -24,7 +24,7 @@ export class List extends Component {
fontFamily: fontInfo.family,
overflow: 'scroll',
}}>
{data ? data.map(render) : null}
{items ? items.map(render) : null}
</Box>
)
}