Subject: [pgAdmin4][Patch]: Backgrid StringDepsCell

From: Khushboo Vashi <[email-masked]>
Date: Wed, 30 Mar 2016 18:39:35 +0530

Hi,

Please find the attached patch for the Backgrid *StringDepsCell.*

The *StringDepsCell* displays HTML escaped strings and accepts
anything typed in.
Also, Listen to the dependent fields.

Usage of the Backgrid Cell:

If the Precision cell is dependent on the Datatype then:

{
  id: 'precision', label:'{{ _('Precision') }}', type: 'test'
  cell: *Backgrid.Extension.StringDepsCell*, deps: ['datatype']

}

Thanks,
Khushboo
diff --git a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
index 4b233d2..ed6bb51 100644
--- a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
@@ -447,6 +447,59 @@
     editor: TextareaCellEditor
   });
 
+  /**
+    StringDepsCell displays HTML escaped strings and accepts anything typed in.
+    Also, Listen to the dependent fields.
+
+    @class Backgrid.Extension.StringDepsCell
+    @extends Backgrid.StringCell
+  */
+  var StringDepsCell = Backgrid.Extension.StringDepsCell = Backgrid.StringCell.extend({
+    initialize: function(){
+      Backgrid.StringCell.prototype.initialize.apply(this, arguments);
+
+      // Listen to the dependent fields in the model for any change
+      var deps = this.column.get('deps');
+      var self = this;
+
+      if (deps && _.isArray(deps)) {
+        _.each(deps, function(d) {
+          attrArr = d.split('.');
+          name = attrArr.shift();
+          self.listenTo(self.model, "change:" + name, self.render_deps);
+        });
+      }
+    },
+    remove: function() {
+        // Remove the events for the dependent fields in the model
+      var self = this,
+          deps = self.column.get('deps');
+
+      if (deps && _.isArray(deps)) {
+        _.each(deps, function(d) {
+          attrArr = d.split('.');
+          name = attrArr.shift();
+          self.stopListening(self.model, "change:" + name, self.render_deps);
+        });
+      }
+
+      Backbone.View.prototype.remove.apply(self, arguments);
+    },
+    render_deps: function () {
+        this.$el.empty();
+        var model = this.model;
+        var column = this.column;
+        editable = this.column.get("editable");
+
+        is_editable = _.isFunction(editable) ? !!editable.apply(column, [model]) : !!editable;
+        if (is_editable){ this.$el.addClass("editable"); }
+        else { this.$el.removeClass("editable"); }
+
+        this.delegateEvents();
+        return this;
+        }
+    });
+
   return Backgrid;
 
 }));

-- 
Sent via pgadmin-hackers mailing list ([email-masked])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers

---

From: Ashesh Vashi <[email-masked]>
Date: Fri, 1 Apr 2016 14:59:52 +0530

Hi Khushboo,

I am reluctant to use this code as it is.
I would prefer you create just helper functions (i.e. initialize, remove)
for the dependents in Backgrid.Cell, and then use them directly from the
different cell itself.
Because - this functionality limits us to us only with the string type.

Anyway - we will be using the dependent functionality for very attributes.

You can extend them directly in the Node's model (schema).

--

Thanks & Regards,

Ashesh Vashi
EnterpriseDB INDIA: Enterprise PostgreSQL Company
<http://www.enterprisedb.com>

*http://www.linkedin.com/in/asheshvashi*
<http://www.linkedin.com/in/asheshvashi>

On Wed, Mar 30, 2016 at 6:39 PM, Khushboo Vashi <
[email-masked]> wrote:

> The *StringDepsCell* displays HTML escaped strings and accepts anything typed in.

---

From: Khushboo Vashi <[email-masked]>
Date: Fri, 1 Apr 2016 15:56:57 +0530

Hi Ashesh,

Yes, agreed. This implementation limits us to use only String Cell.
So, I have modified the patch as you suggested.

Please find the attachment for the same.

Thanks,
Khushboo

index 4b233d2..6ccea9a 100644
@@ -447,6 +447,48 @@
 
+  /**
+    DependentCell can be used as a base class for any backgrid cell which is
+    dependent on another cell. It will listen to the dependent fields/cells.
+
+    Need to Extend this cell whenever required and has to implement render_deps
+    function to listen to the dependent fields change event.
+
+    @class Backgrid.Extension.DependentCell
+    @extends Backgrid.DependentCell
+  */
+  var DependentCell = Backgrid.Extension.DependentCell = Backgrid.Cell.extend({
+    initialize: function(){
+      Backgrid.StringCell.prototype.initialize.apply(this, arguments);
+
+      // Listen to the dependent fields in the model for any change
+      var deps = this.column.get('deps');
+      var self = this;
+
+      if (deps && _.isArray(deps)) {
+        _.each(deps, function(d) {
+          attrArr = d.split('.');
+          name = attrArr.shift();
+          self.listenTo(self.model, "change:" + name, self.render_deps);
+        });
+      }
+    },
+    remove: function() {
+        // Remove the events for the dependent fields in the model
+      var self = this,
+          deps = self.column.get('deps');
+
+      if (deps && _.isArray(deps)) {
+        _.each(deps, function(d) {
+          attrArr = d.split('.');
+          name = attrArr.shift();
+          self.stopListening(self.model, "change:" + name, self.render_deps);
+        });
+      }
+      Backbone.View.prototype.remove.apply(self, arguments);
+    }
+  });
+
   return Backgrid;
 
 }));

