Merge pull request #323 from rgarmsen2295/mm-1554
MM-1554 Removes the delete icon for the first entry in the 'Invite New Members' form
Этот коммит содержится в:
Christopher Speller
@@ -2,7 +2,7 @@
|
|||||||
// See License.txt for license information.
|
// See License.txt for license information.
|
||||||
|
|
||||||
var utils = require('../utils/utils.jsx');
|
var utils = require('../utils/utils.jsx');
|
||||||
var Client =require('../utils/client.jsx');
|
var Client = require('../utils/client.jsx');
|
||||||
var UserStore = require('../stores/user_store.jsx');
|
var UserStore = require('../stores/user_store.jsx');
|
||||||
var ConfirmModal = require('./confirm_modal.jsx');
|
var ConfirmModal = require('./confirm_modal.jsx');
|
||||||
|
|
||||||
@@ -15,20 +15,19 @@ module.exports = React.createClass({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var not_empty = false;
|
var notEmpty = false;
|
||||||
for (var i = 0; i < self.state.invite_ids.length; i++) {
|
for (var i = 0; i < self.state.inviteIds.length; i++) {
|
||||||
var index = self.state.invite_ids[i];
|
var index = self.state.inviteIds[i];
|
||||||
if (self.refs["email"+index].getDOMNode().value.trim() !== '') {
|
if (self.refs['email' + index].getDOMNode().value.trim() !== '') {
|
||||||
not_empty = true;
|
notEmpty = true;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (not_empty) {
|
if (notEmpty) {
|
||||||
$('#confirm_invite_modal').modal('show');
|
$('#confirm_invite_modal').modal('show');
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#invite_member').on('hidden.bs.modal', function() {
|
$('#invite_member').on('hidden.bs.modal', function() {
|
||||||
@@ -36,52 +35,54 @@ module.exports = React.createClass({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleSubmit: function(e) {
|
handleSubmit: function(e) {
|
||||||
var invite_ids = this.state.invite_ids;
|
var inviteIds = this.state.inviteIds;
|
||||||
var count = invite_ids.length;
|
var count = inviteIds.length;
|
||||||
var invites = [];
|
var invites = [];
|
||||||
var email_errors = this.state.email_errors;
|
var emailErrors = this.state.emailErrors;
|
||||||
var first_name_errors = this.state.first_name_errors;
|
var firstNameErrors = this.state.firstNameErrors;
|
||||||
var last_name_errors = this.state.last_name_errors;
|
var lastNameErrors = this.state.lastNameErrors;
|
||||||
var valid = true;
|
var valid = true;
|
||||||
|
|
||||||
for (var i = 0; i < count; i++) {
|
for (var i = 0; i < count; i++) {
|
||||||
var index = invite_ids[i];
|
var index = inviteIds[i];
|
||||||
var invite = {};
|
var invite = {};
|
||||||
invite.email = this.refs["email"+index].getDOMNode().value.trim();
|
invite.email = this.refs['email' + index].getDOMNode().value.trim();
|
||||||
if (!invite.email || !utils.isEmail(invite.email)) {
|
if (!invite.email || !utils.isEmail(invite.email)) {
|
||||||
email_errors[index] = "Please enter a valid email address";
|
emailErrors[index] = 'Please enter a valid email address';
|
||||||
valid = false;
|
valid = false;
|
||||||
} else {
|
} else {
|
||||||
email_errors[index] = "";
|
emailErrors[index] = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config.AllowInviteNames) {
|
if (config.AllowInviteNames) {
|
||||||
invite.first_name = this.refs["first_name"+index].getDOMNode().value.trim();
|
invite.firstName = this.refs['first_name' + index].getDOMNode().value.trim();
|
||||||
if (!invite.first_name && config.RequireInviteNames) {
|
if (!invite.firstName && config.RequireInviteNames) {
|
||||||
first_name_errors[index] = "This is a required field";
|
firstNameErrors[index] = 'This is a required field';
|
||||||
valid = false;
|
valid = false;
|
||||||
} else {
|
} else {
|
||||||
first_name_errors[index] = "";
|
firstNameErrors[index] = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
invite.last_name = this.refs["last_name"+index].getDOMNode().value.trim();
|
invite.lastName = this.refs['last_name' + index].getDOMNode().value.trim();
|
||||||
if (!invite.last_name && config.RequireInviteNames) {
|
if (!invite.lastName && config.RequireInviteNames) {
|
||||||
last_name_errors[index] = "This is a required field";
|
lastNameErrors[index] = 'This is a required field';
|
||||||
valid = false;
|
valid = false;
|
||||||
} else {
|
} else {
|
||||||
last_name_errors[index] = "";
|
lastNameErrors[index] = '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
invites.push(invite);
|
invites.push(invite);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({ email_errors: email_errors, first_name_errors: first_name_errors, last_name_errors: last_name_errors });
|
this.setState({emailErrors: emailErrors, firstNameErrors: firstNameErrors, lastNameErrors: lastNameErrors});
|
||||||
|
|
||||||
if (!valid || invites.length === 0) return;
|
if (!valid || invites.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var data = {}
|
var data = {};
|
||||||
data["invites"] = invites;
|
data.invites = invites;
|
||||||
|
|
||||||
Client.inviteMembers(data,
|
Client.inviteMembers(data,
|
||||||
function() {
|
function() {
|
||||||
@@ -89,146 +90,177 @@ module.exports = React.createClass({
|
|||||||
$(this.refs.modal.getDOMNode()).modal('hide');
|
$(this.refs.modal.getDOMNode()).modal('hide');
|
||||||
}.bind(this),
|
}.bind(this),
|
||||||
function(err) {
|
function(err) {
|
||||||
if (err.message === "This person is already on your team") {
|
if (err.message === 'This person is already on your team') {
|
||||||
email_errors[err.detailed_error] = err.message;
|
emailErrors[err.detailed_error] = err.message;
|
||||||
this.setState({ email_errors: email_errors });
|
this.setState({emailErrors: emailErrors});
|
||||||
|
} else {
|
||||||
|
this.setState({serverError: err.message});
|
||||||
}
|
}
|
||||||
else
|
|
||||||
this.setState({ server_error: err.message});
|
|
||||||
}.bind(this)
|
}.bind(this)
|
||||||
);
|
);
|
||||||
|
|
||||||
},
|
},
|
||||||
componentDidUpdate: function() {
|
componentDidUpdate: function() {
|
||||||
$(this.refs.modalBody.getDOMNode()).css('max-height', $(window).height() - 200);
|
$(this.refs.modalBody.getDOMNode()).css('max-height', $(window).height() - 200);
|
||||||
$(this.refs.modalBody.getDOMNode()).css('overflow-y', 'scroll');
|
$(this.refs.modalBody.getDOMNode()).css('overflow-y', 'scroll');
|
||||||
},
|
},
|
||||||
addInviteFields: function() {
|
addInviteFields: function() {
|
||||||
var count = this.state.id_count + 1;
|
var count = this.state.idCount + 1;
|
||||||
var invite_ids = this.state.invite_ids;
|
var inviteIds = this.state.inviteIds;
|
||||||
invite_ids.push(count);
|
inviteIds.push(count);
|
||||||
this.setState({ invite_ids: invite_ids, id_count: count });
|
this.setState({inviteIds: inviteIds, idCount: count});
|
||||||
},
|
},
|
||||||
clearFields: function() {
|
clearFields: function() {
|
||||||
var invite_ids = this.state.invite_ids;
|
var inviteIds = this.state.inviteIds;
|
||||||
|
|
||||||
for (var i = 0; i < invite_ids.length; i++) {
|
for (var i = 0; i < inviteIds.length; i++) {
|
||||||
var index = invite_ids[i];
|
var index = inviteIds[i];
|
||||||
this.refs["email"+index].getDOMNode().value = "";
|
this.refs['email' + index].getDOMNode().value = '';
|
||||||
if (config.AllowInviteNames) {
|
if (config.AllowInviteNames) {
|
||||||
this.refs["first_name"+index].getDOMNode().value = "";
|
this.refs['first_name' + index].getDOMNode().value = '';
|
||||||
this.refs["last_name"+index].getDOMNode().value = "";
|
this.refs['last_name' + index].getDOMNode().value = '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
invite_ids: [0],
|
inviteIds: [0],
|
||||||
id_count: 0,
|
idCount: 0,
|
||||||
email_errors: {},
|
emailErrors: {},
|
||||||
first_name_errors: {},
|
firstNameErrors: {},
|
||||||
last_name_errors: {}
|
lastNameErrors: {}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
removeInviteFields: function(index) {
|
removeInviteFields: function(index) {
|
||||||
var count = this.state.id_count;
|
var count = this.state.idCount;
|
||||||
var invite_ids = this.state.invite_ids;
|
var inviteIds = this.state.inviteIds;
|
||||||
var i = invite_ids.indexOf(index);
|
var i = inviteIds.indexOf(index);
|
||||||
if (i > -1) invite_ids.splice(i, 1);
|
if (i > -1) {
|
||||||
if (!invite_ids.length) invite_ids.push(++count);
|
inviteIds.splice(i, 1);
|
||||||
this.setState({ invite_ids: invite_ids, id_count: count });
|
}
|
||||||
|
if (!inviteIds.length) {
|
||||||
|
inviteIds.push(++count);
|
||||||
|
}
|
||||||
|
this.setState({inviteIds: inviteIds, idCount: count});
|
||||||
},
|
},
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return {
|
||||||
invite_ids: [0],
|
inviteIds: [0],
|
||||||
id_count: 0,
|
idCount: 0,
|
||||||
email_errors: {},
|
emailErrors: {},
|
||||||
first_name_errors: {},
|
firstNameErrors: {},
|
||||||
last_name_errors: {}
|
lastNameErrors: {}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
var currentUser = UserStore.getCurrentUser()
|
var currentUser = UserStore.getCurrentUser();
|
||||||
|
|
||||||
if (currentUser != null) {
|
if (currentUser != null) {
|
||||||
var invite_sections = [];
|
var inviteSections = [];
|
||||||
var invite_ids = this.state.invite_ids;
|
var inviteIds = this.state.inviteIds;
|
||||||
var self = this;
|
for (var i = 0; i < inviteIds.length; i++) {
|
||||||
for (var i = 0; i < invite_ids.length; i++) {
|
var index = inviteIds[i];
|
||||||
var index = invite_ids[i];
|
var emailError = null;
|
||||||
var email_error = this.state.email_errors[index] ? <label className='control-label'>{ this.state.email_errors[index] }</label> : null;
|
if (this.state.emailErrors[index]) {
|
||||||
var first_name_error = this.state.first_name_errors[index] ? <label className='control-label'>{ this.state.first_name_errors[index] }</label> : null;
|
emailError = <label className='control-label'>{this.state.emailErrors[index]}</label>;
|
||||||
var last_name_error = this.state.last_name_errors[index] ? <label className='control-label'>{ this.state.last_name_errors[index] }</label> : null;
|
}
|
||||||
|
var firstNameError = null;
|
||||||
|
if (this.state.firstNameErrors[index]) {
|
||||||
|
firstNameError = <label className='control-label'>{this.state.firstNameErrors[index]}</label>;
|
||||||
|
}
|
||||||
|
var lastNameError = null;
|
||||||
|
if (this.state.lastNameErrors[index]) {
|
||||||
|
lastNameError = <label className='control-label'>{this.state.lastNameErrors[index]}</label>;
|
||||||
|
}
|
||||||
|
|
||||||
invite_sections[index] = (
|
var removeButton = null;
|
||||||
<div key={"key" + index}>
|
if (index) {
|
||||||
<div>
|
removeButton = (<div>
|
||||||
<button type="button" className="btn btn-link remove__member" onClick={this.removeInviteFields.bind(this, index)}><span className="fa fa-trash"></span></button>
|
<button type='button' className='btn btn-link remove__member' onClick={this.removeInviteFields.bind(this, index)}><span className='fa fa-trash'></span></button>
|
||||||
</div>
|
</div>);
|
||||||
<div className={ email_error ? "form-group invite has-error" : "form-group invite" }>
|
}
|
||||||
<input onKeyUp={this.displayNameKeyUp} type="text" ref={"email"+index} className="form-control" placeholder="email@domain.com" maxLength="64" />
|
var emailClass = 'form-group invite';
|
||||||
{ email_error }
|
if (emailError) {
|
||||||
</div>
|
emailClass += ' has-error';
|
||||||
<div className="row--invite">
|
}
|
||||||
{ config.AllowInviteNames ?
|
|
||||||
<div className="col-sm-6">
|
var nameFields = null;
|
||||||
<div className={ first_name_error ? "form-group has-error" : "form-group" }>
|
if (config.AllowInviteNames) {
|
||||||
<input type="text" className="form-control" ref={"first_name"+index} placeholder="First name" maxLength="64" />
|
var firstNameClass = 'form-group';
|
||||||
{ first_name_error }
|
if (firstNameError) {
|
||||||
</div>
|
firstNameClass += ' has-error';
|
||||||
</div>
|
}
|
||||||
: "" }
|
var lastNameClass = 'form-group';
|
||||||
{ config.AllowInviteNames ?
|
if (lastNameError) {
|
||||||
<div className="col-sm-6">
|
lastNameClass += ' has-error';
|
||||||
<div className={ last_name_error ? "form-group has-error" : "form-group" }>
|
}
|
||||||
<input type="text" className="form-control" ref={"last_name"+index} placeholder="Last name" maxLength="64" />
|
nameFields = (<div className='row--invite'>
|
||||||
{ last_name_error }
|
<div className='col-sm-6'>
|
||||||
</div>
|
<div className={firstNameClass}>
|
||||||
</div>
|
<input type='text' className='form-control' ref={'first_name' + index} placeholder='First name' maxLength='64' />
|
||||||
: "" }
|
{firstNameError}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='col-sm-6'>
|
||||||
|
<div className={lastNameClass}>
|
||||||
|
<input type='text' className='form-control' ref={'last_name' + index} placeholder='Last name' maxLength='64' />
|
||||||
|
{lastNameError}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
|
|
||||||
|
inviteSections[index] = (
|
||||||
|
<div key={'key' + index}>
|
||||||
|
{removeButton}
|
||||||
|
<div className={emailClass}>
|
||||||
|
<input onKeyUp={this.displayNameKeyUp} type='text' ref={'email' + index} className='form-control' placeholder='email@domain.com' maxLength='64' />
|
||||||
|
{emailError}
|
||||||
</div>
|
</div>
|
||||||
|
{nameFields}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
|
var serverError = null;
|
||||||
|
if (this.state.serverError) {
|
||||||
|
serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="modal fade" ref="modal" id="invite_member" tabIndex="-1" role="dialog" aria-hidden="true">
|
<div className='modal fade' ref='modal' id='invite_member' tabIndex='-1' role='dialog' aria-hidden='true'>
|
||||||
<div className="modal-dialog">
|
<div className='modal-dialog'>
|
||||||
<div className="modal-content">
|
<div className='modal-content'>
|
||||||
<div className="modal-header">
|
<div className='modal-header'>
|
||||||
<button type="button" className="close" data-dismiss="modal" aria-label="Close" data-reactid=".5.0.0.0.0"><span aria-hidden="true" data-reactid=".5.0.0.0.0.0">×</span></button>
|
<button type='button' className='close' data-dismiss='modal' aria-label='Close' data-reactid='.5.0.0.0.0'><span aria-hidden='true' data-reactid='.5.0.0.0.0.0'>×</span></button>
|
||||||
<h4 className="modal-title" id="myModalLabel">Invite New Member</h4>
|
<h4 className='modal-title' id='myModalLabel'>Invite New Member</h4>
|
||||||
</div>
|
</div>
|
||||||
<div ref="modalBody" className="modal-body">
|
<div ref='modalBody' className='modal-body'>
|
||||||
<form role="form">
|
<form role='form'>
|
||||||
{ invite_sections }
|
{inviteSections}
|
||||||
</form>
|
</form>
|
||||||
{ server_error }
|
{serverError}
|
||||||
<button type="button" className="btn btn-default" onClick={this.addInviteFields}>Add another</button>
|
<button type='button' className='btn btn-default' onClick={this.addInviteFields}>Add another</button>
|
||||||
<br/>
|
<br/>
|
||||||
<br/>
|
<br/>
|
||||||
<span>People invited automatically join Town Square channel.</span>
|
<span>People invited automatically join Town Square channel.</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-footer">
|
<div className='modal-footer'>
|
||||||
<button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button>
|
<button type='button' className='btn btn-default' data-dismiss='modal'>Cancel</button>
|
||||||
<button onClick={this.handleSubmit} type="button" className="btn btn-primary">Send Invitations</button>
|
<button onClick={this.handleSubmit} type='button' className='btn btn-primary'>Send Invitations</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ConfirmModal
|
<ConfirmModal
|
||||||
id="confirm_invite_modal"
|
id='confirm_invite_modal'
|
||||||
parent_id="invite_member"
|
parent_id='invite_member'
|
||||||
title="Discard Invitations?"
|
title='Discard Invitations?'
|
||||||
message="You have unsent invitations, are you sure you want to discard them?"
|
message='You have unsent invitations, are you sure you want to discard them?'
|
||||||
confirm_button="Yes, Discard"
|
confirm_button='Yes, Discard/'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else {
|
|
||||||
return <div/>;
|
|
||||||
}
|
}
|
||||||
|
return <div/>;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Ссылка в новой задаче
Block a user