Browse Source

HUE-5430 [assist] Switch sort icon to spinner when calling the API

Johan Ahlen 9 years ago
parent
commit
9cee7e0085

+ 3 - 0
desktop/core/src/desktop/static/desktop/js/assist/assistDbEntry.js

@@ -86,6 +86,7 @@ var AssistDbEntry = (function () {
     self.applySort = function (sortName, entries) {
       if (sortName === 'popular' && self.definition.isDatabase) {
         if (self.assistDbSource.selectedDatabase() === self) {
+          self.assistDbSource.applyingSort(true);
           self.assistDbSource.apiHelper.fetchNavOptTopTables({
             sourceType: self.assistDbSource.sourceType,
             database: self.definition.name,
@@ -101,9 +102,11 @@ var AssistDbEntry = (function () {
                 }
                 entries.sort(self.sortFunctions.popular);
               });
+              self.assistDbSource.applyingSort(false);
             },
             errorCallback: function (data) {
               entries.sort(self.sortFunctions.creation);
+              self.assistDbSource.applyingSort(false);
             }
           });
           deferredSort = false;

+ 1 - 0
desktop/core/src/desktop/static/desktop/js/assist/assistDbSource.js

@@ -67,6 +67,7 @@ var AssistDbSource = (function () {
 
     self.invalidateOnRefresh = ko.observable('cache');
 
+    self.applyingSort = ko.observable(false);
     self.activeSort = ko.observable('alpha');
 
     self.activeSort.subscribe(function (newSort) {

+ 1 - 1
desktop/core/src/desktop/templates/assist.mako

@@ -1024,7 +1024,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
       <span class="assist-tables-counter">(<span data-bind="text: filteredEntries().length"></span>)</span>
       <!-- ko ifnot: loading -->
       <!-- ko if: $parent.activeSort -->
-      <a class="inactive-action" data-toggle="dropdown" href="javascript:void(0)"><i class="pointer fa fa-sort" title="${_('Sort')}"></i></a>
+      <a class="inactive-action" data-toggle="dropdown" href="javascript:void(0)"><i class="pointer fa" data-bind="css: { 'fa-sort': !$parent.applyingSort(), 'fa-spinner fa-spin': $parent.applyingSort() }" title="${_('Sort')}"></i></a>
       <ul class="dropdown-menu hue-inner-drop-down" style="top: initial; left: inherit; position: fixed; z-index:10000;">
         <li><a href="javascript:void(0)" data-bind="click: function () { $parent.activeSort('alpha'); }"><i class="fa fa-fw" data-bind="css: { 'fa-check': $parent.activeSort() === 'alpha' }"></i> ${ _('Alphabetical') }</a></li>
         <li><a href="javascript:void(0)" data-bind="click: function () { $parent.activeSort('creation'); }"><i class="fa fa-fw" data-bind="css: { 'fa-check': $parent.activeSort() === 'creation' }"></i> ${ _('Column order') }</a></li>