MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 22 Wiki Activity

[develop | DONE | ADDED]: package.json: Added on dependencies "flag-icons": "^7.2.1" (library to show flag icon according to country code) | funders.component.less: Import "flag-icons/css/flag-icons.min.css" | funders.component.ts: Added for funders fields "websiteUrl", "country", "registered" & added sorting option by country (asc) | funders.component.html: Display new fundes info ("websiteUrl", "country", "registered").

This commit is contained in:
Konstantina Galouni 2024-06-20 16:23:51 +03:00
parent 1494f44362
commit faad25e780
4 changed files with 59 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
explore/package.json
View File

@ -39,6 +39,7 @@
"clipboard": "^1.5.16",
"core-js": "^2.5.4",
"express": "^4.15.2",
"flag-icons": "^7.2.1",
"jquery": "^3.4.1",
"ng-recaptcha": "^12.0.2",
"prom-client": "^11.3.0",

28
explore/src/app/funders/funders.component.html
View File

@ -126,17 +126,18 @@
<!-- funder's card for GRID view -->
<ng-container *ngIf="gridView || isMobile; else elseBlock">
<div class="uk-card uk-card-default uk-card-hover funder-grid">
<!-- <div class="uk-position-top-left uk-padding-small">
<span class="uk-text-xsmall">flag</span>
</div> -->
<!-- <div class="uk-position-top-right uk-padding-small">
<div class="uk-position-top-left uk-padding-small">
<!-- <span class="uk-text-xsmall">flag</span>-->
<span class="fi" [ngClass]="'fi-'+funder.country | lowercase"></span>
</div>
<div *ngIf="funder.registered" class="uk-position-top-right uk-padding-small">
<div class="uk-flex uk-flex-middle uk-text-xsmall uk-text-meta">
<div class="uk-icon-bg uk-icon-bg-small">
<icon name="done" [flex]="true"></icon>
</div>
<span class="uk-margin-xsmall-left">Registered</span>
</div>
</div> -->
</div>
<div class="uk-card-media-top uk-margin-medium-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" loading="lazy">
<ng-template #elseBlock>
@ -156,11 +157,11 @@
<span>{{funder.name}}</span>
</ng-container>
</div>
<!-- <div class="uk-width-auto uk-margin-left">
<a href="" class="uk-flex-inline uk-flex-middle uk-text-uppercase uk-button uk-button-text custom-external">
<div *ngIf="funder.websiteUrl" class="uk-width-auto uk-margin-left">
<a [href]="funder.websiteUrl" target="_blank" class="uk-flex-inline uk-flex-middle uk-text-uppercase uk-button uk-button-text custom-external">
<icon name="payment" [flex]="true"></icon>
</a>
</div> -->
</div>
</div>
</div>
<div class="data uk-background-muted uk-flex uk-flex-middle uk-padding-small uk-padding-remove-left uk-margin-top">
@ -237,6 +238,7 @@
<div class="uk-flex uk-flex-column uk-flex-center">
<div class="uk-flex uk-flex-middle">
<!-- <span class="uk-text-xsmall uk-margin-small-right">flag</span> -->
<span class="fi uk-text-xsmall uk-margin-small-right" [ngClass]="'fi-'+funder.country | lowercase"></span>
<div class="uk-h6 uk-margin-remove uk-text-truncate">
<ng-container *ngIf="funder.name">
<span>{{funder.name}}</span>
@ -310,19 +312,19 @@
</div>
</div>
</div>
<!-- <div class="uk-width-auto uk-flex uk-flex-column uk-flex-center uk-margin-right">
<div class="uk-flex uk-flex-middle uk-text-xsmall uk-text-meta uk-margin-bottom">
<div *ngIf="funder.registered || funder.websiteUrl" class="uk-width-auto uk-flex uk-flex-column uk-flex-center uk-margin-right">
<div *ngIf="funder.registered" class="uk-flex uk-flex-middle uk-text-xsmall uk-text-meta uk-margin-bottom">
<div class="uk-icon-bg uk-icon-bg-small">
<icon name="done" [flex]="true"></icon>
</div>
<span class="uk-margin-xsmall-left">Registered</span>
</div>
<div>
<a href="" class="uk-flex-inline uk-flex-middle uk-text-uppercase uk-button uk-button-text custom-external">
<div *ngIf="funder.websiteUrl">
<a [href]="funder.websiteUrl" target="_blank" class="uk-flex-inline uk-flex-middle uk-text-uppercase uk-button uk-button-text custom-external">
<icon name="payment" [flex]="true"></icon>
</a>
</div>
</div> -->
</div>
</div>
</div>
</ng-template>

2
explore/src/app/funders/funders.component.less
View File

@ -1,5 +1,5 @@
@import (reference) "~src/assets/openaire-theme/less/color.less";
@import "flag-icons/css/flag-icons.min.css";
.custom-coins-dot:after {
content: "";

63
explore/src/app/funders/funders.component.ts
View File

@ -59,22 +59,25 @@ export class FundersComponent implements OnInit {
"projects": number,
"monitorDashboard": string,
"monitorDashboardStatus": string,
"logoUrl": string
"logoUrl": string,
"websiteUrl": string,
"country": string,
"registered": boolean
}>();
staticLogos: Set<string> = new Set<string>([
"arc_________::ARC||Australian Research Council (ARC)||ARC",
"asap________::ASAP||Aligning Science Across Parkinson's||ASAP",
"cihr________::CIHR||Canadian Institutes of Health Research||CIHR",
"euenvagency_::EEA||European Environment Agency||EEA",
"inca________::INCA||Institut National du Cancer||INCa",
"nhmrc_______::NHMRC||National Health and Medical Research Council (NHMRC)||NHMRC",
"nih_________::NIH||National Institutes of Health||NIH",
"nserc_______::NSERC||Natural Sciences and Engineering Research Council of Canada||NSERC",
"nsf_________::NSF||National Science Foundation||NSF",
"sshrc_______::SSHRC||Social Sciences and Humanities Research Council||SSHRC",
"taraexp_____::tara||Tara Expeditions Foundation||TARA",
"ukri________::UKRI||UK Research and Innovation||UKRI",
"wt__________::WT||Wellcome Trust||WT"
staticLogos: Map<string, string> = new Map<string, string>([
["arc_________::ARC", "ARC"],
["asap________::ASAP", "ASAP"],
["cihr________::CIHR", "CIHR"],
["euenvagency_::EEA", "EEA"],
["inca________::INCA", "INCa"],
["nhmrc_______::NHMRC", "NHMRC"],
["nih_________::NIH", "NIH"],
["nserc_______::NSERC", "NSERC"],
["nsf_________::NSF", "NSF"],
["sshrc_______::SSHRC", "SSHRC"],
["taraexp_____::tara", "TARA"],
["ukri________::UKRI", "UKRI"],
["wt__________::WT", "WT"]
]);
constructor(private router: Router,
@ -111,7 +114,8 @@ export class FundersComponent implements OnInit {
this.sortOptions = [
{value: 'alphAsc', label: 'Alphabetically Asc. (A-Z)'},
{value: 'alphDsc', label: 'Alphabetically Dsc. (Z-A)'},
{value: 'oaDsc', label: '"Open Access %" Dsc.'}
{value: 'oaDsc', label: '"Open Access %" Dsc.'},
{value: 'countryAsc', label: 'Country Asc. (A-Z)'}
];
this.getFunders();
this.keywordControl = this.fb.control('');
@ -160,7 +164,10 @@ export class FundersComponent implements OnInit {
"projects": +queriedFunder.projects,
"monitorDashboard": '',
"monitorDashboardStatus": '',
"logoUrl": ''
"logoUrl": '',
"websiteUrl": '',
"country": queriedFunder.country,
"registered": queriedFunder.registered
};
if((!funder.researchProducts || funder.researchProducts == 0) && (!funder.projects || funder.projects == 0)) {
@ -172,7 +179,10 @@ export class FundersComponent implements OnInit {
funder.alias = stakeholder.alias;
funder.monitorDashboard = stakeholder.alias;
funder.monitorDashboardStatus = stakeholder.visibility;
funder.logoUrl = (stakeholder.isUpload ? properties.utilsService + "/download/" : "")+ (stakeholder.logoUrl);
if(stakeholder.logoUrl) {
funder.logoUrl = (stakeholder.isUpload ? properties.utilsService + "/download/" : "") + (stakeholder.logoUrl);
}
funder.websiteUrl = stakeholder.websiteUrl;
}
if(funder.openAccessResearchProducts && funder.researchProducts) {
@ -180,9 +190,7 @@ export class FundersComponent implements OnInit {
}
if(!funder.logoUrl && this.staticLogos.has(funder.id)) {
let split = funder.id.split("||");
let shortname = (split && split.length==3) ? funder.id.split("||")[2] : funder.id;
funder.logoUrl = "assets/explore-assets/funders/logos/"+shortname+".png";
funder.logoUrl = "assets/explore-assets/funders/logos/"+this.staticLogos.get(funder.id)+".png";
}
this.fundersMap.set(queriedFunder.id, funder);
@ -335,6 +343,19 @@ export class FundersComponent implements OnInit {
case 'oaDsc':
this.funders = this.funders.sort((a, b) => b['openAccessPercentage'] - a['openAccessPercentage']);
break;
case 'countryAsc':
this.funders = this.funders.sort((a, b) => {
if(a['country'] && b['country']) {
return a['country'].localeCompare(b['country'])
} else if(!a['country'] && !b['country']) {
return 0;
} else if(!a['country']) {
return 1;
} else {
return -1;
}
});
break;
}
this.filtering();
}