From bb25056d9afca501f147450466aaeecca9fef66f Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Tue, 27 Oct 2015 22:18:52 -0700 Subject: PLT-340 --- web/react/components/team_general_tab.jsx | 367 ++++++++++++++++++++++++++++-- 1 file changed, 345 insertions(+), 22 deletions(-) (limited to 'web/react/components/team_general_tab.jsx') diff --git a/web/react/components/team_general_tab.jsx b/web/react/components/team_general_tab.jsx index 923180e27..760c43965 100644 --- a/web/react/components/team_general_tab.jsx +++ b/web/react/components/team_general_tab.jsx @@ -6,29 +6,109 @@ const SettingItemMax = require('./setting_item_max.jsx'); const Client = require('../utils/client.jsx'); const Utils = require('../utils/utils.jsx'); +const TeamStore = require('../stores/team_store.jsx'); export default class GeneralTab extends React.Component { constructor(props) { super(props); this.handleNameSubmit = this.handleNameSubmit.bind(this); + this.handleInviteIdSubmit = this.handleInviteIdSubmit.bind(this); + this.handleOpenInviteSubmit = this.handleOpenInviteSubmit.bind(this); + this.handleTeamListingSubmit = this.handleTeamListingSubmit.bind(this); this.handleClose = this.handleClose.bind(this); - this.onUpdateSection = this.onUpdateSection.bind(this); + this.onUpdateNameSection = this.onUpdateNameSection.bind(this); this.updateName = this.updateName.bind(this); + this.onUpdateInviteIdSection = this.onUpdateInviteIdSection.bind(this); + this.updateInviteId = this.updateInviteId.bind(this); + this.onUpdateOpenInviteSection = this.onUpdateOpenInviteSection.bind(this); + this.handleOpenInviteRadio = this.handleOpenInviteRadio.bind(this); + this.onUpdateTeamListingSection = this.onUpdateTeamListingSection.bind(this); + this.handleTeamListingRadio = this.handleTeamListingRadio.bind(this); + this.handleGenerateInviteId = this.handleGenerateInviteId.bind(this); - this.state = {name: this.props.teamDisplayName, serverError: '', clientError: ''}; + this.state = { + name: props.team.display_name, + invite_id: props.team.invite_id, + allow_open_invite: props.team.allow_open_invite, + allow_team_listing: props.team.allow_team_listing, + serverError: '', + clientError: '' + }; } + + handleGenerateInviteId(e) { + e.preventDefault(); + + var newId = ''; + for (var i = 0; i < 32; i++) { + newId += Math.floor(Math.random() * 16).toString(16); + } + + console.log(newId); + + this.setState({invite_id: newId}); + } + + handleOpenInviteRadio(openInvite) { + this.setState({allow_open_invite: openInvite}); + } + + handleTeamListingRadio(listing) { + this.setState({allow_team_listing: listing}); + } + + handleOpenInviteSubmit(e) { + e.preventDefault(); + + var state = {serverError: '', clientError: ''}; + + var data = this.props.team; + data.allow_open_invite = this.state.allow_open_invite; + Client.updateTeam(data, + (team) => { + TeamStore.saveTeam(team); + TeamStore.emitChange(); + this.props.updateSection(''); + }, + (err) => { + state.serverError = err.message; + this.setState(state); + } + ); + } + + handleTeamListingSubmit(e) { + e.preventDefault(); + + var state = {serverError: '', clientError: ''}; + + var data = this.props.team; + data.allow_team_listing = this.state.allow_team_listing; + Client.updateTeam(data, + (team) => { + TeamStore.saveTeam(team); + TeamStore.emitChange(); + this.props.updateSection(''); + }, + (err) => { + state.serverError = err.message; + this.setState(state); + } + ); + } + handleNameSubmit(e) { e.preventDefault(); - let state = {serverError: '', clientError: ''}; + var state = {serverError: '', clientError: ''}; let valid = true; const name = this.state.name.trim(); if (!name) { state.clientError = 'This field is required'; valid = false; - } else if (name === this.props.teamDisplayName) { + } else if (name === this.props.team.display_name) { state.clientError = 'Please choose a new name for your team'; valid = false; } else { @@ -41,37 +121,76 @@ export default class GeneralTab extends React.Component { return; } - let data = {}; - data.new_name = name; + var data = this.props.team; + data.display_name = this.state.name; + Client.updateTeam(data, + (team) => { + TeamStore.saveTeam(team); + TeamStore.emitChange(); + this.props.updateSection(''); + }, + (err) => { + state.serverError = err.message; + this.setState(state); + } + ); + } + + handleInviteIdSubmit(e) { + e.preventDefault(); + + var state = {serverError: '', clientError: ''}; + let valid = true; + + const inviteId = this.state.invite_id.trim(); + if (inviteId) { + state.clientError = ''; + } else { + state.clientError = 'This field is required'; + valid = false; + } + + this.setState(state); - Client.updateTeamDisplayName(data, - function nameChangeSuccess() { + if (!valid) { + return; + } + + var data = this.props.team; + data.invite_id = this.state.invite_id; + Client.updateTeam(data, + (team) => { + TeamStore.saveTeam(team); + TeamStore.emitChange(); this.props.updateSection(''); - $('#team_settings').modal('hide'); - window.location.reload(); - }.bind(this), - function nameChangeFail(err) { + }, + (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) { + + onUpdateNameSection(e) { e.preventDefault(); if (this.props.activeSection === 'name') { this.props.updateSection(''); @@ -79,10 +198,44 @@ export default class GeneralTab extends React.Component { this.props.updateSection('name'); } } + + onUpdateInviteIdSection(e) { + e.preventDefault(); + if (this.props.activeSection === 'invite_id') { + this.props.updateSection(''); + } else { + this.props.updateSection('invite_id'); + } + } + + onUpdateOpenInviteSection(e) { + e.preventDefault(); + if (this.props.activeSection === 'open_invite') { + this.props.updateSection(''); + } else { + this.props.updateSection('open_invite'); + } + } + + onUpdateTeamListingSection(e) { + e.preventDefault(); + if (this.props.activeSection === 'team_listing') { + this.props.updateSection(''); + } else { + this.props.updateSection('team_listing'); + } + } + updateName(e) { e.preventDefault(); this.setState({name: e.target.value}); } + + updateInviteId(e) { + e.preventDefault(); + this.setState({invite_id: e.target.value}); + } + render() { let clientError = null; let serverError = null; @@ -93,10 +246,178 @@ export default class GeneralTab extends React.Component { serverError = this.state.serverError; } + let teamListingSection; + if (this.props.activeSection === 'team_listing') { + const inputs = [ +
+
+ +
+
+
+ +
+
+

{'When allowed then the team will appear on the main page as part of team directory if team browsing is enabled in the system console.'}
+
+ ]; + + teamListingSection = ( + + ); + } else { + let describe = ''; + if (this.state.allow_team_listing === true) { + describe = 'Yes'; + } else { + describe = 'No'; + } + + teamListingSection = ( + + ); + } + + let openInviteSection; + if (this.props.activeSection === 'open_invite') { + const inputs = [ +
+
+ +
+
+
+ +
+
+

{'When allowed the team signup link will be included on the login page and anyone can signup to this team.'}
+
+ ]; + + openInviteSection = ( + + ); + } else { + let describe = ''; + if (this.state.allow_open_invite === true) { + describe = 'Yes'; + } else { + describe = 'No'; + } + + openInviteSection = ( + + ); + } + + let inviteSection; + + if (this.props.activeSection === 'invite_id') { + const inputs = []; + + inputs.push( +
+ +
+ +
+

{'When allowing open invites this code is used as part of the signup process. Changing this code will invalidate the previous open signup link.'}
+
+ +
+
+ ); + + inviteSection = ( + + ); + } else { + inviteSection = ( + + ); + } + let nameSection; if (this.props.activeSection === 'name') { - let inputs = []; + const inputs = []; let teamNameLabel = 'Team Name'; if (Utils.isMobile()) { @@ -127,17 +448,17 @@ export default class GeneralTab extends React.Component { submit={this.handleNameSubmit} server_error={serverError} client_error={clientError} - updateSection={this.onUpdateSection} + updateSection={this.onUpdateNameSection} /> ); } else { - let describe = this.state.name; + var describe = this.state.name; nameSection = ( ); } @@ -158,16 +479,19 @@ export default class GeneralTab extends React.Component { ref='title' > - General Settings + {'General Settings'}
-

General Settings

+

{'General Settings'}

{nameSection} + {openInviteSection} + {teamListingSection} + {inviteSection}
@@ -178,6 +502,5 @@ export default class GeneralTab extends React.Component { GeneralTab.propTypes = { updateSection: React.PropTypes.func.isRequired, team: React.PropTypes.object.isRequired, - activeSection: React.PropTypes.string.isRequired, - teamDisplayName: React.PropTypes.string.isRequired + activeSection: React.PropTypes.string.isRequired }; -- cgit v1.2.3-1-g7c22 From be0bf941bf91d632efc2bf035864c161b656f094 Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Tue, 27 Oct 2015 22:32:16 -0700 Subject: Removing console.log --- web/react/components/team_general_tab.jsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'web/react/components/team_general_tab.jsx') diff --git a/web/react/components/team_general_tab.jsx b/web/react/components/team_general_tab.jsx index 760c43965..591d031bf 100644 --- a/web/react/components/team_general_tab.jsx +++ b/web/react/components/team_general_tab.jsx @@ -45,8 +45,6 @@ export default class GeneralTab extends React.Component { newId += Math.floor(Math.random() * 16).toString(16); } - console.log(newId); - this.setState({invite_id: newId}); } -- cgit v1.2.3-1-g7c22 From bedf85a122359a70cbb21be1219a5d566466273e Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Thu, 29 Oct 2015 08:54:27 -0700 Subject: Adding error when enabling team dir without global prop being set. --- web/react/components/team_general_tab.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'web/react/components/team_general_tab.jsx') diff --git a/web/react/components/team_general_tab.jsx b/web/react/components/team_general_tab.jsx index 591d031bf..69ba44664 100644 --- a/web/react/components/team_general_tab.jsx +++ b/web/react/components/team_general_tab.jsx @@ -53,7 +53,12 @@ export default class GeneralTab extends React.Component { } handleTeamListingRadio(listing) { - this.setState({allow_team_listing: listing}); + if (global.window.mm_config.EnableTeamListing !== 'true' && listing) { + ReactDOM.findDOMNode(this.refs.teamListingRadioNo).checked = true; + this.setState({clientError: 'Team directory has been disabled. Please ask a system admin to enable it.'}); + } else { + this.setState({allow_team_listing: listing}); + } } handleOpenInviteSubmit(e) { @@ -263,6 +268,7 @@ export default class GeneralTab extends React.Component {
-

{'When allowed then the team will appear on the main page as part of team directory if team browsing is enabled in the system console.'}
+

{'When allowed the team will appear on the main page as part of team directory.'}
]; @@ -282,6 +288,7 @@ export default class GeneralTab extends React.Component { inputs={inputs} submit={this.handleTeamListingSubmit} server_error={serverError} + client_error={clientError} updateSection={this.onUpdateTeamListingSection} /> ); -- cgit v1.2.3-1-g7c22