Fix inconsistency when new team modal is beeing used to edit teams

This commit is contained in:
Jonas Schwabe
2017-01-31 15:26:20 +01:00
parent 5e55c5496c
commit cb84d002c7
3 changed files with 30 additions and 8 deletions

View File

@@ -85,6 +85,20 @@ class NewTeamModal extends React.Component {
}); });
} }
getSaveButtonLabel() {
if (this.props.editMode) {
return 'Save';
}
return 'Add';
}
getModalTitle() {
if (this.props.editMode) {
return 'Edit Server';
}
return 'Add Server';
}
render() { render() {
return ( return (
<Modal <Modal
@@ -107,7 +121,7 @@ class NewTeamModal extends React.Component {
}} }}
> >
<Modal.Header> <Modal.Header>
<Modal.Title>{'Add Server'}</Modal.Title> <Modal.Title>{this.getModalTitle()}</Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
@@ -159,7 +173,7 @@ class NewTeamModal extends React.Component {
onClick={this.save.bind(this)} onClick={this.save.bind(this)}
disabled={!this.validateForm()} disabled={!this.validateForm()}
bsStyle='primary' bsStyle='primary'
>{'Add'}</Button> >{this.getSaveButtonLabel()}</Button>
</Modal.Footer> </Modal.Footer>
</Modal> </Modal>
@@ -170,7 +184,8 @@ class NewTeamModal extends React.Component {
NewTeamModal.propTypes = { NewTeamModal.propTypes = {
onClose: React.PropTypes.func, onClose: React.PropTypes.func,
onSave: React.PropTypes.func, onSave: React.PropTypes.func,
team: React.PropTypes.object team: React.PropTypes.object,
editMode: React.PropTypes.boolean
}; };
module.exports = NewTeamModal; module.exports = NewTeamModal;

View File

@@ -145,6 +145,11 @@ const SettingsPage = React.createClass({
showAddTeamForm: !this.state.showAddTeamForm showAddTeamForm: !this.state.showAddTeamForm
}); });
}, },
setShowTeamFormVisibility(val) {
this.setState({
showAddTeamForm: val
});
},
handleFlashWindow() { handleFlashWindow() {
this.setState({ this.setState({
notifications: { notifications: {
@@ -182,6 +187,7 @@ const SettingsPage = React.createClass({
teams={this.state.teams} teams={this.state.teams}
showAddTeamForm={this.state.showAddTeamForm} showAddTeamForm={this.state.showAddTeamForm}
toggleAddTeamForm={this.toggleShowTeamForm} toggleAddTeamForm={this.toggleShowTeamForm}
setAddTeamFormVisibility={this.setShowTeamFormVisibility}
onTeamsChange={this.handleTeamsChange} onTeamsChange={this.handleTeamsChange}
updateTeam={this.updateTeam} updateTeam={this.updateTeam}
addServer={this.addServer} addServer={this.addServer}

View File

@@ -11,7 +11,8 @@ const TeamList = React.createClass({
teams: React.PropTypes.array, teams: React.PropTypes.array,
addServer: React.PropTypes.func, addServer: React.PropTypes.func,
updateTeam: React.PropTypes.func, updateTeam: React.PropTypes.func,
toggleAddTeamForm: React.PropTypes.func toggleAddTeamForm: React.PropTypes.func,
setAddTeamFormVisibility: React.PropTypes.func
}, },
getInitialState() { getInitialState() {
@@ -99,16 +100,17 @@ const TeamList = React.createClass({
if (this.props.showAddTeamForm || this.state.showEditTeamForm) { if (this.props.showAddTeamForm || this.state.showEditTeamForm) {
addServerForm = ( addServerForm = (
<NewTeamModal <NewTeamModal
editMode={this.state.showEditTeamForm}
onClose={() => { onClose={() => {
this.setState({ this.setState({
showNewTeamModal: false, showEditTeamForm: false,
team: { team: {
name: '', name: '',
url: '', url: '',
index: false index: false
} }
}); });
this.props.toggleAddTeamForm(); this.props.setAddTeamFormVisibility(false);
}} }}
onSave={(newTeam) => { onSave={(newTeam) => {
var teamData = { var teamData = {
@@ -130,8 +132,7 @@ const TeamList = React.createClass({
} }
}); });
this.render(); this.render();
this.props.setAddTeamFormVisibility(false);
this.props.onTeamsChange(this.props.teams);
}} }}
team={this.state.team} team={this.state.team}
/>); />);