Add loading gif and fix some issues (#130)

- Fix missing subSidebar on course final inscr show - Fix final inscription redirection - Fix footer load with ng-cloak
MatiasComercio · Feb 6, 2017 · ee26734 · ee26734
1 parent f5ff3f6
commit ee26734
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 2 deletions.
diff --git a/app/images/spin.gif b/app/images/spin.gif
diff --git a/app/index.html b/app/index.html
@@ -15,6 +15,10 @@
 </head>
 <body ng-controller='BodyCtrl as controller'>
 
+  <div class='loader-container' ng-show='showLoader' prevent-scroll>
+    <img src='images/spin.gif' class='no-select'>
+  </div>
+
   <!-- site navigation elements -->
   <xnavbar></xnavbar>
   <xsidebar></xsidebar>
@@ -42,7 +46,7 @@
     <!-- \content -->
 
     <!-- footer -->
-    <div class='footer'>
+    <div class='footer' ng-cloak>
       <span translate='i18nFooterCopyright'></span>
     </div>
     <!-- \footer -->

diff --git a/app/scripts/controllers/courses/CoursesFinalInscriptionShowCtrl.js b/app/scripts/controllers/courses/CoursesFinalInscriptionShowCtrl.js
@@ -31,7 +31,7 @@ function(paw) {
       Courses.qualifyFinalInscription(_this.course, inscriptionId, qualifiedStudents).then(function(response) {
         flashMessages.setSuccess('i18nQualifySuccessfully');
         if (response.status === 204) {
-          Paths.get().courses(_this.course).finalInscriptions().go();
+          Paths.get().courses(_this.course).go();
         } else {
           $route.reload();
         }
@@ -44,6 +44,7 @@ function(paw) {
 
     Courses.get(courseId).then(function(course) {
       _this.course = course;
+      Courses.setOnSubSidebar(course);
       _this.course.all('finalInscriptions').get(inscriptionId).then(function(finalInscription) {
         _this.course.inscription = finalInscription;
         _this.course.inscription.students = finalInscription.history;

diff --git a/app/scripts/paw.js b/app/scripts/paw.js
@@ -84,6 +84,40 @@ function(config, dependencyResolverFor, i18n, authenticationService, pathsServic
       }
     });
 
+    // Code taken & adapted from:
+    // http://stackoverflow.com/questions/24088610/restangular-spinner
+    var pendingRequests = 0;
+
+    Restangular.addRequestInterceptor(
+      function (element, operation, what, url) {
+        if (pendingRequests === 0) {
+          $rootScope.showLoader = true;
+        }
+        pendingRequests++;
+        return element;
+      }
+    );
+
+    Restangular.addResponseInterceptor(
+      function (data, operation, what, url, response, deferred) {
+        pendingRequests--;
+        if (pendingRequests === 0) {
+          $rootScope.showLoader = false;
+        }
+        return data;
+      }
+    );
+
+    Restangular.addErrorInterceptor(
+      function(response, deferred, responseHandler) {
+        pendingRequests--;
+        if (pendingRequests === 0) {
+          $rootScope.showLoader = false;
+        }
+        return true; // error not handled
+      }
+    );
+
     Restangular.setErrorInterceptor(
       function(response, deferred, responseHandler) {
         var propagateError = true;

diff --git a/app/styles/modules/common.scss b/app/styles/modules/common.scss
@@ -113,3 +113,8 @@ hr {
 .sym-button {
   cursor: pointer;
 }
+
+// https://docs.angularjs.org/api/ng/directive/ngCloak
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important;
+}
diff --git a/app/styles/modules/variables/sizes.scss b/app/styles/modules/variables/sizes.scss
@@ -5,5 +5,6 @@ $sidebarWidth: 240px;
 $sidebarButtonHeight: 50px;
 $navbarZIndex: 1001;
 $sidebarZIndex: 1002;
+$loaderZIndex: 1003;
 $containerPadding: 30px;
 $bootstrapMobileMaxWidth: 767px;
diff --git a/app/styles/partials/_index.scss b/app/styles/partials/_index.scss
@@ -1,5 +1,21 @@
 @import 'modules/variables/importer';
 
+.loader-container {
+  background: $black;
+  opacity: 0.48;
+  height: 100%;
+  width: 100%;
+  z-index: $loaderZIndex;
+  position: fixed;
+  padding: 0;
+  margin: 0;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center
+}
+
 .container {
   margin-top: $navbarHeight;
   margin-left: $sidebarWidth;