Action panel

This patch implements action panel. Action panel is a box located in facet details section which contains actions related to that object/section.

In spec file can be configured actions and title used in action panel. Default title is 'Actions'. Actions are specified by their name. They have to be defined in action collection in facet.

https://fedorahosted.org/freeipa/ticket/2248

4 files changed, 179 insertions, 2 deletions

diff --git a/install/ui/details.js b/install/ui/details.js
index 1282912d..ff8f4409 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -122,7 +122,8 @@ IPA.section_builder = function(spec) {
     };
 
     that.build_section = function(section_spec, index) {
-        section_spec.entity = that.entity;
+        section_spec.entity = that.container.entity;
+        section_spec.facet = that.container;
 
         if (!section_spec.label && section_spec.name) {
             var obj_messages = IPA.messages.objects[that.container.entity.name];
diff --git a/install/ui/facet.js b/install/ui/facet.js
index ef8a0624..3c87dcfc 100644
--- a/install/ui/facet.js
+++ b/install/ui/facet.js
@@ -347,7 +347,8 @@ IPA.facet_header = function(spec) {
 
             var widget_builder = IPA.widget_builder({
                 widget_options: {
-                    entity: that.facet.entity
+                    entity: that.facet.entity,
+                    facet: that.facet
                 }
             });
 
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 97cfca0e..d79bf874 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -892,6 +892,7 @@ hr {
 }
 
 .details-section {
+    position: relative;
     margin-top: 1em;
     margin-left: 4.5em;
     margin-right: 3.3em;
@@ -1708,4 +1709,32 @@ form#login {
 .facet-title.disabled h3,
 .facet-title.disabled h3 .facet-pkey{
     color: gray;
+}
+
+.action-panel {
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    width: 150px;
+
+    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
+    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
+}
+
+.action-panel-list {
+    list-style: none;
+    padding-left: 15px;
+}
+
+.action-title {
+    font-size: 1em;
+    font-weight: bold;
+    margin-left: 15px;
+}
+
+.disabled {
+    color: gray;
+    cursor: default;
 }
\ No newline at end of file
diff --git a/install/ui/widget.js b/install/ui/widget.js
index 172e43a5..85bc7132 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -37,6 +37,7 @@ IPA.widget = function(spec) {
     that.label = spec.label;
     that.tooltip = spec.tooltip;
     that.entity = IPA.get_entity(spec.entity); //some old widgets still need it
+    that.facet = spec.facet;
 
     that.create = function(container) {
         container.addClass('widget');
@@ -55,6 +56,24 @@ IPA.widget = function(spec) {
         }
     };
 
+    that.build_child = function(spec, factory) {
+
+        if (typeof spec === 'function') {
+            spec = {
+                factory: spec
+            };
+        }
+
+        $.extend(spec, {
+            parent: that,
+            entity: that.entity,
+            facet: that.facet
+        });
+
+        var child = IPA.build(spec, factory);
+        return child;
+    };
+
     that.widget_create = that.create;
 
     return that;
@@ -2639,12 +2658,18 @@ IPA.details_table_section = function(spec) {
 
     var that = IPA.details_section(spec);
 
+    that.action_panel = that.build_child(spec.action_panel);
+
     that.rows = $.ordered_map();
 
     that.composite_widget_create = function(container) {
 
         that.widget_create(container);
 
+        if (that.action_panel) {
+            that.action_panel.create(container);
+        }
+
         var table = $('<table/>', {
             'class': 'section-table'
         }).appendTo(container);
@@ -3134,6 +3159,127 @@ IPA.sshkey_widget = function(spec) {
     return that;
 };
 
+IPA.action_panel = function(spec) {
+
+    spec = spec || {};
+
+    var that = IPA.widget(spec);
+
+    that.action_names = spec.actions;
+    that.actions = $.ordered_map();
+    that.facet = spec.facet;
+    that.initialized = false;
+
+    that.init = function() {
+
+        for (var i=0; i<that.action_names.length; i++) {
+            var name = that.action_names[i];
+            var action = that.facet.actions.get(name);
+
+            that.add_action(action, true);
+
+            that.actions.put(name, action);
+        }
+
+        that.initialized = true;
+    };
+
+    that.add_action = function(action, batch) {
+        that.actions.put(action.name, action);
+        action.enabled_changed.attach(that.action_enabled_changed);
+        action.visible_changed.attach(that.action_visible_changed);
+
+        if (!batch) {
+            that.create_items();
+        }
+    };
+
+    that.create = function(container) {
+
+        if (!that.initialized) that.init();
+
+        that.element = $('<div/>', {
+            'data-name': that.name,
+            'class': 'action-panel'
+        });
+
+        that.header_element = $('<h3/>', {
+            'class': 'action-title'
+        }).appendTo(that.element);
+
+        that.list_element = $('<ul/>', {
+            'class': 'action-panel-list'
+        }).appendTo(that.element);
+
+        that.element.appendTo(container);
+
+        that.create_items();
+    };
+
+    that.create_item = function(action) {
+
+        var classes, state, li, a;
+
+        classes = ['action'];
+        state = action.enabled ? 'enabled' : 'disabled';
+        classes.push(state);
+
+        li = $('<li/>');
+        a = $('<a/>', {
+            'data-name': action.name,
+            href: '#',
+            text: action.label,
+            'class': classes.join(' '),
+            onclick: function() {
+                that.action_clicked(action);
+                return false;
+            }
+        }).appendTo(li);
+        li.appendTo(that.list_element);
+    };
+
+    that.clear_items = function() {
+
+        that.list_element.empty();
+    };
+
+    that.create_items = function() {
+
+        if (!that.element) return;
+
+        that.clear_items();
+
+        var actions = that.actions.values;
+
+        for (var i=0; i<actions.length; i++) {
+            var action = actions[i];
+            that.create_item(action);
+        }
+
+        that.header_element.text(that.label);
+    };
+
+    that.action_clicked = function(action) {
+
+        if (!action.enabled || !action.visible) return;
+
+        action.execute(that.facet);
+    };
+
+    that.action_enabled_changed = function() {
+
+        that.create_items();
+    };
+
+    that.action_visible_changed = function() {
+
+        that.create_items();
+    };
+
+
+    return that;
+};
+
 
 IPA.widget_factories['attribute_table'] = IPA.attribute_table_widget;
 IPA.widget_factories['button'] = IPA.button_widget;