---

From: Khushboo Vashi <[email-masked]>
Date: Tue, 5 Apr 2016 10:59:14 +0530

Hi Ashesh,

I have changed the function name (from *render_deps* to *updateUIDeps*),
which will be called on the dependent field change, as per your suggestion.

Please find attached patch for the same.

Thanks,
Khushboo

On Fri, Apr 1, 2016 at 3:56 PM, Khushboo Vashi <
[email-masked]> wrote:

> On Fri, Apr 1, 2016 at 2:59 PM, Ashesh Vashi <
> [email-masked]> wrote:
>
>> Hi Khushboo,
>>
index 4b233d2..9de19fa 100644
@@ -447,6 +447,46 @@
 
+  /**
+    Need to Extend this cell whenever required and has to implement updateUIDeps
+          self.listenTo(self.model, "change:" + name, self.updateUIDeps);
+          self.stopListening(self.model, "change:" + name, self.updateUIDeps);
 
 }));

---

From: Ashesh Vashi <[email-masked]>
Date: Wed, 6 Apr 2016 14:38:37 +0530

Hi Khushboo,

> which will be called on the dependent field change, as per your suggestion.
I've updated the patch.
Please try this.
I think - 'updateUIDeps' is not the write name.
A Cell can do anything, when dependent changed, hence - I renamed it with
'dependentChanged'.

Also, The user is not going to extend existing cell from the
DependendsCell, but - only going to use the functions.
Hence - I have created a separate class for it instead of extend it from
Backgrid.Cell.

--

Thanks & Regards,

Ashesh Vashi
EnterpriseDB INDIA: Enterprise PostgreSQL Company
<http://www.enterprisedb.com/>

>>> I would prefer you create just helper functions (i.e. initialize,
>>> remove) for the dependents in Backgrid.Cell, and then use them directly
>>> from the different cell itself.

---

From: Khushboo Vashi <[email-masked]>
Date: Mon, 9 May 2016 12:26:51 +0530

Hi,

Please find the attached re-based patch.

Thanks,
Khushboo

diff --git a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
index 55ba7c0..d157999 100644
--- a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
@@ -22,6 +22,12 @@
     factory(root, root._, (root.jQuery || root.Zepto || root.ender || root.$), root.Backbone, root.Backform);
   }
 } (this, function(root, _, $, Backbone, Backform, Alertify) {
+  /**
+   * It has already been loaded once.
+   **/
+//  if (Backgrid.Extension.ObjectCellEditor) {
+//    return Backgrid;
+//  }
 
   /*
      * Add mechanism in backgrid to render different types of cells in
@@ -802,6 +808,47 @@
     },
   });
 
+  /**
+   * DependentCell functions can be used with the different cell type in order
+   * to setup the callback for the depedent attribute change in the model.
+   *
+   * Please implement the 'dependentChanged' as the callback in the used cell.
+   *
+   * @class Backgrid.Extension.DependentCell
+   **/
+  var DependentCell = Backgrid.Extension.DependentCell = function() {};
+
+  _.extend(
+    DependentCell.prototype, {
+      initialize: function(){
+        // Listen to the dependent fields in the model for any change
+        var deps = this.column.get('deps');
+        var self = this;
+
+        if (deps && _.isArray(deps)) {
+          _.each(deps, function(d) {
+            attrArr = d.split('.');
+            name = attrArr.shift();
+            self.listenTo(self.model, "change:" + name, self.dependentChanged);
+          });
+        }
+      },
+      remove: function() {
+        // Remove the events for the dependent fields in the model
+        var self = this,
+          deps = self.column.get('deps');
+
+        if (deps && _.isArray(deps)) {
+          _.each(deps, function(d) {
+            attrArr = d.split('.');
+            name = attrArr.shift();
+
+            self.stopListening(self.model, "change:" + name, self.dependentChanged);
+          });
+        }
+      }
+    });
+
   return Backgrid;
 
 }));

---

From: Ashesh Vashi <[email-masked]>
Date: Tue, 10 May 2016 12:42:31 +0530

Thanks - committed!

--

Thanks & Regards,

Ashesh Vashi

On Mon, May 9, 2016 at 12:26 PM, Khushboo Vashi <
[email-masked]> wrote:

> On Wed, Apr 6, 2016 at 2:38 PM, Ashesh Vashi <