Allow to make change the behaviour of backform control based on other

attribute value.

libraries.txt

@@ -14,6 +14,6 @@ wcDocker          1cd2466afb  MIT          https://github.com/WebCabin/wcDocker
 Require.js        2.1.18      BSD/MIT      http://requirejs.org/
 Underscore.js     1.8.3       MIT          http://underscorejs.org/
 Underscore.string 387ab72d49  MIT          http://epeli.github.io/underscore.string/
-Backform.js       6270ec07e2  MIT          https://github.com/AmiliaApp/backform
+Backform.js       5859b4f9db  MIT          https://github.com/AmiliaApp/backform
 font-Awesome      4.3         SIL OFL      http://fortawesome.github.io/Font-Awesome/
 font-mfizz        1.2         MIT          http://fizzed.com/oss/font-mfizz

web/pgadmin/browser/templates/browser/js/browser.js

@@ -46,7 +46,7 @@ OWNER TO helpdesk;\n';
 
     if (this.isVisible()) {
       var obj = pgAdmin.Browser,
-          i   = obj.tree.selected(),
+          i   = obj.tree ? obj.tree.selected() : undefined,
           d   = i && i.length == 1 ? obj.tree.itemData(i) : undefined;
 
       if (d && obj.Nodes[d._type].callbacks['selected'] &&

web/pgadmin/static/js/backform.js

@@ -39,6 +39,7 @@
     helpClassName: "help-block",
     errorClassName: "has-error",
     helpMessageClassName: "help-block",
+    hiddenClassname: "hidden",
 
     // Bootstrap 2.3 adapter
     bootstrap2: function() {
@@ -183,18 +184,36 @@
   });
 
   // Field model and collection
-  // A field maps a model attriute to a control for rendering and capturing user input
+  //
+  //   A field maps a model attriute to a control for rendering and capturing
+  //   user input.
   var Field = Backform.Field = Backbone.Model.extend({
     defaults: {
-      name: "", // Name of the model attribute; accepts "." nested path (e.g. x.y.z)
+      // Name of the model attribute
+      // - It accepts "." nested path (e.g. x.y.z)
+      name: "",
+      // Placeholder for the input
       placeholder: "",
+      // Disable the input control
+      // (Optional - true/false/function returning boolean)
+      // (Default Value: false)
       disabled: false,
+      // Visible
+      // (Optional - true/false/function returning boolean)
+      // (Default Value: true)
+      visible: true,
+      // Value Required (validation)
+      // (Optional - true/false/function returning boolean)
+      // (Default Value: true)
       required: false,
-      value: undefined, // Optional. Default value when model is empty.
-      control: undefined, // Control name or class
+      // Default value for the field
+      // (Optional)
+      value: undefined,
+      // Control or class name for the control representing this field
+      control: undefined,
       formatter: undefined
     },
-    initialize: function() {
+    initialize: function(attributes, options) {
       var control = Backform.resolveNameToClass(this.get("control"), "Control");
       this.set({control: control}, {silent: true});
     }
@@ -206,18 +225,22 @@
 
   // Base Control class
   var Control = Backform.Control = Backbone.View.extend({
-    defaults: {}, // Additional field defaults
+    // Additional field defaults
+    defaults: {},
     className: function() {
       return Backform.groupClassName;
     },
     template: _.template([
       '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
       '<div class="<%=Backform.controlsClassName%>">',
-      '  <span class="<%=Backform.controlClassName%> uneditable-input"><%=value%></span>',
+      '  <span class="<%=Backform.controlClassName%> uneditable-input">',
+      '    <%=value%>',
+      '  </span>',
       '</div>'
     ].join("\n")),
     initialize: function(options) {
-      this.field = options.field; // Back-reference to the field
+      // Back-reference to the field
+      this.field = options.field;
 
       var formatter = Backform.resolveNameToClass(this.field.get("formatter") || this.formatter, "Formatter");
       if (!_.isFunction(formatter.fromRaw) && !_.isFunction(formatter.toRaw)) {
@@ -228,7 +251,10 @@
       var attrArr = this.field.get('name').split('.');
       var name = attrArr.shift();
 
+      // Listen to the field in the model for any change
       this.listenTo(this.model, "change:" + name, this.render);
+
+      // Listen for the field in the error model for any change
       if (this.model.errorModel instanceof Backbone.Model)
         this.listenTo(this.model.errorModel, "change:" + name, this.updateInvalid);
     },
@@ -276,10 +302,27 @@
             value: this.formatter.fromRaw(rawValue, this.model),
             attributes: attributes,
             formatter: this.formatter
-          });
+          }),
+          evalF = function(f, m) {
+            return (_.isFunction(f) ? !!f(m) : !!f);
+          };
+
+      // Evaluate the disabled, visible, and required option
+      _.extend(data, {
+        disabled: evalF(data.disabled, this.model),
+        visible:  evalF(data.visible, this.model),
+        required: evalF(data.required, this.model)
+      });
+
+      // Clean up first
+      this.$el.removeClass(Backform.hiddenClassname);
+
+      if (!data.visible)
+        this.$el.addClass(Backform.hiddenClassname);
 
       this.$el.html(this.template(data)).addClass(field.name);
       this.updateInvalid();
+
       return this;
     },
     clearInvalid: function() {

web/pgadmin/static/js/backform.pgadmin.js

@@ -41,23 +41,22 @@
     setGroupContentClassName: "fieldset-content col-xs-12"
     });
 
-  _.extend(Backform.Field.prototype, {
-    defaults: {
-      name: "", // Name of the model attribute; accepts "." nested path (e.g. x.y.z)
-      placeholder: "",
-      disabled: false,
-      required: false,
-      value: undefined, // Optional. Default value when model is empty.
-      control: undefined, // Control name or class
-      formatter: undefined,
-      fields: undefined,
-    },
-    initialize: function() {
-      var control = Backform.resolveNameToClass(this.get("control"), "Control");
-      this.set({control: control}, {silent: true});
-    }
-  });
+  // Override the Backform.Control to allow to track changes in dependencies,
+  // and rerender the View element
+  var BackformControlInit = Backform.Control.prototype.initialize;
+  Backform.Control.prototype.initialize = function() {
+    BackformControlInit.apply(this, arguments);
 
+    // Listen to the dependent fields in the model for any change
+    var deps = this.field.get('deps');
+    var that = this;
+    if (deps && _.isArray(deps))
+      _.each(deps, function(d) {
+        attrArr = d.split('.');
+        name = attrArr.shift();
+        that.listenTo(that.model, "change:" + name, that.render);
+    });
+  };
 
   // Backform Dialog view (in bootstrap tabbular form)
   // A collection of field models.
@@ -72,7 +71,7 @@
       var s = opts.schema;
       if (s && _.isArray(s)) {
         this.schema = _.each(s, function(o) {
-          if (!(o.fields instanceof Backbone.Collection))
+          if (o.fields && !(o.fields instanceof Backbone.Collection))
             o.fields = new Backform.Fields(o.fields);
           o.cId = o.cId || _.uniqueId('pgC_');
           o.hId = o.hId || _.uniqueId('pgH_');