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

Merge branch 'new-theme' of code-repo.d4science.org:MaDgIK/openaire-library into new-theme

This commit is contained in:
argirok 2022-03-16 19:14:48 +02:00
parent 7d5ac5eaf9 e103ced738
commit b7cc2c0147
32 changed files with 518 additions and 347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -1,24 +1,74 @@
import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from "@angular/core"; import {Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
import {Subscription} from "rxjs";
declare var UIkit;
@Component({ @Component({
selector: '[page-content]', selector: '[page-content]',
template: ` template: `
<div id="page_content"> <div id="page_content">
<div #header id="page_content_header" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; media: @m" [attr.offset]="offset"> <div id="header">
<div class="uk-container uk-container-large"> <div id="page_content_header" uk-sticky="media: @m" [attr.offset]="offset">
<div #header class="uk-container uk-container-large uk-padding-remove-vertical">
<ng-content select="[header]"></ng-content> <ng-content select="[header]"></ng-content>
</div> </div>
</div> </div>
</div>
<div id="page_content_inner" class="uk-section uk-container uk-container-large"> <div id="page_content_inner" class="uk-section uk-container uk-container-large">
<ng-content select="[inner]"></ng-content> <ng-content select="[inner]"></ng-content>
</div> </div>
</div> </div>
` `,
}) })
export class PageContentComponent implements OnInit{ export class PageContentComponent implements OnInit, OnDestroy {
public offset: string; public offset: number;
public sticky: boolean = false;
@Output()
public stickyEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
@ViewChild("header") public header: ElementRef;
private current;
private subscriptions: any[] = [];
constructor() {
}
ngOnInit() { ngOnInit() {
this.offset = getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'); if (typeof window !== "undefined") {
this.current = window.pageYOffset;
this.initSticky();
}
}
initSticky() {
this.clear();
this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', (): void => {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
}));
this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', (): void => {
this.offset = 0;
}));
this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', (): void => {
this.sticky = true;
this.stickyEmitter.emit(this.sticky);
}));
this.subscriptions.push(UIkit.util.on(document, 'inactive', '#page_content_header', (): void => {
this.sticky = false;
this.stickyEmitter.emit(this.sticky);
}));
}
clear() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
} else if (subscription instanceof Function) {
subscription();
}
});
}
ngOnDestroy() {
this.clear();
} }
} }

