fix(payroll): add loading indicators to selects

Adds loading indicators to a bunch of selects so they do not currently distinguish between the "data has not loaded yet" and "has no data" state, causing confusing error messages on first loading. Closes #6385.
IMA-WorldHealth · May 27, 2022 · 4f224ac · 4f224ac
1 parent 324bc31
commit 4f224ac
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 13 deletions.
diff --git a/client/src/js/components/bhAccountConfigSelect.js b/client/src/js/components/bhAccountConfigSelect.js
@@ -30,11 +30,16 @@ function AccountConfigSelectController(AccountConfig, Notify) {
       $ctrl.required = true;
     }
 
+    $ctrl.isLoading = true;
+
     AccountConfig.read()
       .then(accountConfigs => {
         $ctrl.accountConfigs = accountConfigs;
       })
-      .catch(Notify.handleError);
+      .catch(Notify.handleError)
+      .finally(() => {
+        $ctrl.isLoading = false;
+      });
   };
 
   // fires the onSelectCallback bound to the component boundary

diff --git a/client/src/js/components/bhEmployeeConfigSelect.js b/client/src/js/components/bhEmployeeConfigSelect.js
@@ -26,6 +26,8 @@ function EmployeeConfigSelectController(EmployeeConfigs, Notify) {
     // translated label for the form input
     $ctrl.label = $ctrl.label || 'EMPLOYEE.CONFIGURATION';
 
+    $ctrl.isLoading = true;
+
     if (!angular.isDefined($ctrl.required)) {
       $ctrl.required = true;
     }
@@ -34,7 +36,10 @@ function EmployeeConfigSelectController(EmployeeConfigs, Notify) {
       .then(employeeConfigs => {
         $ctrl.employeeConfigs = employeeConfigs;
       })
-      .catch(Notify.handleError);
+      .catch(Notify.handleError)
+      .finally(() => {
+        $ctrl.isLoading = false;
+      });
   };
 
   // fires the onSelectCallback bound to the component boundary

diff --git a/client/src/js/components/bhEmployeeSelect.js b/client/src/js/components/bhEmployeeSelect.js
@@ -22,6 +22,7 @@ function EmployeeSelectController(Employees, Notify) {
   const $ctrl = this;
 
   $ctrl.$onInit = () => {
+
     // load all Employee
     Employees.read()
       .then(employees => {

diff --git a/client/src/js/components/bhIprConfigSelect.js b/client/src/js/components/bhIprConfigSelect.js
@@ -30,11 +30,16 @@ function IprConfigSelectController(IprConfigs, Notify) {
       $ctrl.required = true;
     }
 
+    $ctrl.isLoading = true;
+
     IprConfigs.read()
       .then(iprConfigs => {
         $ctrl.iprConfigs = iprConfigs;
       })
-      .catch(Notify.handleError);
+      .catch(Notify.handleError)
+      .finally(() => {
+        $ctrl.isLoading = false;
+      });
   };
 
   $ctrl.onSelect = iprConfig => $ctrl.onSelectCallback({ iprConfig });

diff --git a/client/src/js/components/bhRubricConfigSelect.js b/client/src/js/components/bhRubricConfigSelect.js
@@ -12,17 +12,19 @@ angular.module('bhima.components')
   });
 
 RubricConfigSelectController.$inject = [
-  'ConfigurationService', '$timeout', '$scope', 'NotifyService',
+  'ConfigurationService', '$timeout', 'NotifyService',
 ];
 
 /**
  * Rubric Configuration Select Controller
  */
-function RubricConfigSelectController(RubricConfigs, $timeout, $scope, Notify) {
+function RubricConfigSelectController(RubricConfigs, $timeout, Notify) {
   const $ctrl = this;
 
   // fired at the beginning of the rubric configuration select
   $ctrl.$onInit = function $onInit() {
+    $ctrl.isLoading = true;
+
     // translated label for the form input
     $ctrl.label = $ctrl.label || 'PAYROLL_RUBRIC.CONFIGURATION';
 
@@ -37,7 +39,10 @@ function RubricConfigSelectController(RubricConfigs, $timeout, $scope, Notify) {
       .then(rubricConfigs => {
         $ctrl.rubricConfigs = rubricConfigs;
       })
-      .catch(Notify.handleError);
+      .catch(Notify.handleError)
+      .finally(() => {
+        $ctrl.isLoading = false;
+      });
   };
 
   // fires the onSelectCallback bound to the component boundary

diff --git a/client/src/js/components/bhWeekConfigSelect.js b/client/src/js/components/bhWeekConfigSelect.js
@@ -26,6 +26,7 @@ function WeekConfigSelectController(WeekConfigs, Notify) {
     // translated label for the form input
     $ctrl.label = $ctrl.label || 'FORM.LABELS.WEEKEND_CONFIGURATION';
 
+    $ctrl.isLoading = true;
 
     if (!angular.isDefined($ctrl.required)) {
       $ctrl.required = true;
@@ -35,7 +36,10 @@ function WeekConfigSelectController(WeekConfigs, Notify) {
       .then(weekendConfigs => {
         $ctrl.weekendConfigs = weekendConfigs;
       })
-      .catch(Notify.handleError);
+      .catch(Notify.handleError)
+      .finally(() => {
+        $ctrl.isLoading = false;
+      });
   };
 
   // fires the onSelectCallback bound to the component boundary

diff --git a/client/src/modules/ipr_tax/configuration/iprTaxConfig.html b/client/src/modules/ipr_tax/configuration/iprTaxConfig.html
@@ -15,7 +15,7 @@
       <div class="toolbar-item">
         <bh-ipr-scale
           on-update="IprTaxConfigCtrl.iprScaleSelect(scaleId)">
-        </bh-ipr-scale>        
+        </bh-ipr-scale>
       </div>
 
       <div class="toolbar-item">
@@ -48,4 +48,4 @@
       </bh-grid-loading-indicator>
     </div>
   </div>
-</div>
+</div>
diff --git a/client/src/modules/templates/bhAccountConfigSelect.tmpl.html b/client/src/modules/templates/bhAccountConfigSelect.tmpl.html
@@ -9,7 +9,7 @@
 
     <ng-transclude></ng-transclude>
 
-    <div class="text-danger" ng-if="!$ctrl.accountConfigs.length">
+    <div class="text-danger" ng-if="!$ctrl.isLoading && !$ctrl.accountConfigs.length">
       <i class="fa fa-exclamation-triangle"></i> <span translate> FORM.WARNINGS.NO_CONFIGURATION_FOUND </span>
     </div>
 

diff --git a/client/src/modules/templates/bhEmployeeConfigSelect.tmpl.html b/client/src/modules/templates/bhEmployeeConfigSelect.tmpl.html
@@ -4,7 +4,9 @@
     <label class="control-label" translate>
       {{ ::$ctrl.label }}
     </label>
-    <div class="text-danger" ng-if="!$ctrl.employeeConfigs.length">
+
+
+    <div class="text-danger" ng-if="!$ctrl.isLoading && !$ctrl.employeeConfigs.length">
       <i class="fa fa-exclamation-triangle"></i> <span translate> FORM.WARNINGS.NO_CONFIGURATION_FOUND </span>
     </div>
 

diff --git a/client/src/modules/templates/bhIprConfigSelect.tmpl.html b/client/src/modules/templates/bhIprConfigSelect.tmpl.html
@@ -8,6 +8,7 @@
     <label class="control-label" translate>
       {{ ::$ctrl.label }}
     </label>
+
     <ng-transclude></ng-transclude>
 
     <ui-select

diff --git a/client/src/modules/templates/bhRubricConfigSelect.tmpl.html b/client/src/modules/templates/bhRubricConfigSelect.tmpl.html
@@ -9,7 +9,7 @@
 
     <ng-transclude></ng-transclude>
 
-    <div class="text-danger" ng-if="!$ctrl.rubricConfigs.length">
+    <div class="text-danger" ng-if="!ctrl.isLoading && $ctrl.rubricConfigs.length === 0">
       <i class="fa fa-exclamation-triangle"></i> <span translate> FORM.WARNINGS.NO_CONFIGURATION_FOUND </span>
     </div>
 

diff --git a/client/src/modules/templates/bhWeekendConfigSelect.tmpl.html b/client/src/modules/templates/bhWeekendConfigSelect.tmpl.html
@@ -9,7 +9,7 @@
 
     <ng-transclude></ng-transclude>
 
-    <div class="text-danger" ng-if="!$ctrl.weekendConfigs.length">
+    <div class="text-danger" ng-if="!$ctrl.isLoading && !$ctrl.weekendConfigs.length">
       <i class="fa fa-exclamation-triangle"></i> <span translate> FORM.WARNINGS.NO_CONFIGURATION_FOUND </span>
     </div>