lunch/js/components/RecordLunch.js

104 lines
2.9 KiB
JavaScript

var React = require('react');
var ReactBootstrap = require('react-bootstrap');
var FormGroup = ReactBootstrap.FormGroup;
var ControlLabel = ReactBootstrap.ControlLabel;
var Grid = ReactBootstrap.Grid;
var Row = ReactBootstrap.Row;
var Col = ReactBootstrap.Col;
var Multiselect = require('react-widgets').Multiselect;
var models = require('../models');
var Attendee = models.Attendee;
var NewSuggestion = require('./NewSuggestion');
module.exports = React.createClass({
displayName: "RecordLunch",
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();
var suggestionIds = Object.keys(this.props.suggestions);
suggestionIds.sort(function(a, b){return parseInt(a, 10) - parseInt(b, 10);});
var suggestions = [];
for (var i in suggestionIds) {
var suggestion = this.props.suggestions[suggestionIds[i]];
suggestions.push((
<Row key={suggestion.SuggestionId}>
<Col xs={4}>{this.props.attendees[suggestion.AttendeeId].Name}</Col>
<Col xs={1}></Col>
<Col xs={4}>{suggestion.RestaurantName}</Col>
</Row>
));
}
return (
<div><form>
<Grid><Row><Col xs={12}>
<FormGroup controlId="attendees">
<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>
</Col></Row>
<Row>
<Col xs={4}><ControlLabel>Suggested By:</ControlLabel></Col>
<Col xs={1}></Col>
<Col xs={4}><ControlLabel>Restaurant Name:</ControlLabel></Col>
</Row>
{suggestions}
</Grid>
<FormGroup controlId="newsuggestion">
<NewSuggestion
createSuggestion={this.props.createSuggestion}
attendees={this.props.attendees}
suggestions={this.props.suggestions}
popularSuggestions={this.props.popularSuggestions} />
</FormGroup>
</form></div>
);
}
});