Keep showing the working icon while there are pending operations

Before, whenever a pending operation (getting the suggestions,
confirming a share or selecting a recipient) finished the working icon
was hidden and the confirm button was shown again, even if there were
other pending operations (the most common case is typing slowly on the
input field, as several operations to get the suggestions could pile if
the server response is not received fast enough). Now, the working icon
is not hidden until the last pending operation finishes.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
This commit is contained in:
Daniel Calviño Sánchez 2018-03-20 16:58:04 +01:00
parent a2c52cd6a5
commit 203bf51543
2 changed files with 94 additions and 17 deletions

View file

@ -68,6 +68,9 @@
/** @type {object} **/
_lastSuggestions: undefined,
/** @type {int} **/
_pendingOperationsCount: 0,
events: {
'focus .shareWithField': 'onShareWithFieldFocus',
'input .shareWithField': 'onShareWithFieldChanged',
@ -339,6 +342,7 @@
$loading.removeClass('hidden');
$loading.addClass('inlineblock');
$confirm.addClass('hidden');
this._pendingOperationsCount++;
$shareWithField.removeClass('error')
.tooltip('hide');
@ -349,9 +353,12 @@
perPage,
view.model
).done(function(suggestions) {
$loading.addClass('hidden');
$loading.removeClass('inlineblock');
$confirm.removeClass('hidden');
view._pendingOperationsCount--;
if (view._pendingOperationsCount === 0) {
$loading.addClass('hidden');
$loading.removeClass('inlineblock');
$confirm.removeClass('hidden');
}
if (suggestions.length > 0) {
$shareWithField
@ -386,9 +393,12 @@
response();
}
}).fail(function(message) {
$loading.addClass('hidden');
$loading.removeClass('inlineblock');
$confirm.removeClass('hidden');
view._pendingOperationsCount--;
if (view._pendingOperationsCount === 0) {
$loading.addClass('hidden');
$loading.removeClass('inlineblock');
$confirm.removeClass('hidden');
}
if (message) {
OC.Notification.showTemporary(t('core', 'An error occurred ("{message}"). Please try again', { message: message }));
@ -431,6 +441,8 @@
},
_onSelectRecipient: function(e, s) {
var self = this;
e.preventDefault();
// Ensure that the keydown handler for the input field is not
// called; otherwise it would try to add the recipient again, which
@ -438,11 +450,14 @@
e.stopImmediatePropagation();
$(e.target).attr('disabled', true)
.val(s.item.label);
var $loading = this.$el.find('.shareWithLoading');
$loading.removeClass('hidden')
.addClass('inlineblock');
var $confirm = this.$el.find('.shareWithConfirm');
$loading.removeClass('hidden');
$loading.addClass('inlineblock');
$confirm.addClass('hidden');
this._pendingOperationsCount++;
this.model.addShare(s.item.value, {success: function() {
// Adding a share changes the suggestions.
@ -450,16 +465,24 @@
$(e.target).val('')
.attr('disabled', false);
$loading.addClass('hidden')
.removeClass('inlineblock');
$confirm.removeClass('hidden');
self._pendingOperationsCount--;
if (self._pendingOperationsCount === 0) {
$loading.addClass('hidden');
$loading.removeClass('inlineblock');
$confirm.removeClass('hidden');
}
}, error: function(obj, msg) {
OC.Notification.showTemporary(msg);
$(e.target).attr('disabled', false)
.autocomplete('search', $(e.target).val());
$loading.addClass('hidden')
.removeClass('inlineblock');
$confirm.removeClass('hidden');
self._pendingOperationsCount--;
if (self._pendingOperationsCount === 0) {
$loading.addClass('hidden');
$loading.removeClass('inlineblock');
$confirm.removeClass('hidden');
}
}});
},
@ -472,6 +495,7 @@
$loading.removeClass('hidden');
$loading.addClass('inlineblock');
$confirm.addClass('hidden');
this._pendingOperationsCount++;
$shareWithField.prop('disabled', true);
@ -485,9 +509,12 @@
$shareWithField.autocomplete('disable');
var restoreUI = function() {
$loading.addClass('hidden');
$loading.removeClass('inlineblock');
$confirm.removeClass('hidden');
self._pendingOperationsCount--;
if (self._pendingOperationsCount === 0) {
$loading.addClass('hidden');
$loading.removeClass('inlineblock');
$confirm.removeClass('hidden');
}
$shareWithField.prop('disabled', false);
$shareWithField.focus();

View file

@ -2009,6 +2009,56 @@ describe('OC.Share.ShareDialogView', function() {
addShareStub.restore();
});
it('hides the loading icon when all the pending operations finish', function() {
dialog.render();
expect(dialog.$el.find('.shareWithLoading').hasClass('hidden')).toEqual(true);
expect(dialog.$el.find('.shareWithConfirm').hasClass('hidden')).toEqual(false);
var response = sinon.stub();
dialog.autocompleteHandler({term: 'bob'}, response);
dialog.autocompleteHandler({term: 'bobby'}, response);
var jsonData = JSON.stringify({
'ocs': {
'meta': {
'status': 'success',
'statuscode': 100,
'message': null
},
'data': {
'exact': {
'users': [],
'groups': [],
'remotes': []
},
'users': [],
'groups': [],
'remotes': [],
'lookup': []
}
}
});
fakeServer.requests[0].respond(
200,
{'Content-Type': 'application/json'},
jsonData
);
expect(dialog.$el.find('.shareWithLoading').hasClass('hidden')).toEqual(false);
expect(dialog.$el.find('.shareWithConfirm').hasClass('hidden')).toEqual(true);
fakeServer.requests[1].respond(
200,
{'Content-Type': 'application/json'},
jsonData
);
expect(dialog.$el.find('.shareWithLoading').hasClass('hidden')).toEqual(true);
expect(dialog.$el.find('.shareWithConfirm').hasClass('hidden')).toEqual(false);
});
});
describe('confirm share', function() {
var addShareStub;