Change relatedTo and fundedBy component to match new mock - add dashboard links on resultLanding page
This commit is contained in:
parent
27d61b19e8
commit
55f7167fb4
|
|
@ -6,66 +6,70 @@ import {properties} from "../../../../environments/environment";
|
|||
@Component({
|
||||
selector: 'fundedBy',
|
||||
template: `
|
||||
<div class="uk-text-muted">Funded by</div>
|
||||
<span *ngFor="let item of fundedByProjects.slice(0, showNum) let i=index">
|
||||
<a>
|
||||
<span>
|
||||
<span
|
||||
*ngIf="item['funderShortname'] || item['funderName']">{{item['funderShortname'] ? item['funderShortname'] : item['funderName']}}</span>
|
||||
<span *ngIf="!item['funderShortname'] && !item['funderName']">[no funder available]</span>
|
||||
<span
|
||||
*ngIf="item['acronym'] || item['title']">| {{ item['acronym'] ? item['acronym'] : item['title']}}</span>
|
||||
</span>
|
||||
</a>
|
||||
<div class="default-dropdown uk-margin-remove-top uk-padding-small uk-dropdown"
|
||||
uk-dropdown="pos: bottom-left; mode:click">
|
||||
<span>Project</span>
|
||||
<div class="uk-margin-bottom">
|
||||
<a *ngIf="item.id" class="uk-h6 uk-margin-remove portal-link"
|
||||
[queryParams]="{projectId: item.id}" [routerLink]="url">
|
||||
{{item['acronym'] ? item['acronym'] : item['title']}}
|
||||
</a>
|
||||
<span *ngIf="!item.id" class="uk-h6 uk-margin-remove">
|
||||
{{item['acronym'] ? item['acronym'] : item['title']}}
|
||||
</span>
|
||||
<div *ngIf="item.acronym && item.title">
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
<ul class="uk-list uk-padding-remove-left uk-margin-bottom">
|
||||
<li *ngIf="item.funderShortname || item.funderName">
|
||||
<span class="uk-text-muted">Funder: </span>
|
||||
{{item.funderName ? item.funderName : item.funderShortname}}
|
||||
<span *ngIf="item.funderShortname && item.funderName">
|
||||
({{item.funderShortname}})
|
||||
</span>
|
||||
</li>
|
||||
<li *ngIf="item.code">
|
||||
<span class="uk-text-muted">Project Code: </span>{{item.code}}
|
||||
</li>
|
||||
<li *ngIf="item.funding">
|
||||
<span class="uk-text-muted">Funding stream: </span>{{item.funding}}
|
||||
</li>
|
||||
</ul>
|
||||
<div *ngIf="item.provenanceAction || item.validated" class="uk-text-muted">
|
||||
<span *ngIf="item.validated">Validated by funder</span>
|
||||
<span *ngIf="item.provenanceAction && item.validated"> | </span>
|
||||
<span *ngIf="item.provenanceAction">{{item.provenanceAction}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span *ngIf="i < (fundedByProjects.slice(0, showNum).length - 1)">, </span>
|
||||
</span>
|
||||
<div *ngIf="showNum > threshold" class="uk-text-right uk-margin-bottom">
|
||||
<a (click)="showNum = threshold; scroll()">
|
||||
View less
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="showNum == threshold && fundedByProjects && fundedByProjects.length > threshold"
|
||||
class="uk-text-right uk-margin-bottom">
|
||||
<a (click)="showNum = fundedByProjects.length;">
|
||||
View more
|
||||
</a>
|
||||
</div>
|
||||
<div class="sideInfoTitle">
|
||||
<span>Funded by</span>
|
||||
</div>
|
||||
<div class="uk-padding-small">
|
||||
<span *ngFor="let item of fundedByProjects.slice(0, showNum) let i=index">
|
||||
<a>
|
||||
<span>
|
||||
<span
|
||||
*ngIf="item['funderShortname'] || item['funderName']">{{item['funderShortname'] ? item['funderShortname'] : item['funderName']}}</span>
|
||||
<span *ngIf="!item['funderShortname'] && !item['funderName']">[no funder available]</span>
|
||||
<span
|
||||
*ngIf="item['acronym'] || item['title']">| {{ item['acronym'] ? item['acronym'] : item['title']}}</span>
|
||||
</span>
|
||||
</a>
|
||||
<div class="default-dropdown uk-margin-remove-top uk-padding-small uk-dropdown"
|
||||
uk-dropdown="pos: bottom-left; mode:click">
|
||||
<span>Project</span>
|
||||
<div class="uk-margin-bottom">
|
||||
<a *ngIf="item.id" class="uk-h6 uk-margin-remove portal-link"
|
||||
[queryParams]="{projectId: item.id}" [routerLink]="url">
|
||||
{{item['acronym'] ? item['acronym'] : item['title']}}
|
||||
</a>
|
||||
<span *ngIf="!item.id" class="uk-h6 uk-margin-remove">
|
||||
{{item['acronym'] ? item['acronym'] : item['title']}}
|
||||
</span>
|
||||
<div *ngIf="item.acronym && item.title">
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
<ul class="uk-list uk-padding-remove-left uk-margin-bottom">
|
||||
<li *ngIf="item.funderShortname || item.funderName">
|
||||
<span class="uk-text-muted">Funder: </span>
|
||||
{{item.funderName ? item.funderName : item.funderShortname}}
|
||||
<span *ngIf="item.funderShortname && item.funderName">
|
||||
({{item.funderShortname}})
|
||||
</span>
|
||||
</li>
|
||||
<li *ngIf="item.code">
|
||||
<span class="uk-text-muted">Project Code: </span>{{item.code}}
|
||||
</li>
|
||||
<li *ngIf="item.funding">
|
||||
<span class="uk-text-muted">Funding stream: </span>{{item.funding}}
|
||||
</li>
|
||||
</ul>
|
||||
<div *ngIf="item.provenanceAction || item.validated" class="uk-text-muted">
|
||||
<span *ngIf="item.validated">Validated by funder</span>
|
||||
<span *ngIf="item.provenanceAction && item.validated"> | </span>
|
||||
<span *ngIf="item.provenanceAction">{{item.provenanceAction}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span *ngIf="i < (fundedByProjects.slice(0, showNum).length - 1)">, </span>
|
||||
</span>
|
||||
<div *ngIf="showNum > threshold" class="uk-text-right uk-margin-bottom">
|
||||
<a (click)="showNum = threshold; scroll()">
|
||||
View less
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="showNum == threshold && fundedByProjects && fundedByProjects.length > threshold"
|
||||
class="uk-text-right uk-margin-bottom">
|
||||
<a (click)="showNum = fundedByProjects.length;">
|
||||
View more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -7,14 +7,51 @@ 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";
|
||||
import {StringUtils} from "../../utils/string-utils.class";
|
||||
|
||||
@Component({
|
||||
selector: 'relatedTo',
|
||||
template: `
|
||||
<ng-container *ngIf="connectLinksView; else elseBlock">
|
||||
<div 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-margin-small-top 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">
|
||||
{{community.labelContext}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- TODO: Connect relatedTo component with concepts this time -->
|
||||
|
||||
<!-- <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 *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">
|
||||
|
|
@ -30,9 +67,9 @@ import {StringUtils} from "../../utils/string-utils.class";
|
|||
<img class="uk-position-bottom-right" src="assets/common-assets/connect_image_faded.png" alt="OpenAIRE Connect image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- Two gateway links -->
|
||||
<div *ngIf="gateways && gateways.length === 2" class="uk-margin-large-top uk-margin-large-right">
|
||||
<!-- <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">
|
||||
|
|
@ -61,9 +98,9 @@ import {StringUtils} from "../../utils/string-utils.class";
|
|||
<img class="uk-position-bottom-right custom-height-130" src="assets/common-assets/connect_image_faded.png" alt="OpenAIRE Connect image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- Three or more gateway links -->
|
||||
<div *ngIf="gateways && gateways.length > 2" class="uk-margin-large-top uk-margin-large-right">
|
||||
<!-- <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">
|
||||
|
|
@ -84,17 +121,17 @@ import {StringUtils} from "../../utils/string-utils.class";
|
|||
<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> -->
|
||||
<!-- </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>
|
||||
<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
|
||||
<!-- <span *ngIf="item['labelCategory']"><span
|
||||
uk-icon="icon: arrow-right"></span>{{item['labelCategory']}}</span>
|
||||
<span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>
|
||||
</span>
|
||||
|
|
@ -109,17 +146,17 @@ import {StringUtils} from "../../utils/string-utils.class";
|
|||
View more
|
||||
</a>
|
||||
</div>
|
||||
</ng-template>
|
||||
</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 = [];
|
||||
public otherCommunities = [];
|
||||
private subscriptions = [];
|
||||
|
||||
constructor(private communityService: CommunityService,
|
||||
|
|
@ -128,7 +165,7 @@ export class RelatedToComponent implements OnInit {
|
|||
|
||||
ngOnInit() {
|
||||
this.contexts.sort(this.compare);
|
||||
if(this.connectLinksView && properties.environment === "development") {
|
||||
if(properties.environment === "development") {
|
||||
let index = 0;
|
||||
this.contexts.forEach( context => {
|
||||
if(context.idContext) {
|
||||
|
|
@ -146,20 +183,24 @@ export class RelatedToComponent implements OnInit {
|
|||
url = 'https://' + context.idContext + '.openaire.eu';
|
||||
}
|
||||
context.link = url;
|
||||
// grabbing the logoUrl for the gateway links
|
||||
if(community.logoUrl) {
|
||||
context.logo = StringUtils.getLogoUrl(community);
|
||||
}
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
|
|
|||
|
|
@ -59,10 +59,6 @@
|
|||
{{resultLandingInfo.countries.join(", ")}}
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Area for gateway links-->
|
||||
<ng-container *ngIf="properties.enviroment == 'development' && 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">
|
||||
|
|
@ -158,7 +154,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
<!-- *ngIf="numberOfTabs > 0"-->
|
||||
<div class="uk-padding-remove-left uk-width-1-1 uk-margin-large-top">
|
||||
<div class="uk-padding-remove-left uk-width-1-1 uk-margin-medium-top">
|
||||
<div class="main-tabs-div">
|
||||
<ng-template #summary_tab>
|
||||
<div class="uk-grid uk-margin-remove">
|
||||
|
|
@ -228,18 +224,15 @@
|
|||
</div>
|
||||
<div *ngIf="hasSecondaryInfo" class="uk-width-1-3@m uk-width-1-1 right-column uk-padding-remove">
|
||||
<div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 ||
|
||||
resultLandingInfo.contexts && resultLandingInfo.contexts.length >0"
|
||||
class="uk-padding uk-padding-remove-bottom">
|
||||
resultLandingInfo.contexts && resultLandingInfo.contexts.length >0">
|
||||
<!-- Communities -->
|
||||
<div *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0">
|
||||
<relatedTo [contexts]="resultLandingInfo.contexts"></relatedTo>
|
||||
</div>
|
||||
<!-- Funded By -->
|
||||
<div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0"
|
||||
class="uk-margin-medium-bottom">
|
||||
<div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0">
|
||||
<fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects"></fundedBy>
|
||||
</div>
|
||||
<!-- Communities -->
|
||||
<div *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length >0"
|
||||
class="uk-margin-medium-bottom">
|
||||
<relatedTo [contexts]="resultLandingInfo.contexts"></relatedTo>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Download From -->
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in New Issue