From 667aeca7edf57f42a55cf7f07b8762bf555f818e Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Mon, 24 Mar 2014 13:37:46 -0400
Subject: [PATCH] Refactored UI framework.

The current UI table assumes that the entries will be stored in a
Collection object. Some tables might need different storage mechanisms,
so the Table and TableItem classes have been refactored to allow sub-
classes to override some of the operations. The Table initial render()
method now will have to be called explicitly after object creation.

The load() method in the Navigation class has been modified to pass the
container element to the page being loaded.

Ticket #654
---
 base/server/share/webapps/pki/js/pki-ui.js         | 90 +++++++++++++---------
 base/tps-tomcat/shared/webapps/tps/js/activity.js  |  5 +-
 .../shared/webapps/tps/js/authenticator.js         |  5 +-
 base/tps-tomcat/shared/webapps/tps/js/cert.js      |  5 +-
 .../tps-tomcat/shared/webapps/tps/js/connection.js |  5 +-
 base/tps-tomcat/shared/webapps/tps/js/group.js     |  5 +-
 base/tps-tomcat/shared/webapps/tps/js/profile.js   |  3 +-
 base/tps-tomcat/shared/webapps/tps/js/selftest.js  |  5 +-
 base/tps-tomcat/shared/webapps/tps/js/token.js     |  5 +-
 base/tps-tomcat/shared/webapps/tps/js/user.js      |  5 +-
 10 files changed, 81 insertions(+), 52 deletions(-)

diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 079a36809e34cdfc15aefe48cdaf61e3c698fe1b..6b12ca010a98e4b5736e0cbc7872130123cc7abb 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -131,7 +131,7 @@ var Page = Backbone.View.extend({
 
         self.url = options.url;
     },
-    load: function() {
+    load: function(container) {
     }
 });
 
@@ -173,7 +173,7 @@ var Navigation = Backbone.View.extend({
             return;
         }
         self.content.load(page.url, function(response, status, xhr) {
-            page.load();
+            page.load(self.content);
         });
     }
 });
