From 5eb9f088f2c5c902a55aefdf9dd8b2a95e060837 Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Thu, 28 Apr 2011 17:38:21 -0500
Subject: Use entity names for tab state.

Previously the tab state is represented using numeric index such
as navigation=0&identity=1 which is not very user friendly. Now the
code has been modified to use entity names such as
navigation=identity&identity=group.
---
 install/ui/add.js                   |   5 +-
 install/ui/associate.js             |  10 +--
 install/ui/entity.js                |   4 +-
 install/ui/hbac.js                  |   5 +-
 install/ui/host.js                  |   5 +-
 install/ui/ipa.js                   |  15 ----
 install/ui/navigation.js            | 150 ++++++++++++++++++++----------------
 install/ui/search.js                |   7 +-
 install/ui/service.js               |   5 +-
 install/ui/test/navigation_tests.js |   4 +-
 install/ui/webui.js                 |   7 +-
 11 files changed, 99 insertions(+), 118 deletions(-)

(limited to 'install/ui')

diff --git a/install/ui/add.js b/install/ui/add.js
index 45b49899f..7a7bd086b 100644
--- a/install/ui/add.js
+++ b/install/ui/add.js
@@ -77,10 +77,7 @@ IPA.add_dialog = function (spec) {
                     var pkey_name = IPA.metadata.objects[that.entity_name].primary_key;
                     var pkey = record[pkey_name];
 
-                    var state = {};
-                    state[that.entity_name + '-facet'] = 'details';
-                    state[that.entity_name + '-pkey'] = pkey;
-                    $.bbq.pushState(state);
+                    IPA.nav.show_page(that.entity_name, 'details', pkey);
                 }
             );
         });
