MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library | Trunk]: Annotations: Add loaging gif on first load of annotations. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59557 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2020-10-12 13:10:07 +00:00
parent 170414c894
commit 2ae1e1d6c0
1 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
landingPages/annotation/annotation.component.ts
View File

@ -49,18 +49,25 @@ import {Subscriber} from "rxjs";
<span>add annotation</span> <span>add annotation</span>
</button> </button>
</div> </div>
<ul *ngIf="annotations" class="uk-list uk-list-divider"> <div *ngIf="loading" class="loading-gif uk-margin-medium-top"></div>
<li *ngFor="let annotation of annotations.slice(0, visibleAnnotations)" uk-grid class="uk-flex uk-flex-top uk-margin-remove-left"> <ul *ngIf="annotations && !loading" class="uk-list uk-list-divider">
<li *ngFor="let annotation of annotations.slice(0, visibleAnnotations)" uk-grid
class="uk-flex uk-flex-top uk-margin-remove-left">
<div [ngClass]="annotation.type" class="uk-width-auto">{{annotation.type}}</div> <div [ngClass]="annotation.type" class="uk-width-auto">{{annotation.type}}</div>
<div [class.uk-width-1-3]="annotation.urls" [class.uk-width-1-6@s]="annotation.urls">{{annotation.text}}</div> <div [class.uk-width-1-3]="annotation.urls" [class.uk-width-1-6@s]="annotation.urls">{{annotation.text}}</div>
<ul class="uk-width-expand uk-list uk-margin-remove-top" *ngIf="annotation.urls"> <ul class="uk-width-expand uk-list uk-margin-remove-top" *ngIf="annotation.urls">
<li *ngFor="let url of annotation.urls.slice(0, annotation.urlSize)"><a [href]="url" target="_blank">{{url}}</a></li> <li *ngFor="let url of annotation.urls.slice(0, annotation.urlSize)"><a [href]="url"
<li *ngIf="annotation.urlSize < annotation.urls.length"><a (click)="annotation.urlSize = annotation.urls.length">+ {{annotation.urls.length - annotation.urlSize}} more</a></li> target="_blank">{{url}}</a></li>
<li *ngIf="annotation.urlSize < annotation.urls.length"><a
(click)="annotation.urlSize = annotation.urls.length">+ {{annotation.urls.length - annotation.urlSize}}
more</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
<div *ngIf="visibleAnnotations < annotations.length" class="uk-margin-medium-top uk-text-center"> <div *ngIf="visibleAnnotations < annotations.length" class="uk-margin-medium-top uk-text-center">
<button class="uk-button uk-button-primary" (click)="visibleAnnotations = (visibleAnnotations + annotationSize)">Load More</button> <button class="uk-button uk-button-primary"
(click)="visibleAnnotations = (visibleAnnotations + annotationSize)">Load More
</button>
</div> </div>
</div> </div>
<div [class.uk-hidden]="!visible"> <div [class.uk-hidden]="!visible">
@ -91,6 +98,7 @@ export class AnnotationComponent implements OnInit, OnDestroy {
public annotationSize: number = 3; public annotationSize: number = 3;
public user; public user;
public visibleAnnotations: number; public visibleAnnotations: number;
public loading: boolean = false;
@ViewChild('iframe') iframe: ElementRef; @ViewChild('iframe') iframe: ElementRef;
private subscriptions: any[] = []; private subscriptions: any[] = [];
@ -100,12 +108,10 @@ export class AnnotationComponent implements OnInit, OnDestroy {
@HostListener('window:message', ['$event']) @HostListener('window:message', ['$event'])
public onChange(event) { public onChange(event) {
if(this.properties.b2noteAPIURL.includes(event.origin)) { if (this.properties.b2noteAPIURL.includes(event.origin)) {
if(event.data === "B2NOTE loaded") { if (event.data === "B2NOTE loaded") {
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { let token = COOKIE.getCookie('AccessToken');
let token = COOKIE.getCookie('AccessToken'); this.iframe.nativeElement.contentWindow.postMessage({token: token}, this.properties.b2noteAPIURL);
this.iframe.nativeElement.contentWindow.postMessage({token: token}, this.properties.b2noteAPIURL);
}));
} else { } else {
this.getAnnotations(); this.getAnnotations();
} }
@ -134,7 +140,7 @@ export class AnnotationComponent implements OnInit, OnDestroy {
} }
} }
} }
if(this.pid) { if (this.pid) {
this.getAnnotations(); this.getAnnotations();
} }
} }
@ -150,11 +156,15 @@ export class AnnotationComponent implements OnInit, OnDestroy {
} }
private getAnnotations() { private getAnnotations() {
if(!this.annotations || this.annotations.length === 0) {
this.loading = true;
}
this.annotationService.getAllAnnotations(this.properties, this.pid).subscribe(annotations => { this.annotationService.getAllAnnotations(this.properties, this.pid).subscribe(annotations => {
this.annotations = annotations; this.annotations = annotations;
this.annotations.forEach(annotation => { this.annotations.forEach(annotation => {
annotation.urlSize = 3; annotation.urlSize = 3;
}); });
this.loading = false;
}); });
} }