modal dialog to confirm destructive actions

angular_app/events-list.html

@@ -25,6 +25,7 @@
                 </div>
             </form>
 
+            <div ng-include=" 'modal-confirm-action.html' " class="hidden"></div>
             <table class="table table-striped">
                 <thead>
                     <tr>

angular_app/js/controllers.js

@@ -38,15 +38,44 @@ eventManControllers.controller('DatetimePickerCtrl', ['$scope',
 );
 
 
-eventManControllers.controller('EventsListCtrl', ['$scope', 'Event',
+/* Controller for modals. */
-    function ($scope, Event) {
+eventManControllers.controller('ModalConfirmInstanceCtrl', ['$scope', '$modalInstance', 'message',
+    function ($scope, $modalInstance, message) {
+        $scope.message = message;
+
+        $scope.ok = function () {
+            $modalInstance.close($scope);
+        };
+
+        $scope.cancel = function () {
+            $modalInstance.dismiss('cancel');
+        };
+    }]
+);
+
+
+eventManControllers.controller('EventsListCtrl', ['$scope', 'Event', '$modal', '$log',
+    function ($scope, Event, $modal, $log) {
         $scope.events = Event.all();
         $scope.personsOrderProp = 'name';
         $scope.eventsOrderProp = "'-begin-date'";
 
         $scope.remove = function(_id) {
-            Event.remove({'id': _id}, function() {
+            var modalInstance = $modal.open({
-                $scope.events = Event.all();
+                scope: $scope,
+                templateUrl: 'modal-confirm-action.html',
+                controller: 'ModalConfirmInstanceCtrl',
+                resolve: {
+                    // XXX: must be converted in a i18n-able form.
+                    message: function() { return 'You really want to delete this event?'; }
+                }
+            });
+            modalInstance.result.then(function() {
+                console.debug('here');
+                Event.remove({'id': _id}, function() {
+                    $scope.events = Event.all();
+                    }
+                );
             });
         };
     }]
@@ -225,8 +254,8 @@ eventManControllers.controller('EventDetailsCtrl', ['$scope', 'Event', 'Person',
 );
 
 
-eventManControllers.controller('PersonsListCtrl', ['$scope', 'Person', 'Setting',
+eventManControllers.controller('PersonsListCtrl', ['$scope', 'Person', 'Setting', '$modal',
-    function ($scope, Person, Setting) {
+    function ($scope, Person, Setting, $modal) {
         $scope.persons = Person.all();
         $scope.personsOrder = ["name", "surname"];
         $scope.customFields = Setting.query({setting: 'person_custom_field',
@@ -259,8 +288,21 @@ eventManControllers.controller('PersonsListCtrl', ['$scope', 'Person', 'Setting'
         };
 
         $scope.remove = function(_id) {
-            Person.remove({'id': _id}, function() {
+            var modalInstance = $modal.open({
-                $scope.persons = Person.all();
+                scope: $scope,
+                templateUrl: 'modal-confirm-action.html',
+                controller: 'ModalConfirmInstanceCtrl',
+                resolve: {
+                    // XXX: must be converted in a i18n-able form.
+                    message: function() { return 'You really want to delete this person?'; }
+                }
+            });
+            modalInstance.result.then(function() {
+                console.debug('here');
+                Person.remove({'id': _id}, function() {
+                    $scope.persons = Person.all();
+                    }
+                );
             });
         };
     }]

angular_app/modal-confirm-action.html

@@ -0,0 +1,16 @@
+<div>
+    <script type="text/ng-template" id="modal-confirm-action.html">
+        <div class="modal-header">
+            <h3>{{'Confirm' | translate}}</h3>
+        </div>
+
+        <div class="modal-body">
+            {{message}}
+        </div>
+
+        <div class="modal-footer">
+            <button class="btn btn-primary" ng-click="ok()">{{'Ok' | translate}}</button>
+            <button class="btn btn-warning" ng-click="cancel()">{{'Cancel' | translate}}</button>
+        </div>
+    </script>
+</div>

angular_app/persons-list.html

@@ -32,6 +32,7 @@
                 </div>
             </form>
 
+            <div ng-include=" 'modal-confirm-action.html' " class="hidden"></div>
             <table class="table table-striped">
                 <thead>
                     <tr>