Added details page for TPS profiles.

A new page has been added to view TPS profile details. The properties are
displayed in a table which provides pagination and search functionality.
Currently the page is read-only. The edit functionality will be added
separately later.

Previously the ProfileData had a problem with JSON mapping because it
incorrectly included a PropertyNames attribute. To fix the problem the
class has been modified to require explicit JAXB mapping by setting the
@XmlAccessorType to NONE.

New CSS classes have been added to format the details page.

Ticket #654

2 files changed, 76 insertions, 0 deletions

diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index dfab67c4e..ee82aca24 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -78,10 +78,19 @@ table tfoot tr th {
   padding: 0 0 0 13px;
 }
 
+.pki-property-name-column {
+  width: 500px;
+}
+
 .pagination {
   margin: 4px;
 }
 
+.pki-fields fieldset label {
+  min-width: 100px;
+  display: inline-block;
+}
+
 .pki-table-actions {
   padding: 1px;
   border-top: none;
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 6b12ca010..e64938206 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -680,3 +680,70 @@ var Table = Backbone.View.extend({
         self.render();
     }
 });
+
+var PropertiesTableItem = TableItem.extend({
+    initialize: function(options) {
+        var self = this;
+        PropertiesTableItem.__super__.initialize.call(self, options);
+    },
+    id: function() {
+        var self = this;
+        return self.property.name;
+    },
+    renderColumn: function(td) {
+        var self = this;
+        td.text(self.property.value);
+    }
+});
+
+var PropertiesTable = Table.extend({
+    initialize: function(options) {
+        var self = this;
+        options.tableItem = options.tableItem || PropertiesTableItem;
+        PropertiesTable.__super__.initialize.call(self, options);
+        self.properties = options.properties;
+    },
+    render: function() {
+        var self = this;
+
+        // perform manual filter
+        var filter = self.searchField.val();
+        if (filter === "") {
+            self.entries = self.properties;
+
+        } else {
+            self.entries = [];
+            _(self.properties).each(function(item, index) {
+                // select properties whose names or values contain the filter
+                if (item.name.indexOf(filter) >= 0 || item.value.indexOf(filter) >= 0) {
+                    self.entries.push(item);
+                }
+            });
+        }
+
+        self.renderControls();
+
+        _(self.items).each(function(item, index) {
+            self.renderRow(item, index);
+        });
+    },
+    totalEntries: function() {
+        var self = this;
+        return self.entries.length;
+    },
+    open: function(item) {
+    },
+    renderRow: function(item, index) {
+        var self = this;
+        var i = (self.page - 1) * self.pageSize + index;
+        if (i < self.entries.length) {
+            // show entry in existing row
+            item.property = self.entries[i];
+            item.render();
+
+        } else {
+            // clear unused row
+            item.reset();
+        }
+    }
+});