Basic team page

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

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 />