fast add of a person in the event info page

angular_app/event-info.html

@@ -6,44 +6,106 @@
             {{'Edit' | translate}}
         </button>
     </h1>
-    <div class="panel panel-primary table-striped top5">
-        <div class="panel-heading">{{'Persons' | translate}}</div>
-        <div class="panel-body">
-            <form class="form-inline">
-                <div class="form-group">
-                    <label for="query-persons">{{'Search:' | translate}}</label>
-                    <input type="text" id="query-persons" class="form-control" placeholder="{{'Name or email' | translate}}" ng-model="query">
+
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8">
+                <div class="panel panel-primary table-striped top5">
+                    <div class="panel-heading">{{'Persons' | translate}}</div>
+                    <div class="panel-body">
+                        <form class="form-inline">
+                            <div class="form-group">
+                                <label for="query-persons">{{'Search:' | translate}}</label>
+                                <input type="text" id="query-persons" class="form-control" placeholder="{{'Name or email' | translate}}" ng-model="query">
+                            </div>
+                            <div class="form-group">
+                                <label for="persons-order">{{'Sort by:' | translate}}</label>
+                                <select id="persons-order" class="form-control" ng-model="personsOrderProp">
+                                    <option value="name" ng-selected="selected">{{'Name' | translate}}</option>
+                                    <option value="-name" ng-selected="selected">{{'Name (descending)' | translate}}</option>
+                                    <option value="surname" ng-selected="selected">{{'Surname' | translate}}</option>
+                                    <option value="-surname" ng-selected="selected">{{'Surname (descending)' | translate}}</option>
+                                </select>
+                            </div>
+                        </form>
+                        <table class="table table-striped">
+                            <thead>
+                                <tr>
+                                    <th>{{'Person' | translate}}</th>
+                                    <th>{{'Email' | translate}}</th>
+                                    <th>{{'Attended' | translate}}</th>
+                                    <th>{{'Actions' | translate}}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr ng-repeat="person in event.persons | splittedFilter:query | orderBy:personsOrderProp">
+                                    <td><strong><a ui-sref="person.info({id: person.person_id})">{{person.name}} {{person.surname}}</a></strong></td>
+                                    <td>{{person.email}}</td>
+                                    <td>
+                                        <button class="btn btn-link" name="switch-attended" ng-click="updateAttendee(person, !person.attended)"><span class="glyphicon {{(person.attended) && 'glyphicon-ok-sign text-success' || 'glyphicon-remove-sign text-danger'}}"></span></button>
+                                    </td>
+                                    <td>
+                                        <button ng-click="removeAttendee(person)" type="button" class="btn btn-link glyphicon glyphicon-trash"></button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
-                <div class="form-group">
-                    <label for="persons-order">{{'Sort by:' | translate}}</label>
-                    <select id="persons-order" class="form-control" ng-model="personsOrderProp">
-                        <option value="name" ng-selected="selected">{{'Name' | translate}}</option>
-                        <option value="-name" ng-selected="selected">{{'Name (descending)' | translate}}</option>
-                        <option value="surname" ng-selected="selected">{{'Surname' | translate}}</option>
-                        <option value="-surname" ng-selected="selected">{{'Surname (descending)' | translate}}</option>
-                    </select>
+            </div>
+
+            <div class="col-md-4">
+
+                <div class="panel panel-info table-striped top5">
+                    <div class="panel-heading">{{'Fast add' | translate}}</div>
+                    <div class="panel-body">
+                        <form>
+                            <div class="input-group input-group-sm">
+                                <span class="input-group-addon">{{'Name' | translate}}</span>
+                                <input type="text" class="form-control" placeholder="{{'Name' | translate}}" ng-model="newPerson.name" ng-required="1">
+                            </div>
+                            <div class="input-group input-group-sm top5">
+                                <span class="input-group-addon">{{'Surname' | translate}}</span>
+                                <input type="text" class="form-control" placeholder="{{'Surname' | translate}}" ng-model="newPerson.surname">
+                            </div>
+                            <div class="input-group top5">
+                                <span class="input-group-addon">{{'Email' | translate}}</span>
+                                <input type="email" name="email" class="form-control" placeholder="{{'name.surname@example.com' | translate}}"  ng-model="newPerson.email">
+                            </div>
+                            <button ng-disabled="!(newPerson.name && newPerson.surname)" ng-click="fastAddPerson(newPerson)" class="btn btn-success top5">
+                                <span class="glyphicon glyphicon-plus-sign"></span>
+                                {{'Add' | translate}}
+                            </button>
+                        </form>
+                    </div>
                 </div>
