public inbox for [email protected]  

help / color / mirror / Atom feed

From: Aditya Toshniwal <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [pgAdmin][RM5038] Select2 enhancement - Load items on demand (scroll)
Date: Tue, 24 Dec 2019 13:00:20 +0530
Message-ID: <CAM9w-_nEN_PK4Mn+9hyLz-ZC2MGp1XGDjx-1L0J=TCQOOUfxBQ@mail.gmail.com> (raw)

Hi Hackers,

Attached is the patch to enhance select2 used in pgAdmin. The select2
dropdown will show only a few items when opened initially. On scrolling it
will show others. Searching will work as before. This will reduce the
number of DOM nodes on page.
Note that, individual controls can disable the behaviour if desired by
passing onDemandLoad:false for select2 options. It is enabled by default.

Kindly review.

-- 
Thanks and Regards,
Aditya Toshniwal
pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune
"Don't Complain about Heat, Plant a TREE"


Attachments:

  [application/octet-stream] RM5038.patch (3.8K, 3-RM5038.patch)
  download | inline diff:
diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js
index cd11946fd..836d83d1f 100644
--- a/web/pgadmin/browser/static/js/node.ui.js
+++ b/web/pgadmin/browser/static/js/node.ui.js
@@ -93,6 +93,57 @@ define([
     );
   });
 
+  /* Define on demand loading of dropdown items.
+   * This also requires ajax option of select2 to be set.
+   * The trick is, ajax: {} will also work even if you're actually not
+   * using ajax.
+   */
+  $.fn.select2.amd.define('select2/onDemandDataAdapter', [
+    'select2/utils',
+    'select2/data/select',
+  ], function (Utils, SelectAdapter) {
+
+    function onDemandDataAdapter ($element, options) {
+      this.$element = $element;
+      this.options = options;
+    }
+    Utils.Extend(onDemandDataAdapter, SelectAdapter);
+    onDemandDataAdapter.prototype.query = function (params, callback) {
+      var data = [];
+      var self = this;
+      if (!params.page) {
+        params.page = 1;
+      }
+      var pageSize = 20;
+
+      var $options = this.$element.children();
+      $options.each(function () {
+        var $option = $(this);
+
+        if (!$option.is('option') && !$option.is('optgroup')) {
+          return;
+        }
+
+        var option = self.item($option);
+
+        var matches = self.matches(params, option);
+
+        if (matches !== null) {
+          data.push(matches);
+        }
+      });
+
+      callback({
+        results: data.slice((params.page - 1) * pageSize, params.page * pageSize),
+        pagination: {
+          more: data.length >= params.page * pageSize,
+        },
+      });
+    };
+
+    return onDemandDataAdapter;
+  });
+
   /*
    * NodeAjaxOptionsControl
    *   This control will fetch the options required to render the select
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index eb0821284..4c9227637 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -2190,6 +2190,7 @@ define([
         emptyOptions: false,
         preserveSelectionOrder: false,
         isDropdownParent: false,
+        onDemandLoad: true,
       });
 
       // Evaluate the disabled, visible, and required option
@@ -2248,6 +2249,16 @@ define([
         select2Opts.data = data.rawValue;
       }
 
+      /* Set the pgadmin adapter for on demand load.
+       * Setting empty ajax option will enable infinite scrolling.
+       */
+      if(select2Opts.onDemandLoad) {
+        select2Opts.dataAdapter = $.fn.select2.amd.require('select2/onDemandDataAdapter');
+        if(_.isUndefined(select2Opts.ajax)) {
+          select2Opts.ajax = {};
+        }
+      }
+
       this.$sel = this.$el.find('select').select2(select2Opts);
 
       // Add or remove tags from select2 control
@@ -2262,8 +2273,6 @@ define([
             $(this).empty();
           }
         });
-
-
       }
 
       // Select the highlighted item on Tab press.
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index 52bcbd9d9..64423e1d0 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -883,6 +883,7 @@ define([
         select2_opts = _.extend({
           openOnEnter: false,
           multiple: false,
+          onDemandLoad: true,
         }, self.defaults.select2,
         (col.select2 || {})
         ),
@@ -943,6 +944,12 @@ define([
         select2_opts['placeholder'] = '';
       }
 
+      if(select2_opts.onDemandLoad) {
+        select2_opts.dataAdapter = $.fn.select2.amd.require('select2/onDemandDataAdapter');
+        if(_.isUndefined(select2_opts.ajax)) {
+          select2_opts.ajax = {};
+        }
+      }
       // Initialize select2 control.
       this.$sel = this.$select.select2(select2_opts);
 

view thread (6+ 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: [pgAdmin][RM5038] Select2 enhancement - Load items on demand (scroll)
  In-Reply-To: <CAM9w-_nEN_PK4Mn+9hyLz-ZC2MGp1XGDjx-1L0J=TCQOOUfxBQ@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