Added remove button handler for TPS UI.

The Table class has been modified to handle the remove button.
When the button is clicked, it will get the list of items selected
for deletion. If there is nothing selected it will not do anything.
If there are some items selected, it will display the list in a
dialog box and ask the user to confirm the deletion. If the operation
is confirmed, the items will be deleted one by one. The table will
be refreshed after the process is done.

In some pages the buttons have been updated to reflect the
availability of the add/remove operations for the corresponding
REST resources.

Ticket #654

1 files changed, 34 insertions, 1 deletions

diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 73ba63b26..44e0444da 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -391,14 +391,19 @@ var TableItem = Backbone.View.extend({
             var name = item.attr("name");
 
             if (index == 0) {
-                // setup select checkbox
+                // find the checkbox and label for this item
                 var checkbox = $("input[type='checkbox']", item);
                 var id = checkbox.attr("id");
                 var label = $("label[for='" + id + "']", item);
+
+                // replace checkbox and label id with a unique id
                 id = id + "_" + self.model.id;
                 checkbox.attr("id", id);
                 label.attr("for", id);
 
+                // store item id as checkbox value
+                checkbox.val(self.model.id);
+
             } else if (index == 1) {
                 // setup link to edit dialog
                 item.empty();
@@ -437,6 +442,8 @@ var Table = Backbone.View.extend({
         self.editDialog = options.editDialog;
 
         self.thead = $("thead", self.$el);
+
+        // setup add button handler
         $("button[name='add']", self.thead).click(function(e) {
             var dialog = self.addDialog;
             dialog.model = new self.collection.model();
@@ -446,6 +453,32 @@ var Table = Backbone.View.extend({
             dialog.open();
         });
 
+        // setup remove button handler
+        $("button[name='remove']", self.thead).click(function(e) {
+            var items = [];
+            var message = "Are you sure you want to remove the following entries?\n";
+
+            // get selected items
+            $("input:checked", self.tbody).each(function(index) {
+                var input = $(this);
+                var id = input.val();
+                items.push(id);
+                message = message + " - " + id + "\n";
+            });
+
+            if (items.length == 0) return;
+            if (!confirm(message)) return;
+
+            _.each(items, function(id, index) {
+                var model = self.collection.get(id);
+                model.destroy({
+                    wait: true
+                });
+            });
+
+            self.render();
+        });
+
         $("input[type='checkbox']", self.thead).click(function(e) {
             var checked = $(this).is(":checked");
             $("input[type='checkbox']", self.tbody).prop("checked", checked);