Added confirm dialog to graph deletion

js/apps/system/aardvark/frontend/js/routers/router.js

@@ -29,7 +29,8 @@
       "application/documentation/:key"      : "appDocumentation",
       "graph"                               : "graph",
       "graphManagement"                     : "graphManagement",
-      "graphManagement/add"                 : "graphAddNew"
+      "graphManagement/add"                 : "graphAddNew",
+      "graphManagement/delete/:name"        : "graphDelete"
     },
 
     initialize: function () {
@@ -281,6 +282,16 @@
       this.naviView.selectMenuItem('graphviewer-menu');
     },
 
+    graphDelete: function(name) {
+      if (!this.deleteGraphView) {
+        this.deleteGraphView = new window.DeleteGraphView({
+          collection: this.graphs
+        });
+      }
+      this.deleteGraphView.render(name);
+      this.naviView.selectMenuItem('graphviewer-menu');
+    },
+
     applications: function() {
       if (this.applicationsView === undefined) {
         this.applicationsView = new window.ApplicationsView({

js/apps/system/aardvark/frontend/js/templates/deleteGraphView.ejs

@@ -0,0 +1,15 @@
+<div id="delete-graph" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+    <a class="arangoHeader">Delete Graph</a>
+  </div>
+  <div class="modal-body">
+    <span class="deleteConfirm">
+      Do you really want to to delete graph <%=name%>?
+    </span>
+  </div>
+  <div class="modal-footer">
+    <button id="cancel" class="btn btn-warning">Cancel</button>
+    <button id="confirmDelete" class="btn btn-danger pull-right">Delete</button>
+  </div>
+</div>

js/apps/system/aardvark/frontend/js/views/deleteGraphView.js

@@ -0,0 +1,59 @@
+/*jslint indent: 2, nomen: true, maxlen: 100, vars: true, white: true, plusplus: true*/
+/*global Backbone, $, _, window, templateEngine, arangoHelper*/
+
+(function() {
+  "use strict";
+
+  window.DeleteGraphView = Backbone.View.extend({
+
+    el: '#modalPlaceholder',
+
+    template: templateEngine.createTemplate("deleteGraphView.ejs"),
+
+    events: {
+      "click #cancel": "hide",
+      "hidden": "hidden",
+      "click #confirmDelete": "deleteGraph"
+    },
+
+    deleteGraph: function() {
+      var self = this;
+      this.collection.get(this.name).destroy({
+        success: function() {
+          self.hide();
+        },
+        error: function() {
+          var response = JSON.parse(err.responseText),
+            msg = response.errorMessage;
+          arangoHelper.arangoError(msg);
+          self.hide();
+        }
+      });
+    },
+
+    hide: function() {
+      $('#delete-graph').modal('hide');
+    },
+
+    hidden: function () {
+      this.undelegateEvents();
+      window.App.navigate("graphManagement", {trigger: true});
+    },
+
+    render: function(name) {
+      if (!name) {
+        window.App.navigate("graphManagement", {trigger: true});
+      }
+      this.name = name;
+      $(this.el).html(this.template.render({
+        name: name
+      }));
+      this.delegateEvents();
+      $('#delete-graph').modal('show');
+      return this;
+    }
+
+  });
+
+}());
+

js/apps/system/aardvark/frontend/js/views/graphManagementView.js

@@ -18,14 +18,8 @@
     },
 
     deleteGraph: function(e) {
-      var key = $(e.target).closest("a").attr("id"),
-        self = this;
-      // Ask user for permission
-      this.collection.get(key).destroy({
-        success: function() {
-          self.render();
-         }
-      });
+      var key = $(e.target).closest("a").attr("id");
+      window.App.navigate("graphManagement/delete/" + key, {trigger: true});
     },
 
     render: function() {