mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Cosmetic refactoring to better fit style guide

Просмотр исходного кода
Этот коммит содержится в:
Reed Garmsen
2015-08-03 13:19:31 -07:00
родитель d3580a983d
Коммит a9b9e03a5b
1 изменённых файлов: 150 добавлений и 120 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

262
web/react/components/invite_member_modal.jsx
Просмотреть файл

@@ -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,148 +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) {
{ index ? removeButton = (<div>
<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> }
: "" } var emailClass = 'form-group invite';
<div className={ email_error ? "form-group invite has-error" : "form-group invite" }> if (emailError) {
<input onKeyUp={this.displayNameKeyUp} type="text" ref={"email"+index} className="form-control" placeholder="email@domain.com" maxLength="64" /> emailClass += ' has-error';
{ email_error } }
</div>
<div className="row--invite"> var nameFields = null;
{ config.AllowInviteNames ? if (config.AllowInviteNames) {
<div className="col-sm-6"> var firstNameClass = 'form-group';
<div className={ first_name_error ? "form-group has-error" : "form-group" }> if (firstNameError) {
<input type="text" className="form-control" ref={"first_name"+index} placeholder="First name" maxLength="64" /> firstNameClass += ' has-error';
{ first_name_error } }
var lastNameClass = 'form-group';
if (lastNameError) {
lastNameClass += ' has-error';
}
nameFields = (<div className='row--invite'>
<div className='col-sm-6'>
<div className={firstNameClass}>
<input type='text' className='form-control' ref={'first_name' + index} placeholder='First name' maxLength='64' />
{firstNameError}
</div> </div>
</div> </div>
: "" } <div className='col-sm-6'>
{ config.AllowInviteNames ? <div className={lastNameClass}>
<div className="col-sm-6"> <input type='text' className='form-control' ref={'last_name' + index} placeholder='Last name' maxLength='64' />
<div className={ last_name_error ? "form-group has-error" : "form-group" }> {lastNameError}
<input type="text" className="form-control" ref={"last_name"+index} placeholder="Last name" maxLength="64" />
{ last_name_error }
</div> </div>
</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/>;
} }
}
}); });