MaDgIK
/
irish-monitor
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

[master | WIP]: Rename irish-theme to extend-theme. Add uk-banner in dashboards. Adjust upload dois page

This commit is contained in:
Konstantinos Triantafyllou 2023-11-15 10:36:56 +02:00
parent e998bb61e2
commit 1636474977
32 changed files with 492 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/app-routing.module.ts
View File

@ -2,13 +2,8 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {Irish} from "./shared/irish";
import {ErrorPageComponent} from "./openaireLibrary/error/errorPage.component";
import {ClaimsModule} from "./claims/claims.module";
const routes: Routes = [
{
path: '',
loadChildren: () => import('./national/national.module').then(m => m.NationalModule)
},
{
path: 'rpo',
loadChildren: () => import('./rpo/rpo.module').then(m => m.RpoModule),
@ -32,6 +27,10 @@ const routes: Routes = [
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
data: {title: Irish.METADATA_PREFIX + ' Admin | '},
},
{
path: '',
loadChildren: () => import('./national/national.module').then(m => m.NationalModule)
},
{path: 'participate', loadChildren: () => import('./claims/claims.module').then(m => m.ClaimsModule)},
{path: 'orcid', loadChildren: () => import('./orcid/orcid.module').then(m => m.LibOrcidModule)},
{path: 'my-orcid-links', loadChildren: () => import('./orcid/my-orcid-links/myOrcidLinks.module').then(m => m.LibMyOrcidLinksModule)},

39
src/app/national/national.component.ts
View File

@ -1,7 +1,6 @@
import {Component, OnInit} from "@angular/core";
import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {BaseComponent} from "../openaireLibrary/sharedComponents/base/base.component";
import {ActivatedRoute, Router} from "@angular/router";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
@ -9,23 +8,45 @@ import {Meta, Title} from "@angular/platform-browser";
import {SearchCustomFilter} from "../openaireLibrary/searchPages/searchUtils/searchUtils.class";
import {LinksResolver} from "../search/links-resolver";
import {CustomFilterService} from "../shared/customFilter.service";
import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
@Component({
selector: 'national',
template: `
<ng-container *ngIf="!loading">
<div class="uk-section uk-section-primary">
<a class="uk-button uk-button-default" routerLink="/search/find/research-outcomes">Browse results</a>
<loading *ngIf="loading" class="uk-position-center"></loading>
<ng-container *ngIf="!loading && stakeholder">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<h1 class="uk-h2">{{entities.country}} {{entities.stakeholder}}</h1>
</div>
<div class="uk-section uk-container">
</div>
<div class="uk-banner-footer">
<div class="uk-container uk-container-large">
<ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
<li [class.uk-active]="!isSearch">
<a [routerLink]="'/'" (click)="isSearch = false">{{entities.stakeholder}}</a>
</li>
<li [class.uk-active]="isSearch" (click)="isSearch = true">
<a [routerLink]="'/search/find/research-outcomes'">Browse Research Outputs</a>
</li>
</ul>
</div>
</div>
</div>
<div class="uk-margin-large-top">
<router-outlet></router-outlet>
</div>
</ng-container>
<h3 *ngIf="!loading && !stakeholder" class="uk-position-center">
No {{entities.country}} {{entities.stakeholder}} yet.
</h3>
`
})
export class NationalComponent extends BaseComponent implements OnInit {
export class NationalComponent extends StakeholderBaseComponent implements OnInit {
stakeholder: Stakeholder;
loading: boolean = true;
isSearch: boolean = false;
constructor(private stakeholderService: StakeholderService,
protected _router: Router,
@ -36,7 +57,9 @@ export class NationalComponent extends BaseComponent implements OnInit {
protected _meta: Meta,
private _customFilterService:CustomFilterService) {
super();
super.initRouterParams(this._route);
super.initRouterParams(this._route, event => {
this.isSearch = event.url.includes('search');
});
}
ngOnInit() {
@ -47,7 +70,7 @@ export class NationalComponent extends BaseComponent implements OnInit {
LinksResolver.setProperties("");
this.loading = false;
} else {
this.loading = false;
}
});
}

7
src/app/national/national.module.ts
View File

@ -2,17 +2,18 @@ import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {Route, RouterModule} from "@angular/router";
import {NationalComponent} from "./national.component";
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
const routes: Route[] = [
{
path: '', component: NationalComponent, children: [
{path: 'search', loadChildren: () => import('../search/search.module').then(m => m.SearchModule)},
{path: '', loadChildren: () => import('../shared/monitor/monitor.module').then(m => m.MonitorModule)},
{path: 'search', loadChildren: () => import('../search/search.module').then(m => m.SearchModule)}
], data: {stakeholder: 'tubitak'}
], data: {stakeholder: 'irish'}
}
];
@NgModule({
imports: [CommonModule, RouterModule.forChild(routes)],
imports: [CommonModule, RouterModule.forChild(routes), LoadingModule],
declarations: [NationalComponent],
exports: [NationalComponent],
})

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit a8c91dc04cb65db6d09b21d6159319dc3294f2a8
Subproject commit b8162fa1e37ee70628a6ec31d6b145586bd94083

2
src/app/orcid/my-orcid-links/myOrcidLinks.component.ts
View File

@ -3,7 +3,9 @@ import {Component} from '@angular/core';
@Component({
selector: 'openaire-my-orcid-links',
template: `
<div class="uk-section">
<my-orcid-links></my-orcid-links>
</div>
`
})

2
src/app/orcid/recommend-orcid-links/searchRecommendedResultsForOrcid.component.ts
View File

@ -3,7 +3,9 @@ import {Component} from '@angular/core';
@Component({
selector: 'openaire-search-recommended-results-for-orcid',
template: `
<div class="uk-section">
<search-recommended-results-for-orcid></search-recommended-results-for-orcid>
</div>
`
})

57
src/app/rfo/rfo.component.ts
View File

@ -1,7 +1,6 @@
import {Component, OnDestroy, OnInit} from "@angular/core";
import {Component, OnInit} from "@angular/core";
import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {BaseComponent} from "../openaireLibrary/sharedComponents/base/base.component";
import {ActivatedRoute, Router} from "@angular/router";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
@ -9,24 +8,46 @@ import {Meta, Title} from "@angular/platform-browser";
import {SearchCustomFilter} from "../openaireLibrary/searchPages/searchUtils/searchUtils.class";
import {LinksResolver} from "../search/links-resolver";
import {CustomFilterService} from "../shared/customFilter.service";
import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
@Component({
selector: 'rpo',
selector: 'rfo',
template: `
<div style="background: mediumseagreen; height: 200px">
<div *ngIf="stakeholder">
<div>{{stakeholder.index_name}}</div>
<a class="uk-button uk-button-default" [routerLink]="'/rfo/' + stakeholder.alias + '/search/find/research-outcomes'">Browse results</a></div>
<loading *ngIf="loading" class="uk-position-center"></loading>
<ng-container *ngIf="!loading">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<h1 *ngIf="stakeholder" class="uk-h2">{{stakeholder.name}}</h1>
<h1 *ngIf="!stakeholder" class="uk-h2">{{entities.funders}}</h1>
</div>
<div *ngIf="!this.alias || this.stakeholder" class="uk-section uk-container">
</div>
<div *ngIf="stakeholder" class="uk-banner-footer">
<div class="uk-container uk-container-large">
<ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
<li [class.uk-active]="!isSearch">
<a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route"
(click)="isSearch = false">{{entities.stakeholder}}</a>
</li>
<li [class.uk-active]="isSearch" (click)="isSearch = true">
<a [routerLink]="['./', stakeholder.alias, 'search']" [relativeTo]="_route">Browse
Research Outputs</a>
</li>
</ul>
</div>
</div>
</div>
<div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top">
<router-outlet></router-outlet>
</div>
</ng-container>
`
})
export class RfoComponent extends BaseComponent implements OnInit {
export class RfoComponent extends StakeholderBaseComponent implements OnInit {
stakeholder: Stakeholder;
alias: string;
isSearch: boolean = false;
loading: boolean = false;
constructor(private stakeholderService: StakeholderService,
private _customFilterService: CustomFilterService,
@ -37,7 +58,9 @@ export class RfoComponent extends BaseComponent implements OnInit {
protected _title: Title,
protected _meta: Meta) {
super();
super.initRouterParams(this._route);
super.initRouterParams(this._route, event => {
this.isSearch = event.url.includes('search');
});
}
@ -46,8 +69,10 @@ export class RfoComponent extends BaseComponent implements OnInit {
this._customFilterService.setCustomFilter(null);
this.alias = params['stakeholder'];
if (this.alias) {
this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(data => {
this.stakeholder = data;
this.loading = true;
this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(stakeholder => {
this.stakeholder = stakeholder;
if (this.stakeholder && this.stakeholder.type === 'funder') {
LinksResolver.resetProperties();
LinksResolver.setSearchAndResultLanding("rfo/" + this.stakeholder.alias);
let value = this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName;
@ -55,7 +80,13 @@ export class RfoComponent extends BaseComponent implements OnInit {
[new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
new SearchCustomFilter("RF0", "relfunder", value, this.stakeholder.index_name, true)
]);
this.loading = false;
} else {
this.navigateToError();
}
}));
} else {
this.stakeholder = null;
}
});
}

7
src/app/rfo/rfo.module.ts
View File

@ -2,18 +2,19 @@ import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {Route, RouterModule} from "@angular/router";
import {RfoComponent} from "./rfo.component";
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
const routes: Route[] = [
{
path: '', component: RfoComponent, children: [
{path: '', loadChildren: () => import('../shared/browse-stakeholders/browse-stakeholder.module').then(m => m.BrowseStakeholderModule)},
{path: ':stakeholder', loadChildren: () => import('../shared/monitor/monitor.module').then(m => m.MonitorModule)},
{path: ':stakeholder/search', loadChildren: () => import('../search/resultLanding.module').then(m => m.ResultLandingModule)}
{path: ':stakeholder/search', loadChildren: () => import('../search/resultLanding.module').then(m => m.ResultLandingModule)},
{path: ':stakeholder', loadChildren: () => import('../shared/monitor/monitor.module').then(m => m.MonitorModule)}
]
}
];
@NgModule({
imports: [CommonModule, RouterModule.forChild(routes)],
imports: [CommonModule, RouterModule.forChild(routes), LoadingModule],
declarations: [RfoComponent],
exports: [RfoComponent],
})

64
src/app/rpo/rpo.component.ts
View File

@ -1,29 +1,53 @@
import {Component, OnDestroy, OnInit} from "@angular/core";
import {Component, OnInit} from "@angular/core";
import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {BaseComponent} from "../openaireLibrary/sharedComponents/base/base.component";
import {ActivatedRoute, Router} from "@angular/router";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
import {Meta, Title} from "@angular/platform-browser";
import {CustomFilterService} from "../shared/customFilter.service";
import {LinksResolver} from "../search/links-resolver";
import {SearchCustomFilter} from "../openaireLibrary/searchPages/searchUtils/searchUtils.class";
import {LinksResolver} from "../search/links-resolver";
import {CustomFilterService} from "../shared/customFilter.service";
import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
@Component({
selector: 'rpo',
template: `
<div style="background: mediumseagreen; height: 200px">
<loading *ngIf="loading" class="uk-position-center"></loading>
<ng-container *ngIf="!loading">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<h1 *ngIf="stakeholder" class="uk-h2">{{stakeholder.name}}</h1>
<h1 *ngIf="!stakeholder" class="uk-h2">{{entities.organizations}}</h1>
</div>
<div *ngIf="!this.alias || this.stakeholder" class="uk-section uk-container">
</div>
<div *ngIf="stakeholder" class="uk-banner-footer">
<div class="uk-container uk-container-large">
<ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
<li [class.uk-active]="!isSearch">
<a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route"
(click)="isSearch = false">{{entities.stakeholder}}</a>
</li>
<li [class.uk-active]="isSearch" (click)="isSearch = true">
<a [routerLink]="['./', stakeholder.alias, 'search']" [relativeTo]="_route">Browse
Research Outputs</a>
</li>
</ul>
</div>
</div>
</div>
<div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top">
<router-outlet></router-outlet>
</div>
</ng-container>
`
})
export class RpoComponent extends BaseComponent implements OnInit {
export class RpoComponent extends StakeholderBaseComponent implements OnInit {
stakeholder: Stakeholder;
alias: string;
isSearch: boolean = false;
loading: boolean = false;
constructor(private stakeholderService: StakeholderService,
private _customFilterService: CustomFilterService,
@ -34,7 +58,9 @@ export class RpoComponent extends BaseComponent implements OnInit {
protected _title: Title,
protected _meta: Meta) {
super();
super.initRouterParams(this._route);
super.initRouterParams(this._route, event => {
this.isSearch = event.url.includes('search');
});
}
@ -43,21 +69,27 @@ export class RpoComponent extends BaseComponent implements OnInit {
this._customFilterService.setCustomFilter(null);
this.alias = params['stakeholder'];
if (this.alias) {
this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(data => {
this.stakeholder = data;
this.loading = true;
this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(stakeholder => {
this.stakeholder = stakeholder;
if (this.stakeholder && this.stakeholder.type === 'organization') {
LinksResolver.resetProperties();
LinksResolver.setSearchAndResultLanding("rpo/" + this.stakeholder.alias);
LinksResolver.setSearchAndResultLanding("rfo/" + this.stakeholder.alias);
let value = this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName;
this._customFilterService.setCustomFilter(
[new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
new SearchCustomFilter("RPO", "relorganizationid", this.stakeholder.index_id, this.stakeholder.index_name, true)
]);
// TODO not correct id/ no irish?
this.loading = false;
} else {
this.navigateToError();
}
}));
} else {
this.stakeholder = null;
}
});
}
}

4
src/app/shared/browse-stakeholders/browse-stakeholder.component.html
View File

@ -3,7 +3,7 @@
<loading></loading>
</div>
</ng-container>
<ng-container *ngIf="!showLoading && stakeholders?.length">
<div *ngIf="!showLoading && stakeholders?.length" class="uk-container uk-container-large">
<div class="uk-flex uk-flex-middle uk-flex-center uk-position-relative">
<div search-input *ngIf="keywordControl" [searchControl]="keywordControl" searchInputClass="border-bottom" iconPosition="left"
placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="showLoading" class="uk-width-1-2@m uk-width-1-1">
@ -130,4 +130,4 @@
</div>
</ng-template>
</div>
</ng-container>
</div>

5
src/app/shared/browse-stakeholders/browse-stakeholder.component.ts
View File

@ -11,7 +11,7 @@ import {debounceTime, distinctUntilChanged} from "rxjs/operators";
@Component({
selector: 'browse-stakeholder',
templateUrl: `browse-stakeholder.component.html`
templateUrl: 'browse-stakeholder.component.html'
})
export class BrowseStakeholderComponent extends StakeholderBaseComponent implements OnInit {
stakeholderType: StakeholderType;
@ -74,9 +74,6 @@ export class BrowseStakeholderComponent extends StakeholderBaseComponent impleme
}));
}
private navigateToError() {
this._router.navigate([this.properties.errorLink], {queryParams: {'page': this._router.url}});
}
private filtering(value) {
if(!value){

5
src/app/shared/irish.ts
View File

@ -1,5 +1,6 @@
import {Portal} from "../openaireLibrary/utils/entities/adminTool/portal";
import {StakeholderConfiguration} from "../openaireLibrary/monitor-admin/utils/indicator-utils";
import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
export class Irish {
public static METADATA_PREFIX = 'NOAMI | ';
@ -27,7 +28,9 @@ export class Irish {
StakeholderConfiguration.VISIBILITIES = [
{icon: 'earth', value: "PUBLIC", label: 'Public'},
]
];
LayoutService.HEADER_HEIGHT = '60px';
}
}

160
src/app/shared/monitor/monitor.component.html
View File

@ -1,18 +1,166 @@
<div page-content>
<div page-content [border]="isMobile">
<div actions>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 0" [class.uk-margin-bottom]="isMobile">
<slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile"
[tabsClass]="tabsClass" [type]="'dynamic'">
<slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile" [type]="'dynamic'">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory>
<slider-tab *ngIf="hasPermission(subCategory.visibility)" [tabTitle]="subCategory.name"
[queryParams]="queryParams" [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
[relativeTo]="_route"
[queryParams]="queryParams"
[routerLink]="['.', activeTopic.alias, activeCategory.alias, subCategory.alias]"
[relativeTo]="_route.parent?_route.parent:_route"
[active]="subCategory.alias === activeSubCategory.alias"></slider-tab>
</ng-template>
</slider-tabs>
</div>
</div>
<div inner>
<div *ngIf="!activeSubCategory" class="message">
No {{entities.stakeholder}} yet.
</div>
<div *ngIf="activeSubCategory" class="uk-section">
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
<div *ngIf="!isMobile" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid uk-height-match="target: .uk-card">
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility)"
[ngClass]="getNumberClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!indicator.descriptionOverlay">
<div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
<div class="number uk-text-small uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j)"
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
<a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note"
(click)="toggleDescriptionOverlay($event, indicator)">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
</span>
</a>
</div>
</div>
<div *ngIf="indicator.descriptionOverlay && (indicator.description || indicator.additionalDescription)" click-outside-or-esc class="uk-overflow-auto" (clickOutside)="closeDescriptionOverlay($event, indicator)">
<div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
<a class="uk-display-inline-block uk-button uk-button-link"
(click)="toggleDescriptionOverlay($event, indicator)">
<span class="uk-flex uk-flex-middle">
<icon name="close" type="outlined" [flex]="true"></icon>
</span>
</a>
</div>
<div class="uk-margin-small-top uk-margin-right">
<p *ngIf="indicator.description">
{{indicator.description}}
</p>
<p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</p>
</div>
</div>
</div>
</div>
</ng-template>
</div>
<div *ngIf="isMobile">
<h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h6>
<div class="uk-card uk-card-default uk-padding-small number-card">
<div class="uk-grid uk-grid-small uk-child-width-1-1" uk-grid>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
<div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!indicator.descriptionOverlay">
<div
class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
<div class="number uk-text-small uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j)"
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</div>
</div>
</div>
</div>
</ng-template>
</div>
</div>
</div>
</ng-container>
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
<div class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title && !isMobile" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<h6 *ngIf="chart.title && isMobile" class="uk-width-1-1">{{chart.title}}</h6>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
[ngClass]="getChartClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-position-relative"
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center uk-margin-small-bottom">
<h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
{{indicator.name + " "}}
</h6>
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
<button *ngFor="let indicatorPath of indicator.indicatorPaths;"
class="uk-button"
(click)="setActiveChart(i, j, indicatorPath.type)"
[class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
{{indicatorPath.type}}
</button>
</div>
<iframe [class.uk-blend-multiply]="!isFullscreen"
*ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
<img class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
src="assets/chart-placeholder.png">
</div>
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
<a class="uk-display-inline-block uk-button uk-button-text"
(click)="toggleDescriptionOverlay($event, indicator)">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Note</span>
</span>
</a>
</div>
<div *ngIf="indicator.descriptionOverlay && (indicator.description || indicator.additionalDescription)"
class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div class="inner" click-outside-or-esc
(clickOutside)="closeDescriptionOverlay($event, indicator)">
<div class="uk-padding-small">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, indicator)">
<icon name="close" ratio="1"></icon>
</button>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<p *ngIf="indicator.description">
{{indicator.description}}
</p>
<p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="printGap uk-hidden"></div>
</ng-template>
</div>
</ng-container>
</div>
</div>
</div>

1
src/app/shared/monitor/monitor.component.ts
View File

@ -17,7 +17,6 @@ import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service
templateUrl: 'monitor.component.html'
})
export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
tabsClass: string = 'uk-tab';
constructor(protected _route: ActivatedRoute,
protected _router: Router,

10
src/app/shared/monitor/monitor.module.ts
View File

@ -4,11 +4,17 @@ import {RouterModule} from "@angular/router";
import {MonitorComponent} from "./monitor.component";
import {PageContentModule} from "../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
import {SliderTabsModule} from "../../openaireLibrary/sharedComponents/tabs/slider-tabs.module";
import {NumberRoundModule} from "../../openaireLibrary/utils/pipes/number-round.module";
import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
import {ClickModule} from "../../openaireLibrary/utils/click/click.module";
@NgModule({
imports: [CommonModule, RouterModule.forChild([
{path: '', component: MonitorComponent}
]), PageContentModule, SliderTabsModule],
{path: '', component: MonitorComponent},
{path: ':topic/', component: MonitorComponent},
{path: ':topic/:category', component: MonitorComponent},
{path: ':topic/:category/:subCategory', component: MonitorComponent}
]), PageContentModule, SliderTabsModule, NumberRoundModule, IconsModule, ClickModule],
declarations: [MonitorComponent],
exports: [MonitorComponent]
})

