diff options
Diffstat (limited to 'web/react/components/team_general_tab.jsx')
-rw-r--r-- | web/react/components/team_general_tab.jsx | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/web/react/components/team_general_tab.jsx b/web/react/components/team_general_tab.jsx new file mode 100644 index 000000000..fd2a22731 --- /dev/null +++ b/web/react/components/team_general_tab.jsx @@ -0,0 +1,180 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var SettingItemMin = require('./setting_item_min.jsx'); +var SettingItemMax = require('./setting_item_max.jsx'); + +var client = require('../utils/client.jsx'); +var utils = require('../utils/utils.jsx'); + +export default class GeneralTab extends React.Component { + constructor(props) { + super(props); + + this.handleNameSubmit = this.handleNameSubmit.bind(this); + this.handleClose = this.handleClose.bind(this); + this.onUpdateSection = this.onUpdateSection.bind(this); + this.updateName = this.updateName.bind(this); + + this.state = {name: this.props.teamDisplayName, serverError: '', clientError: ''}; + } + handleNameSubmit(e) { + e.preventDefault(); + + var state = {serverError: '', clientError: ''}; + var valid = true; + + var name = this.state.name.trim(); + if (!name) { + state.clientError = 'This field is required'; + valid = false; + } else if (name === this.props.teamDisplayName) { + state.clientError = 'Please choose a new name for your ' + strings.Team; + valid = false; + } else { + state.clientError = ''; + } + + this.setState(state); + + if (!valid) { + return; + } + + var data = {}; + data.new_name = name; + + client.updateTeamDisplayName(data, + function nameChangeSuccess() { + this.props.updateSection(''); + $('#team_settings').modal('hide'); + window.location.reload(); + }.bind(this), + function nameChangeFail(err) { + state.serverError = err.message; + this.setState(state); + }.bind(this) + ); + } + componentWillReceiveProps(newProps) { + if (newProps.team && newProps.teamDisplayName) { + this.setState({name: newProps.teamDisplayName}); + } + } + handleClose() { + this.setState({clientError: '', serverError: ''}); + this.props.updateSection(''); + } + componentDidMount() { + $('#team_settings').on('hidden.bs.modal', this.handleClose); + } + componentWillUnmount() { + $('#team_settings').off('hidden.bs.modal', this.handleClose); + } + onUpdateSection(e) { + e.preventDefault(); + if (this.props.activeSection === 'name') { + this.props.updateSection(''); + } else { + this.props.updateSection('name'); + } + } + updateName(e) { + e.preventDefault(); + this.setState({name: e.target.value}); + } + render() { + var clientError = null; + var serverError = null; + if (this.state.clientError) { + clientError = this.state.clientError; + } + if (this.state.serverError) { + serverError = this.state.serverError; + } + + var nameSection; + + if (this.props.activeSection === 'name') { + let inputs = []; + + let teamNameLabel = utils.toTitleCase(strings.Team) + ' Name'; + if (utils.isMobile()) { + teamNameLabel = ''; + } + + inputs.push( + <div key='teamNameSetting' className='form-group'> + <label className='col-sm-5 control-label'>{teamNameLabel}</label> + <div className='col-sm-7'> + <input + className='form-control' + type='text' + onChange={this.updateName} + value={this.state.name} + /> + </div> + </div> + ); + + nameSection = ( + <SettingItemMax + title={utils.toTitleCase(strings.Team) + ' Name'} + inputs={inputs} + submit={this.handleNameSubmit} + server_error={serverError} + client_error={clientError} + updateSection={this.onUpdateSection} + /> + ); + } else { + let describe = this.state.name; + + nameSection = ( + <SettingItemMin + title={utils.toTitleCase(strings.Team) + ' Name'} + describe={describe} + updateSection={this.onUpdateSection} + /> + ); + } + + return ( + <div> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>×</span> + </button> + <h4 + className='modal-title' + ref='title' + > + <i className='modal-back'></i> + General Settings + </h4> + </div> + <div + ref='wrapper' + className='user-settings' + > + <h3 className='tab-header'>General Settings</h3> + <div className='divider-dark first'/> + {nameSection} + <div className='divider-dark'/> + </div> + </div> + ); + } +} + +GeneralTab.propTypes = { + updateSection: React.PropTypes.func.isRequired, + team: React.PropTypes.object.isRequired, + activeSection: React.PropTypes.string.isRequired, + teamDisplayName: React.PropTypes.string.isRequired +}; |