From a4aba826a0e1327ba8df05da19d9ad0055d8269d Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Thu, 28 Apr 2011 19:17:58 -0500
Subject: Added facet container.

Facet container has been added to hold facet header (i.e. title,
search fields, buttons, links) and facet content. Each facet now
occupies separate container, so it can be shown/hidden without
having to redraw the content.
---
 install/ui/entity.js | 471 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 274 insertions(+), 197 deletions(-)

(limited to 'install/ui/entity.js')

diff --git a/install/ui/entity.js b/install/ui/entity.js
index 161f34e6c..f649833e1 100644
--- a/install/ui/entity.js
+++ b/install/ui/entity.js
@@ -30,16 +30,12 @@ IPA.facet = function (spec) {
     spec = spec || {};
 
     var that = {};
+
     that.display_class = spec.display_class || 'entity-facet';
     that.name = spec.name;
     that.label = spec.label;
     that._entity_name = spec.entity_name;
 
-    that.init = spec.init || init;
-    that.create_content = spec.create_content || create_content;
-    that.setup = spec.setup || setup;
-    that.load = spec.load || load;
-
     that.dialogs = [];
     that.dialogs_by_name = {};
 
@@ -63,29 +59,67 @@ IPA.facet = function (spec) {
         return that;
     };
 
-    function init() {
-
-        that.entity = IPA.get_entity(that.entity_name);
+    that.init = function() {
 
         for (var i=0; i<that.dialogs.length; i++){
             var dialog = that.dialogs[i];
             dialog.entity_name = that._entity_name;
             dialog.init();
         }
-    }
+    };
 
-    function create_content(container) {
-    }
+    that.create = function(container) {
 
-    function setup(container) {
         that.container = container;
-        that.entity_header.facet_tabs.css('visibility','visible');
-        $('#back_to_search', that.entity_header.search_bar).
-            css('display','inline');
-    }
 
-    function load() {
-    }
+        that.header = $('<div/>', {
+            'class': 'facet-header'
+        }).appendTo(container);
+        that.create_header(that.header);
+
+        that.content = $('<div/>', {
+            'class': 'facet-content'
+        }).appendTo(container);
+        that.create_content(that.content);
+    };
+
+    that.create_header = function(container) {
+
+        that.title = $('<div/>', {
+            'class': 'facet-title'
+        }).appendTo(container);
+
+        $('<h1/>').append(IPA.create_network_spinner()).appendTo(that.title);
+
+        that.set_title(container, that.label);
+
+        that.controls = $('<div/>', {
+            'class': 'facet-controls'
+        }).appendTo(container);
+    };
+
+    that.create_content = function(container) {
+    };
+
+    that.set_title = function(container, title) {
+        var element = $('h1', that.title);
+        element.html(title);
+    };
+
+    that.setup = function(container) {
+        that.container = container;
+    };
+
+    that.show = function() {
+        that.container.css('display', 'inline');
+    };
+
+    that.hide = function() {
+        that.container.css('display', 'none');
+    };
+
+    that.load = function() {
+    };
 
     that.is_dirty = function (){
         return false;
@@ -97,12 +131,77 @@ IPA.facet = function (spec) {
 
     // methods that should be invoked by subclasses
     that.facet_init = that.init;
+    that.facet_create_header = that.create_header;
     that.facet_create_content = that.create_content;
     that.facet_setup = that.setup;
+    that.facet_show = that.show;
+    that.facet_hide = that.hide;
 
     return that;
 };
 
+IPA.table_facet = function(spec) {
+
+    spec = spec || {};
+
+    var that = IPA.facet(spec);
+
+    that.columns = [];
+    that.columns_by_name = {};
+
+    that.__defineGetter__('entity_name', function() {
+        return that._entity_name;
+    });
+
+    that.__defineSetter__('entity_name', function(entity_name) {
+        that._entity_name = entity_name;
+
+        for (var i=0; i<that.columns.length; i++) {
+            that.columns[i].entity_name = entity_name;
+        }
+    });
+
+    that.get_columns = function() {
+        return that.columns;
+    };
+
+    that.get_column = function(name) {
+        return that.columns_by_name[name];
+    };
+
+    that.add_column = function(column) {
+        column.entity_name = that.entity_name;
+        that.columns.push(column);
+        that.columns_by_name[column.name] = column;
+    };
+
+    that.create_column = function(spec) {
+        var column = IPA.column(spec);
+        that.add_column(column);
+        return column;
+    };
+
+    that.column = function(spec){
+        that.create_column(spec);
+        return that;
+    };
+
+    var columns = spec.columns || [];
+    for (var i=0; i<columns.length; i++) {
+        var column_spec = columns[i];
+        var column;
+
+        if (column_spec instanceof Object) {
+            var factory = column_spec.factory || IPA.column;
+            column = factory(column_spec);
+        } else {
+            column = IPA.column({ name: column_spec });
+        }
+        that.add_column(column);
+    }
+
+    return that;
+};
 
 IPA.fetch_facet_group = function (name,attribute_member){
     var relationships = IPA.metadata.objects[name].relationships;
@@ -124,7 +223,7 @@ IPA.entity = function (spec) {
     that.name = spec.name;
     that.label = spec.label || spec.metadata.label || spec.name;
 
-    that.setup = spec.setup || IPA.entity_setup;
+    that.header = spec.header || IPA.entity_header({entity: that});
 
     that.dialogs = [];
     that.dialogs_by_name = {};
@@ -199,10 +298,6 @@ IPA.entity = function (spec) {
         return that;
     };
 
-    that.facet = function(facet) {
-        return that.add_facet(facet);
-    };
-
     that.create_association_facet = function(attribute_member, other_entity, label, facet_group) {
 
         var association_name = attribute_member+'_'+other_entity;
@@ -263,55 +358,74 @@ IPA.entity = function (spec) {
 
         for (var i=0; i<that.facets.length; i++) {
             var facet = that.facets[i];
+            facet.entity = that;
             facet.init();
         }
         init_dialogs();
     };
 
-    that.entity_init = that.init;
+    that.create = function(container) {
+        var entity_header = $('<div/>', {
+            'class': 'entity-header'
+        }).appendTo(container);
+        that.header.create(entity_header);
 
-    return that;
-};
+        that.content = $('<div/>', {
+            'class': 'entity-content'
+        }).appendTo(container);
+    };
 
+    that.setup = function(container) {
 
-IPA.current_facet =  function (entity){
-    var facet_name = $.bbq.getState(entity.name + '-facet', true);
-    if (!facet_name && entity.facets.length) {
-        facet_name = entity.facets[0].name;
-    }
-    return facet_name;
-};
+        var prev_facet = that.facet;
+
+        IPA.current_entity = that;
+        var facet_name = IPA.current_facet(that);
 
-IPA.entity_setup = function(container) {
+        that.facet = that.get_facet(facet_name);
+        if (!that.facet) return;
 
-    var entity = this;
+        if (IPA.entity_name == that.name) {
+            if (that.facet_name == that.facet.name) {
+                if (that.facet.new_key && (!that.facet.new_key())) return;
+            } else {
+                that.facet_name = that.facet.name;
+            }
+        } else {
+            IPA.entity_name = that.name;
+        }
 
-    IPA.current_entity = this;
-    var facet_name = IPA.current_facet(entity);
+        if (prev_facet) {
+            prev_facet.hide();
+        }
 
-    var facet = entity.get_facet(facet_name);
-    if (!facet) return;
+        var facet_container = $('.facet[name="'+that.facet.name+'"]', that.content);
+        if (!facet_container.length) {
+            facet_container = $('<div/>', {
+                name: that.facet.name,
+                'class': 'facet'
+            }).appendTo(that.content);
 
-    if (IPA.entity_name == entity.name) {
-        if (entity.facet_name == facet.name) {
-            if (facet.new_key   && (!facet.new_key())) return;
-        } else {
-            entity.facet_name = facet.name;
+            that.facet.create(facet_container);
+            that.facet.setup(facet_container);
         }
-    } else {
-        IPA.entity_name = entity.name;
-    }
 
-    if (!entity.header){
-        entity.header = IPA.entity_header({entity:entity,container:container});
-    }
-    facet.entity_header = entity.header;
+        that.facet.show();
+        that.header.select_tab();
+        that.facet.refresh();
+    };
 
-    entity.header.reset();
-    facet.create_content(facet.entity_header.content);
-    facet.setup(facet.entity_header.content);
-    entity.header.select_tab();
-    facet.refresh();
+    that.entity_init = that.init;
+
+    return that;
+};
+
+IPA.current_facet =  function (entity){
+    var facet_name = $.bbq.getState(entity.name + '-facet', true);
+    if (!facet_name && entity.facets.length) {
+        facet_name = entity.facets[0].name;
+    }
+    return facet_name;
 };
 
 IPA.nested_tab_labels = {};
@@ -383,177 +497,140 @@ IPA.nested_tabs = function(entity_name) {
 IPA.selected_icon = '<span class="ipa-icon">&#x25B6;</span>';
 IPA.back_icon = '<span class="ipa-icon">&#x25C0;</span>';
 
+IPA.entity_header = function(spec) {
 
-IPA.entity_header = function(spec){
-    var entity = spec.entity;
-    var container = spec.container;
+    spec = spec || {};
 
     var that = {};
-    that.entity = entity;
-
-    function pkey(){
-        that.pkey_field = $("<input type='hidden' id='pkey' />");
-        return that.pkey_field;
-    }
+    that.entity = spec.entity;
 
-    function select_tab(){
+    that.select_tab = function() {
         $(that.facet_tabs).find('a').removeClass('selected');
-        var facet_name = $.bbq.getState(entity.name + '-facet', true);
+        var facet_name = $.bbq.getState(that.entity.name + '-facet', true);
 
-        if (!facet_name) return;
-
-        if (facet_name === 'default'){
+        if (!facet_name || facet_name === 'default') {
             that.facet_tabs.find('a:first').addClass('selected');
-        }else{
+        } else {
             that.facet_tabs.find('a#' + facet_name ).addClass('selected');
         }
+    };
 
-    }
-    that.select_tab = select_tab;
-
-    function set_pkey(val){
-        that.pkey_field.val(val);
-        that.title.empty();
-        var title = $('<h3/>',{ text: entity.metadata.label+": "});
-        title.append ($('<span/>',{text:val}));
-        that.title.append(title);
-    }
-    that.set_pkey = set_pkey;
+    that.set_pkey = function(value) {
 
-    function title(){
-        that.title =
-            $("<div/>",
-              {
-                  'class':'entity-title'
-              });
+        if (value) {
+            var span = $('.entity-pkey', that.pkey);
+            span.text(value);
+            that.pkey.css('display', 'inline');
 
-        var title = $('<h3/>',{ text: entity.metadata.label});
-        that.title.append(title);
+        } else {
+            that.pkey.css('display', 'none');
+        }
+    };
 
-        return that.title;
-    }
+    that.facet_link = function(container, other_facet) {
 
-    function buttons(){
-        that.buttons = $("<span class='action-controls' />");
-        return that.buttons;
+        var li = $('<li/>', {
+            title: other_facet.name,
+            click: function() {
+                if (li.hasClass('entity-facet-disabled')) {
+                    return false;
+                }
 
-    }
-    function search_bar(){
-        that.search_bar =
-            $("<span class='entity-search'/>");
-
-        if (entity.facets_by_name.search){
-            that.search_bar.prepend(
-                $('<span />',{
-                    id:'back_to_search',
-                    "class":"input_link",
-                    click: function(){
-                        if($(this).hasClass('entity-facet-disabled')){
-                            return false;
-                        }
+                var pkey = $.bbq.getState(that.entity.name+'-pkey', true);
 
-                        IPA.nav.show_page(entity.name, 'search');
-                        $(that.facet_tabs).find('a').removeClass('selected');
-                        return false;
+                IPA.nav.show_page(that.entity.name, other_facet.name, pkey);
+                $('a', that.facet_tabs).removeClass('selected');
+                $('a', li).addClass('selected');
 
-                    }
-                }).
-                    append(IPA.back_icon + '  ' +
-                           IPA.messages.buttons.back_to_list+' '));
+                return false;
+            }
+        }).appendTo(container);
+
+        $('<a/>', {
+            text: other_facet.label,
+            id: other_facet.name
+        }).appendTo(li);
+    };
+
+    that.facet_group = function(container, label) {
+        var facets = that.entity.facet_groups[label];
+        if (facets) {
+            that.tab_section(container, label, facets);
         }
+    };
 
-        return that.search_bar;
-    }
+    that.tab_section = function(container, label, facets) {
 
-    function facet_link(other_facet){
-        var entity_name = that.entity.name;
-        var other_facet_name = other_facet.name;
-        var li = $('<li/>', {
-            title: other_facet.name,
-            html: $('<a />',{
-                text: other_facet.label,
-                id: other_facet_name
-            }),
-            click: function(entity_name, other_facet_name) {
-                return function() {
-                    if($(this).hasClass('entity-facet-disabled')){
-                        return false;
-                    }
-                    var this_pkey = that.pkey_field.val();
-                    IPA.nav.show_page(
-                        entity_name, other_facet_name,
-                        this_pkey);
-                    $(that.facet_tabs).find('a').removeClass('selected');
-                    $(this).find('a').addClass('selected');
+        var section = $('<span/>', {
+            'class': 'facet-tab-group'
+        }).appendTo(container);
 
-                    return false;
-                };
-            }(entity_name, other_facet_name)
-        });
-        return li;
-    }
+        $('<label/>', {
+            text: label
+        }).appendTo(section);
 
+        var ul = $('<ul/>', {
+            'class': 'facet-tab'
+        }).appendTo(section);
 
-    function facet_group(label){
-        var facets= entity.facet_groups[label];
-        if (facets){
-            that.facet_tabs.append(tab_section(label,  facets));
+        for (var i=0; i<facets.length; i++) {
+            var other_facet = facets[i];
+            that.facet_link(ul, other_facet);
         }
-    }
+    };
 
-    function tab_section(label, facets){
-        var tab_section = $("<span class='entity-tabs-section'/>").
-            append("<label>"+label+"</label>");
+    that.create = function(container) {
 
-        var ul = $("<ul class='entity-tabs'/>").appendTo(tab_section);
+        that.title = $('<div/>', {
+            'class': 'entity-title'
+        }).appendTo(container);
 
-        var i;
-        for (i = 0; i < facets.length; i += 1){
-            var other_facet = facets[i];
-            ul.append(facet_link(other_facet));
-        }
-        return tab_section;
-    }
+        var title_text = $('<h3/>', {
+            text: that.entity.metadata.label
+        }).appendTo(that.title);
 
-    function facet_tabs(){
-        that.facet_tabs =   $("<div class='entity-tabs'/>");
+        that.pkey = $('<span/>').appendTo(title_text);
 
-        facet_group("Member");
+        that.pkey.append(': ');
+        that.pkey.append($('<span/>', {
+            'class': 'entity-pkey'
+        }));
 
-        if (entity.facets_by_name.details){
-            that.facet_tabs.append(
-                tab_section('Settings',[entity.facets_by_name.details]));
-        }
-        facet_group("Member Of");
-        facet_group("Managed by");
+        var search_bar = $('<span/>', {
+            'class': 'entity-search'
+        }).appendTo(container);
 
-        return that.facet_tabs;
-    }
-    function content(){
-        that.content = $("<div class='content'/>");        return that.content;
-    }
+        that.back_link = $('<span/>', {
+            'class': 'back-link',
+            click: function() {
+                if ($(this).hasClass('entity-facet-disabled')) {
+                    return false;
+                }
 
-    function entity_container() {
-        that.entity_container =
-            $('<div/>').
-            append(facet_tabs()).
-            append(content());
-        return that.entity_container;
-    }
+                IPA.nav.show_page(that.entity.name, 'search');
+                $('a', that.facet_tabs).removeClass('selected');
+                return false;
+            }
+        }).appendTo(search_bar);
 
-    function reset(){
-        that.buttons.empty();
-        that.content.empty();
-    }
-    that.reset = reset;
+        that.back_link.append(IPA.back_icon);
+        that.back_link.append('  ');
+        that.back_link.append(IPA.messages.buttons.back_to_list);
+
+        that.facet_tabs = $('<div/>', {
+            'class': 'entity-tabs'
+        }).appendTo(container);
+
+        that.facet_group(that.facet_tabs, "Member");
 
-    that.header = $("<div class='entity-header'/>").
-        append(title(entity)).
-        append(buttons()).
-        append(pkey()).
-        append(search_bar()).
-        append(entity_container());
-    container.append(that.header);
+        if (that.entity.facets_by_name.details) {
+            that.facet_tabs.append(
+                that.tab_section(that.facet_tabs, 'Settings', [that.entity.facets_by_name.details]));
+        }
+
+        that.facet_group(that.facet_tabs, "Member Of");
+        that.facet_group(that.facet_tabs, "Managed By");
+    };
 
     return that;
 };
@@ -642,7 +719,7 @@ IPA.entity_builder = function(){
         spec.sections = null;
         spec.entity_name = entity.name;
         facet =IPA.details_facet(spec);
-        entity.facet(facet);
+        entity.add_facet(facet);
 
         var i;
         for ( i =0; i < sections.length; i += 1){
@@ -655,7 +732,7 @@ IPA.entity_builder = function(){
     that.facet = function(spec) {
         spec.entity_name  = entity.name;
         facet = spec.factory(spec);
-        entity.facet(facet);
+        entity.add_facet(facet);
         return that;
     };
 
@@ -665,14 +742,14 @@ IPA.entity_builder = function(){
             search_all: spec.search_all || false,
             columns: spec.columns
         });
-        entity.facet(facet);
+        entity.add_facet(facet);
         return that;
     };
 
 
     that.association_facet = function(spec){
         spec.entity_name = entity.name;
-        entity.facet(IPA.association_facet(spec));
+        entity.add_facet(IPA.association_facet(spec));
         return that;
     };
 
-- 
cgit