6
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -25,10 +25,10 @@
<ul class="uk-list"> <ul class="uk-list">
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)"> <li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params" <a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
[queryParamsHandling]="queryParamsHandling" class="uk-text-center"> [queryParamsHandling]="queryParamsHandling" class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap">
<span [class.uk-display-block]="!open" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span> <span [class.uk-display-block]="!open" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
<span [ngClass]="specialMenuItem.customClass" <span [ngClass]="specialMenuItem.customClass" class="uk-text-center"
[class.uk-margin-small-left]="open" [class.uk-margin-small-left]="open" [class.uk-margin-small-top]="!open"
[class.uk-text-small]="!open">{{specialMenuItem.title}}</span> [class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
</a> </a>
</li> </li>

5
deposit/searchResultsInDeposit.component.html
View File

@ -18,10 +18,9 @@
</div> </div>
<ul class="uk-margin-top uk-list uk-margin search-results "> <ul class="uk-margin-top uk-list uk-margin search-results ">
<li *ngFor="let result of results" class="uk-animation-fade"> <li *ngFor="let result of results" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-padding uk-card-hover">
<result-preview [properties]="properties" [showOrganizations]="true" <result-preview [properties]="properties" [showOrganizations]="true"
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"> [showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
[isCard]="true">
</result-preview> </result-preview>
</div>
</li> </li>
</ul> </ul>

2
landingPages/landing-utils/metrics/metrics.component.ts
View File

@ -201,7 +201,7 @@ export class MetricsComponent {
private sub: Subscription; private sub: Subscription;
private timeouts: any[] = []; private timeouts: any[] = [];
public metricsClicked: boolean = true; public metricsClicked: boolean = false;
public status: number; public status: number;
public state: number = -1; public state: number = -1;

20
landingPages/landing-utils/parsingFunctions.class.ts
View File

@ -559,10 +559,12 @@ export class ParsingFunctions {
} }
// publication & dataset landing : for subjects and otherSubjects and classifiedSubjects // publication & dataset landing : for subjects and otherSubjects and classifiedSubjects
parseAllSubjects(_subjects: any): [string[], Map<string, string[]>, Map<string, string[]>] { parseAllSubjects(_subjects: any): [string[], Map<string, string[]>, Map<string, string[]>, string[], string[]] {
let subjects: string[]; let subjects: string[];
let otherSubjects: Map<string, string[]>; let otherSubjects: Map<string, string[]>;
let classifiedSubjects: Map<string, string[]>; let classifiedSubjects: Map<string, string[]>;
let fos: string[];
let sdg: string[];
let subject; let subject;
let length = Array.isArray(_subjects) ? _subjects.length : 1; let length = Array.isArray(_subjects) ? _subjects.length : 1;
@ -571,6 +573,17 @@ export class ParsingFunctions {
subject = Array.isArray(_subjects) ? _subjects[i] : _subjects; subject = Array.isArray(_subjects) ? _subjects[i] : _subjects;
if (subject.classid != "") { if (subject.classid != "") {
if (subject.inferred && subject.inferred == true) { if (subject.inferred && subject.inferred == true) {
if(subject.classid === "SDG") {
if (sdg == undefined) {
sdg = new Array<string>();
}
sdg.push(subject.content+"");
} else if(subject.classid === "FOS") {
if (fos == undefined) {
fos = new Array<string>();
}
fos.push(subject.content+"");
} else {
if (classifiedSubjects == undefined) { if (classifiedSubjects == undefined) {
classifiedSubjects = new Map<string, string[]>(); classifiedSubjects = new Map<string, string[]>();
} }
@ -579,7 +592,8 @@ export class ParsingFunctions {
classifiedSubjects.set(subject.classname, new Array<string>()); classifiedSubjects.set(subject.classname, new Array<string>());
} }
classifiedSubjects.get(subject.classname).push(subject.content); classifiedSubjects.get(subject.classname).push(subject.content+"");
}
} else { } else {
if (subject.classid == "keyword") { if (subject.classid == "keyword") {
let content: string = subject.content+""; let content: string = subject.content+"";
@ -636,7 +650,7 @@ export class ParsingFunctions {
} }
} }
} }
return [subjects, otherSubjects, classifiedSubjects]; return [subjects, otherSubjects, classifiedSubjects, fos, sdg];
} }
parseContexts(_contexts: any): { parseContexts(_contexts: any): {

10
landingPages/landing-utils/showIdentifiers.component.ts
View File

@ -16,14 +16,16 @@ import {properties} from "../../../../environments/environment";
@Component({ @Component({
selector: 'showIdentifiers', selector: 'showIdentifiers',
template: ` template: `
<div class="uk-text-muted">Persistent Identifiers</div> <!-- <div class="uk-text-muted">Persistent Identifiers</div> -->
<div class="uk-height-max-medium uk-overflow-auto uk-margin-small-top"> <div class="uk-height-max-medium uk-overflow-auto uk-margin-small-top">
<ng-container *ngFor="let key of keys let i=index"> <ng-container *ngFor="let key of keys let i=index">
<div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1"> <!-- <div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1"> -->
<p class="custom-break uk-margin-remove"> <div *ngIf="!showAll" class="uk-flex-inline uk-flex-wrap uk-margin-medium-right">
<p class="uk-margin-remove">
<span #content [id]="key"> <span #content [id]="key">
<span class="uk-text-bold uk-text-uppercase">{{key}}: </span> <span class="uk-text-muted uk-text-uppercase">{{key}}: </span>
<ng-container *ngFor="let item of identifiers.get(key) let j=index"> <ng-container *ngFor="let item of identifiers.get(key) let j=index">
<!-- TODO: custom external link icons -->
<a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline"> <a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline">
{{item}} <span class="custom-external custom-icon"></span> {{item}} <span class="custom-external custom-icon"></span>
</a> </a>

2
landingPages/landing-utils/showPublisher.component.ts
View File

@ -54,7 +54,7 @@ import {EnvProperties} from "../../utils/properties/env-properties";
<span>, </span> <span>, </span>
</ng-container> </ng-container>
<span *ngIf="journal['lissn']" class="uk-display-inline-block"> <span *ngIf="journal['lissn']" class="uk-display-inline-block">
<span class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>(kostis) <span class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>
<span>, </span> <span>, </span>
</span> </span>
<span *ngIf="journal && (journal['issn'] ||journal['lissn'] || journal['eissn'] )"> <span *ngIf="journal && (journal['issn'] ||journal['lissn'] || journal['eissn'] )">

2
landingPages/organization/deletedByInference/deletedByInference.component.ts
View File

@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
</no-load-paging> </no-load-paging>
<ul class="uk-list uk-list-divider uk-margin"> <ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)"> <li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)"></result-preview> <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [isCard]="false"></result-preview>
</li> </li>
</ul> </ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type" <no-load-paging *ngIf="results.length > pageSize" [type]="type"

2
landingPages/result/deletedByInference/deletedByInference.component.ts
View File

@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
</no-load-paging> </no-load-paging>
<ul class="uk-list uk-list-divider uk-margin"> <ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)"> <li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false"></result-preview> <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview>
</li> </li>
</ul> </ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type" <no-load-paging *ngIf="results.length > pageSize" [type]="type"

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

@ -182,6 +182,26 @@
<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers> <showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
</div> </div>
<!-- Subjects --> <!-- Subjects -->
<div *ngIf="resultLandingInfo.fos" class="uk-margin-medium-bottom">
<div class="uk-text-muted">
Fields of Science and Technology classification
</div>
<div class="uk-margin-small-top">
<div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0">
{{resultLandingInfo.fos.join(', ')}}
</div>
</div>
</div>
<div *ngIf="resultLandingInfo.sdg" class="uk-margin-medium-bottom">
<div class="uk-text-muted">
Sustainable Development Goals
</div>
<div class="uk-margin-small-top">
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0">
{{resultLandingInfo.sdg.join(', ')}}
</div>
</div>
</div>
<div *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects || <div *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects ||
resultLandingInfo.classifiedSubjects" class="uk-margin-medium-bottom"> resultLandingInfo.classifiedSubjects" class="uk-margin-medium-bottom">
<showSubjects [subjects]="resultLandingInfo.subjects" <showSubjects [subjects]="resultLandingInfo.subjects"
@ -369,7 +389,8 @@
<ul class="uk-list uk-list-divider uk-margin"> <ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let item of researchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)"> <li *ngFor="let item of researchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)">
<result-preview [modal]="relationModal" [properties]="properties" <result-preview [modal]="relationModal" [properties]="properties"
[result]="getResultPreview(item)"></result-preview> [result]="getResultPreview(item)"
[isCard]="false"></result-preview>
</li> </li>
</ul> </ul>
<no-load-paging *ngIf="researchResults.length > pageSize" <no-load-paging *ngIf="researchResults.length > pageSize"

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

@ -380,7 +380,7 @@ export class ResultLandingComponent {
this.seoService.createLinkForCanonicalURL(this.canonicalUrl); this.seoService.createLinkForCanonicalURL(this.canonicalUrl);
this.updateUrl(this.canonicalUrl); this.updateUrl(this.canonicalUrl);
if ((this.type == "publication") && (this.properties.environment == "beta" || this.properties.environment == "development") && (typeof document !== 'undefined')) { if ((this.type == "publication") && (this.properties.environment == "beta" || this.properties.environment == "development") && (typeof document !== 'undefined')) {
this.getOpenCitations(); // this.getOpenCitations();
} }
this.addNoIndexFilter(); this.addNoIndexFilter();
if (this.resultLandingInfo.title) { if (this.resultLandingInfo.title) {
@ -453,7 +453,10 @@ export class ResultLandingComponent {
} }
public get hasPrimaryInfo(): boolean { public get hasPrimaryInfo(): boolean {
return !!this.resultLandingInfo && (!!this.resultLandingInfo.description || !!this.resultLandingInfo.identifiers || !!this.resultLandingInfo.subjects); return !!this.resultLandingInfo && (
(!!this.resultLandingInfo.description && this.resultLandingInfo.description.length > 0)
|| !!this.resultLandingInfo.identifiers || !!this.resultLandingInfo.subjects
|| (!!this.resultLandingInfo.organizations && this.resultLandingInfo.organizations.length > 0));
} }
public get hasSecondaryInfo(): boolean { public get hasSecondaryInfo(): boolean {

28
landingPages/result/resultLanding.service.ts
View File

@ -8,6 +8,7 @@ import {map} from "rxjs/operators";
import {HostedByCollectedFrom, Organization} from "../../utils/result-preview/result-preview"; import {HostedByCollectedFrom, Organization} from "../../utils/result-preview/result-preview";
import {Dates, Identifier, StringUtils} from "../../utils/string-utils.class"; import {Dates, Identifier, StringUtils} from "../../utils/string-utils.class";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
@Injectable() @Injectable()
export class ResultLandingService { export class ResultLandingService {
@ -151,18 +152,21 @@ export class ResultLandingService {
if(!this.resultLandingInfo.title || data[1][i].classid == "main title") { if(!this.resultLandingInfo.title || data[1][i].classid == "main title") {
this.resultLandingInfo.title = String(data[1][i].content); this.resultLandingInfo.title = String(data[1][i].content);
} }
if(data[1][i].classid == "main title") { if(!this.resultLandingInfo.subtitle && data[1][i].classid === 'subtitle') {
break; this.resultLandingInfo.subtitle = String(data[1][i].content);
}
// if(data[1][i].classid == "main title") {
// break;
// }
} }
} }
if(this.resultLandingInfo.title === this.resultLandingInfo.subtitle) {
this.resultLandingInfo.subtitle = "";
} }
if(!this.resultLandingInfo.title) { if(!this.resultLandingInfo.title) {
this.resultLandingInfo.title = ""; this.resultLandingInfo.title = "";
} }
// this.resultLandingInfo.title = (data[1][0] && data[1][0].content) ? String(data[1][0].content) : ""; // this.resultLandingInfo.title = (data[1][0] && data[1][0].content) ? String(data[1][0].content) : "";
if(data[1][1].classid === 'subtitle') {
this.resultLandingInfo.subtitle = (data[1][1] && data[1][1].content) ? String(data[1][1].content) : "";
}
} else { } else {
this.resultLandingInfo.title = (data[1] && data[1].content) ? String(data[1].content) : ""; this.resultLandingInfo.title = (data[1] && data[1].content) ? String(data[1].content) : "";
} }
@ -191,6 +195,8 @@ export class ResultLandingService {
} }
this.resultLandingInfo.relatedResults = this.parsingFunctions.parseResults(this.resultLandingInfo.relatedResults, relation, provenanceAction); this.resultLandingInfo.relatedResults = this.parsingFunctions.parseResults(this.resultLandingInfo.relatedResults, relation, provenanceAction);
} else if(relation['to'].class && relation['to'].class.toLowerCase() == "hasauthorinstitution") {
this.resultLandingInfo.organizations = this.parseRelatedOrganizations(this.resultLandingInfo.organizations, relation);
} }
} }
} }
@ -325,10 +331,20 @@ export class ResultLandingService {
// res['result']['metadata']['oaf:entity']['oaf:result']['subject'] // res['result']['metadata']['oaf:entity']['oaf:result']['subject']
if(data[7] != null) { if(data[7] != null) {
let subjectResults: [string[], Map<string, string[]>, Map<string, string[]>] = this.parsingFunctions.parseAllSubjects(data[7]); let subjectResults: [string[], Map<string, string[]>, Map<string, string[]>, string[], string[]] = this.parsingFunctions.parseAllSubjects(data[7]);
this.resultLandingInfo.subjects = subjectResults[0]; this.resultLandingInfo.subjects = subjectResults[0];
this.resultLandingInfo.otherSubjects = subjectResults[1]; this.resultLandingInfo.otherSubjects = subjectResults[1];
this.resultLandingInfo.classifiedSubjects = subjectResults[2]; this.resultLandingInfo.classifiedSubjects = subjectResults[2];
this.resultLandingInfo.fos = subjectResults[3];
if(this.resultLandingInfo.fos) {
this.resultLandingInfo.fos.sort((a, b) => a.localeCompare(b))
}
this.resultLandingInfo.sdg = subjectResults[4];
if(this.resultLandingInfo.sdg) {
this.resultLandingInfo.sdg.sort((a, b) => {
return HelperFunctions.sortSDGs(a, b);
})
}
this.resultLandingInfo.showEgiNotebookButton = this.parsingFunctions.notebookInSubjects; this.resultLandingInfo.showEgiNotebookButton = this.parsingFunctions.notebookInSubjects;
} }

3
orcid/my-orcid-links/searchMyOrcidResults.component.html
View File

@ -13,7 +13,8 @@
<div class="uk-grid uk-grid-divider"> <div class="uk-grid uk-grid-divider">
<div class="uk-width-expand@m uk-width-1-1 uk-first-column"> <div class="uk-width-expand@m uk-width-1-1 uk-first-column">
<result-preview [properties]="properties" [showOrcid]="false" [showOrganizations]="true" <result-preview [properties]="properties" [showOrcid]="false" [showOrganizations]="true"
[showSubjects]="true" [result]="result" [promoteWebsiteURL]="true"> [showSubjects]="true" [result]="result" [promoteWebsiteURL]="true"
[isCard]="false">
</result-preview> </result-preview>
</div> </div>

20
orcid/orcid-work.component.ts
View File

@ -41,10 +41,10 @@ declare var UIkit: any;
[class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ ((showLoading || !isLoggedIn) ? 'uk-disabled ' : '') + (!isLoggedIn ? 'half-opacity' : '')"> [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ ((showLoading || !isLoggedIn) ? 'uk-disabled ' : '') + (!isLoggedIn ? 'half-opacity' : '')">
<icon *ngIf="!showLoading" name="add" ratio="1"></icon> <icon *ngIf="!showLoading" name="add" ratio="1"></icon>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span> <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left uk-flex uk-flex-middle">Add to <span class="uk-margin-small-left uk-flex uk-flex-middle">Add to&#160;
<span class="orcid-color space uk-flex uk-flex-middle"> <span class="orcid-color uk-flex uk-flex-middle">
<span>ORCID</span> <span>ORCID&#160;</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" style="width:16px; height:16px" loading="lazy">{{" "}} <img class="" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" style="width:16px; height:16px" loading="lazy">{{" "}}
</span> </span>
</span> </span>
</a> </a>
@ -60,9 +60,9 @@ declare var UIkit: any;
[class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ (showLoading ? 'uk-disabled' : '')"> [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ (showLoading ? 'uk-disabled' : '')">
<icon *ngIf="!showLoading" name="remove" ratio="0.8"></icon> <icon *ngIf="!showLoading" name="remove" ratio="0.8"></icon>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span> <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from <span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from&#160;
<span class="orcid-color space uk-flex uk-flex-middle"> <span class="orcid-color space uk-flex uk-flex-middle">
<span>ORCID</span> <span>ORCID&#160;</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}} <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
</span> </span>
</span> </span>
@ -84,7 +84,7 @@ declare var UIkit: any;
</span> </span>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span> [top_margin]="false"></loading></span>
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to&#160;
<span class="orcid-color"> <span class="orcid-color">
ORCID ORCID
</span> </span>
@ -105,7 +105,7 @@ declare var UIkit: any;
</span> </span>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span> [top_margin]="false"></loading></span>
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from&#160;
<span class="orcid-color"> <span class="orcid-color">
ORCID ORCID
</span> </span>
@ -142,9 +142,9 @@ declare var UIkit: any;
<ng-container *ngIf="pageType == 'my_search'"> <ng-container *ngIf="pageType == 'my_search'">
<span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center"> <span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center">
<span>ORCID</span> <span>ORCID&#160;</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy"> <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">
<span class="space">ACTIONS</span> <span class="space">&#160;ACTIONS</span>
</span> </span>
<span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0) <span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0)

5
orcid/recommend-orcid-links/searchResultsForOrcid.component.html
View File

@ -9,10 +9,9 @@
</div> </div>
<ul class="uk-margin-top uk-list uk-margin search-results "> <ul class="uk-margin-top uk-list uk-margin search-results ">
<li *ngFor="let result of results" class="uk-animation-fade"> <li *ngFor="let result of results" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-padding uk-card-hover">
<result-preview [properties]="properties" [showOrganizations]="true" <result-preview [properties]="properties" [showOrganizations]="true"
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"> [showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
[isCard]="true">
</result-preview> </result-preview>
</div>
</li> </li>
</ul> </ul>

3
searchPages/searchUtils/modal-result/modal-result.component.ts
View File

@ -21,7 +21,8 @@ import {EnvProperties} from "../../../utils/properties/env-properties";
<result-preview [modal]="modal" [properties]="properties" <result-preview [modal]="modal" [properties]="properties"
[result]="getResultPreview(result)" [result]="getResultPreview(result)"
[showSubjects]="showSubjects" [showSubjects]="showSubjects"
[showOrganizations]="showOrganizations"></result-preview> [showOrganizations]="showOrganizations"
[isCard]="false"></result-preview>
</li> </li>
</ul> </ul>
<no-load-paging *ngIf="totalResults > pageSize" [type]="type" <no-load-paging *ngIf="totalResults > pageSize" [type]="type"

27
searchPages/searchUtils/newSearchPage.component.html
View File

@ -4,7 +4,7 @@
refineFields.indexOf(customFilter.queryFieldName) == refineFields.indexOf(customFilter.queryFieldName) ==
-1) ||customFilter.isHiddenFilter)"> -1) ||customFilter.isHiddenFilter)">
<span class="uk-width-auto"> <span class="uk-width-auto">
<span class="filter-tag uk-flex uk-flex-middle"> <span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span> <span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
</span> </span>
</span> </span>
@ -15,9 +15,9 @@
<span class="uk-width-auto"> <span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" <a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)"
[class.uk-disabled]="disabled"> [class.uk-disabled]="disabled">
<span class="filter-tag uk-flex uk-flex-middle"> <span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{type.name}}</span> <span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
<icon name="close" flex="true" ratio="0.7"></icon> <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
</span> </span>
</a> </a>
</span> </span>
@ -30,9 +30,9 @@
<span class="uk-width-auto"> <span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)" <a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
[class.uk-disabled]="disabled"> [class.uk-disabled]="disabled">
<span class="filter-tag uk-flex uk-flex-middle"> <span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span> <span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
<icon name="close" flex="true" ratio="0.7"></icon> <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
</span> </span>
</a> </a>
</span> </span>
@ -46,9 +46,9 @@
class="uk-width-auto"> class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" <a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)"
[class.uk-disabled]="disabled"> [class.uk-disabled]="disabled">
<span class="filter-tag uk-flex uk-flex-middle"> <span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{value.name}}</span> <span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
<icon name="close" flex="true" ratio="0.7"></icon> <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
</span> </span>
</a> </a>
</span> </span>
@ -153,6 +153,10 @@
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters <schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
[searchAction]=false [description]="metaDescription"></schema2jsonld> [searchAction]=false [description]="metaDescription"></schema2jsonld>
<div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm"> <div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
<ng-template #loading>
<loading></loading>
</ng-template>
<ng-template [ngIf]="searchUtils.refineStatus != errorCodes.LOADING || existingFiltersWithValues !== 0" [ngIfElse]="loading">
<div uk-grid> <div uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first "> <div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
@ -231,8 +235,9 @@
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)" [href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
target="_blank"> OpenAIRE - Explore</a>. target="_blank"> OpenAIRE - Explore</a>.
</div> </div>
<div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-medium-top uk-margin-bottom">
<!-- Total results, number of pages --> <!-- Total results, number of pages -->
<h6 class="uk-margin-bottom"> <h6 class="uk-margin-remove">
<ng-container *ngIf="results && searchUtils.totalResults > 0"> <ng-container *ngIf="results && searchUtils.totalResults > 0">
<span>{{searchUtils.totalResults|number}}</span> <span>{{searchUtils.totalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span> <span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
@ -246,8 +251,8 @@
<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span> <span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
</ng-container> </ng-container>
</h6> </h6>
<!-- TODO Download results position--> <!-- Download results -->
<div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom"> <div *ngIf="showDownload" class="uk-margin-small-bottom uk-margin-small-top">
<search-download <search-download
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'" *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[isDisabled]="disabled" [isDisabled]="disabled"
@ -255,6 +260,7 @@
[piwikSiteId]="piwikSiteId"> [piwikSiteId]="piwikSiteId">
</search-download> </search-download>
</div> </div>
</div>
<!-- No Dashboard Filters --> <!-- No Dashboard Filters -->
<div <div
*ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))"> *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">
@ -357,5 +363,6 @@
</div> </div>
</div> </div>
</div> </div>
</ng-template>
</div> </div>
<modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert> <modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>