28
src/app/upload-dois/upload-dois.component.html
View File

@ -1,29 +1,31 @@
<div>
<div class="uk-background-primary uk-grid uk-padding-large">
<div class="uk-banner">
<div class="uk-container uk-container-large">
<div class="uk-grid" uk-grid>
<div class="uk-width-expand">
<div>Title</div>
<div>Lorem ipsum.......</div>
</div>
<div *ngIf="filesToUpload && !loading" class="uk-width-xlarge">
<div class="uk-text-right">
<span class="js-upload uk-button uk-button-primary" uk-form-custom>
<input id="upload-new" class="uk-width-medium" type="file" (change)="fileChangeEvent($event)"/>
<span uk-icon="upload"></span>
upload new file
<!-- <span class="uk-link " style="text-decoration: underline;">Upload a DOI's CSV file </span>-->
</span>
<div class="uk-flex uk-flex-right">
<button class="uk-button uk-button-primary uk-flex uk-flex-middle" uk-form-custom>
<input id="upload-new" type="file" (change)="fileChangeEvent($event)"/>
<icon name="upload_file" class="uk-margin-xsmall-right" [flex]="true"></icon>
<span>upload new file</span>
</button>
</div>
<div *ngIf="filesToUpload[0]" class="uk-grid">
<div class="uk-width-auto">
<span uk-icon="icon: file-text; ratio:3"></span>
</div>
<div class="uk-width-expand">
<div *ngIf="filesToUpload[0]" class="uk-flex uk-flex-middle">
<icon name="description" [ratio]="2" [flex]="true"></icon>
<div class="uk-width-expand uk-margin-left">
{{filesToUpload[0].name}}
<progress class="uk-progress" [value]="enableUpload?100:10" max="100"></progress>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="!filesToUpload || loading" class="uk-section uk-container uk-flex uk-flex-center">
<div class="uk-placeholder uk-text-center uk-width-xlarge" uk-form-custom>
<icon name="upload_file" [ratio]="2"></icon>

