Redefined search control buttons

This patch replaces old search facet action buttons with new control_buttons_widget.

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

2 files changed, 93 insertions, 72 deletions

diff --git a/install/ui/facet.js b/install/ui/facet.js
index 80e977b41..1c220d032 100644
--- a/install/ui/facet.js
+++ b/install/ui/facet.js
@@ -672,11 +672,11 @@ IPA.facet_title = function(spec) {
     return that;
 };
 
-IPA.table_facet = function(spec) {
+IPA.table_facet = function(spec, no_init) {
 
     spec = spec || {};
 
-    var that = IPA.facet(spec);
+    var that = IPA.facet(spec, no_init);
 
     that.managed_entity = spec.managed_entity ? IPA.get_entity(spec.managed_entity) : that.entity;
 
@@ -684,6 +684,7 @@ IPA.table_facet = function(spec) {
     that.search_all_entries = spec.search_all_entries;
     that.search_all_attributes = spec.search_all_attributes;
     that.selectable = spec.selectable === undefined ? true : spec.selectable;
+    that.select_changed = IPA.observer();
 
     that.row_enabled_attribute = spec.row_enabled_attribute;
     that.row_disabled_attribute = spec.row_disabled_attribute;
@@ -691,13 +692,6 @@ IPA.table_facet = function(spec) {
 
     that.columns = $.ordered_map();
 
-    var init = function() {
-        var columns = spec.columns || [];
-        for (var i=0; i<columns.length; i++) {
-            that.create_column(columns[i]);
-        }
-    };
-
     that.get_columns = function() {
         return that.columns.values;
     };
@@ -947,19 +941,6 @@ IPA.table_facet = function(spec) {
         return that.table.get_selected_values();
     };
 
-    that.select_changed = function() {
-
-        that.selected_values = that.get_selected_values();
-
-        if (that.remove_button) {
-            if (that.selected_values.length === 0) {
-                that.remove_button.addClass('action-button-disabled');
-            } else {
-                that.remove_button.removeClass('action-button-disabled');
-            }
-        }
-    };
-
     that.init_table = function(entity) {
 
         that.table = IPA.table_widget({
@@ -992,7 +973,8 @@ IPA.table_facet = function(spec) {
         }
 
         that.table.select_changed = function() {
-            that.select_changed();
+            that.selected_values = that.get_selected_values();
+            that.select_changed.notify([that.selected_values]);
         };
 
         that.table.prev_page = function() {
@@ -1026,7 +1008,14 @@ IPA.table_facet = function(spec) {
         };
     };
 
-    init();
+    that.init_table_columns = function() {
+        var columns = spec.columns || [];
+        for (var i=0; i<columns.length; i++) {
+            that.create_column(columns[i]);
+        }
+    };
+
+    if (!no_init) that.init_table_columns();
 
     that.table_facet_create_get_records_command = that.create_get_records_command;
 
@@ -1307,6 +1296,27 @@ IPA.dirty_state_listener = function(spec) {
     return that;
 };
 
+IPA.selected_state_listener = function(spec) {
+
+    spec = spec || {};
+
+    spec.event = spec.event || 'select_changed';
+
+    var that = IPA.state_listener(spec);
+
+    that.on_event = function(selected) {
+        that.state = [];
+
+        if (selected && selected.length > 0) {
+            that.state.push('item-selected');
+        }
+
+        that.state_changed.notify();
+    };
+
+    return that;
+};
+
 IPA.action_button_widget = function(spec) {
 
     spec = spec || {};
diff --git a/install/ui/search.js b/install/ui/search.js
index b7c5034ab..142e590db 100644
--- a/install/ui/search.js
+++ b/install/ui/search.js
@@ -25,7 +25,7 @@
 
 /* REQUIRES: ipa.js */
 
-IPA.search_facet = function(spec) {
+IPA.search_facet = function(spec, no_init) {
 
     spec = spec || {};
 
@@ -37,14 +37,58 @@ IPA.search_facet = function(spec) {
     spec.disable_facet_tabs =
         spec.disable_facet_tabs === undefined ? true : spec.disable_facet_tabs;
 
-    var that = IPA.table_facet(spec);
+    spec.control_buttons = spec.control_buttons || {};
 
-    that.deleter_dialog = spec.deleter_dialog || IPA.search_deleter_dialog;
+    var cb = spec.control_buttons;
+    cb.factory = cb.factory || IPA.control_buttons_widget;
+    cb.buttons = cb.buttons || [];
+    cb.state_listeners = cb.state_listeners || [];
+    cb.buttons.unshift(
+        {
+            name: 'refresh',
+            label: IPA.messages.buttons.refresh,
+            icon: 'reset-icon',
+            action: {
+                handler: function(facet) {
+                    facet.refresh();
+                }
+            }
+        },
+        {
+            name: 'remove',
+            label: IPA.messages.buttons.remove,
+            icon: 'remove-icon',
+            action: {
+                enable_cond: ['item-selected'],
+                disable_cond: ['self-service'],
+                handler: function(facet) {
+                    facet.show_remove_dialog();
+                }
+            }
+        },
+        {
+            name: 'add',
+            label: IPA.messages.buttons.add,
+            icon: 'add-icon',
+            action: {
+                disable_cond: ['self-service'],
+                handler: function(facet) {
+                    facet.show_add_dialog();
+                }
+            }
+        }
+    );
+    cb.state_listeners.push(
+        {
+            factory: IPA.selected_state_listener
+        }
+    );
 
-    var init = function() {
+    //TODO: make buttons invisible on self-service. Currently regression.
 
-        that.init_table(that.managed_entity);
-    };
+    var that = IPA.table_facet(spec, true);
+
+    that.deleter_dialog = spec.deleter_dialog || IPA.search_deleter_dialog;
 
     that.create_header = function(container) {
 
@@ -81,47 +125,7 @@ IPA.search_facet = function(spec) {
             }
         }).appendTo(filter_container);
 
-        that.refresh_button = IPA.action_button({
-            name: 'refresh',
-            href: 'refresh',
-            label: IPA.messages.buttons.refresh,
-            icon: 'reset-icon',
-            click: function() {
-                that.refresh();
-                return false;
-            }
-        }).appendTo(that.controls);
-
-        that.remove_button = IPA.action_button({
-            name: 'remove',
-            label: IPA.messages.buttons.remove,
-            icon: 'remove-icon',
-            click: function() {
-                if (!that.remove_button.hasClass('action-button-disabled')) {
-                    that.show_remove_dialog();
-                }
-                return false;
-            }
-        }).appendTo(that.controls);
-
-        that.add_button = IPA.action_button({
-            name: 'add',
-            label: IPA.messages.buttons.add,
-            icon: 'add-icon',
-            click: function() {
-                if (!that.add_button.hasClass('action-button-disabled')) {
-                    that.show_add_dialog();
-                }
-                return false;
-            }
-        }).appendTo(that.controls);
-
-        var self_service = IPA.nav.name === 'self-service';
-
-        if (self_service) {
-            that.remove_button.css('display', 'none');
-            that.add_button.css('display', 'none');
-        }
+        that.create_control_buttons(that.controls);
     };
 
     that.show = function() {
@@ -259,7 +263,14 @@ IPA.search_facet = function(spec) {
         return clear;
     };
 
-    init();
+    that.init_search_facet = function() {
+
+        that.init_facet();
+        that.init_table_columns();
+        that.init_table(that.managed_entity);
+    };
+
+    if (!no_init) that.init_search_facet();
 
     // methods that should be invoked by subclasses
     that.search_facet_refresh = that.refresh;