From 203bf51543f7d1866efeaa9decd2817cb41b3c3e Mon Sep 17 00:00:00 2001 From: Daniel Calviño Sánchez Date: Tue, 20 Mar 2018 16:58:04 +0100 Subject: Keep showing the working icon while there are pending operations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- core/js/sharedialogview.js | 61 +++++++++++++++++++++--------- core/js/tests/specs/sharedialogviewSpec.js | 50 ++++++++++++++++++++++++ 2 files changed, 94 insertions(+), 17 deletions(-) diff --git a/core/js/sharedialogview.js b/core/js/sharedialogview.js index 0b36db65116..dede768fad5 100644 --- a/core/js/sharedialogview.js +++ b/core/js/sharedialogview.js @@ -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(); diff --git a/core/js/tests/specs/sharedialogviewSpec.js b/core/js/tests/specs/sharedialogviewSpec.js index 1b4c19bbb44..d3639159849 100644 --- a/core/js/tests/specs/sharedialogviewSpec.js +++ b/core/js/tests/specs/sharedialogviewSpec.js @@ -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; -- cgit v1.2.3