BIN
src/assets/chart-placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit d1b2d5e585722751792d12645d17f820cd6a7860
Subproject commit 6bb1e61b059bef1bff3bfb0611b0df46f7840426

3
src/assets/extend-theme/less/_import-variables.less Normal file
View File

@ -0,0 +1,3 @@
@import "~uikit/src/less/components/variables";
@import "~src/assets/openaire-theme/less/variables";
@import "~src/assets/extend-theme/less/variables";

16
src/assets/extend-theme/less/_import.less vendored Normal file
View File

@ -0,0 +1,16 @@
@import "~src/assets/openaire-theme/less/_import";
// Base
@import "variables";
// Elements
@import "button";
// Navs
@import "navbar";
// Utilities
@import "background";
// Extra
@import "banner";

1
src/assets/extend-theme/less/background.less Normal file
View File

@ -0,0 +1 @@
@background-primary-background-gradient: none;

78
src/assets/extend-theme/less/banner.less Normal file
View File

@ -0,0 +1,78 @@
@banner-background: @irish-thin-color;
@banner-mode: dark;
@banner-footer-background: transparent;
@banner-tab-gutter: 60px;
@banner-tab-margin-bottom: @global-small-margin;
@banner-tab-divider: @global-border-width solid @global-border;
@banner-tab-divider-height: @global-line-height;
@banner-tab-item-color: @global-color;
@banner-tab-item-hover-color: @global-secondary-background;
@banner-tab-item-active-color: @global-secondary-background;
@banner-tab-item-active-indicator: @global-background;
.uk-banner:extend(.uk-section) {
background: @banner-background;
position: relative;
& .uk-banner-footer {
background: @banner-footer-background;
position: absolute;
bottom: 0;
left: 0;
right: 0;
& ul.uk-banner-tab:extend(.uk-flex) {
list-style: none;
margin-bottom: @banner-tab-margin-bottom;
& > li {
&:not(:first-child) {
margin-left: @banner-tab-gutter;
position: relative;
&::before {
content: '';
position: absolute;
left: -1 * (@banner-tab-gutter/2);
transform: translateX(-100%);
border-left: @banner-tab-divider;
height: @banner-tab-divider-height;
}
}
a {
color: @banner-tab-item-color;
text-transform: uppercase;
text-decoration: none;
}
&:hover a {
color:@banner-tab-item-hover-color;
}
&.uk-active a {
color: @banner-tab-item-active-color;
font-weight: @text-bold-weight;
position: relative;
&:after {
content: '';
position: absolute;
bottom: -@banner-tab-margin-bottom;
left: 50%;
transform: translate(-50%, 50%);
width: 0;
height: 0;
border-left: 2*@banner-tab-margin-bottom solid transparent;
border-right: 2*@banner-tab-margin-bottom solid transparent;
border-bottom: @banner-tab-margin-bottom solid @banner-tab-item-active-indicator;
}
}
}
}
}
}
.uk-banner:extend(.uk-light all) when (@banner-mode = light) {}

