public inbox for [email protected]  

help / color / mirror / Atom feed

From: Murtuza Zabuawala <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: Patch: Added select2cell editor for backgrid [pgAdmin4]
Date: Thu, 31 Mar 2016 12:27:18 +0530
Message-ID: <CAKKotZQRdDZmkkd2QA37PoHxFXQV+aPZuTste4-w6SDACfXk3Q@mail.gmail.com> (raw)
List-Unsubscribe:  <mailto:[email protected]?body=unsub%20pgadmin-hackers>

Hi,

We have added Select2Cell Editor for backgrid, eariler as it was not
present & causing issue in rendering in subnode control.


--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company


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


Attachments:

  [application/octet-stream] Added_Select2Cell_Editor_v1.patch (4.9K, 3-Added_Select2Cell_Editor_v1.patch)
  download | inline diff:
diff --git a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
index 4b233d2..a8d3216 100644
--- a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
@@ -335,22 +335,130 @@
     }
   });

+  /**
+    Select2CellEditor the cell editor renders a Select2 input
+    box as its editor.
+  */
+  var Select2CellEditor = Backgrid.Select2CellEditor = Backgrid.SelectCellEditor.extend({
+    /** @property */
+    events: {
+      "change": "onSave"
+    },
+
+    /** @property */
+    setSelect2Options: function (options) {
+      this.select2Options = _.extend(options || {});
+    },
+
+    /** @property */
+    select2Options: {
+      openOnEnter: false
+    },
+
+    /** @property {function(Object, ?Object=): string} template */
+    template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>', null, {variable: null}),
+
+    initialize: function () {
+      Backgrid.SelectCellEditor.prototype.initialize.apply(this, arguments);
+      this.close = _.bind(this.close, this);
+    },
+    /**
+       Renders a `select2` select box instead of the default `<select>` HTML
+       element using the supplied options from #select2Options.
+      */
+    render: function () {
+      var self =this,
+          col = _.defaults(this.column.toJSON(), this.defaults),
+          model = this.model, column = this.column,
+          editable = Backgrid.callByNeed(col.editable, column, model),
+          optionValues = Backgrid.callByNeed(col.options, column, this);
+
+      this.$el.empty();
+
+      if (!_.isArray(optionValues)) throw new TypeError("optionValues must be an array");
+
+      /*
+       * Add empty option as Select2 requires any empty '<option><option>' for
+       * some of its functionality to work.
+       */
+
+      var optionText = null,
+          optionValue = null,
+          model = this.model,
+          selectedValues = model.get(this.column.get("name"));
+
+      for (var i = 0; i < optionValues.length; i++) {
+        var optionValue = optionValues[i];
+
+        if (_.isArray(optionValue) || _.isObject(optionValue)) {
+          optionText  = optionValue[0] || optionValue.label;
+          optionValue = optionValue[1] || optionValue.value;
+
+          this.$el.append(
+            this.template({
+              text: optionText,
+              value: optionValue,
+              selected: (selectedValues == optionValue) ||
+                (_.indexOf(selectedValues, optionValue) > -1)
+            }));
+        } else {
+          throw new TypeError("optionValues elements must be a name-value pair.");
+        }
+      }
+      // Initialize select2 control.
+      this.$el.select2(
+          _.defaults(
+            {'disabled': !editable},
+            col.select2,
+            this.select2Options
+            ));
+
+      setTimeout(function(){
+        model.set(column.get("name"), self.$el.val(), {silent: true});
+      },10);
+
+      this.delegateEvents();
+
+      return this;
+    },
+    /**
+       Attach event handlers to the select2 box and focus it.
+    */
+    postRender: function () {
+      var self = this;
+      self.$el.on("blur", function (e) {
+        self.close(e);
+      }).select2("focus");
+    },
+
+    remove: function () {
+      this.$el.select2("destroy");
+      return Backgrid.SelectCellEditor.prototype.remove.apply(this, arguments);
+    },
+    onSave: function (e) {
+      var model = this.model;
+      var column = this.column;
+      model.set(column.get("name"), this.$el.val(), {silent: true});
+    }
+  });

   /*
    *  Select2Cell for backgrid.
    */
-  var Select2Cell = Backgrid.Extension.Select2Cell = Backgrid.Cell.extend({
+  var Select2Cell = Backgrid.Extension.Select2Cell = Backgrid.SelectCell.extend({
     className: "select2-cell",
+    /** @property */
+    editor: Select2CellEditor,
     defaults: _.defaults({
         select2: {}
-      }, Backgrid.Cell.prototype.defaults),
+      }, Backgrid.SelectCell.prototype.defaults),
     events: {
       "change": "onSave",
       "select2:unselect": "onSave"
     },
-    template: _.template(
-      '<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>'
-    ),
+    /** @property {function(Object, ?Object=): string} template */
+    template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>', null, {variable: null}),
+
     render: function () {
       var col = _.defaults(this.column.toJSON(), this.defaults),
           model = this.model, column = this.column,
@@ -413,7 +521,7 @@
     onSave: function (e) {
       var model = this.model;
       var column = this.column;
-      model.set(column.get("name"), this.$select.val());
+      model.set(column.get("name"), this.$select.val(), {silent: true});
     }
   });

view thread (5+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected]
  Subject: Re: Patch: Added select2cell editor for backgrid [pgAdmin4]
  In-Reply-To: <CAKKotZQRdDZmkkd2QA37PoHxFXQV+aPZuTste4-w6SDACfXk3Q@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox