feat: add progress bar (#66)

Add progress bar for loading data via http requests.

Fixes #65

src/app/core/core.module.ts

@@ -45,6 +45,8 @@ import { AuthenticationGuard } from './authentication/authentication.guard';
 import { I18nService } from './i18n.service';
 import { HttpService } from './http/http.service';
 import { HttpCacheService } from './http/http-cache.service';
+import { ProgressBarService } from './progress-bar.service';
+import { ProgressInterceptor } from './progress.interceptor';
 import { ApiPrefixInterceptor } from './http/api-prefix.interceptor';
 import { ErrorHandlerInterceptor } from './http/error-handler.interceptor';
 import { CacheInterceptor } from './http/cache.interceptor';
@@ -145,6 +147,8 @@ import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component';
     AuthenticationGuard,
     I18nService,
     HttpCacheService,
+    ProgressBarService,
+    ProgressInterceptor,
     ApiPrefixInterceptor,
     ErrorHandlerInterceptor,
     CacheInterceptor,

src/app/core/progress-bar.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ProgressBarService } from './progress-bar.service';
+
+describe('ProgressBarService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ProgressBarService]
+    });
+  });
+
+  it('should be created', inject([ProgressBarService], (service: ProgressBarService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/core/progress-bar.service.ts

@@ -0,0 +1,35 @@
+import { Injectable, EventEmitter } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProgressBarService {
+
+  public updateProgressBar: EventEmitter<any>;
+  private requestsRunning = 0;
+
+  constructor() {
+    this.updateProgressBar = new EventEmitter();
+  }
+
+  public getRequestsRunning(): number {
+    return this.requestsRunning;
+  }
+
+  public increase(): void {
+    this.requestsRunning++;
+    if (this.requestsRunning === 1) {
+      this.updateProgressBar.emit('indeterminate');
+    }
+  }
+
+  public decrease(): void {
+    if (this.requestsRunning > 0) {
+      this.requestsRunning--;
+      if (this.requestsRunning === 0) {
+        this.updateProgressBar.emit('none');
+      }
+    }
+  }
+
+}

src/app/core/progress.interceptor.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+import { ProgressBarService } from './progress-bar.service';
+
+@Injectable()
+export class ProgressInterceptor implements HttpInterceptor {
+
+  constructor(private progressBarService: ProgressBarService) { }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    this.progressBarService.increase();
+    return next
+      .handle(request).pipe(
+        tap(event => {
+          if (event instanceof HttpResponse) {
+            this.progressBarService.decrease();
+          }
+        })
+      );
+  }
+
+}

src/app/core/shell/shell.component.html

@@ -18,6 +18,7 @@
   <mat-sidenav-content>
 
     <mifosx-toolbar [sidenav]="sidenav" (collapse)="toggleCollapse($event)"></mifosx-toolbar>
+    <mat-progress-bar [mode]="progressBarMode"></mat-progress-bar>
 
     <mifosx-breadcrumb></mifosx-breadcrumb>
     <mifosx-content></mifosx-content>

src/app/core/shell/shell.component.ts

@@ -3,6 +3,7 @@ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { ProgressBarService } from '../progress-bar.service';
 
 @Component({
   selector: 'mifosx-shell',
@@ -16,10 +17,15 @@ export class ShellComponent implements OnInit {
     map(result => result.matches)
   );
   sidenavCollapsed = false;
+  progressBarMode: string;
 
-  constructor(private breakpointObserver: BreakpointObserver) { }
+  constructor(private breakpointObserver: BreakpointObserver,
+              private progressBarService: ProgressBarService) { }
 
   ngOnInit() {
+    this.progressBarService.updateProgressBar.subscribe((mode: string) => {
+      this.progressBarMode = mode;
+    });
   }
 
   toggleCollapse($event: boolean) {