ability to delete an entry

angular_app/events-list.html

@@ -1,7 +1,7 @@
 <!-- show a list of Events -->
-<div class="container-fluid">
+<div class="container">
     <div class="row">
-        <div class="col-md-10">
+        <div class="col-lg-12">
             Search: <input ng-model="query">
             Sort by:
             <select ng-model="orderProp">
@@ -10,16 +10,28 @@
             </select>
         </div>
     </div>
+</div>
 
-    <div class="row">
-        <div class="col-md-10">
-            <ul class="events">
-                <li ng-repeat="event in events | filter:query | orderBy:orderProp">
-                    <span><a href="/#/events/{{event._id}}">{{event.title}}</a></span>
-                    <p>{{event['begin-datetime']}}</p>
-                </li>
-            </ul>
-        </div>
-    </div>
+<div class="container">
+    <table class="table">
+        <thead>
+            <tr>
+                <td><strong>Event</strong></td>
+                <td><strong>Actions</strong></td>
+            </tr>
+        </thead>
+        <tbody>
+        <tr ng-repeat="event in events | filter:query | orderBy:orderProp">
+            <td>
+                <span><strong><a href="/#/events/{{event._id}}">{{event.title}}</a></strong></span>
+                <p>Begins: {{event['begin-datetime']}}<br/>
+                Ends: {{event['end-datetime']}}</p>
+            </td>
+            <td>
+                <button ng-click="remove(event._id)" type="button" class="btn btn-link glyphicon glyphicon-trash" aria-hidden="true"></button>
+            </td>
+        </tr>
+        </tbody>
+    </table>
 </div>
 

angular_app/js/controllers.js

@@ -20,6 +20,12 @@ eventManControllers.controller('EventsListCtrl', ['$scope', 'Event',
     function ($scope, Event) {
         $scope.events = Event.all();
         $scope.orderProp = 'begin-datetime';
+
+        $scope.remove = function(_id) {
+            Event.remove({'id': _id}, function() {
+                $scope.events = Event.all();
+            });
+        };
     }]
 );
 
@@ -45,6 +51,12 @@ eventManControllers.controller('PersonsListCtrl', ['$scope', 'Person',
     function ($scope, Person) {
         $scope.persons = Person.all();
         $scope.orderProp = 'name';
+
+        $scope.remove = function(_id) {
+            Person.remove({'id': _id}, function() {
+                $scope.persons = Person.all();
+            });
+        };
     }]
 );
 

angular_app/persons-list.html

@@ -1,7 +1,7 @@
 <!-- show a list of Persons -->
-<div class="container-fluid">
+<div class="container">
     <div class="row">
-        <div class="col-md-10">
+        <div class="col-lg-12">
             Search: <input ng-model="query">
             Sort by:
             <select ng-model="orderProp">
@@ -10,16 +10,26 @@
             </select>
         </div>
     </div>
-
-    <div class="row">
-        <div class="col-md-10">
-            <ul class="persons">
-                <li ng-repeat="person in persons | filter:query | orderBy:orderProp">
-                    <a href="/#/persons/{{person._id}}"><span>{{person.name}}</span>&nbsp;<span>{{person.surname}}</span></a>
-                    <p>{{person.email}}</p>
-                </li>
-            </ul>
-        </div>
-    </div>
 </div>
 
+<div class="container">
+    <table class="table">
+        <thead>
+            <tr>
+                <td><strong>Name</strong></td>
+                <td><strong>Actions</strong></td>
+            </tr>
+        </thead>
+        <tbody>
+        <tr ng-repeat="person in persons | filter:query | orderBy:orderProp">
+            <td>
+                <span><strong><a href="/#/persons/{{person._id}}"><span>{{person.name}}</span>&nbsp;<span>{{person.surname}}</span></a></strong></span>
+                <p>{{person.email}}</p>
+            </td>
+            <td>
+                <button ng-click="remove(person._id)" type="button" class="btn btn-link glyphicon glyphicon-trash" aria-hidden="true"></button>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>

eventman_server.py

@@ -76,7 +76,7 @@ class CollectionHandler(BaseHandler):
         else:
             # return an object containing the list of all objects in the collection;
             # e.g.: {'events': [{'_id': 'obj1-id, ...}, {'_id': 'obj2-id, ...}, ...]}
-            # Please, never return JSON lists that are not encapsulated in an object,
+            # Please, never return JSON lists that are not encapsulated into an object,
             # to avoid XSS vulnerabilities.
             self.write({self.collection: self.db.query(self.collection)})
 
@@ -91,9 +91,13 @@ class CollectionHandler(BaseHandler):
             newData = self.db.update(self.collection, id_, data)
         self.write(newData)
 
-    # PUT is handled by the POST method
+    # PUT (update an existing document) is handled by the POST (create a new document) method
     put = post
 
+    @gen.coroutine
+    def delete(self, id_=None, **kwargs):
+        self.db.delete(self.collection, id_)
+
 
 class PersonsHandler(CollectionHandler):
     """Handle requests for Persons."""