From 25eae6fd27fa774a683db1389b7c081d72d2fa22 Mon Sep 17 00:00:00 2001 From: "Endi S. Dewata" Date: Fri, 11 Apr 2014 12:18:53 -0400 Subject: Replaced token dialog with token page. The dialog used to edit token attributes has been replaced with a details page since it will be required for breadcrumbs. A new HTML template has been added for this page. Changing token status now can be done both in token list page and in token details page. The EntryPage has been modified such that it requires the editable fields to be specified for the add mode. To improve the appearance, the input fields in all dialogs and pages will now appear as read-only while the data is still loading. Ticket #654 --- base/server/share/webapps/pki/js/pki-ui.js | 50 ++++--- .../shared/webapps/tps/js/authenticator.js | 1 + .../tps-tomcat/shared/webapps/tps/js/connection.js | 1 + .../shared/webapps/tps/js/profile-mapping.js | 1 + base/tps-tomcat/shared/webapps/tps/js/profile.js | 3 +- base/tps-tomcat/shared/webapps/tps/js/token.js | 143 ++++++++++++++++----- .../shared/webapps/tps/ui/activities.html | 21 ++- base/tps-tomcat/shared/webapps/tps/ui/audit.html | 6 +- .../shared/webapps/tps/ui/authenticator.html | 6 +- base/tps-tomcat/shared/webapps/tps/ui/certs.html | 27 ++-- base/tps-tomcat/shared/webapps/tps/ui/config.html | 6 +- .../shared/webapps/tps/ui/connection.html | 6 +- base/tps-tomcat/shared/webapps/tps/ui/groups.html | 6 +- base/tps-tomcat/shared/webapps/tps/ui/index.html | 2 +- .../shared/webapps/tps/ui/profile-mapping.html | 6 +- base/tps-tomcat/shared/webapps/tps/ui/profile.html | 6 +- .../shared/webapps/tps/ui/selftests.html | 15 ++- base/tps-tomcat/shared/webapps/tps/ui/token.html | 83 ++++++++++++ base/tps-tomcat/shared/webapps/tps/ui/tokens.html | 48 +++---- base/tps-tomcat/shared/webapps/tps/ui/users.html | 18 ++- 20 files changed, 320 insertions(+), 135 deletions(-) create mode 100644 base/tps-tomcat/shared/webapps/tps/ui/token.html diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js index 9ba801012..ce5d5ccff 100644 --- a/base/server/share/webapps/pki/js/pki-ui.js +++ b/base/server/share/webapps/pki/js/pki-ui.js @@ -473,13 +473,14 @@ var TableItem = Backbone.View.extend({ // add link handler $("a", td).click(function(e) { - self.open(td); e.preventDefault(); + self.open(td); }); }, open: function(td) { var self = this; - self.table.open(self); + var column = td.attr("name"); + self.table.open(self, column); } }); @@ -985,12 +986,6 @@ var EntryPage = Page.extend({ // Use blank entry. self.entry = {}; - // All fields are editable. - self.$(".pki-fields input").each(function(index) { - var input = $(this); - input.removeAttr("readonly"); - }); - } else { // Use fetched entry. self.entry = _.clone(self.model.attributes); @@ -998,33 +993,32 @@ var EntryPage = Page.extend({ // Show entry ID in the title. self.$("span[name='id']").text(self.entry.id); - if (self.mode == "edit") { - // Show editable fields. - self.$(".pki-fields input").each(function(index) { - var input = $(this); - var name = input.attr("name"); - if (_.contains(self.editable, name)) { - input.removeAttr("readonly"); - } else { - input.attr("readonly", "readonly"); - } - }); - - } else { // self.mode == "view" - // All fields are read-only. - self.$(".pki-fields input").each(function(index) { - var input = $(this); - input.attr("readonly", "readonly"); - }); - } } if (self.mode == "view") { - self.menu.show(); + // All fields are read-only. + self.$(".pki-fields input").each(function(index) { + var input = $(this); + input.attr("readonly", "readonly"); + }); + self.buttons.hide(); + self.menu.show(); } else { self.menu.hide(); + + // Show editable fields. + self.$(".pki-fields input").each(function(index) { + var input = $(this); + var name = input.attr("name"); + if (_.contains(self.editable, name)) { + input.removeAttr("readonly"); + } else { + input.attr("readonly", "readonly"); + } + }); + self.buttons.show(); } diff --git a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js index 37ef595b9..1996acb42 100644 --- a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js +++ b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js @@ -107,6 +107,7 @@ var AuthenticatorsTable = ModelTable.extend({ url: "authenticator.html", model: new AuthenticatorModel(), mode: "add", + editable: ["authenticatorID"], parentPage: self.parentPage }); diff --git a/base/tps-tomcat/shared/webapps/tps/js/connection.js b/base/tps-tomcat/shared/webapps/tps/js/connection.js index 77d9c0a8d..771d8f50f 100644 --- a/base/tps-tomcat/shared/webapps/tps/js/connection.js +++ b/base/tps-tomcat/shared/webapps/tps/js/connection.js @@ -107,6 +107,7 @@ var ConnectionsTable = ModelTable.extend({ url: "connection.html", model: new ConnectionModel(), mode: "add", + editable: ["connectionID"], parentPage: self.parentPage }); diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js b/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js index b7023faf1..26cafdedb 100644 --- a/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js +++ b/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js @@ -107,6 +107,7 @@ var ProfileMappingsTable = ModelTable.extend({ url: "profile-mapping.html", model: new ProfileMappingModel(), mode: "add", + editable: ["profileMappingID"], parentPage: self.parentPage }); diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile.js b/base/tps-tomcat/shared/webapps/tps/js/profile.js index 707b4410b..17aa26104 100644 --- a/base/tps-tomcat/shared/webapps/tps/js/profile.js +++ b/base/tps-tomcat/shared/webapps/tps/js/profile.js @@ -88,7 +88,7 @@ var ProfilesTable = ModelTable.extend({ ProfilesTable.__super__.initialize.call(self, options); self.parentPage = options.parentPage; }, - open: function(item) { + open: function(item, column) { var self = this; var page = new EntryWithPropertiesPage({ @@ -107,6 +107,7 @@ var ProfilesTable = ModelTable.extend({ url: "profile.html", model: new ProfileModel(), mode: "add", + editable: ["profileID"], parentPage: self.parentPage }); diff --git a/base/tps-tomcat/shared/webapps/tps/js/token.js b/base/tps-tomcat/shared/webapps/tps/js/token.js index c4d0e0e3e..c3b1f21c6 100644 --- a/base/tps-tomcat/shared/webapps/tps/js/token.js +++ b/base/tps-tomcat/shared/webapps/tps/js/token.js @@ -97,29 +97,113 @@ var TokenCollection = Collection.extend({ } }); -var TokenTableItem = TableItem.extend({ +var TokenPage = EntryPage.extend({ initialize: function(options) { var self = this; - PropertiesTableItem.__super__.initialize.call(self, options); + TokenPage.__super__.initialize.call(self, options); + self.parentPage = options.parentPage; }, - open: function(td) { + setup: function() { var self = this; - var name = td.attr("name"); - if (name != "status") { - TokenTableItem.__super__.open.call(self, td); + TokenPage.__super__.setup.call(self); + + self.changeStatusLink = $("a[name='changeStatus']", self.menu); + + self.changeStatusLink.click(function(e) { + + var dialog = new Dialog({ + el: $("#token-status-dialog"), + title: "Change Token Status", + readonly: ["tokenID"], + actions: ["cancel", "save"] + }); + + dialog.entry = _.clone(self.model.attributes); + + dialog.handler("save", function() { + + // save changes + dialog.save(); + + // check if the status was changed + if (dialog.entry.status != self.model.attributes.status) { + + self.model.changeStatus({ + status: dialog.entry.status, + success: function(data, textStatus, jqXHR) { + self.render(); + }, + error: function(jqXHR, textStatus, errorThrow) { + new ErrorDialog({ + el: $("#error-dialog"), + title: "HTTP Error " + jqXHR.responseJSON.Code, + content: jqXHR.responseJSON.Message + }).open(); + } + }); + } + + dialog.close(); + }); + + dialog.open(); + }); + }, + renderContent: function() { + var self = this; + + TokenPage.__super__.renderContent.call(self); + + if (self.mode == "add") { + self.changeStatusLink.hide(); + } else { + self.changeStatusLink.show(); + } + }, + close: function() { + var self = this; + if (self.parentPage) { + self.parentPage.open(); + } else { + TokenPage.__super__.close.call(self); + } + } +}); + +var TokensTable = ModelTable.extend({ + initialize: function(options) { + var self = this; + TokensTable.__super__.initialize.call(self, options); + self.parentPage = options.parentPage; + }, + open: function(item, column) { + var self = this; + + var model = self.collection.get(item.entry.id); + + if (column == "id") { + var page = new TokenPage({ + el: self.parentPage.$el, + url: "token.html", + model: model, + editable: ["userID", "type", "appletID", "keyInfo"] + }); + + page.open(); + return; } var dialog = new Dialog({ - el: $("#token-state-dialog"), - title: "Change Token State", + el: $("#token-status-dialog"), + title: "Change Token Status", readonly: ["tokenID", "userID", "type", "appletID", "keyInfo", "createTimestamp", "modifyTimestamp"], actions: ["cancel", "save"] }); - dialog.entry = _.clone(self.entry); + dialog.entry = _.clone(model.attributes); dialog.handler("save", function() { @@ -127,13 +211,12 @@ var TokenTableItem = TableItem.extend({ dialog.save(); // check if the status was changed - if (self.entry.status != dialog.entry.status) { + if (dialog.entry.status != model.attributes.status) { - var model = self.table.collection.get(self.entry.id); model.changeStatus({ status: dialog.entry.status, success: function(data, textStatus, jqXHR) { - self.table.render(); + self.render(); }, error: function(jqXHR, textStatus, errorThrow) { new ErrorDialog({ @@ -149,33 +232,31 @@ var TokenTableItem = TableItem.extend({ }); dialog.open(); + }, + add: function() { + var self = this; + + var page = new TokenPage({ + el: self.parentPage.$el, + url: "token.html", + model: new TokenModel(), + mode: "add", + editable: ["tokenID", "userID", "type", "appletID", "keyInfo"], + parentPage: self.parentPage + }); + + page.open(); } }); -var TokenPage = Page.extend({ +var TokensPage = Page.extend({ load: function() { var self = this; - var addDialog = new Dialog({ - el: $("#token-dialog"), - title: "Add Token", - readonly: ["statusLabel", "createTimestamp", "modifyTimestamp"], - actions: ["cancel", "add"] - }); - - var editDialog = new Dialog({ - el: $("#token-dialog"), - title: "Edit Token", - readonly: ["tokenID", "statusLabel", "createTimestamp", "modifyTimestamp"], - actions: ["cancel", "save"] - }); - - var table = new ModelTable({ + var table = new TokensTable({ el: $("table[name='tokens']"), collection: new TokenCollection(), - addDialog: addDialog, - editDialog: editDialog, - tableItem: TokenTableItem + parentPage: self }); table.render(); diff --git a/base/tps-tomcat/shared/webapps/tps/ui/activities.html b/base/tps-tomcat/shared/webapps/tps/ui/activities.html index 760cfebfe..8f6aabfb3 100644 --- a/base/tps-tomcat/shared/webapps/tps/ui/activities.html +++ b/base/tps-tomcat/shared/webapps/tps/ui/activities.html @@ -84,13 +84,20 @@
-
-
-
-
-
-
-
+ +
+ +
+ +
+ +
+ +
+ +
+ +