From 15fcf046f430c5126e673bd9e44d09a8088449bb Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Wed, 18 Dec 2013 06:56:43 -0500
Subject: [PATCH] Added checkboxes for selecting table rows.

The tables have been modified to provide a checkbox on each row
to select the entry for subsequent operations. The checkbox in
the column header can be used to select/deselect all rows at once.

Ticket #654
---
 base/server/share/webapps/pki/css/pki-ui.css       |  9 ++++
 base/server/share/webapps/pki/js/pki-ui.js         | 52 ++++++++++++++++------
 base/tps-tomcat/shared/webapps/tps/activities.html |  6 ++-
 .../shared/webapps/tps/authenticators.html         |  6 ++-
 base/tps-tomcat/shared/webapps/tps/certs.html      |  6 ++-
 .../tps-tomcat/shared/webapps/tps/connections.html |  6 ++-
 base/tps-tomcat/shared/webapps/tps/groups.html     |  6 ++-
 base/tps-tomcat/shared/webapps/tps/profiles.html   |  6 ++-
 base/tps-tomcat/shared/webapps/tps/selftests.html  |  6 ++-
 base/tps-tomcat/shared/webapps/tps/tokens.html     |  6 ++-
 base/tps-tomcat/shared/webapps/tps/users.html      |  6 ++-
 11 files changed, 84 insertions(+), 31 deletions(-)

diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index 3f1729f13c8bcfceab8f8e495936844d751c915a..5e8d90a804a36962f2d14f231625eed7865eb5e2 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -73,3 +73,12 @@ table tfoot tr th {
   );
   border-bottom: 1px #cedede solid;
 }
+
+table .checkbox {
+  width: 13px;
+}
+
+table .checkbox input + label {
+  width: 13px;
+  padding: 0px;
+}
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 62bd2a2bfd76dcf1950f3fa57919bfcc8415c60e..dc41668c6f7b617c4f0f44155600801e52588272 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -306,6 +306,16 @@ var Dialog = Backbone.View.extend({
     }
 });
 
