From 8394dd687ed12532b882a035d48b8e6f204445ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20FOUCRET?= <aurelien.foucret@smile.fr>
Date: Fri, 17 Jun 2016 09:20:17 +0200
Subject: [PATCH] Better user experience when using the product sorter (loading
 feedback).

---
 .../view/adminhtml/web/css/source/_module.less        |  4 ++++
 .../adminhtml/web/js/form/element/product-sorter.js   | 11 +++++++----
 .../web/template/form/element/product-sorter.html     |  6 ++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/module-elasticsuite-catalog/view/adminhtml/web/css/source/_module.less b/src/module-elasticsuite-catalog/view/adminhtml/web/css/source/_module.less
index e7f5d95ba..90266916c 100644
--- a/src/module-elasticsuite-catalog/view/adminhtml/web/css/source/_module.less
+++ b/src/module-elasticsuite-catalog/view/adminhtml/web/css/source/_module.less
@@ -36,6 +36,10 @@
         }
     }
 
+    .admin__data-grid-loading-mask {
+        position: fixed;
+    }
+
     .elasticsuite-admin-product-sorter-empty {
         margin: 20px 100px 20px 100px;
     }
diff --git a/src/module-elasticsuite-catalog/view/adminhtml/web/js/form/element/product-sorter.js b/src/module-elasticsuite-catalog/view/adminhtml/web/js/form/element/product-sorter.js
index 06cf54593..0b185dc08 100644
--- a/src/module-elasticsuite-catalog/view/adminhtml/web/js/form/element/product-sorter.js
+++ b/src/module-elasticsuite-catalog/view/adminhtml/web/js/form/element/product-sorter.js
@@ -22,6 +22,7 @@ define([
 
     return Component.extend({
         defaults: {
+            showSpinner: true,
             template: "Smile_ElasticsuiteCatalog/form/element/product-sorter",
             refreshFields: {},
             maxRefreshInterval: 1000,
@@ -48,7 +49,7 @@ define([
             this.pageSize           = parseInt(this.pageSize, 10);
             this.currentSize        = this.pageSize;
             
-            this.observe(['products', 'countTotalProducts', 'currentSize', 'editPositions']);
+            this.observe(['products', 'countTotalProducts', 'currentSize', 'editPositions', 'loading', 'showSpinner']);
             
             this.editPositions.subscribe(function () { this.value(JSON.stringify(this.editPositions())); }.bind(this));
         },
@@ -68,7 +69,9 @@ define([
             if (this.refreshRateLimiter !== undefined) {
                 clearTimeout();
             }
-            
+
+            this.loading(true);
+
             this.refreshRateLimiter = setTimeout(function () {
                 var formData = this.formData;
                 Object.keys(this.editPositions()).each(function (productId) {
@@ -76,7 +79,6 @@ define([
                 }.bind(this));
                 
                 formData['page_size'] = this.currentSize();
-                
                 this.loadXhr = $.post(this.loadUrl, this.formData, this.onProductListLoad.bind(this));
             }.bind(this), this.maxRefreshInterval);
         },
@@ -91,12 +93,13 @@ define([
             var editPositions = this.editPositions();
             
             for (var productId in editPositions) {
-                if ($.inArray(parseInt(productId), productIds) < 0) {
+                if ($.inArray(parseInt(productId, 10), productIds) < 0) {
                     delete editPositions[productId];
                 } 
             }
             
             this.editPositions(editPositions);
+            this.loading(false);
         },
         
         createProduct: function (productData) {
diff --git a/src/module-elasticsuite-catalog/view/adminhtml/web/template/form/element/product-sorter.html b/src/module-elasticsuite-catalog/view/adminhtml/web/template/form/element/product-sorter.html
index 15fc54000..69e52659d 100644
--- a/src/module-elasticsuite-catalog/view/adminhtml/web/template/form/element/product-sorter.html
+++ b/src/module-elasticsuite-catalog/view/adminhtml/web/template/form/element/product-sorter.html
@@ -1,5 +1,11 @@
+
+
 <div class="elasticsuite-admin-product-sorter">
 
+    <div data-role="spinner" class="admin__data-grid-loading-mask" visible="loading" if="showSpinner">
+        <div class="spinner"><span repeat="8"/></div>
+    </div>
+
     <input type="hidden" data-bind="value: value, attr: {name: inputName}"/>
     
     <span class="title" data-bind="text: messages.blockTitle"></span>