MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

Change header info style. Fix menu in admin routes. Add replaceHeader for dashboard and stakeholder admin.

This commit is contained in:
Konstantinos Triantafyllou 2022-08-04 15:33:49 +03:00
parent bcbbefc277
commit f9dc782008
14 changed files with 277 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/admin-stakeholder/admin-stakeholder-routing.module.ts
View File

@ -6,7 +6,6 @@ import {RouterModule} from "@angular/router";
{
path: '',
loadChildren: () => import('../general/general.module').then(m => m.GeneralModule),
data: {hasAdminMenu: true},
pathMatch: 'full'
},
{
@ -17,7 +16,6 @@ import {RouterModule} from "@angular/router";
{
path: 'users/:user_type',
loadChildren: () => import('../users/users.module').then(m => m.UsersModule),
data: {hasAdminMenu: true},
pathMatch: 'full'
},
{
@ -34,7 +32,6 @@ import {RouterModule} from "@angular/router";
path: 'admin-tools',
loadChildren: () => import('../admin-tools/admin-tools-routing.module').then(m => m.AdminToolsRoutingModule),
data: {
hasAdminMenu: true,
param: 'stakeholder',
parentClass: 'monitor'
}

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

@ -25,32 +25,30 @@ const routes: Routes = [
path: 'admin',
loadChildren: () => import('./manageStakeholders/manageStakeholders.module').then(m => m.ManageStakeholdersModule),
canActivateChild: [LoginGuard],
data: {hasAdminMenu: true}
data: {hasAdminMenu: true, hasSidebar: false}
},
{
path: 'admin/user-info',
loadChildren: () => import('./login/libUser.module').then(m => m.LibUserModule),
data: {hasAdminMenu: true}
data: {hasAdminMenu: true, hasSidebar: false}
},
{
path: 'admin/admin-tools',
loadChildren: () => import('./admin-tools/portal-admin-tools-routing.module').then(m => m.PortalAdminToolsRoutingModule),
canActivateChild: [AdminLoginGuard],
data: {hasAdminMenu: true}
data: {hasAdminMenu: true, hasSidebar: false}
},
{
path: 'admin/monitor/admin-tools',
loadChildren: () => import('./admin-tools/admin-tools-routing.module').then(m => m.AdminToolsRoutingModule),
canActivateChild: [AdminLoginGuard],
data: {hasAdminMenu: true, portal: 'monitor', monitorCurator: true, parentClass: 'monitor'}
data: {hasAdminMenu: true, hasSidebar: false, portal: 'monitor', monitorCurator: true, parentClass: 'monitor'}
},
{
path: 'admin/:stakeholder',
loadChildren: () => import('./admin-stakeholder/admin-stakeholder-routing.module').then(m => m.AdminStakeholderRoutingModule),
canActivateChild: [AdminDashboardGuard],
data: {
activeMenuItem: "manage"
}
data: {hasAdminMenu: true, hasSidebar: false, activeMenuItem: "manage"}
},
{
path: 'theme',

4
src/app/app.component.html
View File

@ -3,9 +3,9 @@
</div>
<div *ngIf="!loading" [class.monitor]="isFrontPage">
<div id="container" class="sidebar_main_swipe uk-background-default" [class.sidebar_main_active]="open && (hasSidebar || hasAdminMenu)"
[class.sidebar_mini]="!open && hasSidebar && (!hasAdminMenu || hasAdminMenu)">
[class.sidebar_mini]="!open && (hasSidebar || hasAdminMenu)">
<div id="modal-container"></div>
<navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader" [dark]="isFrontPage"
<navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
<div>
<dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" queryParamsHandling="merge" [items]="sideBarItems" [activeItem]="activeTopic?activeTopic.alias:null"></dashboard-sidebar>

116
src/app/app.component.ts
View File

@ -17,6 +17,7 @@ import {StakeholderUtils} from "./utils/indicator-utils";
import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
import {ResourcesService} from "./openaireLibrary/monitor/services/resources.service";
import {StringUtils} from "./openaireLibrary/utils/string-utils.class";
@Component({
@ -245,7 +246,7 @@ export class AppComponent implements OnInit, OnDestroy {
this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, {name: 'bar_chart'}));
if (this.stakeholder.defaultId) {
this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + "/users", false, [], [], {}, {name: 'group'}, null, null, "/admin/" + this.stakeholder.alias + "/users"));
if (Session.isPortalAdministrator(this.user)) {
if (this.isCurator()) {
this.adminMenuItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/admin/" + this.stakeholder.alias + "/admin-tools/pages", false, [], [], {}, {name: 'description'}, null, null, "/admin/" + this.stakeholder.alias + "/admin-tools"));
}
}
@ -261,15 +262,15 @@ export class AppComponent implements OnInit, OnDestroy {
this.menuItems = [];
this.userMenuItems = [];
if (this.user) {
if (this.isCurator()) {
if (this.isKindOfMonitorManager()) {
this.userMenuItems.push(new MenuItem("", "Manage profiles",
"", "/admin", false, [], [], {}));
}
if (Session.isPortalAdministrator(this.user)) {
this.userMenuItems.push(new MenuItem("adminOptions", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}));
}
if (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user)) {
this.userMenuItems.push(new MenuItem("monitorOptions", "Monitor portal options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}));
if (this.isCurator()) {
this.userMenuItems.push(new MenuItem("monitorOptions", "Monitor options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}));
}
}
if (this.stakeholder) {
@ -286,7 +287,7 @@ export class AppComponent implements OnInit, OnDestroy {
null, null, null, null),
items: []
});
if(this.properties.environment !== 'production') {
if (this.properties.environment !== 'production') {
this.resourcesService.setResourcesDeprecated(this.menuItems, "/" + this.stakeholder.alias);
} else {
this.menuItems.push({
@ -319,10 +320,23 @@ export class AppComponent implements OnInit, OnDestroy {
url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
title: "Monitor",
logoUrl: 'assets/common-assets/logo-services/monitor/small-inverted.svg',
logoSmallUrl: "assets/common-assets/logo-services/monitor/small-inverted.svg",
logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
position: 'center',
badge: true,
menuPosition: "center"
darkBg: true,
menuPosition: "center",
replaceHeader: {
route: './' + this.stakeholder.alias,
url: null,
title: this.stakeholder.name,
logoUrl: StringUtils.getLogoUrl(this.stakeholder),
logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Dashboard</div>' +
'<div class="uk-h6 uk-text-truncate uk-margin-remove">' + this.stakeholder.name + '</div></div>',
position: 'center',
badge: true,
menuPosition: "center"
}
};
} else {
this.menuHeader = {
@ -333,65 +347,65 @@ export class AppComponent implements OnInit, OnDestroy {
logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
position: 'center',
badge: true,
menuPosition: "center"
menuPosition: "center",
replaceHeader: {
route: './' + this.stakeholder.alias,
url: null,
title: this.stakeholder.name,
logoUrl: StringUtils.getLogoUrl(this.stakeholder),
logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
position: 'center',
badge: true,
menuPosition: "center"
}
};
}
} else {
if (this.isFrontPage || !this.hasAdminMenu) {
this.userMenuItems.push(new MenuItem("", "User information", "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/user-info', '', false, [], [], {}, null, null, null, null, "_self"));
this.menuHeader = {
route: null,
url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
title: "Monitor",
logoUrl: 'assets/common-assets/logo-services/monitor/main.svg',
logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
position: 'left',
badge: true,
menuPosition: "center"
};
this.menuItems.push({
rootItem: new MenuItem("about", "About",
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/about/learn-how', "", false, [], null, {}, null, null, null, null, "_self"),
items: []
});
if(this.properties.environment === 'development') {
// @ts-ignore
this.resourcesService.setResourcesDeprecated(this.menuItems, '', "https://" + (this.properties.environment === 'beta' ? 'beta.' : '') + 'monitor.openaire.eu');
}
this.menuItems.push({
rootItem: new MenuItem("stakeholders", "Browse " + this.stakeholderEntities.STAKEHOLDERS,
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/browse', "", false, [], null, {}, null, null, null, null, "_self"),
items: []
});
} else {
this.userMenuItems.push(new MenuItem("", "User information", "", "/admin/user-info", false, [], [], {}));
this.menuHeader = {
route: "/",
url: null,
title: "Monitor Dashboard",
logoUrl: null,
logoSmallUrl: null,
position: 'center',
badge: false,
stickyAnimation: true,
menuPosition: "center"
};
this.userMenuItems.push(new MenuItem("", "User information", "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/user-info', '', false, [], [], {}, null, null, null, null, "_self"));
this.menuHeader = {
route: null,
url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
title: "Monitor",
logoUrl: 'assets/common-assets/logo-services/monitor/main.svg',
logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
position: 'left',
badge: true,
menuPosition: "center"
};
this.menuItems.push({
rootItem: new MenuItem("about", "About",
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/about/learn-how', "", false, [], null, {}, null, null, null, null, "_self"),
items: []
});
if (this.properties.environment === 'development') {
// @ts-ignore
this.resourcesService.setResourcesDeprecated(this.menuItems, '', "https://" + (this.properties.environment === 'beta' ? 'beta.' : '') + 'monitor.openaire.eu');
}
this.menuItems.push({
rootItem: new MenuItem("stakeholders", "Browse " + this.stakeholderEntities.STAKEHOLDERS,
"https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/browse', "", false, [], null, {}, null, null, null, null, "_self"),
items: []
});
if (this.hasAdminMenu) {
this.adminMenuItems = [];
this.specialSideBarMenuItem = null;
this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, {name: 'settings'}));
if (Session.isPortalAdministrator(this.user)) {
this.adminMenuItems.push(new MenuItem("super_admin", "Super Admin Options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, null, '/admin/admin-tools'));
this.adminMenuItems.push(new MenuItem("super_admin", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, null, '/admin/admin-tools'));
}
if (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user)) {
this.adminMenuItems.push(new MenuItem("monitor", "Monitor Options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, '/admin/monitor/admin-tools'));
this.adminMenuItems.push(new MenuItem("monitor", "Monitor options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, '/admin/monitor/admin-tools'));
}
this.hasAdminMenu = this.hasAdminMenu && this.adminMenuItems.length > 0;
this.hasAdminMenu = this.hasAdminMenu && this.adminMenuItems.length > 1;
}
}
}
public isCurator() {
return this.user && (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user));
}
public isKindOfMonitorManager() {
return this.user && (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isKindOfMonitorManager(this.user));
}

6
src/app/general/general.component.html
View File

@ -1,10 +1,10 @@
<div page-content>
<div header *ngIf="stakeholder">
<div class="uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info">
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Profile</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}<span *ngIf="editStakeholderComponent && editStakeholderComponent.dirty && !loading" class="uk-text-large"> (unsaved changes)</span></h1>
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Profile</div>
<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}<span *ngIf="editStakeholderComponent && editStakeholderComponent.dirty && !loading" class="uk-text-large"> (unsaved changes)</span></h1>
</div>
</div>
</div>

3
src/app/manageStakeholders/manageStakeholders-routing.module.ts
View File

@ -9,8 +9,7 @@ import {ManageStakeholdersComponent} from "./manageStakeholders.component";
{
path: '',
component: ManageStakeholdersComponent,
canDeactivate: [PreviousRouteRecorder],
data: {hasSidebar: true}
canDeactivate: [PreviousRouteRecorder]
}
])
]

8
src/app/manageStakeholders/manageStakeholders.component.html
View File

@ -1,13 +1,13 @@
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-top info">
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<img src="assets/common-assets/placeholder.png" class="uk-margin-right">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage profiles</div>
<h1 class="uk-h4 uk-margin-remove">Profile Templates & Profiles</h1>
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage profiles</div>
<h1 class="uk-h6 uk-margin-remove">Profile Templates & Profiles</h1>
</div>
</div>
<ul *ngIf="isCurator()" class="uk-tab uk-margin-top" uk-tab>
<ul *ngIf="isCurator()" class="uk-tab uk-margin-remove-bottom uk-margin-medium-top" uk-tab>
<li [class.uk-active]="tab === 'all'"><a (click)="tab = 'all'">All</a></li>
<li [class.uk-active]="tab === 'templates'"><a (click)="tab = 'templates'">Profile templates</a></li>
<li [class.uk-active]="tab === 'profiles'"><a (click)="tab = 'profiles'">Profiles</a></li>

370
src/app/monitor/monitor.component.html
View File

@ -37,41 +37,43 @@
</div>
</div>
</ng-template>
<div page-content [headerSticky]="true">
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
<div class="uk-flex uk-flex-middle uk-margin-top info">
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Dashboard</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
<div class="uk-text-background uk-text-bold uk-text-small">Dashboard</div>
<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
<ul *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-tab">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias === activeCategory.alias">
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
[queryParams]="queryParams">
<span class="title">{{category.name}}</span>
</a>
</li>
</ng-template>
</ul>
</div>
<div inner>
<div *ngIf="activeTopic && activeTopic.categories.length > 0" class="uk-margin-medium-top" actions>
<ul *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-tab uk-margin-remove-bottom">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias === activeCategory.alias">
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
[queryParams]="queryParams">
<span class="title">{{category.name}}</span>
</a>
</li>
</ng-template>
</ul>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right uk-margin-top">
<ul class="uk-subnav uk-subnav-pill-alt">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
<li *ngIf="isPublicOrIsMember(subCategory.visibility)"
[ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
[queryParams]="queryParams"
class="uk-margin-remove-bottom"
[queryParams]="queryParams"
class="uk-margin-remove-bottom"
><span>{{subCategory.name}}</span></a>
</li>
</ng-template>
</ul>
</div>
</div>
<div inner>
<div *ngIf="privateStakeholder" class="message">
<div class="uk-text-center">
<h3 class="uk-flex uk-flex-middle">
@ -81,182 +83,180 @@
</div>
</div>
<div *ngIf="!privateStakeholder && stakeholder" class="uk-section">
<div class="uk-padding uk-padding-remove-vertical">
<div *ngIf="activeSubCategory?.description" class="uk-margin-medium-bottom">
{{activeSubCategory.description}}
</div>
<div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
&& ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) ||
(activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
(activeTopic && activeTopic.description && activeTopic.description.length > 0))" class="uk-text-center">
<div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
{{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
(activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}
</div>
<div *ngIf="activeSubCategory?.description" class="uk-margin-medium-bottom">
{{activeSubCategory.description}}
</div>
<div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
&& ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) ||
(activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
(activeTopic && activeTopic.description && activeTopic.description.length > 0))" class="uk-text-center">
<div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
{{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
(activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}
</div>
<ng-template [ngIf]="!loading && !privateStakeholder &&
(!activeSubCategory ||
((activeSubCategory.numbers.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.numbers) == 0) &&
(activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
|| !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
<div class="message uk-text-center">
<h3>
No indicators available yet. Stay tuned!
</h3>
</div>
</ng-template>
<ng-template #content>
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
<div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid 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="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div class="uk-text-center">
<!--<div *ngIf="properties.environment === 'development'">
Filtered:{{indicator.indicatorPaths[0].filtersApplied}}out of{{countSelectedFilters()}}
</div>-->
<div class="number uk-text-bold uk-text-background">
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</div>
<!-- for printing only -->
<span *ngIf="numberResults.get(i + '-' + j)"
class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span>
<!-- ----------------- -->
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
</div>
<ng-template [ngIf]="!loading && !privateStakeholder &&
(!activeSubCategory ||
((activeSubCategory.numbers.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.numbers) == 0) &&
(activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
|| !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
<div class="message uk-text-center">
<h3>
No indicators available yet. Stay tuned!
</h3>
</div>
</ng-template>
<ng-template #content>
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
<div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid 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="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div class="uk-text-center">
<!--<div *ngIf="properties.environment === 'development'">
Filtered:{{indicator.indicatorPaths[0].filtersApplied}}out of{{countSelectedFilters()}}
</div>-->
<div class="number uk-text-bold uk-text-background">
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-bottom uk-text-center uk-margin-small-bottom">
<a class="uk-display-inline-block uk-button uk-button-text"
(click)="toggleDescriptionOverlay($event, j)">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Description</span>
</span>
</a>
</div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div class="inner uk-padding-small" click-outside-or-esc
(clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
<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>
<!-- for printing only -->
<span *ngIf="numberResults.get(i + '-' + j)"
class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span>
<!-- ----------------- -->
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-bottom uk-text-center uk-margin-small-bottom">
<a class="uk-display-inline-block uk-button uk-button-text"
(click)="toggleDescriptionOverlay($event, j)">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Description</span>
</span>
</a>
</div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div class="inner uk-padding-small" click-outside-or-esc
(clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
<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>
</ng-template>
</div>
</ng-container>
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
<div *ngIf="countIndicatorsToShow(chart.indicators) > 0"
class="uk-grid uk-grid-column-medium uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="isPublicOrIsMember(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">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
</h4>
<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>
<!--<div *ngIf="properties.environment === 'development'">
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of
{{countSelectedFilters()}}</div>-->
<iframe
*ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply" 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">
<a class="uk-display-inline-block uk-button uk-button-text"
(click)="toggleDescriptionOverlay($event, j)">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Description</span>
</span>
</a>
</div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div class="inner uk-padding-small" click-outside-or-esc
(clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
<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 class="printGap uk-hidden"></div>
</ng-template>
</div>
</ng-container>
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
<div *ngIf="countIndicatorsToShow(chart.indicators) > 0"
class="uk-grid uk-grid-column-medium uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="isPublicOrIsMember(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">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
</h4>
<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>
<!--<div *ngIf="properties.environment === 'development'">
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of
{{countSelectedFilters()}}</div>-->
<iframe
*ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply" 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">
<a class="uk-display-inline-block uk-button uk-button-text"
(click)="toggleDescriptionOverlay($event, j)">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Description</span>
</span>
</a>
</div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div class="inner uk-padding-small" click-outside-or-esc
(clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
<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 class="printGap uk-hidden"></div>
</ng-template>
</div>
</ng-container>
<div class="uk-margin-medium-top uk-text-small uk-flex hideInfo">
<!-- Last Stats Date-->
<div class="uk-width-2-3@m uk-width-1-2">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-baseline uk-text-meta">Powered by </span>
<a href="https://graph.openaire.eu" class="text-graph">OpenAIRE Research Graph</a>
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<!--Feedback-->
<div class="uk-width-expand uk-text-right">
<span class="uk-text-meta">Send us your </span>
<a class="uk-link" [href]="feedback" target="_self">feedback</a>
<span class="uk-text-meta">.</span>
</div>
<div class="uk-margin-medium-top uk-text-small uk-flex hideInfo">
<!-- Last Stats Date-->
<div class="uk-width-2-3@m uk-width-1-2">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-baseline uk-text-meta">Powered by </span>
<a href="https://graph.openaire.eu" class="text-graph">OpenAIRE Research Graph</a>
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
</ng-template>
</div>
<!--Feedback-->
<div class="uk-width-expand uk-text-right">
<span class="uk-text-meta">Send us your </span>
<a class="uk-link" [href]="feedback" target="_self">feedback</a>
<span class="uk-text-meta">.</span>
</div>
</div>
</ng-template>
</div>
</div>
</div>

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit fd9794ec3aa5fd031a3642febf4c2a4d20425cd7
Subproject commit 6a7559a3ad226e25eeea9c39cb62fa960438d6ef

8
src/app/topic/topic.component.html
View File

@ -142,17 +142,17 @@
<div *ngIf="stakeholder && filters" page-content>
<div header>
<div *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex]">
<div class="uk-flex uk-margin-top uk-flex-middle info">
<div class="uk-flex uk-margin-medium-top uk-flex-middle info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Indicators</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Indicators</div>
<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
</div>
</div>
<div actions>
<div class="uk-margin-top uk-margin-bottom">
<div class="uk-margin-medium-top uk-margin-bottom">
<ul *ngIf="stakeholder.topics[topicIndex]" #categories transition-group class="uk-tab">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
<li class="uk-visible-toggle uk-flex" [class.uk-active]="categoryIndex === i" transition-group-item>

8
src/app/users/users.component.html
View File

@ -5,14 +5,14 @@
</div>
<role-users *ngIf="!loading && stakeholder" [id]="stakeholder.alias" [type]="stakeholder.type" [name]="stakeholder.name" [link]="link" [role]="tab" [message]="messages.get(tab)"
[emailComposer]="emailComposer" [notificationFn]="notificationFn">
<div class="uk-flex uk-flex-middle uk-margin-top info">
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage {{users}}</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Users</div>
<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
<ul class="uk-tab">
<ul class="uk-tab uk-margin-remove-bottom uk-margin-medium-top">
<li [class.uk-active]="tab === 'manager'"><a routerLink="../manager">Managers</a></li>
<li [class.uk-active]="tab === 'member'"><a routerLink="../member">Members</a></li>
</ul>

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit c645362896b10ae00563f38337aa0011c640cb20
Subproject commit adf1b6d5f5e8fb1568615b0fc596a0f39beab3e6

1
src/assets/monitor-dashboard-custom.less
View File

@ -32,6 +32,7 @@
@list-primary-color: @monitor-color;
/* Navbar */
@inverse-navbar-background: @monitor-color;
@inverse-navbar-background-image: url("banner.jpg");
/** Text */

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit ee5eeb0ccc7e8a1b7086730fbce597faa9b25b13
Subproject commit eb5739ab8271aa71c8e58998ab88c61878f8788d