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 1282912d5..ff8f4409b 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 ef8a06245..3c87dcfcd 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 97cfca0e8..d79bf8748 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 172e43a5c..85bc7132a 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;