From 4562f65a6deeec1b4419faca091964ce2fde6915 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Tue, 30 Apr 2019 18:59:19 +0300
Subject: [PATCH] Progress Bar Returns, this time blue

---
 .../src/app/ui/navbar/navbar.component.html   |   6 +-
 .../src/app/ui/navbar/navbar.component.scss   |   8 +
 .../src/app/ui/navbar/navbar.component.ts     | 221 ++++++++++--------
 3 files changed, 131 insertions(+), 104 deletions(-)

diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html
index 76dc0563e..90cb9f53d 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.html
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html
@@ -53,7 +53,8 @@
 
 				<!-- Login -->
 				<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
-					<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
+					<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()"
+						[src]="this.getPrincipalAvatar()" (click)="openProfile()">
 				</li>
 				<ng-template #loginoption>
 					<button mat-button [routerLink]=" ['/login'] ">
@@ -65,3 +66,6 @@
 		</div>
 	</div>
 </nav>
+<div *ngIf="progressIndication" class="progress-bar">
+	<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
+</div>
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.scss b/dmp-frontend/src/app/ui/navbar/navbar.component.scss
index 448c2eec5..ebe91812e 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.scss
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.scss
@@ -5,3 +5,11 @@ $mat-card-header-size: 40px !default;
   border-radius: 50%;
   flex-shrink: 0;
 }
+
+.progress-bar {
+	top: 70px;
+	left: 0;
+	position: fixed;
+	width: 100%;
+	z-index: 1;
+}
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
index 08428c3de..97d760fbb 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
@@ -1,139 +1,154 @@
 import { Component, OnInit, ElementRef } from '@angular/core';
 import { GENERAL_ROUTES, DMP_ROUTES, PUBLIC_ROUTES } from '../sidebar/sidebar.component';
 // import { HISTORY_ROUTES } from '../sidebar/sidebar.component';
-import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
 import { Router } from '@angular/router';
 import { AuthService } from '../../core/services/auth/auth.service';
 import { MatDialog } from '@angular/material';
 import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
 import { AppRole } from '../../core/common/enum/app-role';
+import { ProgressIndicationService } from '../../core/services/progress-indication/progress-indication-service';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  selector: 'app-navbar',
-  templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.css', './navbar.component.scss']
+	selector: 'app-navbar',
+	templateUrl: './navbar.component.html',
+	styleUrls: ['./navbar.component.css', './navbar.component.scss']
 })