11
searchPages/searchUtils/searchFilter.component.ts
View File

@ -10,7 +10,7 @@ import {
import {Filter, Value} from './searchHelperClasses.class'; import {Filter, Value} from './searchHelperClasses.class';
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {SearchFields} from "../../utils/properties/searchFields"; import {SearchFields} from "../../utils/properties/searchFields";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
@Component({ @Component({
selector: 'search-filter', selector: 'search-filter',
templateUrl: 'searchFilter.component.html' templateUrl: 'searchFilter.component.html'
@ -223,21 +223,22 @@ export class SearchFilterComponent implements OnInit, OnChanges {
sort(values: Value[]) { sort(values: Value[]) {
let sorted: Value[] = values.slice(); let sorted: Value[] = values.slice();
if (this.sortBy == "name") { if (this.sortBy == "name") {
sorted.sort((n1, n2) => { sorted.sort((n1, n2) => {
if (this.filter.filterId === "sdg") {
return HelperFunctions.sortSDGs(n1.name.toLowerCase(), n2.name.toLowerCase());
} else {
if (n1.name.toLowerCase() > n2.name.toLowerCase()) { if (n1.name.toLowerCase() > n2.name.toLowerCase()) {
return 1; return 1;
} }
if (n1.name < n2.name) { if (n1.name < n2.name) {
return -1; return -1;
} }
return 0; return 0;
});
} }
});
return sorted; return sorted;
} }
}
toggle() { toggle() {
this.isOpen = !this.isOpen; this.isOpen = !this.isOpen;

5
searchPages/searchUtils/searchResult.component.html
View File

@ -1,10 +1,9 @@
<ul class="uk-list uk-list-xlarge uk-margin" [ngClass]="custom_class"> <ul class="uk-list uk-list-xlarge uk-margin" [ngClass]="custom_class">
<errorMessages [status]="[status]" [type]="'results'"></errorMessages> <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of previewResults" class="uk-animation-fade"> <li *ngFor="let result of previewResults" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<result-preview [properties]="properties" [showOrganizations]="showOrganizations" <result-preview [properties]="properties" [showOrganizations]="showOrganizations"
[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps"> [showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps"
[isCard]="true">
</result-preview> </result-preview>
</div>
</li> </li>
</ul> </ul>

2
services/searchResearchResults.service.ts
View File

@ -341,7 +341,7 @@ export class SearchResearchResultsService {
}); });
} }
var date: string = (resData.dateofacceptance) + ""; // transform to string in case it is an integer var date: string = (resData.dateofacceptance ? resData.dateofacceptance : '') + ''; // transform to string in case it is an integer
result.year = (date && (date).indexOf('-') !== -1) ? date.split('-')[0] : date; result.year = (date && (date).indexOf('-') !== -1) ? date.split('-')[0] : date;
let abstracts = this.parsingFunctions.parseDescription(resData.description); let abstracts = this.parsingFunctions.parseDescription(resData.description);

53
sharedComponents/navigationBar.component.html
View File

@ -2,8 +2,10 @@
<div class="uk-hidden@m"> <div class="uk-hidden@m">
<div [ngClass]="portal + '-menu'"> <div [ngClass]="portal + '-menu'">
<nav class="uk-navbar-container uk-navbar" uk-navbar=""> <nav class="uk-navbar-container uk-navbar" uk-navbar="">
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge"> <div
<img class="uk-position-top-left" [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')" *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
<img class="uk-position-top-left"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA" style="height: 60px; width: 60px;"> alt="BETA" style="height: 60px; width: 60px;">
</div> </div>
<div *ngIf="!onlyTop || userMenu" class="uk-navbar-left"> <div *ngIf="!onlyTop || userMenu" class="uk-navbar-left">
@ -39,13 +41,15 @@
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a--> <!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
<a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired)" <a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired)"
routerLink="{{menu.rootItem.route}}" (click)="closeCanvas(canvas)" routerLink="{{menu.rootItem.route}}" (click)="closeCanvas(canvas)"
[queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a> [queryParams]="menu.rootItem.params"
[fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)" href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)"
target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a> target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a>
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || <a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) ||
(menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) (menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage)
&& isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))" (click)="closeCanvas(canvas)">{{menu.rootItem.title}}</a> && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))"
(click)="closeCanvas(canvas)">{{menu.rootItem.title}}</a>
<ul class="uk-nav-sub"> <ul class="uk-nav-sub">
<ng-container *ngFor="let submenu of menu.items"> <ng-container *ngFor="let submenu of menu.items">
<li [class.uk-active]="isTheActiveMenuItem(submenu)" <li [class.uk-active]="isTheActiveMenuItem(submenu)"
@ -88,15 +92,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="uk-visible@m"> <div id="main-menu" class="uk-visible@m">
<div class="uk-navbar-transparent" [ngClass]="portal + '-menu'" <div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'"
uk-sticky="show-on-up: true" media="@m" cls-active="uk-active uk-navbar-sticky" cls-inactive="uk-navbar-transparent" uk-sticky="show-on-up: true; top: #main-menu" media="@m" cls-active="uk-active uk-navbar-sticky"
[attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)"> [attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge"> <div
<img class="uk-position-top-left" [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')" *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
alt="BETA" style="height: 100px; width: 100px; z-index: 1000"> <img class="uk-position-top-left"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA" style="height: 65px; width: 65px; z-index: 1000">
</div> </div>
<nav class="uk-navbar uk-flex uk-navbar-container uk-padding-large uk-padding-remove-vertical" uk-navbar> <div class="uk-container uk-container-expand">
<nav class="uk-navbar" uk-navbar>
<ng-container *ngIf="!onlyTop"> <ng-container *ngIf="!onlyTop">
<div class="uk-navbar-left"> <div class="uk-navbar-left">
<ng-container *ngIf="showLogo && isHeaderLeft"> <ng-container *ngIf="showLogo && isHeaderLeft">
@ -107,7 +114,7 @@
<ng-container *ngIf="showLogo && !isHeaderLeft"> <ng-container *ngIf="showLogo && !isHeaderLeft">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container> <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</ng-container> </ng-container>
<ng-container *ngIf="header.menuPosition === 'center'"> <ng-container *ngIf="!header.menuPosition || header.menuPosition === 'center'">
<ng-container *ngTemplateOutlet="mainMenu"></ng-container> <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
</ng-container> </ng-container>
</div> </div>
@ -136,12 +143,9 @@
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}" href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}"
aria-expanded="false">{{menu.rootItem.title}}</a> aria-expanded="false">{{menu.rootItem.title}}</a>
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)) " <a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))">{{menu.rootItem.title}}</a>
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a> <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown" uk-drop="pos: bottom-left">
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" <div class="uk-height-max-medium uk-overflow-auto">
style="top: 80px; left: 0px;" id="{{menu.rootItem._id}}" uk-toggle>
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
<ul class="uk-nav uk-navbar-dropdown-nav"> <ul class="uk-nav uk-navbar-dropdown-nav">
<ng-container *ngFor="let submenu of menu.items"> <ng-container *ngFor="let submenu of menu.items">
<li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && <li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
@ -172,8 +176,6 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
</li> </li>
</ng-container> </ng-container>
<!-- Custom menu items --> <!-- Custom menu items -->
@ -233,6 +235,7 @@
</ng-container> </ng-container>
</nav> </nav>
</div> </div>
</div>
<!-- New navbar for featured menu items - test only --> <!-- New navbar for featured menu items - test only -->
<ng-container *ngIf="featuredMenuItems?.length > 0 && properties.environment == 'development'"> <ng-container *ngIf="featuredMenuItems?.length > 0 && properties.environment == 'development'">
<div class="featuredNavBar"> <div class="featuredNavBar">
@ -262,11 +265,10 @@
</div> </div>
<ng-template #header_template let-mobile="mobile"> <ng-template #header_template let-mobile="mobile">
<a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="!isHeaderLeft" <a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="!isHeaderLeft"
class="uk-logo uk-navbar-item uk-text-center uk-text-bold"> class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class.uk-margin-medium-left]="!mobile">
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)" <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
[src]="!mobile?header.logoUrl:header.logoSmallUrl" [src]="!mobile?header.logoUrl:header.logoSmallUrl"
[alt]="header.title" [alt]="header.title">
class="uk-width-1-1">
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)"> <ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
<p class="uk-margin-remove">{{header.title}}</p> <p class="uk-margin-remove">{{header.title}}</p>
@ -274,11 +276,10 @@
</ng-container> </ng-container>
</a> </a>
<a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="!isHeaderLeft" <a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="!isHeaderLeft"
class="uk-logo uk-navbar-item uk-text-center uk-text-bold"> class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class..uk-margin-medium-left]="!mobile">
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)" <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
[src]="!mobile?header.logoUrl:header.logoSmallUrl" [src]="!mobile?header.logoUrl:header.logoSmallUrl"
[alt]="header.title" [alt]="header.title">
class="uk-width-1-1">
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)"> <ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
<p class="uk-margin-remove">{{header.title}}</p> <p class="uk-margin-remove">{{header.title}}</p>