+var BlankTableItem = Backbone.View.extend({
+    render: function() {
+        var self = this;
+        $("td:first", self.$el).each(function(index) {
+            var item = $(this);
+            item.html("&nbsp;");
+        });
+    }
+});
+
 var TableItemView = Backbone.View.extend({
     initialize: function(options) {
         var self = this;
@@ -314,17 +324,25 @@ var TableItemView = Backbone.View.extend({
     },
     render: function() {
         var self = this;
-        $("td", self.el).each(function(index) {
+        $("td", self.$el).each(function(index) {
             var item = $(this);
             var name = item.attr("name");
-            var value = self.model.get(name);
 
             if (index == 0) {
-                // link first cell to edit dialog
+                // setup select checkbox
+                var checkbox = $("input[type='checkbox']", item);
+                var id = checkbox.attr("id");
+                var label = $("label[for='" + id + "']", item);
+                id = id + "_" + self.model.id;
+                checkbox.attr("id", id);
+                label.attr("for", id);
+
+            } else if (index == 1) {
+                // setup link to edit dialog
                 item.empty();
                 $("<a/>", {
                     href: "#",
-                    text: value,
+                    text: self.model.get(name),
                     click: function(e) {
                         var dialog = self.table.editDialog;
                         dialog.model = self.model;
@@ -338,7 +356,7 @@ var TableItemView = Backbone.View.extend({
 
             } else {
                 // show cell content in plain text
-                item.text(value);
+                item.text(self.model.get(name));
                 // update cell automatically on model change
                 self.model.on("change:" + name, function(event) {
                     item.text(self.model.get(name));
@@ -357,14 +375,18 @@ var TableView = Backbone.View.extend({
         self.editDialog = options.editDialog;
 
         self.thead = $("thead", self.$el);
-        $("button[name=add]", self.thead).click(function(e) {
+        $("button[name='add']", self.thead).click(function(e) {
             var dialog = self.addDialog;
             dialog.model = new self.collection.model();
             dialog.once("close", function(event) {
                 self.render();
             });
             dialog.open();
-            e.preventDefault();
+        });
+
+        $("input[type='checkbox']", self.thead).click(function(e) {
+            var checked = $(this).is(":checked");
+            $("input[type='checkbox']", self.tbody).prop("checked", checked);
         });
 
         self.tbody = $("tbody", self.$el);
@@ -394,21 +416,25 @@ var TableView = Backbone.View.extend({
                 self.tbody.empty();
 
                 // display result page
-                _(self.collection.models).each(function(item) {
-                    var itemView = new TableItemView({
+                _(self.collection.models).each(function(model) {
+                    var item = new TableItemView({
                         el: self.template.clone(),
                         table: self,
-                        model: item
+                        model: model
                     });
-                    itemView.render();
-                    self.tbody.append(itemView.el);
+                    item.render();
+                    self.tbody.append(item.$el);
                 }, self);
 
                 // add blank lines
                 if (self.collection.options.size != undefined) {
                     var blanks = self.collection.options.size - self.collection.models.length;
                     for (var i = 0; i < blanks; i++) {
-                        self.tbody.append(self.template.clone());
+                        var item = new BlankTableItem({
+                            el: self.template.clone()
+                        });
+                        item.render();
+                        self.tbody.append(item.$el);
                     }
                 }
             }
diff --git a/base/tps-tomcat/shared/webapps/tps/activities.html b/base/tps-tomcat/shared/webapps/tps/activities.html
index 3edda45d289cac8174ae0b754d9d02f8886cb86e..b0a2469dbd5dea8e2e21fd88b661aa297502f5d2 100644
--- a/base/tps-tomcat/shared/webapps/tps/activities.html
+++ b/base/tps-tomcat/shared/webapps/tps/activities.html
@@ -47,12 +47,13 @@ $(function() {
 <table name="activities">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="7">
+         <th class="rcue-table-actions" colspan="8">
              <span><input type="text" placeholder="Search..."></span>
              <span><button>Add</button><button>Remove</button></span>
          </th>
     </tr>
     <tr>
+        <th class="checkbox"><input id="activity_selectall" type="checkbox"><label for="activity_selectall">&nbsp;</label></th>
         <th>Activity ID</th>
         <th>Token ID</th>
         <th>User ID</th>
@@ -64,6 +65,7 @@ $(function() {
 </thead>
 <tbody>
     <tr>
+        <td class="checkbox"><input id="activity_select" type="checkbox"><label for="activity_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="tokenID">&nbsp;</td>
         <td name="userID">&nbsp;</td>
@@ -75,7 +77,7 @@ $(function() {
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="7">
+         <th class="rcue-table-actions" colspan="8">
              <span>
                  <a href="#" class="prev">Prev</a>
                  <a href="#" class="next">Next</a>
diff --git a/base/tps-tomcat/shared/webapps/tps/authenticators.html b/base/tps-tomcat/shared/webapps/tps/authenticators.html
index a13f21c6c8f7b82a3a81b1a9c6fc4a3c60d853a3..68afa32787c539b83d75fa826d15e58ea8b86a63 100644
--- a/base/tps-tomcat/shared/webapps/tps/authenticators.html
+++ b/base/tps-tomcat/shared/webapps/tps/authenticators.html
@@ -46,25 +46,27 @@ $(function() {
 <table name="authenticators">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="2">
+         <th class="rcue-table-actions" colspan="3">
              <span><input type="text" placeholder="Search..."></span>
              <span><button>Add</button><button>Remove</button></span>
          </th>
     </tr>
     <tr>
+        <th class="checkbox"><input id="authenticator_selectall" type="checkbox"><label for="authenticator_selectall">&nbsp;</label></th>
         <th>Authenticator ID</th>
         <th>Status</th>
     </tr>
 </thead>
 <tbody>
     <tr>
+        <td class="checkbox"><input id="authenticator_select" type="checkbox"><label for="authenticator_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="2">
+         <th class="rcue-table-actions" colspan="3">
              <span>
                  <a href="#" class="prev">Prev</a>
                  <a href="#" class="next">Next</a>
diff --git a/base/tps-tomcat/shared/webapps/tps/certs.html b/base/tps-tomcat/shared/webapps/tps/certs.html
index c3a70501c455c3ce65323de32618a63c03affc6f..43b4052614f42897cd7ec43eff4b1a595daffa35 100644
--- a/base/tps-tomcat/shared/webapps/tps/certs.html
+++ b/base/tps-tomcat/shared/webapps/tps/certs.html
@@ -47,12 +47,13 @@ $(function() {
 <table name="certificates">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="9">
+         <th class="rcue-table-actions" colspan="10">
              <span><input type="text" placeholder="Search..."></span>
              <span><button>Add</button><button>Remove</button></span>
          </th>
     </tr>
     <tr>
+        <th class="checkbox"><input id="cert_selectall" type="checkbox"><label for="cert_selectall">&nbsp;</label></tdh>
         <th>Certificate ID</th>
         <th>Serial Number</th>
         <th>Subject</th>
@@ -66,6 +67,7 @@ $(function() {
 </thead>
 <tbody>
     <tr>
+        <td class="checkbox"><input id="cert_select" type="checkbox"><label for="cert_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="serialNumber">&nbsp;</td>
         <td name="subject">&nbsp;</td>
@@ -79,7 +81,7 @@ $(function() {
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="9">
+         <th class="rcue-table-actions" colspan="10">
              <span>
                  <a href="#" class="prev">Prev</a>
                  <a href="#" class="next">Next</a>
diff --git a/base/tps-tomcat/shared/webapps/tps/connections.html b/base/tps-tomcat/shared/webapps/tps/connections.html
index ba5a45331ee0555cb7866f103ec346422ae5efce..85eaf57c2df3278d2dfa918403e047e6a389f8d4 100644
--- a/base/tps-tomcat/shared/webapps/tps/connections.html
+++ b/base/tps-tomcat/shared/webapps/tps/connections.html
@@ -46,25 +46,27 @@ $(function() {
 <table name="connections">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="2">
+         <th class="rcue-table-actions" colspan="3">
              <span><input type="text" placeholder="Search..."></span>
              <span><button>Add</button><button>Remove</button></span>
          </th>
     </tr>
     <tr>
+        <th class="checkbox"><input id="connection_selectall" type="checkbox"><label for="connection_selectall">&nbsp;</label></th>
         <th>Connection ID</th>
         <th>Status</th>
     </tr>
 </thead>
 <tbody>
     <tr>
+        <td class="checkbox"><input id="connection_select" type="checkbox"><label for="connection_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="2">
+         <th class="rcue-table-actions" colspan="3">
              <span>
                  <a href="#" class="prev">Prev</a>
                  <a href="#" class="next">Next</a>
diff --git a/base/tps-tomcat/shared/webapps/tps/groups.html b/base/tps-tomcat/shared/webapps/tps/groups.html
index 5487e1c0d57d77659fe42d5fcf74fd2195aa03a2..bab15295c2deb1ea4e763fdf8f39b502138d35a6 100644
--- a/base/tps-tomcat/shared/webapps/tps/groups.html
+++ b/base/tps-tomcat/shared/webapps/tps/groups.html
@@ -54,7 +54,7 @@ $(function() {
 <table name="groups">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="2">
+         <th class="rcue-table-actions" colspan="3">
              <span><input type="text" placeholder="Search..."></span>
              <span>
                  <button name="add">Add</button>
@@ -63,19 +63,21 @@ $(function() {
          </th>
     </tr>
     <tr>
+        <th class="checkbox"><input id="group_selectall" type="checkbox"><label for="group_selectall">&nbsp;</label></th>
         <th>Group ID</th>
         <th>Description</th>
     </tr>
 </thead>
 <tbody>
     <tr>
+        <td class="checkbox"><input id="group_select" type="checkbox"><label for="group_select">&nbsp;</label></td>
         <td name="groupID">&nbsp;</td>
         <td name="description">&nbsp;</td>
     </tr>
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="2">
+         <th class="rcue-table-actions" colspan="3">
              <span>
                  <a href="#" class="prev">Prev</a>
                  <a href="#" class="next">Next</a>
diff --git a/base/tps-tomcat/shared/webapps/tps/profiles.html b/base/tps-tomcat/shared/webapps/tps/profiles.html
index 1ccc44346ab891258f006a238751339f5c3005d9..875ec793407889fc935974311a72e12aff1f8fbe 100644
--- a/base/tps-tomcat/shared/webapps/tps/profiles.html
+++ b/base/tps-tomcat/shared/webapps/tps/profiles.html
@@ -46,25 +46,27 @@ $(function() {
 <table name="profiles">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="2">
+         <th class="rcue-table-actions" colspan="3">
              <span><input type="text" placeholder="Search..."></span>
              <span><button>Add</button><button>Remove</button></span>
          </th>
     </tr>
     <tr>
+        <th class="checkbox"><input id="profile_selectall" type="checkbox"><label for="profile_selectall">&nbsp;</label></th>
         <th>Profile ID</th>
         <th>Status</th>
     </tr>
 </thead>
 <tbody>
     <tr>
+        <td class="checkbox"><input id="profile_select" type="checkbox"><label for="profile_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="2">
+         <th class="rcue-table-actions" colspan="3">
              <span>
                  <a href="#" class="prev">Prev</a>
                  <a href="#" class="next">Next</a>
diff --git a/base/tps-tomcat/shared/webapps/tps/selftests.html b/base/tps-tomcat/shared/webapps/tps/selftests.html
index 888542ec10da410fa6b75c13e012f4bcba2d890d..1f93655efc6ef47e615ca723a37a888b5ae67eb3 100644
--- a/base/tps-tomcat/shared/webapps/tps/selftests.html
+++ b/base/tps-tomcat/shared/webapps/tps/selftests.html
@@ -46,12 +46,13 @@ $(function() {
 <table name="selftests">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="5">
+         <th class="rcue-table-actions" colspan="6">
              <span><input type="text" placeholder="Search..."></span>
              <span><button>Add</button><button>Remove</button></span>
          </th>
     </tr>
     <tr>
+        <th class="checkbox"><input id="selftest_selectall" type="checkbox"><label for="selftest_selectall">&nbsp;</label></th>
         <th>Self Test ID</th>
         <th>Enabled at Statup</th>
         <th>Critical at Startup</th>
@@ -61,6 +62,7 @@ $(function() {
 </thead>
 <tbody>
     <tr>
+        <td class="checkbox"><input id="selftest_select" type="checkbox"><label for="selftest_select">&nbsp;</label></td>
         <td name="id">&nbsp;</td>
         <td name="enabledAtStartup">&nbsp;</td>
         <td name="criticalAtStartup">&nbsp;</td>
@@ -70,7 +72,7 @@ $(function() {
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="5">
+         <th class="rcue-table-actions" colspan="6">
              <span>
                  <a href="#" class="prev">Prev</a>
                  <a href="#" class="next">Next</a>
diff --git a/base/tps-tomcat/shared/webapps/tps/tokens.html b/base/tps-tomcat/shared/webapps/tps/tokens.html
index 6a0502c9e43f5df771106ecbbb7643458b0d25e7..a04a66b71acf514083ededaf64b81ecfe2f76ace 100644
--- a/base/tps-tomcat/shared/webapps/tps/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/tokens.html
@@ -57,7 +57,7 @@ $(function() {
 <table name="tokens">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="8">
+         <th class="rcue-table-actions" colspan="9">
              <span><input type="text" placeholder="Search..."></span>
              <span>
                  <button name="add">Add</button>
@@ -66,6 +66,7 @@ $(function() {
          </th>
     </tr>
     <tr>
+        <th class="checkbox"><input id="token_selectall" type="checkbox"><label for="token_selectall">&nbsp;</label></th>
         <th>Token ID</th>
         <th>User ID</th>
         <th>Status</th>
@@ -78,6 +79,7 @@ $(function() {
 </thead>
 <tbody>
     <tr>
+        <td class="checkbox"><input id="token_select" type="checkbox"><label for="token_select">&nbsp;</label></td>
         <td name="tokenID">&nbsp;</td>
         <td name="userID">&nbsp;</td>
         <td name="status">&nbsp;</td>
@@ -90,7 +92,7 @@ $(function() {
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="8">
+         <th class="rcue-table-actions" colspan="9">
              <span>
                  <a href="#" class="prev">Prev</a>
                  <a href="#" class="next">Next</a>
diff --git a/base/tps-tomcat/shared/webapps/tps/users.html b/base/tps-tomcat/shared/webapps/tps/users.html
index 0c95ad7cec94b4057e8936af7dc05c4ebd9c8299..eb86a3d6fe650f3e7cb152980cd8a672a81c8d52 100644
--- a/base/tps-tomcat/shared/webapps/tps/users.html
+++ b/base/tps-tomcat/shared/webapps/tps/users.html
@@ -55,7 +55,7 @@ $(function() {
 <table name="users">
 <thead>
     <tr>
-         <th class="rcue-table-actions" colspan="2">
+         <th class="rcue-table-actions" colspan="3">
              <span><input type="text" placeholder="Search..."></span>
              <span>
                  <button name="add">Add</button>
@@ -64,19 +64,21 @@ $(function() {
          </th>
     </tr>
     <tr>
+        <th class="checkbox"><input id="user_selectall" type="checkbox"><label for="user_selectall">&nbsp;</label></th>
         <th>User ID</th>
         <th>Full Name</th>
     </tr>
 </thead>
 <tbody>
     <tr>
+        <td class="checkbox"><input id="user_select" type="checkbox"><label for="user_select">&nbsp;</label></td>
         <td name="userID">&nbsp;</td>
         <td name="fullName">&nbsp;</td>
     </tr>
 </tbody>
 <tfoot>
     <tr>
-         <th class="rcue-table-actions" colspan="2">
+         <th class="rcue-table-actions" colspan="3">
              <span>
                  <a href="#" class="prev">Prev</a>
                  <a href="#" class="next">Next</a>
-- 
1.8.4.2