12
src/assets/irish-theme/button.less → src/assets/extend-theme/less/button.less
View File

@ -1,3 +1,15 @@
/* Primary */
@button-primary-background: @global-primary-background;
@button-primary-background-gradient: none;
@button-primary-color: @global-inverse-color;
@button-primary-box-shadow: @global-medium-box-shadow;
@button-primary-border: transparent;
@button-primary-hover-background: @global-secondary-background;
@button-primary-hover-background-gradient: none;
@button-primary-hover-color: @global-inverse-color;
@button-primary-hover-box-shadow: @global-small-box-shadow;
@button-primary-hover-border: transparent;
/* Secondary */
@button-secondary-background: @global-secondary-background;
@button-secondary-background-gradient: none;

12
src/assets/extend-theme/less/color.less Normal file
View File

@ -0,0 +1,12 @@
@irish-primary-color: #009A49;
@irish-light-color: #25AE7A;
@irish-dark-color: #002B1A;
@irish-secondary-color: #FF7901;
@irish-thin-color: #DCE9E3;
@irish-global-background: #F9FBFC;
@funder-color: #4D276F;
@organization-color: #f5cc1c;
@country-color: @irish-primary-color;
@datasource-color: #D45E50;

0
src/assets/irish-theme/navbar.less → src/assets/extend-theme/less/navbar.less
View File

3
src/assets/irish-theme/variables.less → src/assets/extend-theme/less/variables.less
View File

@ -1,8 +1,11 @@
@import "color";
/** Backgrounds */
@global-primary-background: @irish-primary-color;
@global-secondary-background: @irish-secondary-color;
@global-background: @irish-global-background;
@global-primary-gradient: radial-gradient(closest-side at 50% 50%, @irish-light-color 0%, @irish-dark-color 100%);
@global-muted-background: @gray-300;
/** Borders */
@global-border: @gray-300;

2
src/assets/irish-monitor.less
View File

@ -1,3 +1,5 @@
@general-search-form-background: none;
.irish-monitor {
/* Import OpenAIRE theme*/
@import (multiple) "~src/assets/openaire-theme/less/_import";

21
src/assets/irish-theme/_import.less vendored
View File

@ -1,21 +0,0 @@
@import "~src/assets/openaire-theme/less/_import";
@import "~src/assets/common-assets/less/general";
@import "~src/assets/common-assets/less/user";
@import "~src/assets/common-assets/less/landing";
@import "~src/assets/common-assets/less/linking";
@import "~src/assets/common-assets/less/dashboard";
@import "~src/assets/common-assets/less/ckeditor";
@import "colors";
// Base
@import "variables";
// Elements
@import "button";
// Navs
@import "navbar";
// Utilities
@import "background";

2
src/assets/irish-theme/background.less
View File

@ -1,2 +0,0 @@
@background-primary-background: @irish-primary-background;
@background-primary-background-gradient: none;

6
src/assets/irish-theme/colors.less
View File

@ -1,6 +0,0 @@
@irish-primary-color: #1B895F;
@irish-light-color: #25AE7A;
@irish-dark-color: #002B1A;
@irish-secondary-color: #FF7901;
@irish-primary-background: #DCE9E3;
@irish-global-background: #F9FBFC;

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 2dadcf85926bc0f11fff22ed94dc197ddd8587c6
Subproject commit 928dfa11bd4aeadb30c2d72d408c7b7206d6598e

8
src/styles.less
View File

@ -1,4 +1,10 @@
/* You can add global styles to this file, and also import other style files */
/* Import OpenAIRE theme*/
@import "~src/assets/irish-theme/_import";
@import "~src/assets/extend-theme/less/_import";
@import "~src/assets/common-assets/less/general";
@import "~src/assets/common-assets/less/user";
@import "~src/assets/common-assets/less/landing";
@import "~src/assets/common-assets/less/linking";
@import "~src/assets/common-assets/less/dashboard";
@import "~src/assets/common-assets/less/ckeditor";
@import "~src/assets/irish-monitor";