GS-91: Changing Pivot Report preloader displaying.

Author: Kacper Warda

css/style.css

@@ -154,6 +154,12 @@ div.pivot-report-output-config div.pivot-report-export-button {
   transition: none;
 }
 
+#pivot-report-preloader .progress .progress-value {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+
 div.right-align {
   float: right;
 }

css/style_admin.css

@@ -1,3 +1,14 @@
+/* Pivot Report cache rebuilding */
+
+div.rebuild-pivot-report-cache div.in-progress {
+  display: inline;
+}
+
+div.rebuild-pivot-report-cache div.in-progress i.fa-spin {
+  font-size: 1.5em;
+  vertical-align: middle;
+}
+
 /* Pivot Table progress bar */
 
 #pivot-report-preloader {
@@ -12,6 +23,12 @@
   transition: none;
 }
 
+#pivot-report-preloader .progress .progress-value {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+
 #pivot-report-admin .build-date-time {
   margin-top: 1em;
 }

js/PivotReport.Admin.js

@@ -80,6 +80,8 @@ CRM.PivotReport.Admin = (function($) {
           that.Preloader.hide();
           that.updateBuildDateTime();
 
+          $('input.build-cache-button', that.container).prop('disabled', false);
+
           CRM.alert('All Pivot Reports have been refreshed.', null, 'success');
         }
 
@@ -130,6 +132,8 @@ CRM.PivotReport.Admin = (function($) {
     $('input[type="button"].build-cache-button').click(function(e) {
       CRM.confirm({message: 'This operation may take some time to build the cache. Do you really want to build the cache for all supported entities?' })
       .on('crmConfirm:yes', function() {
+        $('input.build-cache-button', that.container).prop('disabled', true);
+
         that.buildCache();
       });
     });

js/PivotReport.Preloader.js

@@ -9,6 +9,7 @@ CRM.PivotReport.Preloader = (function($) {
     this.container = CRM.$('#pivot-report-preloader');
     this.title = CRM.$('.pivot-report-loading-title', this.container);
     this.progressBar = CRM.$('.progress > .progress-bar', this.container);
+    this.progressValue = CRM.$('.progress > .progress-value', this.container);
   }
 
   /**
@@ -49,9 +50,8 @@ CRM.PivotReport.Preloader = (function($) {
   Preloader.prototype.setValue = function(value) {
     var progressValue = value + '%';
 
-    this.progressBar.attr('aria-valuenow', progressValue);
     this.progressBar.css('width', progressValue);
-    this.progressBar.text(progressValue);
+    this.progressValue.text(progressValue);
   }
 
   return Preloader;

templates/CRM/PivotReport/Page/ReportPreloader.tpl

@@ -2,5 +2,6 @@
   <div class="pivot-report-loading-title"></div>
   <div class="progress">
     <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+    <div class="progress-value"></div>
   </div>
 </div>