Add full ability to add/delete attendees

js/components/LunchApp.js

@@ -7,8 +7,9 @@ var Tab = ReactBootstrap.Tab;
 var Modal = ReactBootstrap.Modal;
 
 var TopBarContainer = require('../containers/TopBarContainer');
-var NewUserForm = require('./NewUserForm');
+var RecordLunchContainer = require('../containers/RecordLunchContainer');
 var AccountSettingsModalContainer = require('../containers/AccountSettingsModalContainer');
+var NewUserForm = require('./NewUserForm');
 
 module.exports = React.createClass({
 	displayName: "LunchApp",
@@ -62,7 +63,8 @@ module.exports = React.createClass({
 			if (this.props.user.isUser())
 				mainContent = (
 					<Tabs defaultActiveKey={1} id='mainNavigationTabs'>
-						<Tab title="New Entry" eventKey={1} >accounts
+						<Tab title="Record Lunch" eventKey={1} >
+							<RecordLunchContainer />
 						</Tab>
 						<Tab title="Statistics" eventKey={2} >stats will go here
 						</Tab>

js/components/RecordLunch.js

@@ -0,0 +1,71 @@
+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>
+		);
+	}
+});