funders page: change inputs and actions, add grid/list view for funders
This commit is contained in:
parent
7835c273b4
commit
4f9ba17092
|
|
@ -1,41 +1,73 @@
|
|||
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="pageDescription"></schema2jsonld>
|
||||
<div class="funders">
|
||||
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
|
||||
<div class="uk-padding-small uk-padding-remove-horizontal">
|
||||
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
||||
<div class="uk-background-muted">
|
||||
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
|
||||
<div class="uk-padding-small uk-padding-remove-horizontal">
|
||||
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
|
||||
<div class="uk-grid uk-grid-large uk-grid-stack uk-padding-small" uk-grid>
|
||||
<div class="uk-width-1-2@m uk-width-1-1@s uk-flex uk-flex-column uk-flex-center">
|
||||
<span class="uk-align-left uk-margin-remove-bottom uk-flex uk-flex-middle">
|
||||
<span class="custom-coins-dot"></span>
|
||||
<span uk-scrollspy-class class="uk-text-large funders-title">Funders</span>
|
||||
</span>
|
||||
<div style="max-width: 600px;">
|
||||
<h1 uk-scrollspy-class class="uk-h1 uk-margin-remove-top">
|
||||
<span>Be an integral part of the open R&I ecosystem<span class="custom-handshake-dot"></span></span>
|
||||
</h1>
|
||||
<div *ngIf="showContentWithNumbers" uk-scrollspy-class>
|
||||
Welcome to the Funders' page on OpenAIRE Explore. This dedicated hub spotlights our ever-growing extensive network of funding partners:
|
||||
{{formatNumber(projectsNumber)}} grants from
|
||||
{{formatNumber(fundersNumber)}} funders currently linked to
|
||||
{{formatNumber(researchProductsNumber)}} funded research outputs.
|
||||
Discover key details about each funder, their commitment to open access, and the impactful research they enable.
|
||||
Our aim? To foster transparency, inspire collaboration.
|
||||
</div>
|
||||
<div class="uk-margin-medium-top" uk-scrollspy-class>
|
||||
<a class="uk-button uk-button-primary uk-text-uppercase" target="_blank" href="https://www.openaire.eu/funders-how-to-join-guide">
|
||||
Join Us
|
||||
</a>
|
||||
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
|
||||
<div class="uk-grid uk-grid-large uk-grid-stack uk-flex-middle uk-padding-small" uk-grid>
|
||||
<div class="uk-width-2-3@m uk-width-1-1 uk-flex uk-flex-column uk-flex-center">
|
||||
<span class="uk-align-left uk-margin-remove-bottom uk-flex uk-flex-middle">
|
||||
<span class="custom-coins-dot"></span>
|
||||
<span uk-scrollspy-class class="uk-text-large funders-title">Funders</span>
|
||||
</span>
|
||||
<div style="max-width: 600px;">
|
||||
<h1 uk-scrollspy-class class="uk-h1 uk-margin-remove-top">
|
||||
<span>Be an integral part of the open R&I ecosystem<span class="custom-handshake-dot"></span></span>
|
||||
</h1>
|
||||
<div uk-scrollspy-class>
|
||||
Welcome to the Funders’ page on OpenAIRE Explore. Discover key details about each funder, their commitment to open access, and the impactful research they enable. Our aim? To foster transparency, inspire collaboration.
|
||||
<!-- Welcome to the Funders' page on OpenAIRE Explore. This dedicated hub spotlights our ever-growing extensive network of funding partners:
|
||||
{{formatNumber(projectsNumber)}} grants from
|
||||
{{formatNumber(fundersNumber)}} funders currently linked to
|
||||
{{formatNumber(researchProductsNumber)}} funded research outputs.
|
||||
Discover key details about each funder, their commitment to open access, and the impactful research they enable.
|
||||
Our aim? To foster transparency, inspire collaboration. -->
|
||||
</div>
|
||||
<div class="uk-margin-medium-top" uk-scrollspy-class>
|
||||
<a class="uk-button uk-button-primary uk-text-uppercase" target="_blank" href="https://www.openaire.eu/funders-how-to-join-guide">
|
||||
Join Us
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="showContentWithNumbers" class="uk-margin-medium-top" uk-scrollspy-class>
|
||||
<div class="uk-grid uk-grid-divider" uk-grid>
|
||||
<div class="uk-flex uk-flex-column uk-flex-center">
|
||||
<span class="uk-h4 uk-text-primary uk-margin-xsmall-bottom">
|
||||
{{formatNumber(projectsNumber)}}+
|
||||
</span>
|
||||
<span class="uk-text-uppercase">
|
||||
grants
|
||||
</span>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-column uk-flex-center">
|
||||
<span class="uk-h4 uk-text-primary uk-margin-xsmall-bottom">
|
||||
{{formatNumber(fundersNumber)}}
|
||||
</span>
|
||||
<span class="uk-text-uppercase">
|
||||
funders
|
||||
</span>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-column uk-flex-center">
|
||||
<span class="uk-h4 uk-text-primary uk-margin-xsmall-bottom">
|
||||
{{formatNumber(researchProductsNumber)}}+
|
||||
</span>
|
||||
<span class="uk-text-uppercase">
|
||||
funded research outputs
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-2@m uk-width-1-1@s uk-text-center" uk-scrollspy-class>
|
||||
<img src="assets/explore-assets/funders/funders.png" loading="lazy">
|
||||
<div class="uk-width-1-3@m uk-width-1-1 uk-text-center" uk-scrollspy-class>
|
||||
<img src="assets/explore-assets/funders/funders.png" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="showLoading">
|
||||
<div class="uk-container uk-container-large uk-section">
|
||||
<loading></loading>
|
||||
|
|
@ -43,133 +75,216 @@
|
|||
</ng-container>
|
||||
<ng-container *ngIf="!showLoading && funders?.length">
|
||||
<div class="uk-container uk-container-large" uk-height-match="target: .percentage;">
|
||||
<div id="target" class="uk-section" uk-height-match="target: .alias;">
|
||||
<!-- sorting desktop view -->
|
||||
<div class="uk-visible@m">
|
||||
<div *ngIf="groupedFunders" class="uk-padding-small uk-padding-remove-vertical uk-margin-medium-bottom uk-flex uk-flex-middle uk-flex-between">
|
||||
<ul class="uk-nav uk-nav-default uk-flex uk-flex-wrap">
|
||||
<li *ngFor="let item of groupedFunders; let i = index;" class="uk-margin-right" [class.uk-margin-left]="i != 0"
|
||||
[class]="index == i ? 'uk-active':''" (click)="changeDisplayedFunders(i)">
|
||||
<a class="uk-padding-remove">{{item.group}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="uk-width-medium">
|
||||
<div input
|
||||
type="select" placeholder="Show" inputClass="flat x-small"
|
||||
[options]="options" [(value)]="sortBy" [disabled]="isDisabled"
|
||||
(valueChange)="sortByChanged()"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- sorting mobile view -->
|
||||
<div class="uk-hidden@m">
|
||||
<div *ngIf="groupedFunders" class="uk-padding-small uk-padding-remove-vertical uk-margin-bottom uk-flex uk-flex-column uk-flex-middle">
|
||||
<div class="uk-width-medium">
|
||||
<div input
|
||||
type="select" placeholder="Show" inputClass="flat x-small"
|
||||
[options]="options" [(value)]="sortBy" [disabled]="isDisabled"
|
||||
(valueChange)="sortByChanged()"></div>
|
||||
</div>
|
||||
<div class="uk-padding uk-padding-remove-horizontal" >
|
||||
<div class="uk-margin-left uk-margin-small-bottom uk-text-meta uk-text-small">
|
||||
Sort Alphabetically
|
||||
<div id="target" class="uk-section uk-padding-remove-top uk-margin-top" uk-height-match="target: .alias;">
|
||||
<div>
|
||||
<div *ngIf="funders" class="uk-padding-small uk-padding-remove-vertical uk-margin-medium-bottom uk-flex uk-flex-wrap uk-flex-middle uk-flex-between">
|
||||
<div class="uk-flex uk-flex-wrap uk-flex-middle uk-flex-between uk-width-auto@m uk-width-1-1 uk-margin-top">
|
||||
<div class="uk-width-small uk-margin-medium-right">
|
||||
<div input
|
||||
type="select" placeholder="Show" inputClass="border-bottom"
|
||||
[options]="showOptions" [(value)]="show" (valueChange)="filtering()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-small uk-margin-medium-right">
|
||||
<div input
|
||||
type="select" placeholder="Sort by" inputClass="border-bottom"
|
||||
[options]="sortOptions" [(value)]="sortBy" (valueChange)="sortByChanged()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-xsmall">
|
||||
<div input
|
||||
type="select" placeholder="Results per page" inputClass="border-bottom"
|
||||
[options]="pageOptions" [(value)]="pageSize" (valueChange)="sizeChanged($event)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-middle uk-width-auto@m uk-width-1-1 uk-margin-top">
|
||||
<div search-input [searchControl]="keywordControl" searchInputClass="border-bottom" iconPosition="right"
|
||||
placeholder="Search funder" [disabled]="showLoading" class="uk-width-auto@m uk-width-medium@s uk-width-1-1">
|
||||
</div>
|
||||
<div class="uk-visible@m uk-flex uk-flex-middle uk-margin-medium-left">
|
||||
<a (click)="gridView = true"
|
||||
class="uk-link-reset custom-view-button" [ngClass]="gridView ? 'active' : ''">
|
||||
<icon [name]="'apps'" [ratio]="1.5" [type]="'round'" [flex]="true"></icon>
|
||||
</a>
|
||||
<a (click)="gridView = false"
|
||||
class="uk-link-reset custom-view-button uk-margin-xsmall-left" [ngClass]="gridView ? '' : 'active'">
|
||||
<icon [name]="'view_list'" [ratio]="1.5" [type]="'round'" [flex]="true"></icon>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="uk-nav uk-nav-default uk-grid uk-grid-small uk-child-width-1-6" uk-grid>
|
||||
<li *ngFor="let item of groupedFunders; let i = index;"
|
||||
[class]="index == i ? 'uk-active':''" (click)="changeDisplayedFunders(i)">
|
||||
<a class="uk-padding-remove">{{item.group}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-large-bottom" uk-height-match="target: .name;">
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-3@l uk-padding-small"
|
||||
<div *ngIf="!displayedFunders || displayedFunders?.length == 0" class="uk-text-center uk-margin-large-top">
|
||||
No funders available
|
||||
</div>
|
||||
<div class="uk-grid uk-padding-small" [ngClass]="gridView ? 'uk-child-width-1-2@m uk-child-width-1-3@l' : 'uk-child-width-1-1'"
|
||||
uk-grid uk-height-match="target: .info;">
|
||||
<div *ngFor="let funder of groupedFunders[index].data.slice((currentPage-1)*pageSize, currentPage*pageSize)">
|
||||
<div class="uk-card uk-card-default uk-card-hover uk-card-body funder">
|
||||
<!-- OA % -->
|
||||
<div class="percentage uk-flex uk-flex-right uk-margin-bottom">
|
||||
<div *ngIf="funder.openAccessResearchProducts && funder.researchProducts" class="uk-text-center">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<span class="uk-margin-xsmall-right open-access">
|
||||
<icon name="open_access" [flex]="true" [ratio]="1"></icon>
|
||||
</span>
|
||||
<h6 class="uk-margin-remove">{{(funder.openAccessResearchProducts / funder.researchProducts) * 100 | number : '1.0-0'}}%</h6>
|
||||
<div *ngFor="let funder of displayedFunders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
|
||||
<!-- funder's card for GRID view -->
|
||||
<ng-container *ngIf="gridView || isMobile; else elseBlock">
|
||||
<div class="uk-card uk-card-default uk-card-hover uk-card-body funder-grid">
|
||||
<!-- OA % -->
|
||||
<div class="percentage uk-flex uk-flex-right uk-margin-bottom">
|
||||
<div *ngIf="funder.openAccessResearchProducts && funder.researchProducts" class="uk-text-center">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<span class="uk-margin-xsmall-right open-access">
|
||||
<icon name="open_access" [flex]="true" [ratio]="1"></icon>
|
||||
</span>
|
||||
<h6 class="uk-margin-remove">{{funder.openAccessPercentage}}%</h6>
|
||||
</div>
|
||||
<span class="uk-h6 uk-text-small">Open Access</span>
|
||||
</div>
|
||||
<span>Open Access</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- funder logo -->
|
||||
<div class="uk-card-media-top uk-padding-large uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
|
||||
<img *ngIf="funder.logoUrl; else elseBlock" [src]="funder | logoUrl" [alt]="funder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply">
|
||||
<ng-template #elseBlock>
|
||||
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply">
|
||||
</ng-template>
|
||||
</div>
|
||||
<!-- funder alias -->
|
||||
<div class="alias uk-text-uppercase uk-text-small uk-margin-top type">
|
||||
<ng-container *ngIf="funder.alias">
|
||||
{{funder.alias}}
|
||||
</ng-container>
|
||||
</div>
|
||||
<!-- funder name -->
|
||||
<div class="name uk-h6 uk-margin-remove multi-line-ellipsis lines-2">
|
||||
<ng-container *ngIf="funder.name" >
|
||||
{{funder.name}}
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="info uk-margin-medium-top">
|
||||
<!-- Monitor dashboard -->
|
||||
<div>
|
||||
<!-- PUBLIC status -->
|
||||
<a *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus != 'PRIVATE' && funder.monitorDashboardStatus != 'RESTRICTED'"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu/dashboard/'+funder.alias">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<!-- funder logo -->
|
||||
<div class="uk-card-media-top uk-padding-large uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
|
||||
<img *ngIf="funder.logoUrl; else elseBlock" [src]="funder | logoUrl" [alt]="funder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply">
|
||||
<ng-template #elseBlock>
|
||||
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply">
|
||||
</ng-template>
|
||||
</div>
|
||||
<!-- funder alias -->
|
||||
<div class="alias uk-text-uppercase uk-text-small uk-margin-top type">
|
||||
<ng-container *ngIf="funder.alias">
|
||||
{{funder.alias}}
|
||||
</ng-container>
|
||||
</div>
|
||||
<!-- funder name -->
|
||||
<div class="name uk-h6 uk-margin-remove multi-line-ellipsis lines-2">
|
||||
<ng-container *ngIf="funder.name" >
|
||||
{{funder.name}}
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="info uk-margin-medium-top">
|
||||
<!-- Monitor dashboard -->
|
||||
<div>
|
||||
<!-- PUBLIC status -->
|
||||
<a *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus != 'PRIVATE' && funder.monitorDashboardStatus != 'RESTRICTED'"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu/dashboard/'+funder.alias">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
|
||||
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;">
|
||||
<span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
|
||||
</span>
|
||||
</a>
|
||||
<!-- RESTRICTED status -->
|
||||
<span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'"
|
||||
class="uk-flex uk-flex-middle">
|
||||
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
|
||||
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;">
|
||||
<span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
|
||||
<span class="monitor-dashboard-link uk-text-uppercase uk-text-bold uk-text-small">Monitor Dashboard</span>
|
||||
<icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
|
||||
</span>
|
||||
</a>
|
||||
<!-- RESTRICTED status -->
|
||||
<span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'"
|
||||
class="uk-flex uk-flex-middle">
|
||||
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
|
||||
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;">
|
||||
<span class="monitor-dashboard-link uk-text-uppercase uk-text-bold uk-text-small">Monitor Dashboard</span>
|
||||
<icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Projects -->
|
||||
<div>
|
||||
<a *ngIf="funder.projects"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
[routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>Projects ({{funder.projects | number}})</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Research products -->
|
||||
<div>
|
||||
<a *ngIf="funder.researchProducts"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
[routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>Research Products ({{funder.researchProducts | number}})</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Projects -->
|
||||
<div>
|
||||
<a *ngIf="funder.projects"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
[routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>Projects ({{funder.projects | number}})</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Research products -->
|
||||
<div>
|
||||
<a *ngIf="funder.researchProducts"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
[routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>Research Products ({{funder.researchProducts | number}})</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- funder's card for LIST view -->
|
||||
<ng-template #elseBlock>
|
||||
<div class="uk-card uk-card-default uk-card-hover uk-padding-small funder-list">
|
||||
<div class="uk-grid uk-grid-divider uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand uk-flex uk-flex-middle">
|
||||
<div class="uk-width-1-6 uk-flex uk-flex-middle uk-flex-center">
|
||||
<img *ngIf="funder.logoUrl; else elseBlock" [src]="funder | logoUrl" [alt]="funder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply">
|
||||
<ng-template #elseBlock>
|
||||
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply">
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="uk-width-expand uk-margin-medium-left">
|
||||
<div class="name uk-h6 uk-text-truncate">
|
||||
<ng-container *ngIf="funder.name">
|
||||
{{funder.name}}
|
||||
</ng-container>
|
||||
<ng-container *ngIf="funder.alias" >
|
||||
<span class="uk-text-uppercase">
|
||||
({{funder.alias}})
|
||||
</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-grid uk-grid-divider uk-flex-nowrap" uk-grid>
|
||||
<div *ngIf="funder.monitorDashboard">
|
||||
<a *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus != 'PRIVATE' && funder.monitorDashboardStatus != 'RESTRICTED'"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu/dashboard/'+funder.alias">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
|
||||
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;">
|
||||
<span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
|
||||
</span>
|
||||
</a>
|
||||
<span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'"
|
||||
class="uk-flex uk-flex-middle">
|
||||
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
|
||||
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;">
|
||||
<span class="monitor-dashboard-link uk-text-uppercase uk-text-bold uk-text-small">Monitor Dashboard</span>
|
||||
<icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<a *ngIf="funder.projects"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
[routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>Projects ({{funder.projects | number}})</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a *ngIf="funder.researchProducts"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
|
||||
[routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<span>Research Products ({{funder.researchProducts | number}})</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-auto uk-flex uk-flex-middle uk-flex-center">
|
||||
<div *ngIf="funder.openAccessResearchProducts && funder.researchProducts" class="uk-text-center">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<span class="uk-margin-xsmall-right open-access">
|
||||
<icon name="open_access" [flex]="true" [ratio]="1"></icon>
|
||||
</span>
|
||||
<h6 class="uk-margin-remove">{{funder.openAccessPercentage}}%</h6>
|
||||
</div>
|
||||
<span class="uk-h6 uk-text-small">Open Access</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<paging-no-load *ngIf="groupedFunders[index].data.length > pageSize"
|
||||
<paging-no-load *ngIf="displayedFunders.length > pageSize"
|
||||
(pageChange)="updateCurrentPage($event)"
|
||||
[currentPage]="currentPage" [size]="pageSize"
|
||||
[totalResults]="groupedFunders[index].data.length">
|
||||
[totalResults]="displayedFunders.length">
|
||||
</paging-no-load>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,16 +21,28 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.setType(@color) {
|
||||
border-bottom: 4px solid fade(@color, 30%);
|
||||
.custom-view-button {
|
||||
padding: 4px;
|
||||
background: @light-color;
|
||||
border: 1px solid @disable-color;
|
||||
border-radius: 4px;
|
||||
icon {
|
||||
color: @disable-color;
|
||||
}
|
||||
|
||||
& .type {
|
||||
color: @color;
|
||||
&.active {
|
||||
background: transparent linear-gradient(315deg, @primary-light-color 0%, @primary-dark-color 100%) 0% 0% no-repeat padding-box;
|
||||
icon {
|
||||
color: @light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uk-card {
|
||||
&.funder {
|
||||
.setType(@funder-color);
|
||||
&.funder-grid {
|
||||
border-bottom: 4px solid fade(@funder-color, 30%);
|
||||
}
|
||||
&.funder-list {
|
||||
border-left: 4px solid fade(@funder-color, 30%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
|
||||
import {Router} from '@angular/router';
|
||||
import {Subscriber, Subscription, zip} from "rxjs";
|
||||
import {Meta, Title} from "@angular/platform-browser";
|
||||
|
|
@ -14,6 +14,9 @@ import {Option} from '../openaireLibrary/sharedComponents/input/input.component'
|
|||
import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
|
||||
import {HelperFunctions} from '../openaireLibrary/utils/HelperFunctions.class';
|
||||
import {NumberUtils} from '../openaireLibrary/utils/number-utils.class';
|
||||
import {LayoutService} from '../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service';
|
||||
import {FormBuilder, FormControl} from '@angular/forms';
|
||||
import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'funders',
|
||||
|
|
@ -29,13 +32,19 @@ export class FundersComponent implements OnInit {
|
|||
properties: EnvProperties = properties;
|
||||
breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'funders'}];
|
||||
showLoading: boolean = true;
|
||||
index: number = 0;
|
||||
isMobile: boolean = false;
|
||||
funders: any[] = [];
|
||||
groupedFunders: any[] = [];
|
||||
options: Option[];
|
||||
sortBy: string = 'all';
|
||||
displayedFunders: any[] = [];
|
||||
showOptions: Option[];
|
||||
sortOptions: Option[];
|
||||
pageOptions: number[] = [10, 20, 30, 40];
|
||||
show: string = 'all';
|
||||
sortBy: string = 'alphAsc';
|
||||
gridView: boolean = true;
|
||||
currentPage: number = 1;
|
||||
pageSize: number = 6;
|
||||
pageSize: number = 10;
|
||||
keywordControl: FormControl;
|
||||
keyword: string;
|
||||
fundersNumber: number = 0;
|
||||
researchProductsNumber: number = 0;
|
||||
projectsNumber: number = 0;
|
||||
|
|
@ -45,6 +54,7 @@ export class FundersComponent implements OnInit {
|
|||
"alias": string,
|
||||
"researchProducts": number,
|
||||
"openAccessResearchProducts": number,
|
||||
"openAccessPercentage": number,
|
||||
"projects": number,
|
||||
"monitorDashboard": string,
|
||||
"monitorDashboardStatus": string,
|
||||
|
|
@ -57,7 +67,10 @@ export class FundersComponent implements OnInit {
|
|||
private seoService: SEOService,
|
||||
private piwikService: PiwikService,
|
||||
private refineFieldResultsService: RefineFieldResultsService,
|
||||
private stakeholderService: StakeholderService) {
|
||||
private stakeholderService: StakeholderService,
|
||||
private layoutService: LayoutService,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private fb: FormBuilder,) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -69,11 +82,25 @@ export class FundersComponent implements OnInit {
|
|||
this.updateUrl(this.url);
|
||||
this.updateTitle(this.pageTitle);
|
||||
this.updateDescription(this.pageDescription);
|
||||
this.options = [
|
||||
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
|
||||
this.isMobile = isMobile;
|
||||
this.cdr.detectChanges();
|
||||
}));
|
||||
this.showOptions = [
|
||||
{value: 'all', label: 'All funders'},
|
||||
{value: 'dashboard', label: 'Funders with dashboard'}
|
||||
];
|
||||
this.sortOptions = [
|
||||
{value: 'alphAsc', label: 'Alphabetically Asc. (A-Z)'},
|
||||
{value: 'alphDsc', label: 'Alphabetically Dsc. (Z-A)'},
|
||||
{value: 'oaDsc', label: '"Open Access %" Dsc.'}
|
||||
];
|
||||
this.getFunders();
|
||||
this.keywordControl = this.fb.control('');
|
||||
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
|
||||
this.keyword = value;
|
||||
this.filtering();
|
||||
}));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
|
@ -117,7 +144,8 @@ export class FundersComponent implements OnInit {
|
|||
"name": queriedFunder.name,
|
||||
"alias": '',
|
||||
"researchProducts": +queriedFunder.number,
|
||||
"openAccessResearchProducts": 0,
|
||||
"openAccessResearchProducts": 0,
|
||||
"openAccessPercentage": 0,
|
||||
"projects": 0,
|
||||
"monitorDashboard": '',
|
||||
"monitorDashboardStatus": '',
|
||||
|
|
@ -145,6 +173,7 @@ export class FundersComponent implements OnInit {
|
|||
"alias": '',
|
||||
"researchProducts": 0,
|
||||
"openAccessResearchProducts": 0,
|
||||
"openAccessPercentage": 0,
|
||||
"projects": +queriedFunder.number,
|
||||
"monitorDashboard": '',
|
||||
"monitorDashboardStatus": '',
|
||||
|
|
@ -162,54 +191,26 @@ export class FundersComponent implements OnInit {
|
|||
this.fundersMap.get(id).monitorDashboard = queriedFunder.alias;
|
||||
this.fundersMap.get(id).monitorDashboardStatus = queriedFunder.visibility;
|
||||
this.fundersMap.get(id).logoUrl = (queriedFunder.isUpload ? properties.utilsService + "/download/" : "")+ (queriedFunder.logoUrl);
|
||||
// } else {
|
||||
// this.fundersMap.set(id, {
|
||||
// "id": queriedFunder.id,
|
||||
// "name": queriedFunder.name,
|
||||
// "alias": queriedFunder.alias,
|
||||
// "researchProducts": 0,
|
||||
// "openAccessResearchProducts": 0,
|
||||
// "projects": 0,
|
||||
// "monitorDashboard": queriedFunder.alias,
|
||||
// "monitorDashboardStatus": queriedFunder.visibility,
|
||||
// "logoUrl": (queriedFunder.isUpload ? properties.utilsService + "/download/" : "")+ (queriedFunder.logoUrl)
|
||||
// });
|
||||
}
|
||||
});
|
||||
this.fundersMap.forEach((value) => {
|
||||
if(value.openAccessResearchProducts > 0) {
|
||||
value.openAccessPercentage = Math.round((value.openAccessResearchProducts / value.researchProducts) * 100);
|
||||
}
|
||||
});
|
||||
// convert funders map into an array
|
||||
this.funders = Array.from(this.fundersMap.values());
|
||||
// group funders based on their initial letter
|
||||
this.groupFunders(this.funders);
|
||||
// calculate total numbers for intro content
|
||||
this.calculateNumbers();
|
||||
|
||||
// sort funders
|
||||
this.funders.sort((a, b) => a['name'].localeCompare(b['name']));
|
||||
// initialize displayedFunders
|
||||
this.displayedFunders = this.funders;
|
||||
this.showLoading = false;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
private groupFunders(funders) {
|
||||
if(funders.length === 0) {
|
||||
return [];
|
||||
}
|
||||
funders.sort((a, b) => a['name'].localeCompare(b['name']));
|
||||
this.index = 0;
|
||||
this.groupedFunders = Object.values(
|
||||
funders.reduce((acc, funder) => {
|
||||
let firstLetter = funder['name'][0].toLocaleUpperCase();
|
||||
if(!acc[firstLetter]) {
|
||||
acc[firstLetter] = {group: firstLetter, data: [funder]};
|
||||
} else {
|
||||
acc[firstLetter].data.push(funder);
|
||||
}
|
||||
return acc;
|
||||
},{})
|
||||
)
|
||||
if(funders.length > 1) {
|
||||
this.groupedFunders.unshift({group: 'All', data: funders});
|
||||
}
|
||||
}
|
||||
|
||||
private calculateSum(array, property) {
|
||||
let sum = 0;
|
||||
array.forEach(element => {
|
||||
|
|
@ -233,22 +234,44 @@ export class FundersComponent implements OnInit {
|
|||
return formatted.number + formatted.size;
|
||||
}
|
||||
|
||||
changeDisplayedFunders(i) {
|
||||
this.currentPage = 1;
|
||||
this.index = i;
|
||||
}
|
||||
|
||||
urlEncodeAndQuote(str: string): string {
|
||||
return StringUtils.quote(StringUtils.URIEncode(str));
|
||||
}
|
||||
|
||||
sortByChanged() {
|
||||
let displayedFunders = this.funders;
|
||||
if(this.sortBy == 'dashboard') {
|
||||
displayedFunders = this.funders.filter(funder => funder.monitorDashboard && funder.monitorDashboard?.length > 0 && funder.monitorDashboardStatus != 'PRIVATE');
|
||||
switch(this.sortBy) {
|
||||
case 'alphAsc':
|
||||
this.funders = this.funders.sort((a, b) => a['name'].localeCompare(b['name']));
|
||||
break;
|
||||
case 'alphDsc':
|
||||
this.funders = this.funders.sort((a, b) => b['name'].localeCompare(a['name']));
|
||||
break;
|
||||
case 'oaDsc':
|
||||
this.funders = this.funders.sort((a, b) => b['openAccessPercentage'] - a['openAccessPercentage']);
|
||||
break;
|
||||
}
|
||||
this.filtering();
|
||||
}
|
||||
|
||||
sizeChanged($event) {
|
||||
this.pageSize = $event;
|
||||
this.currentPage = 1;
|
||||
}
|
||||
|
||||
filtering() {
|
||||
let displayedFunders = this.funders;
|
||||
if(!this.keyword){
|
||||
this.keyword = '';
|
||||
}
|
||||
if(this.funders.length) {
|
||||
displayedFunders = displayedFunders.filter(item => (item['name'] && item['name'].toLowerCase().includes(this.keyword.toLowerCase())) || (item['alias'] && item['alias'].toLowerCase().includes(this.keyword.toLowerCase())));
|
||||
}
|
||||
if(this.show == 'dashboard') {
|
||||
displayedFunders = displayedFunders.filter(funder => funder.monitorDashboard && funder.monitorDashboard?.length > 0 && funder.monitorDashboardStatus != 'PRIVATE');
|
||||
}
|
||||
|
||||
this.displayedFunders = displayedFunders;
|
||||
this.currentPage = 1;
|
||||
this.groupFunders(displayedFunders);
|
||||
}
|
||||
|
||||
public updateCurrentPage($event) {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import {open_access} from '../openaireLibrary/utils/icons/icons';
|
|||
import {closed_access} from '../openaireLibrary/utils/icons/icons';
|
||||
import {InputModule} from '../openaireLibrary/sharedComponents/input/input.module';
|
||||
import {PagingModule} from '../openaireLibrary/utils/paging.module';
|
||||
import {SearchInputModule} from '../openaireLibrary/sharedComponents/search-input/search-input.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -26,7 +27,7 @@ import {PagingModule} from '../openaireLibrary/utils/paging.module';
|
|||
FundersRoutingModule, CommonModule, RouterModule, AlertModalModule,
|
||||
Schema2jsonldModule, SEOServiceModule, BreadcrumbsModule, LoadingModule,
|
||||
RefineFieldResultsServiceModule, LogoUrlPipeModule, IconsModule, InputModule,
|
||||
PagingModule
|
||||
PagingModule, SearchInputModule
|
||||
],
|
||||
declarations: [
|
||||
FundersComponent
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 445441572d30bb2c6cd889abfb62bc225e87de98
|
||||
Subproject commit 5e4aaab04f89446f956d524469ef2a856f556de5
|
||||
Loading…
Reference in New Issue