104 lines
2.9 KiB
JavaScript
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();
|
|
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>
|
|
);
|
|
}
|
|
});
|