[Library | Trunk]: Add full page loading. Add promise on get stakeholder

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59723 d315682c-612b-4755-9ff5-7f18f6832af3

dashboard/users/members/members.component.html

@@ -5,7 +5,7 @@
       {{error}}
     </div>
   </div>
-  <div class="uk-grid" uk-grid>
+  <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
     <div class="uk-width-expand uk-flex uk-flex-left@m uk-flex-center">
       <ul class="uk-subnav uk-subnav-pill">
         <li [class.uk-active]="showMembers" (click)="showMembers = true">

monitor/services/stakeholder.service.ts

@@ -1,9 +1,11 @@
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
-import {BehaviorSubject, Observable} from "rxjs";
+import {BehaviorSubject, from, Observable} from "rxjs";
 import {Indicator, Section, Stakeholder, StakeholderInfo, Visibility} from "../entities/stakeholder";
 import {HelperFunctions} from "../../utils/HelperFunctions.class";
 import {map} from "rxjs/operators";
+import {ActivatedRoute} from "@angular/router";
+import {properties} from "../../../../environments/environment";
 
 let maps: string[] = ['parameters', 'filters'];
 
@@ -13,19 +15,32 @@ let maps: string[] = ['parameters', 'filters'];
 export class StakeholderService {
 
   private stakeholderSubject: BehaviorSubject<Stakeholder> = null;
+  private promise: Promise<any>;
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private route: ActivatedRoute) {
     this.stakeholderSubject = new BehaviorSubject<Stakeholder>(null);
   }
 
-  getStakeholder(url: string, alias:string): Observable<Stakeholder> {
-    /*return new BehaviorSubject<Stakeholder>(
-      StakeholderCreator.createFunderFromDefaultProfile("ec","funder","ec__________::EC",
-        "European Commission","EC",
-        false,"ec",true,true)).asObservable();*/
-    return this.http.get<Stakeholder>(url + '/stakeholder/' + encodeURIComponent(alias)).pipe(map(stakeholder => {
-      return this.formalize(stakeholder);
-    }));
+  getStakeholder(alias:string): Observable<Stakeholder> {
+    if(!this.stakeholderSubject.value || this.stakeholderSubject.value.alias !== alias) {
+      this.promise = new Promise<any>((resolve, reject) => {
+        this.http.get<Stakeholder>(properties.monitorServiceAPIURL + '/stakeholder/' + encodeURIComponent(alias)).pipe(map(stakeholder => {
+          return this.formalize(stakeholder);
+        })).subscribe(stakeholder => {
+          this.stakeholderSubject.next(stakeholder);
+          resolve();
+        }, error => {
+          this.stakeholderSubject.next(null);
+          reject();
+        });
+      });
+    }
+    return from(this.getStakeholderAsync());
+  }
+  
+  async getStakeholderAsync() {
+    await this.promise;
+    return this.stakeholderSubject.getValue();
   }
 
   getAllStakeholders(url: string, type: string = null): Observable<Stakeholder[]> {

utils/loading/loading.component.ts

@@ -3,18 +3,28 @@ import {Component, Input} from "@angular/core";
 @Component({
   selector: 'loading',
   template: `
-    <div class="uk-flex uk-flex-center uk-margin-small-top">
+    <ng-template [ngIf]="full" [ngIfElse]="loading">
+      <div class="uk-position-relative" style="height: 100vh; width: 100vw; z-index: 1000; background: transparent">
+        <div class="uk-position-center">
+          <ng-container [ngTemplateOutlet]="loading"></ng-container>
+        </div>
+      </div>
+    </ng-template>
+    <ng-template #loading>
+      <div class="uk-flex uk-flex-center uk-margin-small-top">
       <span class="portal-color uk-icon uk-spinner">
         <svg width="60" height="60" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" data-svg="spinner"><circle
             fill="none" stroke="#000" cx="15" cy="15" r="14" style="stroke-width: 2px;"></circle></svg>
       </span>
-    </div>`
+      </div>
+    </ng-template>`
 })
 export class LoadingComponent {
   /**
    * Possible values '': blue, 'success': green, 'warning': orange and 'danger': red
    */
   @Input() color: 'success' | 'warning' | 'danger' = null;
+  @Input() full: boolean = false;
   
   constructor() {
   }