2
sharedComponents/quick-contact/quick-contact.component.css
View File

@ -4,7 +4,7 @@
right: 5vw; right: 5vw;
} }
.uk-card > .uk-background-secondary:first-child { .uk-card > .uk-background-primary:first-child {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }

2
sharedComponents/quick-contact/quick-contact.component.html
View File

@ -5,7 +5,7 @@
<span class="uk-margin-small-left">Contact</span> <span class="uk-margin-small-left">Contact</span>
</a> </a>
<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade"> <div #drop id="quick-contact" class="uk-card uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
<div class="uk-background-secondary uk-padding-small uk-text-center"> <div class="uk-background-primary uk-padding-small uk-text-center">
<div class="uk-text-small"> <div class="uk-text-small">
Send a message Send a message
</div> </div>

19
utils/HelperFunctions.class.ts
View File

@ -70,4 +70,23 @@ export class HelperFunctions {
public static getValues(value: any): any[] { public static getValues(value: any): any[] {
return Object.keys(value).map(key => value[key]); return Object.keys(value).map(key => value[key]);
} }
public static sortSDGs(sgd1: string, sdg2: string): number {
let splitA: string[] = sgd1.split(".");
let numA: number;
if(splitA && splitA.length > 0) {
numA = +splitA[0];
}
let splitB: string[] = sdg2.split(".");
let numB: number;
if(splitB && splitB.length > 0) {
numB = +splitB[0];
}
if(numA && numB) {
return numA - numB;
} else {
return sgd1.localeCompare(sdg2);
}
}
} }

