MAGETWO-59801: [Performance Bug] Tax Rules Form unusable with large # of tax rates

Author: iivashchenko

dev/tests/js/jasmine/tests/lib/mage/multiselect.test.js

@@ -37,6 +37,8 @@ define([
             expect(instance.data('mage-multiselect2').onCheck).toBeDefined();
             expect(instance.data('mage-multiselect2').onError).toBeDefined();
             expect(instance.data('mage-multiselect2').onOptionsChange).toBeDefined();
+            expect(instance.data('mage-multiselect2').getCurrentPage).toBeDefined();
+            expect(instance.data('mage-multiselect2').setCurrentPage).toBeDefined();
         });
 
         it('multiselect2 options check', function () {
@@ -101,7 +103,35 @@ define([
             instance.data('mage-multiselect2').onKeyUp();
 
             expect(instance.data('mage-multiselect2').setFilter).toHaveBeenCalled();
-            expect(instance.data('mage-multiselect2').loadOptions).toHaveBeenCalledWith(1);
+            expect(instance.data('mage-multiselect2').loadOptions).toHaveBeenCalled();
+            expect(instance.data('mage-multiselect2').getCurrentPage()).toEqual(0);
+        });
+
+        it('multiselect2 paging test', function () {
+            spyOn(instance.data('mage-multiselect2'), 'appendOptions').and.callFake(function () {
+                return true;
+            });
+            spyOn(instance.data('mage-multiselect2'), 'setCurrentPage').and.callFake(function () {
+                return true;
+            });
+
+            $.get = jasmine.createSpy().and.callFake(function () {
+                var d = $.Deferred();
+
+                d.resolve({
+                    'success': true
+                });
+
+                return d.promise();
+            });
+
+            expect(instance.data('mage-multiselect2').getCurrentPage()).toEqual(1);
+
+            instance.data('mage-multiselect2').loadOptions();
+
+            expect($.get).toHaveBeenCalled();
+            expect(instance.data('mage-multiselect2').appendOptions).toHaveBeenCalled();
+            expect(instance.data('mage-multiselect2').setCurrentPage).toHaveBeenCalledWith(2);
         });
     });
 });

lib/web/mage/multiselect.js

@@ -13,8 +13,6 @@ define([
 ], function (_, $, searchTemplate, alert) {
     'use strict';
 
-    var nativeConstructor = $.fn.multiselect;
-
     $.widget('mage.multiselect2', {
         options: {
             mselectContainer: 'section.mselect-list',
@@ -25,13 +23,13 @@ define([
             selectedItemsCountClass: 'admin__action-multiselect-items-selected',
             currentPage: 1,
             lastAppendValue: 0,
-            updateDelay: 500,
+            updateDelay: 1000,
             optionsLoaded: false
         },
 
         /** @inheritdoc */
         _create: function () {
-            nativeConstructor.call(this.element, this.options);
+            $.fn.multiselect.call(this.element, this.options);
         },
 
         /** @inheritdoc */
@@ -42,6 +40,7 @@ define([
             this.$wrapper = this.$container.find('.' + this.options.mselectItemsWrapperClass);
             this.$item = this.$wrapper.find('div').first();
             this.selectedValues = [];
+            this.values = {};
 
             this.$container.addClass(this.options.containerClass).prepend(searchTemplate);
             this.$input = this.$container.find('.' + this.options.searchInputClass);
@@ -109,15 +108,18 @@ define([
             }
 
             this.setFilter();
-            this.emptyMultiselectOptions();
-            this.loadOptions(1);
+            this.clearMultiselectOptions();
+            this.setCurrentPage(0);
+            this.loadOptions();
         },
 
         /**
          * Callback for select change event
          */
         onOptionsChange: function () {
             this.selectedValues = _.map(this.domElement.options, function (option) {
+                this.values[option.value] = true;
+
                 return option.value;
             }, this);
 
@@ -170,30 +172,32 @@ define([
         /**
          * Load options data.
          */
-        loadOptions: function (page) {
-            var self = this,
-                requestPage = page || ++this.options.currentPage;
+        loadOptions: function () {
+            var nextPage = this.getCurrentPage() + 1;
 
             this.$wrapper.trigger('processStart');
             this.$input.prop('disabled', true);
 
             $.get(this.options.nextPageUrl, {
-                p: requestPage,
+                p: nextPage,
                 s: this.filter
-            }).done(function (response) {
+            })
+            .done(function (response) {
                 if (response.success) {
-                    self.appendOptions(response.result);
+                    this.appendOptions(response.result);
+                    this.setCurrentPage(nextPage);
                 } else {
-                    self.onError(response.errorMessage);
+                    this.onError(response.errorMessage);
                 }
-            }).always(function () {
-                self.$wrapper.trigger('processStop');
-                self.$input.prop('disabled', false);
+            }.bind(this))
+            .always(function () {
+                this.$wrapper.trigger('processStop');
+                this.$input.prop('disabled', false);
 
-                if (self.filter) {
-                    self.$input.focus();
+                if (this.filter) {
+                    this.$input.focus();
                 }
-            });
+            }.bind(this));
         },
 
         /**
@@ -213,9 +217,12 @@ define([
             }
 
             options.forEach(function (option) {
-                option.selected = this._isOptionSelected(option);
-                divOptions.push(this._createMultiSelectOption(option));
-                this._setLastAppendOption(option.value);
+                if (!this.values[option.value]) {
+                    this.values[option.value] = true;
+                    option.selected = this._isOptionSelected(option);
+                    divOptions.push(this._createMultiSelectOption(option));
+                    this._setLastAppendOption(option.value);
+                }
             }, this);
 
             this.$wrapper.append(divOptions);
@@ -224,8 +231,9 @@ define([
         /**
          * Clear multiselect options
          */
-        emptyMultiselectOptions: function () {
+        clearMultiselectOptions: function () {
             this._setLastAppendOption(0);
+            this.values = {};
             this.$wrapper.empty();
         },
 
@@ -240,6 +248,24 @@ define([
             return this.options.optionsLoaded;
         },
 
+        /**
+         * Setter for current page.
+         *
+         * @param {Number} page
+         */
+        setCurrentPage: function (page) {
+            this.options.currentPage = page;
+        },
+
+        /**
+         * Getter for current page.
+         *
+         * @return {Number}
+         */
+        getCurrentPage: function () {
+            return this.options.currentPage;
+        },
+
         /**
          * Creates new selected option for select element
          *