lunch/js/components/RecordLunch.js

72 lines
1.8 KiB
JavaScript

var React = require('react');
var ReactBootstrap = require('react-bootstrap');
var FormGroup = ReactBootstrap.FormGroup;
var ControlLabel = ReactBootstrap.ControlLabel;
var Multiselect = require('react-widgets').Multiselect;
var models = require('../models')
var Attendee = models.Attendee
module.exports = React.createClass({
displayName: "RecordLunch",
getInitialState: function() {
return {
};
},
getAttendeeList: function() {
var attendeeList = [];
for (var attendeeId in this.props.attendees) {
attendeeList.push(this.props.attendees[attendeeId]);
}
return attendeeList;
},
getAttendeeMap: function() {
var attendeeMap = {};
for (var attendeeId in this.props.attendees) {
var attendee = this.props.attendees[attendeeId];
attendeeMap[attendee.Name] = attendee;
}
return attendeeMap;
},
onChangeAttendees: function(attendees) {
var attendeeMap = this.getAttendeeMap();
for (var i in attendees) {
if (attendeeMap.hasOwnProperty(attendees[i].Name)) {
delete attendeeMap[attendees[i].Name];
} else {
var attendee = new Attendee();
attendee.Name = attendees[i].Name;
this.props.createAttendee(attendee);
}
}
for (var i in attendeeMap) {
this.props.removeAttendee(attendeeMap[i]);
}
},
onCreateAttendee: function(attendeeName) {
var attendee = new Attendee();
attendee.Name = attendeeName;
this.props.createAttendee(attendee);
},
render: function() {
var attendeeList = this.getAttendeeList();
return (
<div><form>
<FormGroup>
<ControlLabel>Attendees</ControlLabel>
<Multiselect
value={attendeeList}
data={this.props.popularAttendees}
valueField='Name'
textField='Name'
messages={{'createNew': "(create new attendee)"}}
onChange={this.onChangeAttendees}
onCreate={this.onCreateAttendee} />
</FormGroup>
</form></div>
);
}
});