-            </form>
-            <table class="table table-striped">
-                <thead>
-                    <tr>
-                        <th>{{'Person' | translate}}</th>
-                        <th>{{'Attended' | translate}}</th>
-                        <th>{{'Actions' | translate}}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr ng-repeat="person in event.persons | splittedFilter:query | orderBy:personsOrderProp">
-                        <td><strong><a ui-sref="person.info({id: person.person_id})">{{person.name}} {{person.surname}}</a></strong></td>
-                        <td>
-                            <button class="btn btn-link" name="switch-attended" ng-click="updateAttendee(person, !person.attended)"><span class="glyphicon {{(person.attended) && 'glyphicon-ok-sign text-success' || 'glyphicon-remove-sign text-danger'}}"></span></button>
-                        </td>
-                        <td>
-                            <button ng-click="removeAttendee(person)" type="button" class="btn btn-link glyphicon glyphicon-trash"></button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+
+                <div class="panel panel-info table-striped top5">
+                    <div class="panel-heading">{{'Unregistered persons' | translate}}</div>
+                    <div class="panel-body" style="height:200px;overflow:auto;">
+                        <table class="table table-striped table-condensed">
+                            <thead>
+                                <tr>
+                                    <th>{{'Person' | translate}}</th>
+                                    <th>{{'Add' | translate}}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr ng-repeat="person in allPersons | splittedFilter:query">
+                                    <td>
+                                        <strong><a ui-sref="person.info({id: person.person_id})">{{person.name}} {{person.surname}}</a></strong>
+                                        <br />
+                                        {{person.email}}
+                                    </td>
+                                    <td>
+                                        <button ng-click="addAttendee(person)" type="button" class="btn btn-link glyphicon glyphicon-plus-sign"></button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </div>

angular_app/js/controllers.js

@@ -53,12 +53,13 @@ eventManControllers.controller('EventsListCtrl', ['$scope', 'Event',
 );
 
 
-eventManControllers.controller('EventDetailsCtrl', ['$scope', 'Event', '$stateParams', '$log',
-    function ($scope, Event, $stateParams, $log) {
+eventManControllers.controller('EventDetailsCtrl', ['$scope', 'Event', 'Person', '$stateParams', '$log',
+    function ($scope, Event, Person, $stateParams, $log) {
         $scope.personsOrderProp = 'name';
         $scope.eventsOrderProp = '-begin-date';
         if ($stateParams.id) {
             $scope.event = Event.get($stateParams);
+            $scope.allPersons = Person.all();
         }
         // store a new Event or update an existing one
         $scope.save = function() {
@@ -75,6 +76,23 @@ eventManControllers.controller('EventDetailsCtrl', ['$scope', 'Event', '$statePa
                 $scope.eventForm.$dirty = false;
         };
 
+        $scope.fastAddPerson = function(newPerson) {
+            $log.debug('EventDetailsCtrl.fastAddPerson.newPerson:');
+            $log.debug(newPerson);
+            var person = new Person(newPerson);
+            person.$save(function(p) {
+                var data = angular.copy(p);
+                data.person_id = data._id;
+                data._id = $stateParams.id;
+                data.attended = true;
+                Event.addAttendee(data, function() {
+                    $scope.event = Event.get($stateParams);
+                    $scope.allPersons = Person.all();
+                    $scope.newPerson = {};
+                });
+            });
+        };
+
         $scope.updateAttendee = function(person, attended) {
             $log.debug('EventDetailsCtrl.event_id: ' + $stateParams.id);
             $log.debug('EventDetailsCtrl.person_id: ' + person.person_id);