Skip to content

Commit

Permalink
Better user experience when using the product sorter (loading feedback).
Browse files Browse the repository at this point in the history
  • Loading branch information
Aurélien FOUCRET committed Jun 17, 2016
1 parent d5530ee commit 8394dd6
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@
}
}

.admin__data-grid-loading-mask {
position: fixed;
}

.elasticsuite-admin-product-sorter-empty {
margin: 20px 100px 20px 100px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ define([

return Component.extend({
defaults: {
showSpinner: true,
template: "Smile_ElasticsuiteCatalog/form/element/product-sorter",
refreshFields: {},
maxRefreshInterval: 1000,
Expand All @@ -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));
},
Expand All @@ -68,15 +69,16 @@ define([
if (this.refreshRateLimiter !== undefined) {
clearTimeout();
}


this.loading(true);

this.refreshRateLimiter = setTimeout(function () {
var formData = this.formData;
Object.keys(this.editPositions()).each(function (productId) {
formData['product_position[' + productId + ']'] = this.editPositions()[productId];
}.bind(this));

formData['page_size'] = this.currentSize();

this.loadXhr = $.post(this.loadUrl, this.formData, this.onProductListLoad.bind(this));
}.bind(this), this.maxRefreshInterval);
},
Expand All @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down

0 comments on commit 8394dd6

Please sign in to comment.