webui: add action dropdown

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

2 files changed, 265 insertions, 10 deletions

diff --git a/install/ui/src/freeipa/widgets/ActionDropdownWidget.js b/install/ui/src/freeipa/widgets/ActionDropdownWidget.js
new file mode 100644
index 000000000..c43c79b54
--- /dev/null
+++ b/install/ui/src/freeipa/widgets/ActionDropdownWidget.js
@@ -0,0 +1,191 @@
+/*  Authors:
+ *    Petr Vobornik <pvoborni@redhat.com>
+ *
+ * Copyright (C) 2014 Red Hat
+ * see file 'COPYING' for use and warranty information
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+define(['dojo/_base/declare',
+        'dojo/_base/lang',
+        'dojo/on',
+        '../jquery',
+        './DropdownWidget'], function(declare, lang, on, $,  DropdownWidget) {
+
+    return declare([DropdownWidget], {
+        /**
+         * Represents and creates a dropdown widget for executing facet actions
+         *
+         * @class widgets.ActionDropdownWidget
+         */
+
+        /**
+         * Facet which contains actions
+         * @type {facet.facet|facets.Facet}
+         */
+        facet: null,
+
+        /**
+         * Names of actions, which should be later obtained from facet
+         * @property {Array.<string>}
+         */
+        action_names: [],
+
+        /**
+         * Actions
+         * @property {ordered_map}
+         */
+        actions: [],
+
+        on_item_click: function(event, item) {
+
+            if (item.click) item.click();
+            this.emit('item-click', item);
+        },
+
+        /**
+         * Initializes action list
+         *
+         * - set facet
+         * - get actions from facet
+         * - init child widgets
+         *
+         * @param {facet.facet} facet
+         */
+        init: function(facet) {
+
+            var options, actions, action, name, i;
+
+            this.facet = facet;
+
+            if (!this.action_names) return;
+
+            for (i=0; i<this.action_names.length; i++) {
+                name = this.action_names[i];
+                action = this.facet.actions.get(name);
+                this.add_action(action, true);
+            }
+            this.recreate_options();
+        },
+
+        /**
+         * Add action
+         * @param {facet.action} action
+         * @param {boolean} [batch] Set to `true` when adding multiple actions to
+         *                          prevent unnecessary option initialization and
+         *                          recreation. Set it back to `false` when adding
+         *                          last option.
+         */
+        add_action: function(action, batch) {
+            this.actions.put(action.name, action);
+            action.enabled_changed.attach(lang.hitch(this, this.action_enabled_changed));
+            action.visible_changed.attach(lang.hitch(this, this.action_visible_changed));
+
+            if (!batch) {
+                this.recreate_options();
+            }
+        },
+
+        /**
+         * Create and set select options from actions
+         */
+        recreate_options: function() {
+
+            var items, actions, action, i;
+
+            items = [];
+            actions = this.actions.values;
+
+            for (i=0; i< actions.length; i++) {
+                action = actions[i];
+                if (!action.visible) continue;
+                items.push({
+                    label: action.label,
+                    value: action.name,
+                    name: action.name,
+                    disabled: !action.enabled,
+                    action: action
+                });
+            }
+
+            this.set('items', items);
+        },
+
+        on_item_click: function(event, item) {
+
+            this.inherited(arguments);
+            if (item.action) {
+                this.execute_action(item.action);
+            }
+        },
+
+
+        /**
+         * Execute action if enabled
+         *
+         * @protected
+         */
+        execute_action: function(action) {
+
+            if (action.enabled) {
+                action.execute(this.facet,
+                               lang.hitch(this, this.on_action_success),
+                               lang.hitch(this, this.on_action_error));
+            }
+        },
+
+        /**
+         * Global action success handler
+         *
+         * @localdoc - override point
+         * @protected
+         * @abstract
+         */
+        on_action_success: function() {
+        },
+
+        /**
+         * Global action error handler
+         *
+         * @localdoc - override point
+         * @protected
+         * @abstract
+         */
+        on_action_error: function() {
+        },
+
+        /**
+         * Handle action's `enabled_changed` event.
+         * @protected
+         * @param {boolean} enabled
+         */
+        action_enabled_changed: function(enabled) {
+            this.recreate_options();
+        },
+
+        /**
+         * Handle action's `visible_changed` event.
+         * @protected
+         * @param {boolean} visible
+         */
+        action_visible_changed: function(visible) {
+            this.recreate_options();
+        },
+
+        constructor: function(spec) {
+            declare.safeMixin(this, spec);
+            this.actions = $.ordered_map();
+        }
+    });
+});
diff --git a/install/ui/src/freeipa/widgets/DropdownWidget.js b/install/ui/src/freeipa/widgets/DropdownWidget.js
index e45ea8945..181cfc5cf 100644
--- a/install/ui/src/freeipa/widgets/DropdownWidget.js
+++ b/install/ui/src/freeipa/widgets/DropdownWidget.js
@@ -77,6 +77,21 @@ define(['dojo/_base/declare',
         toggle_text: '',
 
         /**
+         * Icon displayed after toggle text
+         * @property {String}
+         */
+        toggle_icon: null,
+
+        /**
+         * Toggle classes
+         *
+         * e.g.: `btn btn-default`
+         *
+         * @property {String}
+         */
+        toggle_class: '',
+
+        /**
          * Toggle button content. Replaces toggle button text if set. Can be
          * use for more complex toggle buttons.
          * @property {HTMLElement|HTMLElement[]}
@@ -96,6 +111,19 @@ define(['dojo/_base/declare',
          */
         dom_node: null,
 
+        /**
+         * Container for items
+         * @protected
+         * @property {HTMLElement}
+         */
+        ul_node: null,
+
+        /**
+         * Menu is right aligned
+         * @type {Boolean}
+         */
+        right_aligned: false,
+
         render: function() {
             if (this.dom_node) {
                 construct.empty(this.dom_node);
@@ -108,7 +136,8 @@ define(['dojo/_base/declare',
             }
 
             this._render_toggle(this.dom_node);
-            this._render_items(this.items, this.dom_node);
+            this._render_list(this.dom_node);
+            this._render_items(this.items);
 
             return this.dom_node;
         },
@@ -120,6 +149,7 @@ define(['dojo/_base/declare',
                 'data-toggle': 'dropdown',
                 href: '#'
             });
+            if (this.toggle_class) dom_class.add(this.toggle_node, this.toggle_class);
 
             this._update_toggle();
             if (container) {
@@ -140,6 +170,11 @@ define(['dojo/_base/declare',
                 }
             } else {
                 prop.set(this.toggle_node, 'textContent', this.toggle_text);
+                if (this.toggle_icon) {
+                    var icon = construct.create('i', {
+                        'class': this.toggle_icon
+                    }, this.toggle_node);
+                }
             }
         },
 
@@ -153,30 +188,54 @@ define(['dojo/_base/declare',
             this._update_toggle();
         },
 
-        _render_items: function(items, container) {
-            var ul = construct.create('ul', {
-                'class': 'dropdown-menu'
-            });
+        _itemsSetter: function(value) {
+            this._clear_items();
+            this.items = value;
+            this._render_items(this.items, this.dom_node);
+        },
 
-            array.forEach(items, function(item) {
-                this._render_item(item, ul);
-            }, this);
+        _clear_items: function() {
+            this.items = [];
+            if (this.ul_node) {
+                construct.empty(this.ul_node);
+            }
+        },
 
+        _render_list: function(container) {
+
+            var ul = this.ul_node = construct.create('ul', {
+                'class': 'dropdown-menu'
+            });
+            if (this.right_aligned) {
+                dom_class.add(ul, 'dropdown-menu-right');
+            }
             if (container) {
                 construct.place(ul, container);
             }
             return ul;
         },
 
+        _render_items: function(items, container) {
+
+            var ul = this.ul_node;
+            array.forEach(items, function(item) {
+                this._render_item(item, ul);
+            }, this);
+        },
+
         _render_item: function(item, container) {
 
             var li = construct.create('li', {
-                'data-name': item.name || ''
+                'data-name': item.name || '',
+                role: 'presentation'
             });
 
             var a = construct.create('a', {
                 'href': '#' + item.name || ''
-            }, li);
+            });
+            if (item['class'] !== 'divider') {
+                construct.place(a, li);
+            }
 
             if (item.icon) {
                 construct.create('i', {
@@ -191,6 +250,11 @@ define(['dojo/_base/declare',
                 dom_class.add(li, item['class']);
             }
 
+            if (item.disabled) {
+                dom_class.add(li, 'disabled');
+                attr.set(a, 'tabIndex', -1);
+            }
+
             if (item.items && item.items.length > 0) {
                 dom_class.add(li, 'dropdown-submenu');
                 this._render_items(item.items, li);