Improved inline edit feature

api/event/event.controller.js

@@ -13,7 +13,7 @@ exports.create = function(req, res){
 exports.show = function(req, res, next){
     Event.findById(req.params.id, function(err, event){
         if (err) return handleError(res, err);
-        if (!event) return res.status(404);
+        if (!event) return res.status(404).end();
         return res.json(event);
     });
 }
@@ -39,6 +39,23 @@ exports.createParticipant = function(req, res, next){
     });
 }
 
+exports.updateParticipant = function(req, res, next){
+    var eventId = req.params.id;
+    var participantId = req.params.pid;
+    Event.update({
+        '_id' : eventId,
+        'participants._id': participantId
+    }, {
+        '$set': {
+            'updated' : Date.now(),
+            'participants.$' : req.body
+        }
+    }, function(err, num){
+        if (err) return next(err);
+        res.status(204).end();
+    });
+}
+
 exports.deleteParticipant = function(req, res, next){
     var eventId = req.params.id;
     var participantId = req.params.pid;

api/event/index.js

@@ -9,4 +9,5 @@ router.get('/:id', controller.show);
 router.post('/:id/participant', controller.createParticipant);
 router.put('/:id', controller.update);
 router.delete('/:id/participant/:pid', controller.deleteParticipant);
+router.put('/:id/participant/:pid', controller.updateParticipant);
 module.exports = router;

public/js/controllers/event.controller.js

@@ -1,7 +1,9 @@
 angular.module('rallly')
 .controller('EventCtrl', function($scope, $http, $state, Event, Participant){
     var id = $state.params.id;
-    $scope.event = Event.get({id:id});
+    $scope.event = Event.get({id:id}, function(data){}, function(e){
+        $state.go('notfound');
+    });
     $scope.delete = function(participant){
         if (confirm("Are you sure you want to remove "+participant.name+"?")){
             Participant.remove({ id : id , pid : participant._id }, function(event){
@@ -12,7 +14,11 @@ angular.module('rallly')
     $scope.defaults = [];
 
     $scope.update = function(participant){
-        Event.update({'_id':$scope.event.id}, $scope.event);
+        Participant.update({
+            id : $scope.event._id,
+            pid : participant._id
+        }, participant);
+        // Event.update({'_id':$scope.event.id}, $scope.event);
     }
     $scope.edit = function(participant){
         $scope.defaults[$scope.event.participants.indexOf(participant)] = angular.copy(participant);

public/js/main.js

@@ -28,5 +28,7 @@ angular.module('rallly', ['ui.router','ngResource','ngFx'])
         });
     })
     .factory('Participant', function($resource){
-        return $resource('/api/event/:id/participant/:pid', { id: '@_id', pid : '@pid'});
+        return $resource('/api/event/:id/participant/:pid', { id: '@_id', pid : '@pid'}, {
+            'update' : { method : 'PUT' }
+        });
     });

public/scss/partials/_buttons.scss

@@ -16,6 +16,9 @@
     color: $dark-gray-clr;
     text-decoration:none;
     padding: em(8px) em(20px);
+    &.danger {
+        color: $red-clr;
+    }
     &:focus {
         outline:0;
     }

public/scss/partials/_event.scss

@@ -15,6 +15,23 @@
         padding-bottom:em(10px);
         box-shadow: 0 3px 0 rgba(black, 0.05);
     }
+    tr:nth-child(even){
+        td {
+            background: #F9FAFA;
+        }
+    }
+    tr:hover {
+        td {
+            color: $blue-clr;
+            background: rgba(#F6FBFF,0.5);
+        }
+        .hover {
+            visibility:visible;
+        }
+    }
+    .hover {
+        visibility: hidden;
+    }
     td {
         &.center {
             text-align:center;
@@ -29,7 +46,7 @@
     .event-poll-user {
         text-align:left;
         font-size: em(14px);
-        padding: em(12px) em(10px);
+        padding: em(12px) em(20px);
         img {
             margin-right: 5px;
         }
@@ -37,6 +54,7 @@
             border:1px solid #ddd;
             padding: em(5px) em(10px);
             border-radius: 3px;
+            color: $text-clr;
             &:focus {
                 outline:0;
                 border-color: $primary-clr;

public/templates/event.html

@@ -1,22 +1,19 @@
-<div ng-show="event">
+<div ng-show="event._id">
     <div class="event-details">
-        <h1>{{event.title}}</h1>
+        <h1 class="fx-rotate-clock">{{event.title}}</h1>
         <ul class="event-detail-list">
             <li class="event-created-by">
-                Created by <a href="{{event.creator.email}}">{{event.creator.name}}</a>
+                Created by: <a href="{{event.creator.email}}">{{event.creator.name}}</a>
             </li>
             <li>
-                Created on {{event.created | date : 'short'}}
+                Created on: {{event.created | date : 'medium'}}
             </li>
             <li>
-                Last updated {{event.updated | date : 'short'}}
+                Last updated: {{event.updated | date : 'medium'}}
             </li>
             <li ng-show="event.location" class="event-location">
                 {{event.location}}
             </li>
-            <li ng-show="event.participants.length">
-                {{event.participants.length}} participants
-            </li>
         </ul>
         <div ng-show="event.description" class="event-description">{{event.description}}</div>
     </div>
@@ -61,10 +58,10 @@
                                 <input ng-model="participant.dates[$index]" ng-show="editMode" ng-false-value="false" type="checkbox" />
                             </td>
                             <td>
-                                <a ng-hide="editMode" href="javascript:" ng-click="editMode = true; edit(participant)" class="btn-primary">Edit</a>
+                                <a ng-hide="editMode" href="javascript:" ng-click="editMode = true; edit(participant)" class="btn-primary hover">Edit</a>
-                                <a ng-hide="editMode" href="javascript:" ng-click="delete(participant)" class="btn-primary">Delete</a>
+                                <a ng-hide="editMode" href="javascript:" ng-click="delete(participant)" class="btn-primary danger hover">Delete</a>
-                                <a ng-show="editMode" href="javascript:" ng-click="editMode = false; update(participant)" class="btn-primary">Save</a>
+                                <a ng-show="editMode" href="javascript:" ng-click="editMode = false; update(participant)" class="btn-primary hover">Save</a>
-                                <a ng-show="editMode" href="javascript:" ng-click="editMode = false; cancel($index)" class="btn-primary">Cancel</a>
+                                <a ng-show="editMode" href="javascript:" ng-click="editMode = false; cancel($index)" class="btn-primary hover">Cancel</a>
                             </td>
                         </tr>
                         <tr class="event-poll-input">