From 306f380258354bae4d40758aec42f9f1c34ae2e7 Mon Sep 17 00:00:00 2001 From: Petr Vobornik Date: Mon, 21 May 2012 13:46:14 +0200 Subject: Refactored action list and control buttons to use shared list of actions This is a first step for implementing action panels which will also use the shared list of actions. This effor changes the way how action list and control buttons are defined. First all actions are defined on facet level - attribute 'actions' in spec file. Implementation of action list widget is not specified on facet level. It is left in facet header. A list of action names used in action list can be now specified in facet spec in 'header_actions' attribute. Control buttons use similar concept. Facet by default is using control_buttons_widget. Details and search facet are defining their own default actions (refresh/add/remove/update/reset). Additional buttons can be defined as array of action names on facet level in control_buttons attribute. state_evaluators and state_listeners were united. They are called state_evaluators but they uses state_listener concept, they are attached to an event. For former state_evaluator the event is post_load. They are defined in spec in state attribute. State object purpose is to aggregate states from all state evaluators. It offers changed event to which can other objects subscribe. It also has summary evaluator which evaluation conditions. Summary evaluator creates summary status with human readable description. It can be used by facet header. https://fedorahosted.org/freeipa/ticket/2248 --- install/ui/details.js | 163 ++++++++---- install/ui/facet.js | 547 ++++++++++++++++++++++++++------------- install/ui/jquery.ordered-map.js | 13 +- install/ui/search.js | 90 ++++--- install/ui/widget.js | 60 +++-- 5 files changed, 581 insertions(+), 292 deletions(-) diff --git a/install/ui/details.js b/install/ui/details.js index f1f13f0b..1282912d 100644 --- a/install/ui/details.js +++ b/install/ui/details.js @@ -231,57 +231,34 @@ IPA.details_facet = function(spec, no_init) { spec = spec || {}; spec.name = spec.name || 'details'; - spec.control_buttons = spec.control_buttons || {}; - 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( + spec.actions = spec.actions || []; + spec.actions.unshift( + IPA.refresh_action, + IPA.reset_action, + IPA.update_action); + + spec.control_buttons = spec.control_buttons || []; + spec.control_buttons.unshift( { name: 'refresh', label: IPA.messages.buttons.refresh, - icon: 'reset-icon', - action: { - handler: function(facet) { - facet.refresh(); - } - } + icon: 'reset-icon' }, { name: 'reset', label: IPA.messages.buttons.reset, - icon: 'reset-icon', - needs_confirm: true, - action: { - enable_cond: ['dirty'], - handler: function(facet) { - facet.reset(); - } - } + icon: 'reset-icon' }, { name: 'update', label: IPA.messages.buttons.update, - icon: 'update-icon', - action: { - enable_cond: ['dirty'], - handler: function(facet) { - if (!facet.validate()) { - facet.show_validation_error(); - return; - } + icon: 'update-icon' + }); - facet.update(); - } - } - } - ); - cb.state_listeners.push( - { - factory: IPA.dirty_state_listener - } - ); + spec.state = spec.state || {}; + spec.state.evaluators = spec.state.evaluators || []; + spec.state.evaluators.push(IPA.dirty_state_evaluator); var that = IPA.facet(spec, true); @@ -476,7 +453,7 @@ IPA.details_facet = function(spec, no_init) { field.load(data.result.result); } that.policies.post_load(data); - that.post_load.notify(); + that.post_load.notify([data], that); that.clear_expired_flag(); }; @@ -719,7 +696,8 @@ IPA.details_facet = function(spec, no_init) { var widget_builder = IPA.widget_builder({ widget_options: { - entity: that.entity + entity: that.entity, + facet: that } }); var field_builder = IPA.field_builder({ @@ -872,38 +850,107 @@ IPA.command_builder = function() { return that; }(); +IPA.select_action = function(spec) { + + spec = spec || {}; + spec.name = spec.name || 'select_action'; + spec.label = spec.label || '-- select action --'; + + var that = IPA.action(spec); + + that.execute_action = function(facet) { + }; + + return that; +}; + +IPA.refresh_action = function(spec) { + + spec = spec || {}; + spec.name = spec.name || 'refresh'; + spec.label = spec.label || IPA.messages.buttons.refresh; + + var that = IPA.action(spec); + + that.execute_action = function(facet) { + facet.refresh(); + }; + + return that; +}; + +IPA.reset_action = function(spec) { + + spec = spec || {}; + spec.name = spec.name || 'reset'; + spec.label = spec.label || IPA.messages.buttons.reset; + spec.enable_cond = spec.enable_cond || ['dirty']; + + var that = IPA.action(spec); + + that.execute_action = function(facet) { + facet.reset(); + }; + + return that; +}; + +IPA.update_action = function(spec) { + + spec = spec || {}; + spec.name = spec.name || 'update'; + spec.label = spec.label || IPA.messages.buttons.update; + spec.needs_confirm = spec.needs_confirm !== undefined ? spec.needs_confirm : true; + spec.enable_cond = spec.enable_cond || ['dirty']; + + var that = IPA.action(spec); + + that.execute_action = function(facet) { + + if (!facet.validate()) { + facet.show_validation_error(); + return; + } + + facet.update(); + }; + + return that; +}; + IPA.boolean_state_evaluator = function(spec) { spec = spec || {}; + spec.event = spec.event || 'post_load'; + var that = IPA.state_evaluator(spec); + that.name = spec.name || 'boolean_state_evaluator'; that.field = spec.field; that.true_state = spec.true_state || that.field_name + '-true'; that.false_state = spec.false_state || that.field_name + '-false'; - that.true_desc = spec.true_desc || IPA.messages['true']; - that.false_desc = spec.false_desc || IPA.messages['false']; that.invert_value = spec.invert_value; that.parser = IPA.build({ factory: spec.parser || IPA.boolean_formatter, invert_value: that.invert_value }); - that.evaluate = function(record) { + that.on_event = function(data) { + var old_state = that.state; + var record = data.result.result; that.state = []; var value = that.parser.parse(record[that.field]); if (value === true) { that.state.push(that.true_state); - that.description = that.true_desc; } else { that.state.push(that.false_state); - that.description = that.false_desc; } - return that.state; + that.notify_on_change(old_state); }; return that; @@ -912,10 +959,9 @@ IPA.boolean_state_evaluator = function(spec) { IPA.enable_state_evaluator = function(spec) { spec = spec || {}; + spec.name = spec.name || 'enable_state_evaluator'; spec.true_state = spec.true_state || 'enabled'; spec.false_state = spec.false_state || 'disabled'; - spec.true_desc = spec.true_desc || IPA.messages.status.enabled; - spec.false_desc = spec.false_desc || IPA.messages.status.disabled; var that = IPA.boolean_state_evaluator(spec); @@ -931,7 +977,7 @@ IPA.object_action = function(spec) { that.method = spec.method; that.confirm_msg = spec.confirm_msg || IPA.messages.actions.confirm; - that.execute = function(facet, on_success, on_error) { + that.execute_action = function(facet, on_success, on_error) { var entity_name = facet.entity.name; var pkey = IPA.nav.get_state(entity_name+'-pkey'); @@ -1021,3 +1067,22 @@ IPA.delete_action = function(spec) { return that; }; + + +IPA.enabled_summary_cond = function() { + return { + pos: ['enabled'], + neg: [], + description: IPA.messages.status.enabled, + state: ['enabled'] + }; +}; + +IPA.disabled_summary_cond = function() { + return { + pos: [], + neg: ['enabled'], + description: IPA.messages.status.disabled, + state: ['disabled'] + }; +}; diff --git a/install/ui/facet.js b/install/ui/facet.js index 31a9df73..ef8a0624 100644 --- a/install/ui/facet.js +++ b/install/ui/facet.js @@ -28,6 +28,8 @@ IPA.facet = function(spec, no_init) { spec = spec || {}; + spec.state = spec.state || {}; + $.extend(spec.state, { factory: IPA.state }); var that = {}; @@ -42,7 +44,10 @@ IPA.facet = function(spec, no_init) { that.disable_breadcrumb = spec.disable_breadcrumb; that.disable_facet_tabs = spec.disable_facet_tabs; - that.action_list = spec.action_list; + that.action_state = IPA.build(spec.state); + that.actions = IPA.build({ actions: spec.actions }, IPA.action_holder_builder); + + that.header_actions = spec.header_actions; that.header = spec.header || IPA.facet_header({ facet: that }); that._needs_update = spec.needs_update; @@ -299,16 +304,17 @@ IPA.facet = function(spec, no_init) { that.init_facet = function() { + that.action_state.init(that); + that.actions.init(that); + that.header.init(); + var buttons_spec = { factory: IPA.control_buttons_widget, name: 'control-buttons', - 'class': 'control-buttons' + 'class': 'control-buttons', + buttons: spec.control_buttons }; - if (spec.control_buttons) { - $.extend(buttons_spec, spec.control_buttons); - } - that.control_buttons = IPA.build(buttons_spec); that.control_buttons.init(that); }; @@ -335,9 +341,9 @@ IPA.facet_header = function(spec) { that.facet = spec.facet; - var init = function() { + that.init = function() { - if (that.facet.action_list) { + if (that.facet.header_actions) { var widget_builder = IPA.widget_builder({ widget_options: { @@ -345,10 +351,17 @@ IPA.facet_header = function(spec) { } }); - that.action_list = widget_builder.build_widget(that.facet.action_list); - that.action_list.init(); + var widget = { + factory: IPA.action_list_widget, + actions: that.facet.header_actions + }; + + that.action_list = widget_builder.build_widget(widget); + that.action_list.init(that.facet); } + that.facet.action_state.changed.attach(that.update_summary); + that.title_widget = IPA.facet_title(); }; @@ -587,17 +600,15 @@ IPA.facet_header = function(spec) { } } } + }; - if (that.action_list) { - that.action_list.update(result); - - var state = that.action_list.state; - var icon_tooltip = that.action_list.state_evaluator.get_description(); - if (state.length > 0) { - var css_class = state.join(' '); - that.title_widget.set_class(css_class); - that.title_widget.set_icon_tooltip(icon_tooltip); - } + that.update_summary = function() { + var summary = that.facet.action_state.summary(); + + if (summary.state.length > 0) { + var css_class = summary.state.join(' '); + that.title_widget.set_class(css_class); + that.title_widget.set_icon_tooltip(summary.description); } that.adjust_elements(); @@ -645,8 +656,6 @@ IPA.facet_header = function(spec) { that.load(); }; - init(); - return that; }; @@ -801,7 +810,7 @@ IPA.table_facet = function(spec, no_init) { that.table.pagination_control.css('visibility', 'visible'); - that.post_load.notify(); + that.post_load.notify([data], that); that.clear_expired_flag(); }; @@ -1245,19 +1254,79 @@ IPA.action = function(spec) { that.name = spec.name; that.label = spec.label; + + that.enabled = spec.enabled !== undefined ? spec.enabled : true; that.enable_cond = spec.enable_cond || []; that.disable_cond = spec.disable_cond || []; + that.enabled_changed = IPA.observer(); + + that.visible = spec.visible !== undefined ? spec.visible : true; + that.show_cond = spec.show_cond || []; + that.hide_cond = spec.hide_cond || []; + that.visible_changed = IPA.observer(); + that.handler = spec.handler; - that.needs_confirm = spec.needs_confirm !== undefined ? spec.needs_confirm : true; + + that.needs_confirm = spec.needs_confirm !== undefined ? spec.needs_confirm : false; that.confirm_msg = spec.confirm_msg || IPA.messages.actions.confirm; - that.execute = function(facet, on_success, on_error) { + + that.execute_action = function(facet, on_success, on_error) { if (that.handler) { that.handler(facet, on_success, on_error); } }; + that.execute = function(facet, on_success, on_error) { + + if (!that.enabled || !that.visible) return; + + if (that.needs_confirm) { + + var confirmed = false; + + if (that.confirm_dialog) { + + var dialog = IPA.build(that.confirm_dialog); + confirmed = dialog.confirm(that.facet); + } else { + var msg = that.get_confirm_message(); + confirmed = IPA.confirm(msg); + } + + if (!confirmed) return; + } + + that.execute_action(facet, on_success, on_error); + }; + + that.get_confirm_message = function() { + return that.confirm_msg; + }; + + that.set_enabled = function(enabled) { + + var old = that.enabled; + + that.enabled = enabled; + + if (old !== that.enabled) { + that.enabled_changed.notify([that.enabled], that); + } + }; + + that.set_visible = function(visible) { + + var old = that.visible; + + that.visible = visible; + + if (old !== that.visible) { + that.visible_changed.notify([that.visible], that); + } + }; + return that; }; @@ -1269,32 +1338,189 @@ IPA.action_builder = function(spec) { return that; }; -IPA.state_evaluator = function(spec) { + +IPA.action_holder = function(spec) { spec = spec || {}; var that = {}; - that.evaluate = function() { - that.state = []; - return that.state; + that.actions = $.ordered_map(); + + that.init = function(facet) { + + var i, action, actions; + + that.facet = facet; + actions = IPA.build(spec.actions, IPA.action_builder) || []; + + for (i=0; i 0) { that.state.push('item-selected'); } - that.state_changed.notify(); + that.notify_on_change(old_state); }; return that; }; -IPA.self_service_state_listener = function(spec) { +IPA.self_service_state_evaluator = function(spec) { spec = spec || {}; spec.event = spec.event || 'post_load'; - var that = IPA.state_listener(spec); + var that = IPA.state_evaluator(spec); + that.name = spec.name || 'self_service_state_evaluator'; that.on_event = function() { + + var old_state = that.state; that.state = []; var self_service = IPA.nav.name === 'self-service'; @@ -1382,7 +1619,7 @@ IPA.self_service_state_listener = function(spec) { that.state.push('self-service'); } - that.state_changed.notify(); + that.notify_on_change(old_state); }; return that; @@ -1400,17 +1637,22 @@ IPA.action_button_widget = function(spec) { that.href = spec.href || that.name; that.icon = spec.icon; - that.needs_confirm = spec.needs_confirm !== undefined ? spec.needs_confirm : false; - that.confirm_msg = spec.confirm_msg || IPA.messages.actions.confirm; - that.confirm_dialog = spec.confirm_dialog; + that.action_name = spec.action || that.name; - that.action = IPA.build(spec.action, IPA.action_builder); that.enabled = spec.enabled !== undefined ? spec.enabled : true; that.visible = spec.visible !== undefined ? spec.visible : true; that.show_cond = spec.show_cond || []; that.hide_cond = spec.hide_cond || []; + that.init = function(facet) { + + that.facet = facet; + that.action = that.facet.actions.get(that.action_name); + that.action.enabled_changed.attach(that.set_enabled); + that.action.visible_changed.attach(that.set_visible); + }; + that.create = function(container) { that.widget_create(container); @@ -1426,42 +1668,15 @@ IPA.action_button_widget = function(spec) { } }).appendTo(container); - that.set_enabled(that.enabled); - that.set_visible(that.visible); + that.set_enabled(that.action.enabled); + that.set_visible(that.action.visible); }; that.on_click = function() { if (!that.enabled) return; - if (that.needs_confirm) { - - var confirmed = false; - - if (that.confirm_dialog) { - - var dialog = IPA.build(that.confirm_dialog); - confirmed = dialog.confirm(that.facet); - } else { - var msg = that.get_confirm_message(); - confirmed = IPA.confirm(msg); - } - - if (!confirmed) return; - } - - that.execute_action(); - }; - - that.get_confirm_message = function() { - return that.confirm_msg; - }; - - that.execute_action = function() { - - if (that.action) { - that.action.execute(that.facet); - } + that.action.execute(that.facet); }; that.set_enabled = function(enabled) { @@ -1508,27 +1723,16 @@ IPA.control_buttons_widget = function(spec) { var that = IPA.widget(spec); that.buttons = IPA.build(spec.buttons, IPA.action_button_widget_builder) || []; - that.state_listeners = IPA.build(spec.state_listeners, IPA.state_listener_builder) || []; - that.state = []; that.init = function(facet) { var i; - for (i=0; i= 0) { + that.values[i] = value; + } else { + that.keys.push(key); + that.values.push(value); + that.length = that.keys.length; + } + that.map[key] = value; - that.length = that.keys.length; }; that.remove = function(key) { diff --git a/install/ui/search.js b/install/ui/search.js index 1b6cfab2..845da57c 100644 --- a/install/ui/search.js +++ b/install/ui/search.js @@ -37,58 +37,35 @@ IPA.search_facet = function(spec, no_init) { spec.disable_facet_tabs = spec.disable_facet_tabs === undefined ? true : spec.disable_facet_tabs; - spec.control_buttons = spec.control_buttons || {}; - - 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( + spec.actions = spec.actions || []; + spec.actions.unshift( + IPA.refresh_action, + IPA.batch_remove_action, + IPA.add_action); + + spec.control_buttons = spec.control_buttons || []; + spec.control_buttons.unshift( { name: 'refresh', label: IPA.messages.buttons.refresh, - icon: 'reset-icon', - action: { - handler: function(facet) { - facet.refresh(); - } - } + icon: 'reset-icon' }, { name: 'remove', label: IPA.messages.buttons.remove, - icon: 'remove-icon', - needs_confirm: true, - hide_cond: ['self-service'], - action: { - enable_cond: ['item-selected'], - handler: function(facet) { - facet.show_remove_dialog(); - } - } + icon: 'remove-icon' }, { name: 'add', label: IPA.messages.buttons.add, - icon: 'add-icon', - hide_cond: ['self-service'], - action: { - handler: function(facet) { - facet.show_add_dialog(); - } - } - } - ); - cb.state_listeners.push( - { - factory: IPA.selected_state_listener - }, - { - factory: IPA.self_service_state_listener - } - ); + icon: 'add-icon' + }); - //TODO: make buttons invisible on self-service. Currently regression. + spec.state = spec.state || {}; + spec.state.evaluators = spec.state.evaluators || []; + spec.state.evaluators.push( + IPA.selected_state_evaluator, + IPA.self_service_state_evaluator); var that = IPA.table_facet(spec, true); @@ -392,6 +369,39 @@ IPA.nested_search_facet = function(spec) { return that; }; +IPA.batch_remove_action = function(spec) { + + spec = spec || {}; + spec.name = spec.name || 'remove'; + spec.label = spec.label || IPA.messages.buttons.remove; + spec.enable_cond = spec.enable_cond || ['item-selected']; + spec.hide_cond = spec.hide_cond || ['self-service']; + + var that = IPA.action(spec); + + that.execute_action = function(facet) { + facet.show_remove_dialog(); + }; + + return that; +}; + +IPA.add_action = function(spec) { + + spec = spec || {}; + spec.name = spec.name || 'add'; + spec.label = spec.label || IPA.messages.buttons.add; + spec.hide_cond = spec.hide_cond || ['self-service']; + + var that = IPA.action(spec); + + that.execute_action = function(facet) { + facet.show_add_dialog(); + }; + + return that; +}; + /* * Calls entity's disable command for each selected item in a batch. * Usable in table facets. diff --git a/install/ui/widget.js b/install/ui/widget.js index d3efe499..172e43a5 100644 --- a/install/ui/widget.js +++ b/install/ui/widget.js @@ -839,29 +839,35 @@ IPA.select_widget = function(spec) { container.addClass('select-widget'); - var select = $('', { + name: that.name, + change: function() { + that.value_changed.notify([], that); + return false; + } }).appendTo(container); + that.create_options(); + + if (that.undo) { + that.create_undo(container); + } + + that.create_error_link(container); + }; + + that.create_options = function() { + + that.select.empty(); + for (var i=0; i', { text: option.label, value: option.value - }).appendTo(select); + }).appendTo(that.select); } - - if (that.undo) { - that.create_undo(container); - } - - that.select = $('select[name="'+that.name+'"]', that.container); - that.select.change(function() { - that.value_changed.notify([], that); - }); - - that.create_error_link(container); }; that.save = function() { @@ -891,17 +897,29 @@ IPA.select_widget = function(spec) { $('option', that.select).attr('selected', ''); }; - that.enable_options = function() { - $('option', that.select).attr('disabled', ''); + that.set_options_enabled = function(enabled, options) { + + var html_value = enabled ? '' : 'disabled'; + + if (!options) { + $('option', that.select).attr('disabled', html_value); + } else { + for (var i=0; i