-export class NavbarComponent implements OnInit {
-    private listTitles: any[];
-    location: Location;
-    mobile_menu_visible: any = 0;
-    private toggleButton: any;
-    private sidebarVisible: boolean;
+export class NavbarComponent extends BaseComponent implements OnInit {
+	progressIndication = false;
+	private listTitles: any[];
+	location: Location;
+	mobile_menu_visible: any = 0;
+	private toggleButton: any;
+	private sidebarVisible: boolean;
 
-    constructor(location: Location,  private element: ElementRef, private router: Router, private authentication: AuthService, private dialog: MatDialog) {
-      this.location = location;
-          this.sidebarVisible = false;
-    }
+	constructor(location: Location,
+		private element: ElementRef,
+		private router: Router,
+		private authentication: AuthService,
+		private dialog: MatDialog,
+		private progressIndicationService: ProgressIndicationService
+	) {
+		super();
+		this.location = location;
+		this.sidebarVisible = false;
+	}
 
-    ngOnInit(){
-      this.listTitles = GENERAL_ROUTES.filter(listTitle => listTitle);
-      this.listTitles.push(DMP_ROUTES.filter(listTitle => listTitle));
-    //   this.listTitles.push(HISTORY_ROUTES.filter(listTitle => listTitle));
-      this.listTitles.push(PUBLIC_ROUTES.filter(listTitle => listTitle));
-      const navbar: HTMLElement = this.element.nativeElement;
-      this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
-      this.router.events.subscribe((event) => {
-        this.sidebarClose();
-         var $layer: any = document.getElementsByClassName('close-layer')[0];
-         if ($layer) {
-           $layer.remove();
-           this.mobile_menu_visible = 0;
-         }
-     });
+	ngOnInit() {
+		this.listTitles = GENERAL_ROUTES.filter(listTitle => listTitle);
+		this.listTitles.push(DMP_ROUTES.filter(listTitle => listTitle));
+		//   this.listTitles.push(HISTORY_ROUTES.filter(listTitle => listTitle));
+		this.listTitles.push(PUBLIC_ROUTES.filter(listTitle => listTitle));
+		const navbar: HTMLElement = this.element.nativeElement;
+		this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
+		this.router.events.subscribe((event) => {
+			this.sidebarClose();
+			var $layer: any = document.getElementsByClassName('close-layer')[0];
+			if ($layer) {
+				$layer.remove();
+				this.mobile_menu_visible = 0;
+			}
+		});
+
+		this.progressIndicationService.getProgressIndicationObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
+			setTimeout(() => { this.progressIndication = x; });
+		});
 	}
 
 	public isAuthenticated(): boolean {
 		return !(!this.authentication.current());
 	}
 
-    sidebarOpen() {
-        const toggleButton = this.toggleButton;
-        const body = document.getElementsByTagName('body')[0];
-        setTimeout(function(){
-            toggleButton.classList.add('toggled');
-        }, 500);
+	sidebarOpen() {
+		const toggleButton = this.toggleButton;
+		const body = document.getElementsByTagName('body')[0];
+		setTimeout(function () {
+			toggleButton.classList.add('toggled');
+		}, 500);
 
-        body.classList.add('nav-open');
+		body.classList.add('nav-open');
 
-        this.sidebarVisible = true;
-    };
-    sidebarClose() {
-        const body = document.getElementsByTagName('body')[0];
-        this.toggleButton.classList.remove('toggled');
-        this.sidebarVisible = false;
-        body.classList.remove('nav-open');
-    };
-    sidebarToggle() {
-        // const toggleButton = this.toggleButton;
-        // const body = document.getElementsByTagName('body')[0];
-        var $toggle = document.getElementsByClassName('navbar-toggler')[0];
+		this.sidebarVisible = true;
+	};
+	sidebarClose() {
+		const body = document.getElementsByTagName('body')[0];
+		this.toggleButton.classList.remove('toggled');
+		this.sidebarVisible = false;
+		body.classList.remove('nav-open');
+	};
+	sidebarToggle() {
+		// const toggleButton = this.toggleButton;
+		// const body = document.getElementsByTagName('body')[0];
+		var $toggle = document.getElementsByClassName('navbar-toggler')[0];
 
-        if (this.sidebarVisible === false) {
-            this.sidebarOpen();
-        } else {
-            this.sidebarClose();
-        }
-        const body = document.getElementsByTagName('body')[0];
+		if (this.sidebarVisible === false) {
+			this.sidebarOpen();
+		} else {
+			this.sidebarClose();
+		}
+		const body = document.getElementsByTagName('body')[0];
 
-        if (this.mobile_menu_visible == 1) {
-            // $('html').removeClass('nav-open');
-            body.classList.remove('nav-open');
-            if ($layer) {
-                $layer.remove();
-            }
-            setTimeout(function() {
-                $toggle.classList.remove('toggled');
-            }, 400);
+		if (this.mobile_menu_visible == 1) {
+			// $('html').removeClass('nav-open');
+			body.classList.remove('nav-open');
+			if ($layer) {
+				$layer.remove();
+			}
+			setTimeout(function () {
+				$toggle.classList.remove('toggled');
+			}, 400);
 
-            this.mobile_menu_visible = 0;
-        } else {
-            setTimeout(function() {
-                $toggle.classList.add('toggled');
-            }, 430);
+			this.mobile_menu_visible = 0;
+		} else {
+			setTimeout(function () {
+				$toggle.classList.add('toggled');
+			}, 430);
 
-            var $layer = document.createElement('div');
-            $layer.setAttribute('class', 'close-layer');
+			var $layer = document.createElement('div');
+			$layer.setAttribute('class', 'close-layer');
 
 
-            if (body.querySelectorAll('.main-panel')) {
-                document.getElementsByClassName('main-panel')[0].appendChild($layer);
-            }else if (body.classList.contains('off-canvas-sidebar')) {
-                document.getElementsByClassName('wrapper-full-page')[0].appendChild($layer);
-            }
+			if (body.querySelectorAll('.main-panel')) {
+				document.getElementsByClassName('main-panel')[0].appendChild($layer);
+			} else if (body.classList.contains('off-canvas-sidebar')) {
+				document.getElementsByClassName('wrapper-full-page')[0].appendChild($layer);
+			}
 
-            setTimeout(function() {
-                $layer.classList.add('visible');
-            }, 100);
+			setTimeout(function () {
+				$layer.classList.add('visible');
+			}, 100);
 
-            $layer.onclick = function() { //asign a function
-              body.classList.remove('nav-open');
-              this.mobile_menu_visible = 0;
-              $layer.classList.remove('visible');
-              setTimeout(function() {
-                  $layer.remove();
-                  $toggle.classList.remove('toggled');
-              }, 400);
-            }.bind(this);
+			$layer.onclick = function () { //asign a function
+				body.classList.remove('nav-open');
+				this.mobile_menu_visible = 0;
+				$layer.classList.remove('visible');
+				setTimeout(function () {
+					$layer.remove();
+					$toggle.classList.remove('toggled');
+				}, 400);
+			}.bind(this);
 
-            body.classList.add('nav-open');
-            this.mobile_menu_visible = 1;
+			body.classList.add('nav-open');
+			this.mobile_menu_visible = 1;
 
-        }
-    };
+		}
+	};
 
-    getTitle(){
-      var titlee = this.location.prepareExternalUrl(this.location.path());
-      if(titlee.charAt(0) === '#'){
-          titlee = titlee.slice( 2 );
-      }
-      titlee = titlee.split('/').pop();
+	getTitle() {
+		var titlee = this.location.prepareExternalUrl(this.location.path());
+		if (titlee.charAt(0) === '#') {
+			titlee = titlee.slice(2);
+		}
+		titlee = titlee.split('/').pop();
 
-      for(var item = 0; item < this.listTitles.length; item++){
-          if(this.listTitles[item].path === titlee){
-              return this.listTitles[item].title;
-          }
-      }
-      return 'Dashboard';
+		for (var item = 0; item < this.listTitles.length; item++) {
+			if (this.listTitles[item].path === titlee) {
+				return this.listTitles[item].title;
+			}
+		}
+		return 'Dashboard';
 	}
 
 	public principalHasAvatar(): boolean {