2
utils/entities/resultLandingInfo.ts
View File

@ -49,6 +49,8 @@ export class ResultLandingInfo {
subjects: string[]; subjects: string[];
otherSubjects: Map<string, string[]>; otherSubjects: Map<string, string[]>;
classifiedSubjects: Map<string, string[]>; //<class of subject, subjects> classifiedSubjects: Map<string, string[]>; //<class of subject, subjects>
fos: string[];
sdg: string[];
showEgiNotebookButton: boolean = false; showEgiNotebookButton: boolean = false;
// // percentage is for trust // // percentage is for trust

18
utils/properties/searchFields.ts
View File

@ -14,7 +14,7 @@ export class SearchFields {
"resultbestaccessright", "relfunder", "resultbestaccessright", "relfunder",
"relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id", "relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id",
"relproject", "relproject",
"instancetypename", "resultlanguagename", "community", "resulthostingdatasource", "country"]; "instancetypename", "resultlanguagename", "community", "resulthostingdatasource", "country", "sdg", "fos"];
public RESULT_ADVANCED_FIELDS: string[] = ["q", "resulttitle", "resultauthor", "authorid", "resultdescription", "resultsubject", "resultpublisher", public RESULT_ADVANCED_FIELDS: string[] = ["q", "resulttitle", "resultauthor", "authorid", "resultdescription", "resultsubject", "resultpublisher",
"resultbestaccessright", "community", "collectedfromdatasourceid", "resulthostingdatasourceid", "resultdateofacceptance", "resultbestaccessright", "community", "collectedfromdatasourceid", "resulthostingdatasourceid", "resultdateofacceptance",
@ -231,6 +231,22 @@ export class SearchFields {
operator: "cu", operator: "cu",
equalityOperator: " exact ", equalityOperator: " exact ",
filterType: "checkbox" filterType: "checkbox"
},
["sdg"]: {
name: "Sustainable Development Goals (SDG)",
type: "refine",
param: "sdg",
operator: "sg",
equalityOperator: " exact ",
filterType: "checkbox"
},
["fos"]: {
name: "Fields of Science and Technology classification (FOS)",
type: "refine",
param: "fos",
operator: "fs",
equalityOperator: " exact ",
filterType: "checkbox"
} }
}; };

