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

Modify component for the new connect gateway links card

This commit is contained in:
Alex Martzios 2021-11-08 17:24:32 +02:00
parent 104c54a3e8
commit cd3558f134
3 changed files with 123 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
landingPages/landing-utils/relatedTo.component.ts
View File

@ -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,13 +11,88 @@ 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 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>
<a *ngIf="item['link']; else noLink" [href]="item['link']" target="_blank">{{item['labelContext']}}</a>
<ng-template #noLink>
<span>{{item['labelContext']}}</span>
</ng-template>
<!-- <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>
@ -33,14 +108,17 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
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);
}
})
);

4
landingPages/result/resultLanding.component.html
View File

@ -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">

5
landingPages/result/resultLanding.component.ts
View File

@ -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;
}
}