openaire-library/landingPages/landing-utils/relatedTo.component.ts

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: `
		<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 }[];
	@Input() connectLinksView: boolean = false;

  public threshold: number = 5;
  public showNum: number = 5;
	public gateways = [];
	private subscriptions = [];
  
  constructor(private communityService: CommunityService,
							private userManagementService: UserManagementService) {
  }
  
  ngOnInit() {
		this.contexts.sort(this.compare);
		if(this.connectLinksView && properties.environment === "development") {
			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) && (ConnectHelper.getCommunityFromDomain(properties.domain) != 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;
										// grabbing the logoUrl for the gateway links
										if(community.logoUrl) {
											context.logo = community.logoUrl;
										}
										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);
									}
									index++;
									if(index == this.contexts.length) {
										this.gateways.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;
	}
}