17
utils/rangeFilter/rangeFilter.component.html
View File

@ -25,7 +25,8 @@
[placeholder]="'e.g. ' + yearMax "/> [placeholder]="'e.g. ' + yearMax "/>
<button type="submit" (click)="yearChanged()" <button type="submit" (click)="yearChanged()"
[ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}" [ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}"
class="uk-icon uk-icon-button uk-margin-small-left uk-text-right uk-button-default" class="uk-icon uk-icon-button uk-button-default uk-margin-small-left"
[class.uk-disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)"
[disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)"> [disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
icon="chevron-right" ratio="1"> icon="chevron-right" ratio="1">
@ -55,20 +56,20 @@
<!-- Natalia's suggestion--> <!-- Natalia's suggestion-->
<div class="uk-margin-small uk-margin-top uk-text-left"> <div class="uk-margin-small uk-margin-top uk-text-left">
<ul class="uk-subnav uk-subnav-divider recentyears"> <ul class="uk-text-small uk-grid uk-grid-small uk-grid-divider" uk-grid>
<!-- + (isDisabled ? ' uk-disabled uk-text-muted' : '')"--> <!-- + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->
<li> <li>
<a *ngIf="actionRoute" [routerLink]="getRoute()" <a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(0,(stringToNum(filter.selectedToValue) == [queryParams]="getParams(0,(stringToNum(filter.selectedToValue) ==
currentYear currentYear
&&stringToNum(filter.selectedFromValue) == currentYear))" &&stringToNum(filter.selectedFromValue) == currentYear))"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(0)" (click)="yearChanged(0)"
>This year</a> >This year</a>
<a *ngIf="!actionRoute" <a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(0)" (click)="yearChanged(0)"
@ -77,13 +78,13 @@
<li><a *ngIf="actionRoute" [routerLink]="getRoute()" <li><a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(4,(stringToNum(filter.selectedToValue) == currentYear [queryParams]="getParams(4,(stringToNum(filter.selectedToValue) == currentYear
&&stringToNum(filter.selectedFromValue) == currentYear-4))" &&stringToNum(filter.selectedFromValue) == currentYear-4))"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(4)" (click)="yearChanged(4)"
>Last 5 years</a> >Last 5 years</a>
<a *ngIf="!actionRoute" <a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(4)" (click)="yearChanged(4)"
@ -91,13 +92,13 @@
</li> </li>
<li><a *ngIf="actionRoute" [routerLink]="getRoute()" <li><a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(9,(stringToNum(filter.selectedToValue) == currentYear &&stringToNum(filter.selectedFromValue) == currentYear-9))" [queryParams]="getParams(9,(stringToNum(filter.selectedToValue) == currentYear &&stringToNum(filter.selectedFromValue) == currentYear-9))"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(9)" (click)="yearChanged(9)"
>Last 10 years</a> >Last 10 years</a>
<a *ngIf="!actionRoute" <a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center ' [class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '') + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '')
" "
(click)="yearChanged(9)" (click)="yearChanged(9)"

