Enable update and reset button only if dirty

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

Original problem:
WEBUI: Update automount location refer to unknown command
Update name of the automount location (Policy -> Automount ->
custom_location -> Settings -> Update) in the WEBUI refer to an unknown command.

Solution:
Tracking dirty state in field -> section -> details facet.
'Reset' and 'Updates' in details facet are enabled only if facet is dirty.

Removes the problem above and 'no modification to be performed' annoyance.

install/ui/details.js

@@ -40,6 +40,9 @@ IPA.details_section = function(spec) {
     that.entity = spec.entity;
     that.fields = $.ordered_map();
 
+    that.dirty = false;
+    that.dirty_changed = IPA.observer();
+
     that.get_field = function(name) {
         return that.fields.get(name);
     };
@@ -47,6 +50,7 @@ IPA.details_section = function(spec) {
     that.add_field = function(field) {
         field.entity = that.entity;
         that.fields.put(field.name, field);
+        field.dirty_changed.attach(that.field_dirty_changed);
         return field;
     };
 
@@ -117,6 +121,20 @@ IPA.details_section = function(spec) {
         }
     };
 
+    that.field_dirty_changed = function(dirty) {
+        var old = that.dirty;
+
+        if(dirty) {
+            that.dirty = true;
+        } else {
+            that.dirty = that.is_dirty();
+        }
+
+        if(old !== that.dirty) {
+            that.dirty_changed.notify([that.dirty], that);
+        }
+    };
+
     that.is_dirty = function() {
         var fields = that.fields.values;
         for (var i=0; i<fields.length; i++) {
@@ -235,10 +253,12 @@ IPA.details_facet = function(spec) {
 
     that.sections = $.ordered_map();
 
+    that.dirty = false;
 
     that.add_section = function(section) {
         section.entity = that.entity;
         that.sections.put(section.name, section);
+        section.dirty_changed.attach(that.section_dirty_changed);
         return section;
     };
 
@@ -297,9 +317,11 @@ IPA.details_facet = function(spec) {
             name: 'reset',
             label: IPA.messages.buttons.reset,
             icon: 'reset-icon',
-            'class': 'details-reset',
+            'class': 'details-reset action-button-disabled',
             click: function() {
+                if(!that.update_button.hasClass('action-button-disabled')) {
                     that.reset();
+                }
                 return false;
             }
         }).appendTo(that.controls);
@@ -308,9 +330,11 @@ IPA.details_facet = function(spec) {
             name: 'update',
             label: IPA.messages.buttons.update,
             icon: 'update-icon',
-            'class': 'details-update',
+            'class': 'details-update action-button-disabled',
             click: function() {
+                if(!that.update_button.hasClass('action-button-disabled')) {
                     that.update();
+                }
                 return false;
             }
         }).appendTo(that.controls);
@@ -437,6 +461,16 @@ IPA.details_facet = function(spec) {
         return pkey != that.pkey;
     };
 
+    that.section_dirty_changed = function(dirty) {
+        if(dirty) {
+            that.dirty = true;
+        } else {
+            that.dirty = that.is_dirty();
+        }
+
+        that.enable_update(that.dirty);
+    };
+
     that.is_dirty = function() {
         var sections = that.sections.values;
         for (var i=0; i<sections.length; i++) {
@@ -447,6 +481,16 @@ IPA.details_facet = function(spec) {
         return false;
     };
 
+    that.enable_update = function(value) {
+        if(value) {
+            that.reset_button.removeClass('action-button-disabled');
+            that.update_button.removeClass('action-button-disabled');
+        } else {
+            that.reset_button.addClass('action-button-disabled');
+            that.update_button.addClass('action-button-disabled');
+        }
+    };
+
     that.load = function(data) {
         that.facet_load(data);
 
@@ -455,6 +499,7 @@ IPA.details_facet = function(spec) {
             var section = sections[i];
             section.load(data);
         }
+        that.enable_update(false);
     };
 
     that.reset = function() {
@@ -463,6 +508,7 @@ IPA.details_facet = function(spec) {
             var section = sections[i];
             section.reset();
         }
+        that.enable_update(false);
     };
 
     that.update = function(on_win, on_fail) {

install/ui/test/ipa_tests.js

@@ -312,3 +312,35 @@ test("Testing unsuccessful IPA.command().", function() {
 
     $.ajax = orig;
 });
+
+test("Testing observer.", function() {
+    expect(6);
+    var obj = {};
+    var param1_value = 'p1';
+    var param2_value = 'p2';
+
+    obj.event = IPA.observer();
+
+    obj.event.attach(function(param1, param2) {
+        ok(true, "Proper function 1 callback");
+    });
+
+    var first = true;
+
+    var func = function(param1, param2) {
+        if(first) {
+            ok(true, "Proper function 2 callback");
+            equals(param1, param1_value, "Testing Parameter 1");
+            equals(param2, param2_value, "Testing Parameter 2");
+            equals(this, obj, "Testing Context");
+            first = false;
+        } else {
+            ok(false, "Fail function 2 callback");
+        }
+    }
+
+    obj.event.attach(func);
+    obj.event.notify([param1_value, param2_value], obj);
+    obj.event.detach(func);
+    obj.event.notify([param1_value, param2_value], obj);
+});

install/ui/widget.js

@@ -62,6 +62,8 @@ IPA.widget = function(spec) {
     that.dirty = false;
     that.valid = true;
 
+    that.dirty_changed = IPA.observer();
+
 
     function set_param_info(){
         if (!that.param_info  && that.entity){
@@ -296,6 +298,7 @@ IPA.widget = function(spec) {
     };
 
     that.set_dirty = function(dirty) {
+        var old = that.dirty;
         that.dirty = dirty;
         if (that.undo) {
             if (dirty) {
@@ -304,6 +307,10 @@ IPA.widget = function(spec) {
                 that.hide_undo();
             }
         }
+
+        if(old !== dirty) {
+            that.dirty_changed.notify([], that);
+        }
     };
 
     that.get_undo = function() {
@@ -496,6 +503,7 @@ IPA.multivalued_text_widget = function(spec) {
     };
 
     that.set_dirty = function(dirty, index) {
+        var old = that.dirty;
         that.dirty = dirty;
 
         if (that.undo) {
@@ -510,6 +518,10 @@ IPA.multivalued_text_widget = function(spec) {
                 that.set_dirty(that.test_dirty());
             }
         }
+
+        if(old !== dirty) {
+            that.dirty_changed.notify([], that);
+        }
     };
 
     that.show_undo = function(index) {
@@ -1939,3 +1951,33 @@ IPA.button = function(spec) {
     return button;
 };
 
+IPA.observer = function(spec) {
+
+    var that = {};
+
+    that.listeners = [];
+
+    that.attach = function(callback) {
+        that.listeners.push(callback);
+    };
+
+    that.detach = function(callback) {
+        for(var i=0; i < that.listeners.length; i++) {
+            if(callback === that.listeners[i]) {
+                that.listeners.splice(i,1);
+                break;
+            }
+        }
+    };
+
+    that.notify = function(args, context) {
+        args = args || [];
+        context = context || this;
+
+        for(var i=0; i < that.listeners.length; i++) {
+            that.listeners[i].apply(context, args);
+        }
+    };
+
+    return that;
+};