246 lines
9.3 KiB
TypeScript
246 lines
9.3 KiB
TypeScript
import {Component, Input, OnInit} from '@angular/core';
|
|
import {Subscriber} from 'rxjs';
|
|
|
|
import {properties} from 'src/environments/environment';
|
|
|
|
import {CommunityService} from '../../connect/community/community.service';
|
|
import {ConnectHelper} from '../../connect/connectHelper';
|
|
import {UserManagementService} from '../../services/user-management.service';
|
|
import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
|
|
|
@Component({
|
|
selector: 'relatedTo',
|
|
template: `
|
|
<div *ngIf="(gateways && gateways.length > 0) || (otherCommunities && otherCommunities.length > 0)" class="sideInfoTitle">
|
|
<span>Communities</span>
|
|
</div>
|
|
<!-- If there are any communities with dashboard -->
|
|
<ng-container *ngIf="gateways && gateways.length > 0">
|
|
<div class="uk-padding-small uk-flex">
|
|
<div class="uk-width-2-3">
|
|
<div class="uk-text-muted">Communities with gateway</div>
|
|
<ul class="custom-list">
|
|
<li *ngFor="let gateway of gateways">
|
|
<a href="{{gateway.link}}" target="_blank" [attr.uk-tooltip]="gateway.labelContext">
|
|
{{ gateway.labelContext.length > 26 ? gateway.labelContext.substr(0,25) + '…' : gateway.labelContext }}
|
|
<span class="custom-external custom-icon space"></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="uk-width-1-3 uk-position-relative">
|
|
<img class="uk-position-bottom-right connect-image" src="assets/common-assets/connect_image_faded.png" alt="OpenAIRE Connect image">
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
<!-- Other communities (without dashboards) -->
|
|
<ng-container *ngIf="otherCommunities && otherCommunities.length > 0">
|
|
<div class="uk-padding-small border-top">
|
|
<div>
|
|
<div *ngIf="gateways && gateways.length > 0" class="uk-text-muted">Other Communities</div>
|
|
<ul class="custom-list" [ngClass]="{'uk-padding-remove uk-margin-remove': !gateways || gateways.length == 0}">
|
|
<li *ngFor="let community of otherCommunities.slice(0, showNum); let i = index">
|
|
{{community.labelContext}}
|
|
<span *ngIf="community.labelCategory && (currentCommunity == community.idContext)">
|
|
<span uk-icon="icon: arrow-right"></span> {{community.labelCategory}}
|
|
</span>
|
|
<span *ngIf="community.labelConcept && (currentCommunity == community.idContext)">
|
|
: {{community.labelConcept}}
|
|
</span>
|
|
</li>
|
|
<div *ngIf="showNum > threshold" class="uk-text-right">
|
|
<a (click)="showNum = threshold;">View less</a>
|
|
</div>
|
|
<div *ngIf="otherCommunities.length > threshold && showNum == threshold" class="uk-text-right">
|
|
<a (click)="showNum = otherCommunities.length;">View more</a>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
<!-- <ng-container *ngIf="connectLinksView; else elseBlock"> -->
|
|
<!-- One gateway link -->
|
|
<!-- <div *ngIf="gateways && gateways.length === 1" class="uk-margin-medium-top uk-width-1-2@m">
|
|
<div class="uk-card uk-card-default uk-flex">
|
|
<div class="uk-width-2-3@m uk-card-body flex-column">
|
|
<img *ngIf="gateways[0].logo" src="{{gateways[0].logo}}" alt="OpenAIRE Gateway logo" class="gateway-link-logo">
|
|
<div>
|
|
<span class="uk-text-muted">Visit: </span>
|
|
<a href="{{gateways[0].link}}" target="_blank">
|
|
{{gateways[0].labelContext}}
|
|
<span class="custom-external custom-icon space"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-1-3@m uk-position-relative">
|
|
<img class="uk-position-bottom-right" src="assets/common-assets/connect_image_faded.png" alt="OpenAIRE Connect image">
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<!-- Two gateway links -->
|
|
<!-- <div *ngIf="gateways && gateways.length === 2" class="uk-margin-large-top uk-margin-large-right">
|
|
<div class="uk-card uk-card-default uk-flex">
|
|
<div class="uk-width-2-3@m uk-card-body uk-flex flex-gap">
|
|
<div class="flex-column min-width-30">
|
|
<img *ngIf="gateways[0].logo" src="{{gateways[0].logo}}" alt="sOpenAIRE Gateway logo" class="gateway-link-logo">
|
|
<div>
|
|
<span class="uk-text-muted">Visit: </span>
|
|
<a href="{{gateways[0].link}}" target="_blank">
|
|
{{gateways[0].labelContext}}
|
|
<span class="custom-external custom-icon space"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="verticalLine"></div>
|
|
<div class="flex-column min-width-30">
|
|
<img *ngIf="gateways[1].logo" src="{{gateways[1].logo}}" alt="OpenAIRE Gateway logo" class="gateway-link-logo">
|
|
<div>
|
|
<span class="uk-text-muted">Visit: </span>
|
|
<a href="{{gateways[1].link}}" target="_blank">
|
|
{{gateways[1].labelContext}}
|
|
<span class="custom-external custom-icon space"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-1-3@m uk-position-relative">
|
|
<img class="uk-position-bottom-right custom-height-130" src="assets/common-assets/connect_image_faded.png" alt="OpenAIRE Connect image">
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<!-- Three or more gateway links -->
|
|
<!-- <div *ngIf="gateways && gateways.length > 2" class="uk-margin-large-top uk-margin-large-right">
|
|
<div class="uk-card uk-card-default uk-flex">
|
|
<div class="uk-width-expand@m uk-card-body uk-padding-remove-right uk-flex flex-gap">
|
|
<div class="list">
|
|
<div>
|
|
<span class="uk-text-muted">Visit Connect gateways: </span>
|
|
</div>
|
|
<ul class="custom-list">
|
|
<li *ngFor="let gateway of gateways">
|
|
<a href="{{gateway.link}}" target="_blank">
|
|
{{ gateway.labelContext }}
|
|
<span class="custom-external custom-icon space"></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-small@m uk-position-relative">
|
|
<img class="uk-position-bottom-right custom-height-130" src="assets/common-assets/connect_image_faded.png" alt="OpenAIRE Connect image">
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<!-- </ng-container> -->
|
|
<!-- <ng-template #elseBlock>
|
|
<div class="uk-text-muted">Communities</div>
|
|
<div class="uk-margin-small-left" *ngFor="let item of contexts.slice(0, showNum); let i=index">
|
|
<span>
|
|
<span>{{item['labelContext']}}</span> -->
|
|
<!-- <a *ngIf="item['link']; else noLink" [href]="item['link']" target="_blank">{{item['labelContext']}}</a> -->
|
|
<!-- <ng-template #noLink> -->
|
|
<!-- </ng-template> -->
|
|
<!-- <span *ngIf="item['labelCategory']"><span
|
|
uk-icon="icon: arrow-right"></span>{{item['labelCategory']}}</span>
|
|
<span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>
|
|
</span>
|
|
</div>
|
|
<div *ngIf="showNum > threshold" class="uk-text-right">
|
|
<a (click)="showNum = threshold; scroll()">
|
|
View less
|
|
</a>
|
|
</div>
|
|
<div *ngIf="showNum == threshold && contexts && contexts.length > threshold" class="uk-text-right">
|
|
<a (click)="showNum = contexts.length;">
|
|
View more
|
|
</a>
|
|
</div>
|
|
</ng-template> -->
|
|
`
|
|
})
|
|
|
|
export class RelatedToComponent implements OnInit {
|
|
@Input() contexts: { "idContext": string, "labelContext": string, "labelCategory": string, "labelConcept": string, "link": string, "logo": string }[];
|
|
|
|
public threshold: number = 3;
|
|
public showNum: number = 3;
|
|
public gateways = [];
|
|
public otherCommunities = [];
|
|
public currentCommunity = ConnectHelper.getCommunityFromDomain(properties.domain);
|
|
private subscriptions = [];
|
|
|
|
constructor(private communityService: CommunityService,
|
|
private userManagementService: UserManagementService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.contexts.sort(this.compare);
|
|
let index = 0;
|
|
this.contexts.forEach( context => {
|
|
if(context.idContext) {
|
|
this.subscriptions.push(
|
|
this.userManagementService.getUserInfo().subscribe( user => {
|
|
//- handling subscribe errors?
|
|
this.subscriptions.push(
|
|
this.communityService.getCommunity(context.idContext).subscribe( community => {
|
|
if(community && !ConnectHelper.isPrivate(community,user) && (this.currentCommunity != context.idContext)) {
|
|
// creating the link, based on the enviroment
|
|
let url = '';
|
|
if(properties.environment == "beta") {
|
|
url = 'https://beta.' + context.idContext + '.openaire.eu';
|
|
} else {
|
|
url = 'https://' + context.idContext + '.openaire.eu';
|
|
}
|
|
context.link = url;
|
|
for(let gateway of this.gateways) {
|
|
if(gateway.link == context.link) {
|
|
return; // skips so that we don't get duplicate gateways
|
|
}
|
|
}
|
|
this.gateways.push(context);
|
|
} else {
|
|
if(this.currentCommunity != context.idContext) {
|
|
for(let other of this.otherCommunities) {
|
|
if(other.idContext == context.idContext) {
|
|
return; // skips so that we don't get duplicate communities because of the multiple concepts
|
|
}
|
|
}
|
|
}
|
|
this.otherCommunities.push(context);
|
|
}
|
|
index++;
|
|
if(index == this.contexts.length) {
|
|
this.gateways.sort(this.compare);
|
|
this.otherCommunities.sort(this.compare);
|
|
}
|
|
})
|
|
);
|
|
})
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.subscriptions.forEach(subscription => {
|
|
if(subscription instanceof Subscriber) {
|
|
subscription.unsubscribe();
|
|
}
|
|
});
|
|
}
|
|
|
|
public scroll() {
|
|
HelperFunctions.scroll();
|
|
}
|
|
|
|
public compare(a, b) {
|
|
if(a.labelContext < b.labelContext) {
|
|
return -1;
|
|
}
|
|
if(a.labelContext > b.labelContext) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
}
|
|
}
|