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

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];

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
                 }
             });
 

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;
 }

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;