Modify component for the new connect gateway links card
This commit is contained in:
parent
104c54a3e8
commit
cd3558f134
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {Subscriber} from 'rxjs';
|
||||
|
||||
import {properties} from 'src/environments/environment';
|
||||
|
|
@ -11,36 +11,114 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
|||
@Component({
|
||||
selector: 'relatedTo',
|
||||
template: `
|
||||
<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>
|
||||
<a *ngIf="item['link']; else noLink" [href]="item['link']" target="_blank">{{item['labelContext']}}</a>
|
||||
<ng-template #noLink>
|
||||
<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 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 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-2-3@m uk-card-body uk-flex flex-gap">
|
||||
<div class="list">
|
||||
<div>
|
||||
<span class="uk-text-muted">Visit Connect gateways: </span>
|
||||
</div>
|
||||
<ul class="uk-list uk-column-1-2 padding-left">
|
||||
<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-1-3@m 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>
|
||||
</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>
|
||||
<!-- <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 {
|
||||
@Input() contexts: { "idContext": string, "labelContext": string, "labelCategory": string, "labelConcept": string, "link": string }[];
|
||||
|
||||
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,
|
||||
|
|
@ -48,7 +126,7 @@ export class RelatedToComponent {
|
|||
}
|
||||
|
||||
ngOnInit() {
|
||||
if(properties.environment === "development") {
|
||||
if(this.connectLinksView && properties.environment === "development") {
|
||||
this.contexts.forEach( context => {
|
||||
if(context.idContext) {
|
||||
this.subscriptions.push(
|
||||
|
|
@ -65,6 +143,16 @@ export class RelatedToComponent {
|
|||
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);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
|
|
|||
|
|
@ -59,6 +59,10 @@
|
|||
{{resultLandingInfo.countries.join(", ")}}
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Area for gateway links-->
|
||||
<ng-container *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0">
|
||||
<relatedTo [connectLinksView]="true" [contexts]="resultLandingInfo.contexts"></relatedTo>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-width-1-3@m uk-width-1-1@s uk-padding-remove">
|
||||
<ul class="user-actions uk-list uk-card uk-card-default uk-padding">
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@ export class ResultLandingComponent {
|
|||
public isLoggedIn: boolean = Session.isLoggedIn();
|
||||
public pid: string;
|
||||
@ViewChild("annotation") annotation: AnnotationComponent;
|
||||
public contextsWithLink: any;
|
||||
|
||||
constructor(private _resultLandingService: ResultLandingService,
|
||||
private _vocabulariesService: ISVocabulariesService,
|
||||
|
|
@ -742,4 +743,8 @@ export class ResultLandingComponent {
|
|||
))
|
||||
}
|
||||
}
|
||||
|
||||
public enrichContexts(contextsWithLink: any) {
|
||||
this.contextsWithLink = contextsWithLink;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue