Merge pull request #1478 from opf/feature/with-angular-busy

with angular busy

app/assets/javascripts/angular/controllers/dialogs/columns.js

@@ -95,7 +95,9 @@ angular.module('openproject.workPackages.controllers')
 
     if(groupBy.length === 0) groupBy = undefined; // don't pass an empty string as groupBy
 
-    if(addedColumns.length) WorkPackageService.augmentWorkPackagesWithColumnsData(currentWorkPackages, addedColumns, groupBy);
+    if(addedColumns.length) {
+      $scope.refreshWorkPackages = WorkPackageService.augmentWorkPackagesWithColumnsData(currentWorkPackages, addedColumns, groupBy);
+    }
 
     columnsModal.deactivate();
   };

app/assets/javascripts/angular/directives/components/toggled-multiselect-directive.js

@@ -36,7 +36,8 @@ angular.module('openproject.uiComponents')
     scope: {
       name: '=',
       values: '=',
-      availableOptions: '='
+      availableOptions: '=',
+      disabled: '='
     },
     templateUrl: '/templates/components/toggled_multiselect.html',
     link: function(scope, element, attributes){

app/assets/javascripts/angular/directives/work_packages/work-package-total-sums-directive.js

@@ -32,19 +32,19 @@ angular.module('openproject.workPackages.directives')
   'WorkPackageService',
   function(WorkPackageService) {
 
-  var latestQueryReference;
-
   return {
     restrict: 'A',
     scope: true,
     link: function(scope) {
       function fetchTotalSums() {
-        scope.withLoading(WorkPackageService.getWorkPackagesSums, [scope.projectIdentifier, scope.query, scope.columns])
+        scope.fetchTotalSums = WorkPackageService.getWorkPackagesSums(scope.projectIdentifier, scope.query, scope.columns)
           .then(function(data){
             angular.forEach(scope.columns, function(column, i){
               column.total_sum = data.column_sums[i];
             });
           });
+
+        return scope.fetchTotalSums;
       }
 
       function totalSumsFetched() {

app/assets/javascripts/angular/directives/work_packages/work-packages-table-directive.js

@@ -50,7 +50,6 @@ angular.module('openproject.workPackages.directives')
       totalSums: '=',
       groupSums: '=',
       updateResults: '&',
-      withLoading: '=',
       updateBackUrl: '='
     },
     link: function(scope, element, attributes) {

app/assets/javascripts/angular/models/query.js

@@ -244,8 +244,8 @@ angular.module('openproject.models')
       this.filters.splice(this.getFilterNames().indexOf(filterName), 1);
     },
 
-    deactivateFilter: function(filter, loading) {
-      if (!loading) filter.deactivated = true;
+    deactivateFilter: function(filter) {
+      filter.deactivated = true;
     },
 
     getFilterType: function(filterName) {

app/assets/javascripts/angular/openproject-app.js

@@ -117,7 +117,8 @@ var openprojectApp = angular.module('openproject', [
   'ngAnimate',
   'ngSanitize',
   'truncate',
-  'feature-flags'
+  'feature-flags',
+  'cgBusy'
 ]);
 
 window.appBasePath = jQuery('meta[name=app_base_path]').attr('content') || '';

app/assets/javascripts/angular/work_packages/controllers/work-packages-list-controller.js

@@ -54,20 +54,16 @@ angular.module('openproject.workPackages.controllers')
 
   function initialSetup() {
     $scope.operatorsAndLabelsByFilterType = OPERATORS_AND_LABELS_BY_FILTER_TYPE;
-    $scope.loading = false;
     $scope.disableFilters = false;
 
     var getWorkPackages, params;
     if($scope.query_id){
-      getWorkPackages = WorkPackageService.getWorkPackagesByQueryId;
-      params = [$scope.projectIdentifier, $scope.query_id];
+      getWorkPackages = WorkPackageService.getWorkPackagesByQueryId($scope.projectIdentifier, $scope.query_id);
     } else {
-      getWorkPackages = WorkPackageService.getWorkPackagesFromUrlQueryParams;
-      params = [$scope.projectIdentifier, $location];
+      getWorkPackages = WorkPackageService.getWorkPackagesFromUrlQueryParams($scope.projectIdentifier, $location);
     }
 
-    $scope.withLoading(getWorkPackages, params)
-      .then(setupPage);
+    $scope.settingUpPage = getWorkPackages.then(setupPage);
 
     loadProjectTypesAndQueries();
   }
@@ -171,8 +167,10 @@ angular.module('openproject.workPackages.controllers')
   $scope.updateResults = function() {
     $scope.$broadcast('openproject.workPackages.updateResults');
 
-    return $scope.withLoading(WorkPackageService.getWorkPackages, [$scope.projectIdentifier, $scope.query, PaginationService.getPaginationOptions()])
+    $scope.refreshWorkPackages = WorkPackageService.getWorkPackages($scope.projectIdentifier, $scope.query, PaginationService.getPaginationOptions())
       .then(setupWorkPackagesTable);
+
+    return $scope.refreshWorkPackages;
   };
 
   // More
@@ -182,10 +180,6 @@ angular.module('openproject.workPackages.controllers')
     $scope.isLoading = false;
   }
 
-  $scope.withLoading = function(callback, params){
-    return WorkPackageLoadingHelper.withLoading($scope, callback, params, serviceErrorHandler);
-  };
-
   // Go
 
   initialSetup();

app/assets/javascripts/application.js.erb

@@ -65,6 +65,7 @@
 //= require angular-sanitize
 //= require angular-truncate
 //= require angular-feature-flags/dist/featureFlags.js
+//= require angular-busy
 
 //= require angular-context-menu
 

app/assets/stylesheets/_external.sass.erb

@@ -31,3 +31,4 @@
 
 @import "<%= asset_path("select2/select2.css") %>"
 @import "<%= asset_path("jquery-ui/themes/base/jquery-ui.css") %>"
+@import "<%= asset_path("angular-busy/dist/angular-busy.css") %>"

bower.json

@@ -22,7 +22,8 @@
     "jquery-migrate": "~1.2.1",
     "momentjs": "~2.6.0",
     "moment-timezone": "~0.0.6",
-    "angular-context-menu": "0.1.2"
+    "angular-context-menu": "0.1.2",
+    "angular-busy": "~4.0.4"
   },
   "devDependencies": {
     "mocha": "~1.14.0",
@@ -32,6 +33,7 @@
     "jquery-mockjax": "~1.5.3"
   },
   "resolutions": {
-    "select2": "3.3.2"
+    "select2": "3.3.2",
+    "angular": "1.2.16"
   }
 }

config/application.rb

@@ -103,6 +103,7 @@ module OpenProject
     config.assets.paths << bower_assets_path.join(*%w(select2)).to_s
     config.assets.paths << bower_assets_path.join(*%w(jquery-ui themes base)).to_s
     config.assets.paths << bower_assets_path.join(*%w(jquery.atwho dist)).to_s
+    config.assets.paths << bower_assets_path.join(*%w(angular-busy dist)).to_s
 
     # Whitelist assets to be precompiled.
     #

karma/tests/controllers/work-packages-list-controller-test.js

@@ -144,7 +144,7 @@ describe('WorkPackagesListController', function() {
   describe('initialisation', function() {
     it('should initialise', function() {
       buildController();
-      expect(scope.loading).to.be.false;
+      expect(scope.settingUpPage).to.be.defined;
     });
   });
 });

karma/tests/directives/work_packages/work-package-total-sums-directive-test.js

@@ -69,12 +69,12 @@ describe('workPackageTotalSums Directive', function() {
       });
 
       describe('setting total sums for the columns', function(){
-        beforeEach(inject(function($q) {
+        beforeEach(inject(function($q, WorkPackageService) {
           var sumsData = [1, 2];
 
           scope.updateBackUrl = function(){ return 0; };
-          scope.withLoading = function(callback, params) {
-            // Note: Seems easier to mock out the withLoading method instead of WorkPackageService.getWorkPackagesSums which can be seperately unit tested
+
+          WorkPackageService.getWorkPackagesSums = function() {
             deferred = $q.defer();
             deferred.resolve({ column_sums: sumsData } );
             return deferred.promise;

public/templates/components/toggled_multiselect.html

@@ -3,6 +3,7 @@
           ng-show="!isMultiselect"
           name="v[{{name}}][]"
           ng-model="values"
+          ng-disabled="disabled"
           id="values-{{name}}"
           class="select-small"
           style="vertical-align: top;"
@@ -15,6 +16,7 @@
           ng-show="isMultiselect"
           name="v[{{name}}][]"
           ng-model="values"
+          ng-disabled="disabled"
           id="values-{{name}}"
           class="select-small"
           style="vertical-align: top;"

public/templates/work_packages.list.html

@@ -100,8 +100,9 @@
 
 
 <div class="work-packages--split-view autoscroll">
-  <div class="work-packages--list">
+  <div class="work-packages--list" cg-busy="settingUpPage">
     <work-packages-table ng-if="rows && columns"
+                         cg-busy="refreshWorkPackages"
                          project-identifier="projectIdentifier"
                          columns="columns"
                          rows="rows"
@@ -113,7 +114,6 @@
                          total-sums="totalSums"
                          group-sums="groupSums"
                          update-results="updateResults()"
-                         with-loading="withLoading"
                          update-back-url="updateBackUrl">
     </work-packages-table>
 

public/templates/work_packages/query_filters.html

@@ -135,7 +135,7 @@
                                            name="filter.name"
                                            values="filter.values"
                                            is-multiselect="false"
-                                           ng-disabled="isLoading"/>
+                                           disabled="isLoading"/>
 
                     </div>
                   </td>
@@ -144,7 +144,7 @@
                   <td>
                     <icon-wrapper icon-name="delete2"
                                   icon-title="{{I18n.t('js.button_delete')}}"
-                                  ng-click="query.deactivateFilter(filter, loading)"/>
+                                  ng-click="query.deactivateFilter(filter)"/>
                     <!-- TODO I18n -->
                   </td>
                 </tr>

public/templates/work_packages/work_packages_table.html

@@ -163,6 +163,7 @@
 
     <tr work-package-total-sums
         ng-if="displaySums"
+        cg-busy="fetchTotalSums"
         class="sum group all issue work_package">
       <td colspan="{{3  - (!!hideWorkPackageDetails * 1)}}">{{ I18n.t('js.label_sum_for') }} {{ I18n.t('js.label_all_work_packages') }}</td>
       <td ng-repeat="column in columns">

spec/features/accessibility/work_packages/work_package_query_spec.rb

@@ -36,7 +36,7 @@ describe 'Work package index accessibility' do
                                            project: project) }
   let(:work_packages_page) { WorkPackagesPage.new(project) }
   let(:sort_ascending_selector) { '.icon-sort-ascending' }
-  let(:sort_decending_selector) { '.icon-sort-descending' }
+  let(:sort_descending_selector) { '.icon-sort-descending' }
 
   before do
     allow(User).to receive(:current).and_return(user)
@@ -79,12 +79,12 @@ describe 'Work package index accessibility' do
       find(column_header_link_selector)
     end
 
-    def sort_ascending_link
-      find(sort_ascending_selector)
+    def click_sort_ascending_link
+      execute_script "jQuery('#{sort_ascending_selector}').click()"
     end
 
-    def sort_decending_link
-      find(sort_decending_selector)
+    def click_sort_descending_link
+      execute_script "jQuery('#{sort_descending_selector}').click()"
     end
 
     shared_examples_for 'sort column' do
@@ -124,7 +124,7 @@ describe 'Work package index accessibility' do
       describe 'descending' do
         before do
           column_header_link.click
-          sort_decending_link.click
+          click_sort_descending_link
         end
 
         it_behaves_like 'descending sorted column'
@@ -133,7 +133,7 @@ describe 'Work package index accessibility' do
       describe 'ascending' do
         before do
           column_header_link.click
-          sort_ascending_link.click
+          click_sort_ascending_link
         end
 
         it_behaves_like 'ascending sorted column'