diff --git a/install/ui/associate.js b/install/ui/associate.js
index 77738bbab..632fcc52d 100644
--- a/install/ui/associate.js
+++ b/install/ui/associate.js
@@ -288,10 +288,7 @@ IPA.association_pkey_setup = function  (container, record) {
         'html': value,
         'click': function (value) {
             return function() {
-                var state = IPA.tab_state(other_entity);
-                state[other_entity + '-facet'] = 'default';
-                state[other_entity + '-pkey'] = value;
-                $.bbq.pushState(state);
+                IPA.nav.show_page(other_entity, 'default', value);
                 return false;
             };
         }(value)
@@ -776,10 +773,7 @@ IPA.association_facet = function (spec) {
                     'html': value,
                     'click': function (value) {
                         return function() {
-                            var state = IPA.tab_state(that.other_entity);
-                            state[that.other_entity + '-facet'] = 'default';
-                            state[that.other_entity + '-pkey'] = value;
-                            $.bbq.pushState(state);
+                            IPA.nav.show_page(that.other_entity, 'default', value);
                             return false;
                         };
                     }(value)
diff --git a/install/ui/entity.js b/install/ui/entity.js
index e6e63cd32..a4488756e 100644
--- a/install/ui/entity.js
+++ b/install/ui/entity.js
@@ -455,7 +455,7 @@ IPA.entity_header = function(spec){
                             return false;
                         }
 
-                        IPA.show_page(entity.name, 'search');
+                        IPA.nav.show_page(entity.name, 'search');
                         $(that.facet_tabs).find('a').removeClass('selected');
                         return false;
 
@@ -483,7 +483,7 @@ IPA.entity_header = function(spec){
                         return false;
                     }
                     var this_pkey = that.pkey_field.val();
-                    IPA.show_page(
+                    IPA.nav.show_page(
                         entity_name, other_facet_name,
                         this_pkey);
                     $(that.facet_tabs).find('a').removeClass('selected');
diff --git a/install/ui/hbac.js b/install/ui/hbac.js
index f0a9e214f..a7e36282c 100644
--- a/install/ui/hbac.js
+++ b/install/ui/hbac.js
@@ -121,10 +121,7 @@ IPA.hbacsvcgroup_member_hbacsvc_table_widget = function (spec) {
                 'html': value,
                 'click': function (value) {
                     return function() {
-                        var state = IPA.tab_state(that.other_entity);
-                        state[that.other_entity + '-facet'] = 'details';
-                        state[that.other_entity + '-pkey'] = value;
-                        $.bbq.pushState(state);
+                        IPA.nav.show_page(that.other_entity, 'details', value);
                         return false;
                     };
                 }(value)
diff --git a/install/ui/host.js b/install/ui/host.js
index bd694ee61..cf78970f8 100644
--- a/install/ui/host.js
+++ b/install/ui/host.js
@@ -379,10 +379,7 @@ IPA.host_managedby_host_facet = function (spec) {
                 'html': value,
                 'click': function (value) {
                     return function() {
-                        var state = IPA.tab_state(that.other_entity);
-                        state[that.other_entity + '-facet'] = 'details';
-                        state[that.other_entity + '-pkey'] = value;
-                        $.bbq.pushState(state);
+                        IPA.nav.show_page(that.other_entity, 'details', value);
                         return false;
                     };
                 }(value)
diff --git a/install/ui/ipa.js b/install/ui/ipa.js
index db60326e4..83b25e509 100644
--- a/install/ui/ipa.js
+++ b/install/ui/ipa.js
@@ -185,21 +185,6 @@ var IPA = ( function () {
         return true;
     };
 
-    that.show_page = function(entity_name, facet_name, pkey) {
-        if (!IPA.test_dirty()) {
-            return;
-        }
-
-        var state = {};
-
-        if (pkey) {
-            state[entity_name + '-pkey'] = pkey;
-        }
-
-        state[entity_name + '-facet'] = facet_name;
-        $.bbq.pushState(state);
-    };
-
     that.display_activity_icon = function() {
         that.network_call_count++;
         $('.network-activity-indicator').css('display','inline');
diff --git a/install/ui/navigation.js b/install/ui/navigation.js
index 3043b7c43..9b8f649df 100644
--- a/install/ui/navigation.js
+++ b/install/ui/navigation.js
@@ -30,7 +30,53 @@ IPA.navigation = function(spec) {
     that.container = spec.container;
     that.tab_class = spec.tab_class || 'tabs';
 
-    that.tabs = spec.tabs || [];
+    that.tabs = [];
+    that.tabs_by_name = {};
+
+    that.set_tabs = function(tabs) {
+        that.tabs = tabs;
+        that.tabs_by_name = {};
+
+        for (var i=0; i<tabs.length; i++) {
+            that.add_tab(tabs[i]);
+        }
+    };
+
+    that.add_tab = function(tab, parent) {
+        if (!tab.name) {
+            tab.name = tab.entity;
+        }
+        tab.parent = parent;
+
+        that.tabs_by_name[tab.name] = tab;
+
+        for (var i=0; tab.children && i<tab.children.length; i++) {
+            that.add_tab(tab.children[i], tab);
+        }
+    };
+
+    that.get_tab = function(name) {
+        return that.tabs_by_name[name];
+    };
+
+    that.get_path_state = function(name) {
+
+        var state = {};
+
+        var tab = that.get_tab(name);
+        var parent = tab.parent;
+
+        while (parent) {
+            state[parent.name] = tab.name;
+
+            tab = parent;
+            parent = tab.parent;
+        }
+
+        state[that.container.attr('id')] = tab.name;
+
+        return state;
+    };
 
     that.push_state = function(params) {
         if (!IPA.test_dirty()) {
@@ -48,6 +94,20 @@ IPA.navigation = function(spec) {
         $.bbq.removeState(key);
     };
 
+    that.show_page = function(entity_name, facet_name, pkey) {
+        var state = that.get_path_state(entity_name);
+
+        if (facet_name) {
+            state[entity_name + '-facet'] = facet_name;
+        }
+
+        if (pkey) {
+            state[entity_name + '-pkey'] = pkey;
+        }
+
+        that.push_state(state);
+    };
+
     that.create = function() {
 
         that._create(that.tabs, that.container, 1);
@@ -56,11 +116,9 @@ IPA.navigation = function(spec) {
         tabs.tabs({
             select: function(event, ui) {
                 var panel = $(ui.panel);
-                var parent = panel.parent();
-                var id = parent.attr('id');
-                var state = {};
-                state[id] = ui.index;
-                return that.push_state(state);
+                var name = panel.attr('id');
+
+                return that.show_page(name);
             }
         });
     };
@@ -75,10 +133,6 @@ IPA.navigation = function(spec) {
         for (var i=0; i<tabs.length; i++) {
             var tab = tabs[i];
 
-            if (!tab.name) {
-                tab.name = tab.entity;
-            }
-
             var label = tab.name;
             if (tab.entity) {
                 var entity = IPA.get_entity(tab.entity);
@@ -94,91 +148,55 @@ IPA.navigation = function(spec) {
                 label = tab.label;
             }
 
-            var li = that.create_tab_li(tab.name, label);
-            ul.append(li);
+            $('<li/>').append($('<a/>', {
+                href: '#'+tab.name,
+                title: tab.name,
+                html: label
+            })).appendTo(ul);
 
-            var div = that.create_tab_div(tab.name);
-            container.append(div);
+            tab.content = $('<div/>', {
+                id: tab.name
+            }).appendTo(container);
 
             if (tab.entity) {
-                div.addClass('entity-container');
+                tab.content.addClass('entity-container');
             }
 
             if (tab.children && tab.children.length) {
-                that._create(tab.children, div, depth+1);
+                that._create(tab.children, tab.content, depth+1);
             }
         }
     };
 
-    that.create_tab_li = function(id, name) {
-        return $('<li/>').append($('<a/>', {
-            href: '#'+id,
-            title: id,
-            html: name
-        }));
-    };
-
-    that.create_tab_div = function(id) {
-        return $('<div/>', {
-            id: id
-        });
-    };
-
     that.update = function() {
         that._update(that.tabs, that.container, 1);
     };
 
     that._update = function(tabs, container, depth) {
 
-        var id = container.attr('id');
-        var index = that.get_state(id);
-        if (!index || index >= tabs.length) index = 0;
+        var parent_name = container.attr('id');
+        var tab_name = that.get_state(parent_name);
+
+        var index = 0;
+        while (index < tabs.length && tabs[index].name != tab_name) index++;
+        if (index >= tabs.length) index = 0;
 
         container.tabs('select', index);
 
         var tab = tabs[index];
-        var container2 = $('#' + tab.name);
 
         if (tab.children && tab.children.length) {
-            that._update(tab.children, container2, depth+1);
+            that._update(tab.children, tab.content, depth+1);
 
         } else if (tab.entity) {
-            tab.entity.setup(container2);
+            tab.entity.setup(tab.content);
         }
     };
 
     // methods that should be invoked by subclasses
     that.navigation_update = that.update;
 
-    return that;
-};
+    that.set_tabs(spec.tabs);
 
-IPA.tab_state = function(entity_name,tab){
-    var state;
-    var i;
-    var children;
-    var tab_name;
-
-    if (!tab){
-        children = IPA.nav.tabs;
-        tab_name = 'navigation';
-    }else if (tab.children){
-        children = tab.children;
-        tab_name = tab.name;
-    }else if (tab.entity){
-        if (tab.entity.name === entity_name){
-            state = {};
-            state[entity_name] =  0;
-        }
-        return state;
-    }
-
-    for (i = 0; i < children.length; i +=1){
-        state = IPA.tab_state(entity_name,children[i]);
-        if (state){
-            state[tab_name] = i;
-            return state;
-        }
-    }
-    return null;
+    return that;
 };
diff --git a/install/ui/search.js b/install/ui/search.js
index 95847bf56..2add6f4c2 100644
--- a/install/ui/search.js
+++ b/install/ui/search.js
@@ -95,7 +95,7 @@ IPA.search_widget = function (spec) {
         var filter = that.filter.val();
         var state = {};
         state[that.entity_name + '-filter'] = filter;
-        $.bbq.pushState(state);
+        IPA.nav.push_state(state);
     };
 
     return that;
@@ -166,10 +166,7 @@ IPA.search_facet = function(spec) {
                 'html': value,
                 'click': function (value) {
                     return function() {
-                        var state = IPA.tab_state(that.entity_name);
-                        state[that.entity_name + '-facet'] = 'default';
-                        state[that.entity_name + '-pkey'] = value;
-                        $.bbq.pushState(state);
+                        IPA.nav.show_page(that.entity_name, 'default', value);
                         return false;
                     };
                 }(value)
diff --git a/install/ui/service.js b/install/ui/service.js
index f76af900c..474eedfe5 100644
--- a/install/ui/service.js
+++ b/install/ui/service.js
@@ -369,10 +369,7 @@ IPA.service_managedby_host_facet = function(spec) {
                 'html': value,
                 'click': function (value) {
                     return function() {
-                        var state = IPA.tab_state(that.other_entity);
-                        state[that.other_entity + '-facet'] = 'details';
-                        state[that.other_entity + '-pkey'] = value;
-                        $.bbq.pushState(state);
+                        IPA.nav.show_page(that.other_entity, 'details', value);
                         return false;
                     };
                 }(value)
diff --git a/install/ui/test/navigation_tests.js b/install/ui/test/navigation_tests.js
index d8cf6d467..e88c99d94 100644
--- a/install/ui/test/navigation_tests.js
+++ b/install/ui/test/navigation_tests.js
@@ -117,7 +117,7 @@ test("Testing IPA.navigation.update() with valid index.", function() {
     };
 
     navigation.create();
-    navigation.push_state({"identity":1});
+    navigation.push_state({'identity': 'two'});
     navigation.update();
 
     same(
@@ -164,7 +164,7 @@ test("Testing IPA.navigation.update() with out-of-range index.", function() {
     };
 
     navigation.create();
-    navigation.push_state({"identity":2});
+    navigation.push_state({'identity': 'three'});
     navigation.update();
 
     same(
diff --git a/install/ui/webui.js b/install/ui/webui.js
index 84a4f3331..eac07db23 100644
--- a/install/ui/webui.js
+++ b/install/ui/webui.js
@@ -85,8 +85,8 @@ IPA.self_serv_navigation = function(spec) {
     var that = IPA.navigation(spec);
 
     that.update = function() {
-        var pkey = $.bbq.getState('user-pkey');
-        var facet = $.bbq.getState('user-facet');
+        var pkey = that.get_state('user-pkey');
+        var facet = that.get_state('user-facet');
 
         if (pkey && facet) {
             that.navigation_update();
@@ -96,7 +96,7 @@ IPA.self_serv_navigation = function(spec) {
                 'user-pkey': pkey || IPA.whoami_pkey,
                 'user-facet': facet || 'details'
             };
-            $.bbq.pushState(state);
+            that.push_state(state);
         }
     };
 
@@ -111,7 +111,6 @@ $(function() {
         IPA.nav.update();
     }
 
-
     function create_navigation() {
         var whoami = IPA.whoami;
         var factory;
-- 
cgit