46
utils/result-preview/result-preview.component.html
View File

@ -1,4 +1,5 @@
<div *ngIf="result"> <div *ngIf="result" [ngClass]="{'uk-card uk-card-default uk-card-hover': isCard}">
<div [ngClass]="{'uk-card-body': isCard}">
<!-- Before title --> <!-- Before title -->
<div class="uk-grid uk-flex uk-flex-middle"> <div class="uk-grid uk-flex uk-flex-middle">
<div *ngIf="properties.enermapsURL && showEnermaps && result.enermapsId" class=" uk-inline uk-width-auto uk-text-center uk-visible-toggle"> <div *ngIf="properties.enermapsURL && showEnermaps && result.enermapsId" class=" uk-inline uk-width-auto uk-text-center uk-visible-toggle">
@ -119,49 +120,55 @@
<div class="uk-margin-small-bottom"> <div class="uk-margin-small-bottom">
<span <span
*ngIf="result.accessMode && result.accessMode.toLowerCase() !== 'not available'" *ngIf="result.accessMode && result.accessMode.toLowerCase() !== 'not available'"
class="uk-label custom-label uk-text-truncate " [ngClass]="'label-' + accessClass(result.accessMode)" class="uk-label uk-text-truncate " [ngClass]="'uk-label-' + accessClass(result.accessMode)"
title="Access Mode"> title="Access Mode">
{{result.accessMode}} {{result.accessMode}}
</span>{{' '}} </span>{{' '}}
<span *ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)" <span
class="uk-label custom-label label-open uk-text-truncate" *ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
class="uk-label uk-label-success uk-text-truncate"
title="Open Access mandate for Publications"> title="Open Access mandate for Publications">
Open Access mandate for Publications Open Access mandate for Publications
</span>{{' '}} </span>{{' '}}
<span <span
*ngIf="result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets && (result.openAccessMandatePublications == undefined || !result.openAccessMandatePublications)" *ngIf="result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets && (result.openAccessMandatePublications == undefined || !result.openAccessMandatePublications)"
class="uk-label custom-label label-open uk-text-truncate " title="Open Access mandate for Research Data"> class="uk-label uk-label-success uk-text-truncate " title="Open Access mandate for Research Data">
Open Access mandate for Research Data Open Access mandate for Research Data
</span>{{' '}} </span>{{' '}}
<span <span
*ngIf="result.openAccessMandatePublications != undefined && result.openAccessMandatePublications && result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets" *ngIf="result.openAccessMandatePublications != undefined && result.openAccessMandatePublications && result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets"
class="uk-label custom-label label-open uk-text-truncate" class="uk-label uk-label-success uk-text-truncate"
title="Open Access mandate for Publications and Research Data"> title="Open Access mandate for Publications and Research Data">
Open Access mandate for Publications and Research Data Open Access mandate for Publications and Research Data
</span>{{' '}} </span>{{' '}}
<span *ngIf="result.languages && result.languages.length > 0"> <span *ngIf="result.languages && result.languages.length > 0">
<span *ngFor="let language of result.languages" <span
class="uk-label custom-label label-language " title="Language"> *ngFor="let language of result.languages"
class="uk-label" title="Language">
{{language}} {{language}}
</span>{{' '}} </span>{{' '}}
</span> </span>
<span *ngIf="result.programmingLanguages && result.programmingLanguages.length > 0"> <span *ngIf="result.programmingLanguages && result.programmingLanguages.length > 0">
<span *ngFor="let programmingLanguage of result.programmingLanguages" <span
class="uk-label custom-label label-language" title="Programming Language"> *ngFor="let programmingLanguage of result.programmingLanguages"
class="uk-label" title="Programming Language">
{{programmingLanguage}} {{programmingLanguage}}
</span>{{" "}} </span>{{" "}}
</span> </span>
<span *ngIf="result.sc39" class="uk-label custom-label label-sc39" title="Special Clause 39"> <span
*ngIf="result.sc39" class="uk-label" title="Special Clause 39">
Special Clause 39 Special Clause 39
</span>{{' '}} </span>{{' '}}
<span *ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'" <span
class="uk-label custom-label label-compatibility" title="Compatibility"> *ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'"
class="uk-label" title="Compatibility">
{{result.compatibility}} {{result.compatibility}}
</span>{{' '}} </span>{{' '}}
<span *ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility == <span
'not available'" *ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility == 'not available'"
class="uk-label custom-label label-danger" title="OpenAIRE Compatibility">Not yet registered</span> class="uk-label uk-label-danger" title="OpenAIRE Compatibility">
{{' '}} Not yet registered
</span>{{' '}}
</div> </div>
<!-- Authors --> <!-- Authors -->
<div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom"> <div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom">
@ -281,13 +288,15 @@
</span> </span>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
<!--&& loggedIn --> <!--&& loggedIn -->
<div *ngIf="(result.pop_inf && result.DOI) || <div *ngIf="(result.pop_inf && result.DOI) ||
((properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') && ((properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') &&
((showOrcid && result.identifiers && result.identifiers.size > 0) || result.orcidCreationDates?.length > 0))" ((showOrcid && result.identifiers && result.identifiers.size > 0) || result.orcidCreationDates?.length > 0))"
class="result-preview-bottom"> class="result-preview-bottom"
[ngClass]="{'uk-card-footer': isCard}">
<!-- Impact Factors--> <!-- Impact Factors-->
<span class="uk-flex uk-flex-top"> <span class="uk-flex uk-flex-top">
<ng-container *ngIf="result.pop_inf && result.DOI"> <ng-container *ngIf="result.pop_inf && result.DOI">
@ -362,6 +371,7 @@
</div> </div>
</ng-container> </ng-container>
<!-- && loggedIn --> <!-- && loggedIn -->
<!-- TODO: change colors/opacity and disabled attr for ORCID buttons -->
<span *ngIf="(properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') <span *ngIf="(properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community')
&& showOrcid && result.identifiers && result.identifiers.size > 0" && showOrcid && result.identifiers && result.identifiers.size > 0"
class="uk-width-1-3 uk-width-expand@s"> class="uk-width-1-3 uk-width-expand@s">

7
utils/result-preview/result-preview.component.ts
View File

@ -19,6 +19,7 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
@Input() modal: AlertModal = null; @Input() modal: AlertModal = null;
@Input() promoteWebsiteURL: boolean = false; @Input() promoteWebsiteURL: boolean = false;
@Input() hasLink: boolean = true; @Input() hasLink: boolean = true;
@Input() isCard: boolean = false;
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
public urlParam: string; public urlParam: string;
public url: string; public url: string;
@ -142,11 +143,11 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
public accessClass(accessMode: string): string { public accessClass(accessMode: string): string {
if(accessMode.toLowerCase().indexOf('open') !== -1) { if(accessMode.toLowerCase().indexOf('open') !== -1) {
return 'open'; return 'success';
} else if(accessMode.toLowerCase() === 'not available') { } else if(accessMode.toLowerCase() === 'not available') {
return 'unknown'; return 'disabled'; // unknown
} else { } else {
return 'closed'; return 'disabled'; // closed
} }
} }

17
utils/smooth-scroll.ts
View File

@ -1,4 +1,4 @@
import {NavigationEnd, Router} from '@angular/router'; import {ActivationStart, NavigationEnd, Router} from '@angular/router';
import {Injectable} from '@angular/core'; import {Injectable} from '@angular/core';
import {Subscription} from 'rxjs'; import {Subscription} from 'rxjs';
@ -8,17 +8,20 @@ import {Subscription} from 'rxjs';
export class SmoothScroll { export class SmoothScroll {
private interval; private interval;
private readonly sub; private readonly sub;
private lastRoute; private lastComponent;
private currentComponent: any;
constructor(private router: Router) { constructor(private router: Router) {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
this.sub = router.events.subscribe(event => { this.sub = router.events.subscribe(event => {
if (event instanceof NavigationEnd) { if (event instanceof ActivationStart) {
this.currentComponent = event.snapshot.component;
} else if (event instanceof NavigationEnd) {
if (this.interval) { if (this.interval) {
clearInterval(this.interval); clearInterval(this.interval);
} }
const fragment = router.parseUrl(router.url).fragment; const fragment = router.parseUrl(router.url).fragment;
if (this.lastRoute !== this.getUrl(event.url)) { if (this.lastComponent !== this.currentComponent) {
window.scrollTo({top: 0}); window.scrollTo({top: 0});
} }
if (fragment) { if (fragment) {
@ -49,16 +52,12 @@ export class SmoothScroll {
} else { } else {
window.scrollTo({top: 0, behavior: 'smooth'}); window.scrollTo({top: 0, behavior: 'smooth'});
} }
this.lastRoute = this.getUrl(event.url); this.lastComponent = this.currentComponent;
} }
}); });
} }
} }
private getUrl(url: string) {
return url.split('?')[0].split('#')[0];
}
public clearSubscriptions() { public clearSubscriptions() {
if (this.sub && this.sub instanceof Subscription) { if (this.sub && this.sub instanceof Subscription) {
this.sub.unsubscribe(); this.sub.unsubscribe();

7
utils/tabs/tab.component.ts
View File

@ -7,9 +7,10 @@
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
export interface TabIcon { export interface TabIcon {
svg: string; name?: string;
ratio: number; svg?: string;
fill: string; ratio?: number;
active: string;
} }
@Component({ @Component({

18
utils/tabs/tabs.component.ts
View File

@ -2,16 +2,17 @@
* The main component that renders single TabComponent * The main component that renders single TabComponent
* instances. * instances.
*/ */
import {Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core'; import {AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
import {TabComponent} from './tab.component'; import {TabComponent} from './tab.component';
@Component({ @Component({
selector: 'my-tabs', selector: 'my-tabs',
template: ` template: `
<ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content"> <ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content">
<li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="i === 0" (click)="selectTab(tab)"> <li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="selected === tab.tabId" (click)="selectTab(tab)">
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''"> <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon" [fill]="tab.tabIcon" class="uk-margin-small-bottom"></icon> <icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
[ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>
<div>{{tab.title}}</div> <div>{{tab.title}}</div>
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div> <div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
</a> </a>
@ -22,14 +23,21 @@ import {TabComponent} from './tab.component';
</div> </div>
` `
}) })
export class TabsComponent { export class TabsComponent implements AfterContentInit {
@Input() @Input()
public customClass: string; public customClass: string;
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>; @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter(); @Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
public selected: string;
ngAfterContentInit() {
if(this.tabs.length > 0) {
this.selected = this.tabs.get(0).tabId;
}
}
selectTab(tab: TabComponent){ selectTab(tab: TabComponent){
// activate the tab the user has clicked on. this.selected = tab.tabId;
this.selectedActiveTab.emit(tab.tabId); this.selectedActiveTab.emit(tab.tabId);
} }
} }