From 4f9ba17092aedb8920bc06b50d48c20db0728844 Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Mon, 9 Oct 2023 10:30:34 +0300 Subject: [PATCH] funders page: change inputs and actions, add grid/list view for funders --- .../src/app/funders/funders.component.html | 393 +++++++++++------- .../src/app/funders/funders.component.less | 24 +- explore/src/app/funders/funders.component.ts | 133 +++--- explore/src/app/funders/funders.module.ts | 3 +- explore/src/app/openaireLibrary | 2 +- 5 files changed, 353 insertions(+), 202 deletions(-) diff --git a/explore/src/app/funders/funders.component.html b/explore/src/app/funders/funders.component.html index 53ffe05d..e283b877 100644 --- a/explore/src/app/funders/funders.component.html +++ b/explore/src/app/funders/funders.component.html @@ -1,41 +1,73 @@
-
-
- +
+
+
+ +
-
-
-
-
- - - Funders - -
-

- Be an integral part of the open R&I ecosystem -

-
- 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. -
-
- - Join Us - +
+
+
+ + + Funders + +
+

+ Be an integral part of the open R&I ecosystem +

+
+ 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. + +
+
+ + Join Us + +
+
+
+
+ + {{formatNumber(projectsNumber)}}+ + + + grants + +
+
+ + {{formatNumber(fundersNumber)}} + + + funders + +
+
+ + {{formatNumber(researchProductsNumber)}}+ + + + funded research outputs + +
+
+
-
-
- +
+ +
+
@@ -43,133 +75,216 @@
-
- -
-
- -
-
-
-
-
- -
-
-
-
-
-
-
- Sort Alphabetically +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
-
+
-
+ No funders available +
+
-
-
- -
-
-
- - - -
{{(funder.openAccessResearchProducts / funder.researchProducts) * 100 | number : '1.0-0'}}%
+
+ + +
+ +
+
+
+ + + +
{{funder.openAccessPercentage}}%
+
+ Open Access
- Open Access
-
- -
- - - OpenAIRE placeholder logo - -
- -
- - {{funder.alias}} - -
- -
- - {{funder.name}} - -
-
- - -
+ + + +
+
+
+
+ + + OpenAIRE placeholder logo + +
+
+
+ + {{funder.name}} + + + + ({{funder.alias}}) + + +
+
+
+ + + OpenAIRE logo + Monitor Dashboard + + + + OpenAIRE logo + Monitor Dashboard + + +
+ + +
+
+
+
+
+
+ + + +
{{funder.openAccessPercentage}}%
+
+ Open Access +
+
+
+
+
- + [totalResults]="displayedFunders.length">
diff --git a/explore/src/app/funders/funders.component.less b/explore/src/app/funders/funders.component.less index 32d0b5d5..fd7e0b46 100644 --- a/explore/src/app/funders/funders.component.less +++ b/explore/src/app/funders/funders.component.less @@ -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%); } } \ No newline at end of file diff --git a/explore/src/app/funders/funders.component.ts b/explore/src/app/funders/funders.component.ts index 781000e9..d68147ce 100644 --- a/explore/src/app/funders/funders.component.ts +++ b/explore/src/app/funders/funders.component.ts @@ -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) { diff --git a/explore/src/app/funders/funders.module.ts b/explore/src/app/funders/funders.module.ts index dbaa3bbf..c89e2d64 100644 --- a/explore/src/app/funders/funders.module.ts +++ b/explore/src/app/funders/funders.module.ts @@ -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 diff --git a/explore/src/app/openaireLibrary b/explore/src/app/openaireLibrary index 44544157..5e4aaab0 160000 --- a/explore/src/app/openaireLibrary +++ b/explore/src/app/openaireLibrary @@ -1 +1 @@ -Subproject commit 445441572d30bb2c6cd889abfb62bc225e87de98 +Subproject commit 5e4aaab04f89446f956d524469ef2a856f556de5