@@ -427,13 +427,13 @@ var TableItem = Backbone.View.extend({
 
             if (td.hasClass("pki-select-column")) {
                 // generate a unique id based on model id
-                var id = prefix + self.model.id;
+                var id = prefix + self.id();
 
                 // set the unique id and value for checkbox
                 var checkbox = $("input[type='checkbox']", td);
                 checkbox.attr("id", id);
                 checkbox.attr("checked", false);
-                checkbox.val(self.model.id);
+                checkbox.val(self.id());
 
                 // point the label to the checkbox and make it visible
                 var label = $("label", td);
@@ -445,7 +445,7 @@ var TableItem = Backbone.View.extend({
                 td.empty();
                 $("<a/>", {
                     href: "#",
-                    text: self.model.id,
+                    text: self.id(),
                     click: function(e) {
                         self.table.open(self);
                         e.preventDefault();
@@ -453,14 +453,25 @@ var TableItem = Backbone.View.extend({
                 }).appendTo(td);
 
             } else {
-                // show cell content in plain text
-                td.text(self.model.get(name));
-                // update cell automatically on model change
-                self.model.on("change:" + name, function(event) {
-                    td.text(self.model.get(name));
-                });
+                self.renderColumn(td);
             }
         });
+    },
+    id: function() {
+        var self = this;
+        return self.model.id;
+    },
+    renderColumn: function(td) {
+        var self = this;
+        var name = td.attr("name");
+
+        // show cell content in plain text
+        td.text(self.model.get(name));
+
+        // update cell automatically on model change
+        self.model.on("change:" + name, function(event) {
+            td.text(self.model.get(name));
+        });
     }
 });
 
@@ -471,6 +482,7 @@ var Table = Backbone.View.extend({
         Table.__super__.initialize.call(self, options);
         self.addDialog = options.addDialog;
         self.editDialog = options.editDialog;
+        self.tableItem = options.tableItem || TableItem;
 
         // number of table rows
         self.pageSize = options.pageSize || 5;
@@ -530,7 +542,7 @@ var Table = Backbone.View.extend({
         self.items = [];
         for (var i = 0; i < self.pageSize; i++) {
             var tr = self.template.clone();
-            var item = new TableItem({
+            var item = new self.tableItem({
                 el: tr,
                 table: self
             });
@@ -578,8 +590,6 @@ var Table = Backbone.View.extend({
             self.render();
             e.preventDefault();
         });
-
-        self.render();
     },
     render: function() {
         var self = this;
@@ -596,30 +606,12 @@ var Table = Backbone.View.extend({
             reset: true,
             success: function(collection, response, options) {
 
-                // clear selection
-                self.selectAllCheckbox.attr("checked", false);
-
-                // display total entries
-                self.totalEntriesField.text(self.totalEntries());
-
-                // display current page number
-                self.pageField.val(self.page);
-
-                // calculate and display total number of pages
-                self.totalPages = Math.floor(Math.max(0, self.totalEntries() - 1) / self.pageSize) + 1;
-                self.totalPagesField.text(self.totalPages);
+                // update controls
+                self.renderControls();
 
                 // display entries
                 _(self.items).each(function(item, index) {
-                    if (index < self.collection.length) {
-                        // show entry in existing row
-                        item.model = self.collection.at(index);
-                        item.render();
-
-                    } else {
-                        // clear unused row
-                        item.reset();
-                    }
+                    self.renderRow(item, index);
                 });
             },
             error: function(collection, response, options) {
@@ -627,6 +619,34 @@ var Table = Backbone.View.extend({
             }
         });
     },
+    renderControls: function() {
+        var self = this;
+
+        // clear selection
+        self.selectAllCheckbox.attr("checked", false);
+
+        // display total entries
+        self.totalEntriesField.text(self.totalEntries());
+
+        // display current page number
+        self.pageField.val(self.page);
+
+        // calculate and display total number of pages
+        self.totalPages = Math.floor(Math.max(0, self.totalEntries() - 1) / self.pageSize) + 1;
+        self.totalPagesField.text(self.totalPages);
+    },
+    renderRow: function(item, index) {
+        var self = this;
+        if (index < self.collection.length) {
+            // show entry in existing row
+            item.model = self.collection.at(index);
+            item.render();
+
+        } else {
+            // clear unused row
+            item.reset();
+        }
+    },
     totalEntries: function() {
         var self = this;
         return self.collection.total;
diff --git a/base/tps-tomcat/shared/webapps/tps/js/activity.js b/base/tps-tomcat/shared/webapps/tps/js/activity.js
index 35ea96b285ada8f1e5b7fc4a8d71fded2356f965..a2d45147678f643c7e6c4c577e7cda5516c7779d 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/activity.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/activity.js
@@ -67,7 +67,7 @@ var ActivityCollection = Collection.extend({
 });
 
 var ActivityPage = Page.extend({
-    load: function() {
+    load: function(container) {
         var editDialog = new Dialog({
             el: $("#activity-dialog"),
             title: "Edit Activity",
@@ -75,10 +75,11 @@ var ActivityPage = Page.extend({
                 "operation", "result", "date"]
         });
 
-        new Table({
+        var table = new Table({
             el: $("table[name='activities']"),
             collection: new ActivityCollection(),
             editDialog: editDialog
         });
+        table.render();
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
index 83a7805a868156fe9cf1caae88e9fe449030fa4a..713b6ceeee3b81980d539f07cdc5d902b9e9957c 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
@@ -125,17 +125,18 @@ var AuthenticatorDialog = Dialog.extend({
 });
 
 var AuthenticatorPage = Page.extend({
-    load: function() {
+    load: function(container) {
         var editDialog = new AuthenticatorDialog({
             el: $("#authenticator-dialog"),
             title: "Edit Authenticator",
             readonly: ["id", "status"]
         });
 
-        new Table({
+        var table = new Table({
             el: $("table[name='authenticators']"),
             collection: new AuthenticatorCollection(),
             editDialog: editDialog
         });
+        table.render();
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/cert.js b/base/tps-tomcat/shared/webapps/tps/js/cert.js
index 9163db4fb828e836acc8a8e00e3f7214904b5588..51fa8b8ac807ef95a2f0ce7e7e32b412b0753878 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/cert.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/cert.js
@@ -73,7 +73,7 @@ var CertificateCollection = Collection.extend({
 });
 
 var CertificatePage = Page.extend({
-    load: function() {
+    load: function(container) {
         var editDialog = new Dialog({
             el: $("#certificate-dialog"),
             title: "Edit Certificate",
@@ -81,10 +81,11 @@ var CertificatePage = Page.extend({
             "keyType", "status", "createTime", "modifyTime"]
         });
 
-        new Table({
+        var table = new Table({
             el: $("table[name='certificates']"),
             collection: new CertificateCollection(),
             editDialog: editDialog
         });
+        table.render();
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/connection.js b/base/tps-tomcat/shared/webapps/tps/js/connection.js
index c55cad0f74ceed19cd9ed468a5f922143b96ff49..53eb12f3b799bb86a67603cd0b8e97b87195dd95 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/connection.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/connection.js
@@ -125,17 +125,18 @@ var ConnectionDialog = Dialog.extend({
 });
 
 var ConnectionPage = Page.extend({
-    load: function() {
+    load: function(container) {
         var editDialog = new ConnectionDialog({
             el: $("#connection-dialog"),
             title: "Edit Connection",
             readonly: ["id", "status"]
         });
 
-        new Table({
+        var table = new Table({
             el: $("table[name='connections']"),
             collection: new ConnectionCollection(),
             editDialog: editDialog
         });
+        table.render();
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/group.js b/base/tps-tomcat/shared/webapps/tps/js/group.js
index fe558133ec433118fce6ff6f6197b6db0de61bec..101545454d8d1f26c3f9d8d9dbd975e16000c129 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/group.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/group.js
@@ -56,7 +56,7 @@ var GroupCollection = Collection.extend({
 });
 
 var GroupPage = Page.extend({
-    load: function() {
+    load: function(container) {
         var addDialog = new Dialog({
             el: $("#group-dialog"),
             title: "Add Group",
@@ -70,11 +70,12 @@ var GroupPage = Page.extend({
             actions: ["cancel", "save"]
         });
 
-        new Table({
+        var table = new Table({
             el: $("table[name='groups']"),
             collection: new GroupCollection(),
             addDialog: addDialog,
             editDialog: editDialog
         });
+        table.render();
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile.js b/base/tps-tomcat/shared/webapps/tps/js/profile.js
index dde917f17961f57996dd52e3bec5b66f7c9036d4..fbba2c9ec8cbd5112c2e3ab87d22284389ba6593 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile.js
@@ -132,10 +132,11 @@ var ProfilePage = Page.extend({
             readonly: ["id", "status"]
         });
 
-        new Table({
+        var table = new Table({
             el: $("table[name='profiles']"),
             collection: new ProfileCollection(),
             editDialog: editDialog
         });
+        table.render();
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/selftest.js b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
index c4991e7b3d08352b235d31c7d84595c33b39c0b9..7ee988d63329401d2d6bbd95ebe6bf5ec2cb53f7 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/selftest.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
@@ -61,17 +61,18 @@ var SelfTestCollection = Collection.extend({
 });
 
 var SelfTestPage = Page.extend({
-    load: function() {
+    load: function(container) {
         var editDialog = new Dialog({
             el: $("#selftest-dialog"),
             title: "Edit Self Test",
             readonly: ["id", "enabledAtStartup", "criticalAtStartup", "enabledOnDemand", "criticalOnDemand"]
         });
 
-        new Table({
+        var table = new Table({
             el: $("table[name='selftests']"),
             collection: new SelfTestCollection(),
             editDialog: editDialog
         });
+        table.render();
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/token.js b/base/tps-tomcat/shared/webapps/tps/js/token.js
index 573e40eaf83c3716e52a5275b881082f9e535f34..6f0750ee513627e8e428380e9fa410ad795bdaf7 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/token.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/token.js
@@ -74,7 +74,7 @@ var TokenCollection = Collection.extend({
 });
 
 var TokenPage = Page.extend({
-    load: function() {
+    load: function(container) {
         var addDialog = new Dialog({
             el: $("#token-dialog"),
             title: "Add Token",
@@ -91,11 +91,12 @@ var TokenPage = Page.extend({
             actions: ["cancel", "save"]
         });
 
-        new Table({
+        var table = new Table({
             el: $("table[name='tokens']"),
             collection: new TokenCollection(),
             addDialog: addDialog,
             editDialog: editDialog
         });
+        table.render();
     }
 });
diff --git a/base/tps-tomcat/shared/webapps/tps/js/user.js b/base/tps-tomcat/shared/webapps/tps/js/user.js
index 68f50113756a52aa00dfbbf1dc1cf6835b895ed8..7cfb1eaf295e87f3d3c00ac0ebbc45539e8e92c1 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/user.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/user.js
@@ -119,7 +119,7 @@ var UserDialog = Dialog.extend({
 });
 
 var UserPage = Page.extend({
-    load: function() {
+    load: function(container) {
         var addDialog = new UserDialog({
             el: $("#user-dialog"),
             title: "Add User",
@@ -134,11 +134,12 @@ var UserPage = Page.extend({
             actions: ["cancel", "save"]
         });
 
-        new Table({
+        var table = new Table({
             el: $("table[name='users']"),
             collection: new UserCollection(),
             addDialog: addDialog,
             editDialog: editDialog
         });
+        table.render();
     }
 });
-- 
1.8.4.2

