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

1. Remove PreloadAllModules from app-routing. 2. Replace deprecated icons with Material icons. 3. Redesign indicators page base on new theme.

This commit is contained in:
Konstantinos Triantafyllou 2022-04-09 16:25:09 +03:00
parent e4aa85c003
commit 3c7e7963f5
21 changed files with 423 additions and 522 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import {NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router'; import {NoPreloading, PreloadAllModules, RouterModule, Routes} from '@angular/router';
import {OpenaireErrorPageComponent} from './error/errorPage.component'; import {OpenaireErrorPageComponent} from './error/errorPage.component';
import {AdminLoginGuard} from "./openaireLibrary/login/adminLoginGuard.guard"; import {AdminLoginGuard} from "./openaireLibrary/login/adminLoginGuard.guard";
import {AdminDashboardGuard} from "./utils/adminDashboard.guard"; import {AdminDashboardGuard} from "./utils/adminDashboard.guard";
@ -62,9 +62,7 @@ const routes: Routes = [
]; ];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes, { imports: [RouterModule.forRoot(routes)],
preloadingStrategy: PreloadAllModules
})],
exports: [RouterModule] exports: [RouterModule]
}) })
export class AppRoutingModule { export class AppRoutingModule {

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

@ -2,7 +2,7 @@
<loading [full]="true"></loading> <loading [full]="true"></loading>
</div> </div>
<div *ngIf="!loading"> <div *ngIf="!loading">
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar && (!hasAdminMenu || hasAdminMenu && adminMenuItems?.length > 0)" <div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
[class.sidebar_mini]="!open && hasSidebar && (!hasAdminMenu || hasAdminMenu && adminMenuItems?.length > 0)" [class.stakeholderPage]="isFrontPage"> [class.sidebar_mini]="!open && hasSidebar && (!hasAdminMenu || hasAdminMenu && adminMenuItems?.length > 0)" [class.stakeholderPage]="isFrontPage">
<navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader" <navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar> [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>

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

@ -81,9 +81,9 @@ export class AppComponent implements OnInit, OnDestroy {
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
if (this.layoutService.isSmallScreen && event.target.innerWidth > 1219) { if (this.layoutService.isSmallScreen && event.target.innerWidth > 640) {
this.layoutService.setSmallScreen(false); this.layoutService.setSmallScreen(false);
} else if (!this.layoutService.isSmallScreen && event.target.innerWidth < 1219) { } else if (!this.layoutService.isSmallScreen && event.target.innerWidth <= 640) {
this.layoutService.setSmallScreen(true); this.layoutService.setSmallScreen(true);
this.layoutService.setOpen(false); this.layoutService.setOpen(false);
} }
@ -112,8 +112,8 @@ export class AppComponent implements OnInit, OnDestroy {
this.route.queryParams.subscribe(params => { this.route.queryParams.subscribe(params => {
this.isViewPublic = (params['view'] == 'public'); this.isViewPublic = (params['view'] == 'public');
}); });
this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219)); this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth <= 640));
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219)); this.layoutService.setOpen(!(this.innerWidth && this.innerWidth <= 640));
this.subscriptions.push(this.params.subscribe(params => { this.subscriptions.push(this.params.subscribe(params => {
if (this.paramsResolved) { if (this.paramsResolved) {
this.loading = true; this.loading = true;
@ -158,7 +158,7 @@ export class AppComponent implements OnInit, OnDestroy {
} else { } else {
LinksResolver.resetProperties(); LinksResolver.resetProperties();
this.stakeholderService.setStakeholder(null); this.stakeholderService.setStakeholder(null);
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219)); this.layoutService.setOpen(!(this.innerWidth && this.innerWidth <= 640));
this.stakeholder = null; this.stakeholder = null;
this.buildMenu(); this.buildMenu();
this.loading = false; this.loading = false;
@ -387,8 +387,8 @@ export class AppComponent implements OnInit, OnDestroy {
this.specialSideBarMenuItem = null; this.specialSideBarMenuItem = null;
if (Session.isPortalAdministrator(this.user)) { if (Session.isPortalAdministrator(this.user)) {
this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, {name: 'settings'})); this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, {name: 'settings'}));
this.adminMenuItems.push(new MenuItem("super_admin", "Super Admin Options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'})); 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("stakeholders", "Monitor Options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'})); this.adminMenuItems.push(new MenuItem("stakeholders", "Monitor Options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, 'admin/monitor/admin-tools'));
} }
} }
} }

4
src/app/general/edit-stakeholder/edit-stakeholder.component.ts
View File

@ -71,7 +71,7 @@ declare var UIkit;
</div> </div>
<div class="uk-margin-left"> <div class="uk-margin-left">
<button (click)="remove()" class="uk-button-default uk-icon-button"> <button (click)="remove()" class="uk-button-default uk-icon-button">
<icon name="remove"></icon> <icon name="delete"></icon>
</button> </button>
</div> </div>
<div class="uk-margin-small-left"> <div class="uk-margin-small-left">
@ -81,7 +81,7 @@ declare var UIkit;
</div> </div>
</div> </div>
<!-- Full width error message --> <!-- Full width error message -->
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div> <div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top uk-width-1-1">{{uploadError}}</div>
</div> </div>
<div [class]="canChooseType ? 'uk-width-1-3@m' : 'uk-width-1-2@m'"> <div [class]="canChooseType ? 'uk-width-1-3@m' : 'uk-width-1-2@m'">
<div input [formInput]="stakeholderFb.get('visibility')" <div input [formInput]="stakeholderFb.get('visibility')"

6
src/app/general/edit-stakeholder/edit-stakeholder.module.ts
View File

@ -4,8 +4,6 @@ import {CommonModule} from "@angular/common";
import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module"; import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
import {ReactiveFormsModule} from "@angular/forms"; import {ReactiveFormsModule} from "@angular/forms";
import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module"; import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
import {cloud_upload, edit, remove} from "../../openaireLibrary/utils/icons/icons";
import {NotifyFormModule} from "../../openaireLibrary/notifications/notify-form/notify-form.module"; import {NotifyFormModule} from "../../openaireLibrary/notifications/notify-form/notify-form.module";
@NgModule({ @NgModule({
@ -14,7 +12,5 @@ import {NotifyFormModule} from "../../openaireLibrary/notifications/notify-form/
exports: [EditStakeholderComponent] exports: [EditStakeholderComponent]
}) })
export class EditStakeholderModule { export class EditStakeholderModule {
constructor(private iconsService: IconsService) { constructor() {}
this.iconsService.registerIcons([remove, edit, cloud_upload]);
}
} }

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

@ -1,11 +1,17 @@
<div page-content> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header> <div header>
<div class="uk-flex uk-flex-middle uk-margin-top info"
[class.uk-active]="stickyPageHeader">
<div>
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">
Admin Dashboard - Manage profiles
</div>
</div>
</div>
<ul *ngIf="isCurator()" class="uk-tab uk-margin-top" uk-tab> <ul *ngIf="isCurator()" class="uk-tab uk-margin-top" uk-tab>
<li [class.uk-active]="tab === 'all'"><a routerLink="./"><span class="title">All</span></a></li> <li [class.uk-active]="tab === 'all'"><a (click)="tab = 'all'">All</a></li>
<li [class.uk-active]="tab === 'templates'"><a routerLink="./" fragment="templates"><span class="title">Profile templates</span></a> <li [class.uk-active]="tab === 'templates'"><a (click)="tab = 'templates'">Profile templates</a></li>
</li> <li [class.uk-active]="tab === 'profiles'"><a (click)="tab = 'profiles'">Profiles</a></li>
<li [class.uk-active]="tab === 'profiles'"><a routerLink="./" fragment="profiles"><span
class="title">Profiles</span></a></li>
</ul> </ul>
</div> </div>
<div inner> <div inner>
@ -16,9 +22,9 @@
<div *ngIf="loading" class="uk-margin-medium-top uk-padding-large"> <div *ngIf="loading" class="uk-margin-medium-top uk-padding-large">
<loading></loading> <loading></loading>
</div> </div>
<div *ngIf="!loading" class="uk-section uk-section-small" uk-height-match="target: .titleContainer; row: false"> <div *ngIf="!loading" uk-height-match="target: .titleContainer; row: false">
<div uk-height-match="target: .logoContainer; row: false"> <div uk-height-match="target: .logoContainer; row: false">
<div *ngIf="tab != 'profiles' && isCurator()" class="uk-margin-medium-top"> <div *ngIf="tab != 'profiles' && isCurator()" class="uk-section">
<h4>Profile Templates</h4> <h4>Profile Templates</h4>
<div class="uk-grid uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m uk-grid-match" uk-grid> <div class="uk-grid uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m uk-grid-match" uk-grid>
<ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder> <ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder>
@ -34,7 +40,7 @@
No profiles to manage yet No profiles to manage yet
</h4> </h4>
</div> </div>
<div *ngIf="tab != 'templates' && isManager()" class="uk-margin-large-top"> <div *ngIf="tab != 'templates' && isManager()" class="uk-section">
<h4>Profiles</h4> <h4>Profiles</h4>
<div class="uk-grid uk-grid-match uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m" uk-grid <div class="uk-grid uk-grid-match uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m" uk-grid
uk-height-match="target: .name;"> uk-height-match="target: .name;">

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

@ -33,6 +33,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
public stakeholder: Stakeholder; public stakeholder: Stakeholder;
public index: number; public index: number;
public user = null; public user = null;
public stickyPageHeader: boolean = false;
public tab: Tab = 'all'; public tab: Tab = 'all';
/** /**
* Filtered Stakeholders * Filtered Stakeholders
@ -66,13 +67,6 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
} }
ngOnInit(): void { ngOnInit(): void {
this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
if (this.isTab(fragment)) {
this.tab = fragment;
} else {
this.tab = 'all';
}
}));
this.buildFilters(); this.buildFilters();
this.properties = properties; this.properties = properties;
this.title.setTitle('Manage profiles'); this.title.setTitle('Manage profiles');

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

@ -168,9 +168,9 @@
<iframe *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'" <iframe *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl" [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe> class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'" <div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
class="uk-alert uk-alert-danger uk-text-center"> <img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
I frames preview is disabled src="assets/chart-placeholder.png">
</div> </div>
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'" <img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl" [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
@ -240,7 +240,7 @@
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container> <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
</div> </div>
<div *ngIf="!user" class="uk-margin-top"><a class="uk-link" (click)="logIn()"> Sign in</a> to apply filters.</div> <div *ngIf="!user" class="uk-margin-top"><a class="uk-link" (click)="logIn()"> Sign in</a> to apply filters.</div>
<ul *ngIf="user" class="uk-list uk-list-divider uk-margin-top"> <ul *ngIf="user" class="uk-list uk-list-xlarge uk-list-divider uk-margin-top">
<li> <li>
<range-filter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear" [mandatoryRange]="true" <range-filter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear" [mandatoryRange]="true"
(onFilterChange)="filter()"></range-filter> (onFilterChange)="filter()"></range-filter>

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

@ -116,7 +116,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
let subscription: Subscription; let subscription: Subscription;
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user; this.user = user;
this.subscriptions.push(this.route.params.subscribe(params => { this.subscriptions.push(this.route.params.subscribe(params => {
this.loading = true; this.loading = true;
this.activeTopic = null; this.activeTopic = null;

2
src/app/monitor/monitor.module.ts
View File

@ -23,7 +23,7 @@ import {SearchFilterModule} from "../openaireLibrary/searchPages/searchUtils/sea
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module"; import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
import {IconsService} from '../openaireLibrary/utils/icons/icons.service'; import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
import {IconsModule} from '../openaireLibrary/utils/icons/icons.module'; import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
import {done, filters, incognito} from "../openaireLibrary/utils/icons/icons"; import {filters, incognito} from "../openaireLibrary/utils/icons/icons";
import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module"; import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
@NgModule({ @NgModule({

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit c8187161905d88e4def274a3cd942a262e4d21e8 Subproject commit 41d5926be3265f11808c954d5e4efe9737a1f8d3

79
src/app/topic/indicators.component.css
View File

@ -2,17 +2,76 @@
min-height: 270px; min-height: 270px;
} }
div[id*="number-"] .uk-card-body {
padding-top: 60px;
}
div[id*="chart-"] .uk-card-body {
padding-top: 75px;
}
.number-preview { .number-preview {
border: 1px solid #D1D1D1; border: 1px solid var(--muted-color);
border-radius: 4px; background: transparent;
border-radius: 6px;
min-width: 100px; min-width: 100px;
min-height: 70px; min-height: 70px;
} }
.refresh-indicator {
background-color: rgba(0, 0, 0, 0.50);
border-radius: 6px;
position: absolute;
color: var(--light-color);
z-index: 1;
}
.section {
padding: 60px 45px;
border-radius: 6px;
border: 1px solid var(--muted-color);
position: relative;
background: var(--light-color);
border-left: 5px var(--primary-color) solid;
}
.section .tools {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
width: 50px;
max-width: 50px;
padding: 5px 0 5px 10px;
background-image: var(--dashboard-primary-image);
color: var(--light-color);
-webkit-clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
display: none;
}
.section:hover .tools {
display: block;
}
.section:hover .tools a {
color: currentColor;
}
/* New section*/
.new-section {
border: #707070 dashed 1px;
border-radius: 2px;
background-color: white;
min-height: 200px;
position: relative;
box-shadow: 0 2px 6px #00000038;
}
.new-section .tools {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.new-section .tools .md-btn .material-icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}

688
src/app/topic/indicators.component.html
View File

@ -1,256 +1,218 @@
<div *ngIf="stakeholder && canEdit" class="uk-section"> <div *ngIf="stakeholder && canEdit" class="uk-section">
<div *ngIf="numberSections"> <div *ngIf="numberSections">
<h6 class="uk-text-bold">Number Indicators</h6> <h5 class="uk-text-bold">Number Indicators</h5>
<ng-template ngFor [ngForOf]="numbers" let-number let-i="index"> <div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
<div class="section uk-margin-top uk-padding-small"> <div *ngFor="let number of numbers; let i=index">
<div class="tools"> <div class="section">
<div class="actions"> <div class="tools">
<a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')" <div class="actions uk-flex uk-flex-middle">
title="Create a new section"> <a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
<icon name="add"></icon> title="Create a new section">
</a> <icon name="add" [flex]="true"></icon>
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>--> </a>
<a [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')" <a [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
(click)="deleteSectionOpen(number, i, 'number', 'delete')"> (click)="deleteSectionOpen(number, i, 'number', 'delete')">
<icon name="close"></icon> <icon name="close" [flex]="true"></icon>
</a> </a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">--> <!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"--> <!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"--> <!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
<!-- (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">highlight_off</i>--> <!-- (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">highlight_off</i>-->
<!-- </button>--> <!-- </button>-->
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"--> <!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"--> <!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
<!-- (click)="deleteSectionOpen(number, i, 'number', 'disconnect')"><i class="material-icons">link_off</i>--> <!-- (click)="deleteSectionOpen(number, i, 'number', 'disconnect')"><i class="material-icons">link_off</i>-->
<!-- </button>--> <!-- </button>-->
<!-- </ng-container>--> <!-- </ng-container>-->
</div>
</div> </div>
</div> <div *ngIf="numberSections.at(i)" class="uk-margin-medium-bottom">
<div *ngIf="numberSections.at(i)" class="uk-margin-medium-bottom"> <div input [formInput]="numberSections.at(i).get('title')"
<div dashboard-input [formInput]="numberSections.at(i).get('title')" (focusEmitter)="saveSection($event, numberSections.at(i), i, 'number')"
[extraLeft]="false" class="uk-width-1-3@m uk-width-1-1" placeholder="Title" class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
inputClass="input-borderless uk-h5 uk-margin-remove"> </div>
<div [class.uk-invisible]="numberSections.at(i).get('title').pristine"> <div [id]="'number-' + number._id" class="uk-grid-match uk-grid-small uk-grid" uk-sortable="group: chart" uk-grid>
<button class="uk-button uk-button-secondary" [disabled]="editing" <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
(click)="saveSection(numberSections.at(i).value, i, 'number')"> <div *ngIf="indicator" [id]="indicator._id"
Save [ngClass]="getNumberClassBySize(indicator.width)">
</button> <div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-column uk-flex-center uk-position-relative">
<div [attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
<a class="uk-link-reset uk-flex uk-flex-middle" (click)="$event.stopPropagation();$event.preventDefault()">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li>
<a (click)="editNumberIndicatorOpen(number, indicator._id); hide(element)">Edit</a>
</li>
<li class="uk-nav-divider"></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li>
<a (click)="changeIndicatorStatus(number._id, indicator, v.value);">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="indicator.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
</div>
</a>
</li>
</ng-template>
<hr *ngIf="!indicator.defaultId" class="uk-nav-divider">
<li *ngIf="!indicator.defaultId && !editing"><a
(click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a>
</li>
</ul>
</div>
</div>
<div class="uk-text-center">
<h3 class="number uk-text-bold uk-text-primary-gradient">
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</h3>
<div class="uk-text-uppercase uk-text-small uk-margin-top">
{{indicator.name ? indicator.name : 'No title available'}}
</div>
</div>
</div>
</div>
</ng-template>
</div>
<div class="uk-margin-medium-top">
<div class="uk-grid uk-grid-small" uk-grid>
<div [ngClass]="getNumberClassBySize('small')">
<a class="uk-card uk-card-default uk-card-body uk-link-reset" (click)="editNumberIndicatorOpen(number)">
<h6 class="uk-text-bold uk-text-center">
Create a new number Indicator
</h6>
<div class="uk-flex uk-flex-center uk-text-primary-gradient uk-margin-large-top">
<icon name="add" [flex]="true" ratio="3"></icon>
</div>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div [id]="'number-' + number._id" class="uk-grid-match uk-grid-small uk-grid" uk-sortable="group: chart" uk-grid> </div>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <div>
<div *ngIf="indicator" [id]="indicator._id" <ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container>
[ngClass]="getNumberClassBySize(indicator.width)"> </div>
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center uk-position-relative uk-card-hover"> </div>
<div class="uk-card-body"> </div>
<ng-container <div *ngIf="chartSections" class="uk-margin-large-top">
*ngTemplateOutlet="visibilityOptions; context:{indicator: indicator, sectionId: number._id}"></ng-container> <h5 class="uk-text-bold">Chart Indicators</h5>
<div <div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
[attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'" <div *ngFor="let chart of charts; let i=index">
class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable"> <div class="section uk-margin-top uk-padding-small">
<i [class]="exportLoading ? 'uk-disabled ' : ' '" uk-icon="more-vertical" <div class="tools">
(click)="$event.stopPropagation();$event.preventDefault()"></i> <div class="actions uk-flex uk-flex-middle">
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"> <a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
title="Create a new section">
<icon name="add" [flex]="true"></icon>
</a>
<a [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
(click)="deleteSectionOpen(chart, i, 'chart', 'delete')">
<icon name="close" [flex]="true"></icon>
</a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material-icons">highlight_off</i>-->
<!-- </button>-->
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'disconnect')"><i class="material-icons">link_off</i>-->
<!-- </button>-->
<!-- </ng-container>-->
</div>
</div>
<div *ngIf="chartSections.at(i)"
class="uk-margin-medium-bottom">
<div input [formInput]="chartSections.at(i).get('title')"
(focusEmitter)="saveSection($event, chartSections.at(i), i)"
class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
</div>
<div [id]="'chart-' + chart._id" class="uk-grid-match uk-grid-small uk-grid" uk-sortable="group: chart" uk-grid>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="indicator" [id]="indicator._id" [ngClass]="getChartClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<div [attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
<a class="uk-link-reset uk-flex uk-flex-middle" (click)="$event.stopPropagation();$event.preventDefault()">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngIf="!editing"><a <li>
(click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li> <a (click)="editChartIndicatorOpen(chart, indicator._id); hide(element)">Edit</a>
</li>
<li class="uk-nav-divider"></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v> <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li *ngIf="indicator.visibility != v.value"><a (click)="changeIndicatorStatus(number._id, <li>
indicator, v.value); hide(element)"> <a (click)="changeIndicatorStatus(chart._id, indicator, v.value);">
{{'Make ' + v.label.toLowerCase()}}</a> <div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="indicator.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
</div>
</a>
</li> </li>
</ng-template> </ng-template>
<hr *ngIf="!indicator.defaultId" class="uk-nav-divider"> <hr *ngIf="!indicator.defaultId" class="uk-nav-divider">
<li *ngIf="!indicator.defaultId && !editing"><a <li *ngIf="!indicator.defaultId && !editing"><a
(click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a> (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete</a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete from all profiles</a>-->
<!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
<!-- </ng-container>-->
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div> <div>
<div class="uk-text-center uk-text-bold"> <div *ngIf="indicator.name" class="uk-text-center uk-text-bold uk-margin-small-bottom">
{{indicator.name ? indicator.name : 'No title available'}} {{indicator.name}}
</div>
<iframe *ngIf="!properties.disableFrameLoad && indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !=='image' &&
safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && indicator.indicatorPaths[0].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>
<div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
<img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
[src]="indicator.indicatorPaths[0].url">
</div> </div>
<h3 class="uk-margin-medium-top uk-text-center uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</h3>
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>--> <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div> </div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-overlay uk-position-bottom">
<div class="uk-padding multi-line-ellipsis lines-3">
<p class="uk-margin-remove">
<span *ngIf="indicator.description">
{{indicator.description}}
</span>
<br>
<span *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</span>
</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </ng-template>
</ng-template> </div>
</div> <div class="uk-margin-medium-top">
<div class="uk-margin-medium-top"> <div class="uk-grid uk-grid-small" uk-grid>
<div class="uk-grid uk-grid-small" uk-grid> <div [ngClass]="getChartClassBySize('small')">
<div [ngClass]="getNumberClassBySize('small')"> <div class=" uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
<div class="uk-card uk-card-default uk-card-body clickable" (click)="editNumberIndicatorOpen(number)"> <h5 class="uk-text-bold">
<h6 class="uk-text-bold uk-text-center"> Create a custom indicator
Create a new number Indicator </h5>
</h6> <div class="uk-text-muted uk-text-small">
<div class="uk-flex uk-flex-center uk-text-secondary uk-margin-large-top"> Use our advance tool to create a custom Indicator that suit the needs of your funding
<icon name="add" ratio="4"></icon> KPI's.
</div>
<div class="uk-flex uk-flex-center uk-text-primary-gradient uk-margin-medium-top">
<icon name="add" ratio="3" [flex]="true"></icon>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ng-template> <div>
<ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container> <ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
</div>
<div *ngIf="chartSections" class="uk-margin-large-top">
<h6 class="uk-text-bold">Chart Indicators</h6>
<ng-template ngFor [ngForOf]="charts" let-chart let-i="index">
<div class="section uk-margin-top uk-padding-small">
<div class="tools">
<div class="actions">
<a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
title="Create a new section">
<icon name="add"></icon>
</a>
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
<a [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
(click)="deleteSectionOpen(chart, i, 'chart', 'delete')">
<icon name="close"></icon>
</a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material-icons">highlight_off</i>-->
<!-- </button>-->
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'disconnect')"><i class="material-icons">link_off</i>-->
<!-- </button>-->
<!-- </ng-container>-->
</div>
</div>
<div *ngIf="chartSections.at(i)"
class="uk-margin-medium-bottom">
<div dashboard-input [formInput]="chartSections.at(i).get('title')"
[extraLeft]="false" class="uk-width-1-3@m uk-width-1-1" placeholder="Title"
inputClass="input-borderless uk-h5 uk-margin-remove">
<div [class.uk-invisible]="chartSections.at(i).get('title').pristine">
<button class="uk-button uk-button-secondary" [disabled]="editing"
(click)="saveSection(chartSections.at(i).value, i)">
Save
</button>
</div>
</div>
</div>
<div [id]="'chart-' + chart._id" class="uk-grid-match uk-grid-small uk-grid" uk-sortable="group: chart" uk-grid>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="indicator" [id]="indicator._id"
[ngClass]="getChartClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-card-hover">
<ng-container
*ngTemplateOutlet="visibilityOptions; context:{indicator: indicator, sectionId: chart._id}"></ng-container>
<div
[attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
<i [class]="exportLoading ? 'uk-disabled ' : ' '" uk-icon="more-vertical"
(click)="$event.stopPropagation();$event.preventDefault()"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li *ngIf="!editing"><a
(click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a>
</li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li *ngIf="indicator.visibility != v.value"><a (click)="changeIndicatorStatus(chart._id,
indicator, v.value); hide(element)">
{{'Make ' + v.label.toLowerCase()}}</a>
</li>
</ng-template>
<hr *ngIf="!indicator.defaultId " class="uk-nav-divider">
<li *ngIf="!editing && !indicator.defaultId "><a
(click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">
Delete</a>
<!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete from all profiles</a>-->
<!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
</li>
</ul>
</div>
</div>
<div>
<div *ngIf="indicator.name" class="uk-text-center uk-text-bold uk-margin-small-bottom">
{{indicator.name}}
</div>
<iframe *ngIf="!properties.disableFrameLoad && indicator.indicatorPaths[0] &&
indicator.indicatorPaths[0].source !=='image' && safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad &&
indicator.indicatorPaths[0].source !==
'image'" class="uk-alert uk-alert-danger uk-text-center">I frames
preview is disabled
</div>
<div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
<img [class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')"
[src]="indicator.indicatorPaths[0].url">
</div>
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-overlay uk-position-bottom">
<div class="uk-padding multi-line-ellipsis lines-3">
<p class="uk-margin-remove">
<span *ngIf="indicator.description">
{{indicator.description}}
</span>
<br>
<span *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</span>
</p>
</div>
</div>
</div>
</div>
</ng-template>
</div>
<div class="uk-margin-medium-top">
<div class="uk-grid uk-grid-small" uk-grid>
<div [ngClass]="getChartClassBySize('small')">
<div class=" uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
<h5 class="uk-text-bold">
Create a custom indicator
</h5>
<div class="uk-text-muted uk-text-small">
Use our advance tool to create a custom Indicator that suit the needs of your funding
KPI's.
</div>
<div class="uk-flex uk-flex-center uk-text-secondary uk-margin-medium-top">
<icon name="add" ratio="5"></icon>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</ng-template> </div>
<ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
</div> </div>
</div> </div>
<modal-alert #editNumberModal <modal-alert #editNumberModal
@ -259,114 +221,90 @@
[okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)"> [okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
<div class="uk-padding-small"> <div class="uk-padding-small">
<div *ngIf="numberIndicatorFb" class="uk-grid" [formGroup]="numberIndicatorFb" uk-grid> <div *ngIf="numberIndicatorFb" class="uk-grid" [formGroup]="numberIndicatorFb" uk-grid>
<div dashboard-input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" placeholder="Write a title" <div input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" placeholder="Title"></div>
label="Title"></div> <div *ngIf="stakeholder.defaultId !=-1 && ( (indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
<div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId !=-1 && ( (indicator.description && input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('description')" placeholder="Profile description" type="textarea">
indicator.description.length > 0) || !stakeholder.defaultId)"
[formInput]="numberIndicatorFb.get('description')"
placeholder="Write a description"
label="Profile description" type="textarea">
</div> </div>
<div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId" <div input class="uk-width-1-1" *ngIf="stakeholder.defaultId" [formInput]="numberIndicatorFb.get('additionalDescription')"
[formInput]="numberIndicatorFb.get('additionalDescription')" placeholder="Description" type="textarea">
placeholder="Write a description"
label="Description" type="textarea">
</div> </div>
<div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('visibility')" <div input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('visibility')"
placeholder="Select a status" placeholder="Visibility" [options]="stakeholderUtils.visibility" type="select">
label="Visibility" [options]="stakeholderUtils.visibility" type="select">
</div> </div>
<div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')" <div input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
type="select" [options]="indicatorUtils.indicatorSizes" placeholder="Number Size" [options]="indicatorUtils.indicatorSizes" type="select">
placeholder="Select a size" label="Number Size">
</div> </div>
<div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths"> <div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
<div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index" <div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index" [formGroupName]="i">
[formGroup]="indicatorPath">
<div class="uk-grid" uk-grid> <div class="uk-grid" uk-grid>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<div class="uk-grid" uk-grid> <div class="uk-grid" uk-grid>
<div class="uk-width-1-1 uk-flex uk-flex-between uk-flex-bottom"> <div class="uk-width-1-1 uk-flex uk-flex-middle">
<div dashboard-input [formInput]="indicatorPath.get('url')" label="Number URL" <div input class="uk-width-expand" [formInput]="indicatorPath.get('url')" placeholder="Number URL">
placeholder="Write a URL" class='uk-width-1-1' id="numberURL">
<div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div> <div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div>
</div> </div>
<div class='uk-padding-small'> <div class='uk-padding-small'>
<i class="clickable" uk-icon="copy" (click)="copyToClipboard('numberURL')" uk-tooltip="Copy URL"></i> <a class="uk-link-reset" (click)="copyToClipboard('numberURL')"><icon [flex]="true" name="content_copy"></icon></a>
</div> </div>
</div> </div>
<div *ngIf="showCheckForSchemaEnhancements" class=" uk-width-1-1 "> <div *ngIf="showCheckForSchemaEnhancements" class="uk-width-1-1">
<div class="uk-alert uk-alert-warning"> <div class="uk-alert uk-alert-warning">
There are schema enhancements that can be applied in this query. <a There are schema enhancements that can be applied in this query.<a
(click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply (click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply
now</a> now</a>
</div> </div>
</div> </div>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<div dashboard-input [formInput]="indicatorPath.get('source')" label="Source" <div input [formInput]="indicatorPath.get('source')" placeholder="Source"
type="select" placeholder="Select a source" [options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes" type="select">
[options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div formArrayName="jsonPath" class="uk-width-1-1"> <div formArrayName="jsonPath" class="uk-width-1-1">
<h6 class="uk-text-bold uk-flex uk-flex-middle uk-margin-remove-bottom"> <h6 class="uk-text-bold uk-margin-remove-bottom">
<span>JSON Path</span> <span>JSON Path</span>
</h6> </h6>
<div <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
*ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
<div class="uk-text-danger uk-text-small"> <div class="uk-text-danger uk-text-small">
This JSON path is not valid or the result has not been calculated yet. This JSON path is not valid or the result has not been calculated yet.
Please press calculate on box below to see the result. Please press calculate on box below to see the result.
</div> </div>
</div> </div>
<div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-margin-top" uk-grid> <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-margin-top uk-flex-middle" uk-grid>
<div *ngFor="let jsonPath of getJsonPath(i).controls; let j=index" class="uk-flex uk-flex-middle"> <div *ngFor="let jsonPath of getJsonPath(i).controls; let j=index" class="uk-flex uk-flex-middle">
<div dashboard-input class="uk-width-1-1" <div input class="uk-width-1-1" [formInput]="jsonPath" [placeholder]="'Level ' + +(j + 1)"></div>
[extraLeft]="false" <a [class.uk-invisible]="getJsonPath(i).length === 1 || numberIndicatorFb.get('defaultId').value"
[formInput]="jsonPath" class="uk-margin-small-left uk-text-danger"
placeholder="Write a field" [class.uk-disabled]="getJsonPath(i).disabled"
[label]="'Level ' + +(j + 1)"> (click)="removeJsonPath(i, j)">
<div class="uk-flex uk-flex-middle"> <icon name="close"></icon>
<span *ngIf="getJsonPath(i).length !== 1" </a>
[class.uk-hidden]="numberIndicatorFb.get('defaultId').value" <span [class.uk-invisible]="getJsonPath(i).disabled || j === (getJsonPath(i).controls.length - 1)" class="uk-text-center uk-margin-small-left">
class="uk-margin-small-left uk-text-danger clickable" <icon name="east"></icon>
[class.uk-disabled]="getJsonPath(i).disabled" </span>
(click)="removeJsonPath(i, j)">
<icon name="close"></icon>
</span>
<span class="uk-text-center uk-margin-left">
<icon *ngIf="indicator.defaultId === null || j < (getJsonPath(i).controls.length - 1)"
name="arrow_right"></icon>
</span>
</div>
</div>
</div> </div>
<div *ngIf="indicator.defaultId === null" class="uk-flex uk-flex-middle"> <div *ngIf="indicator.defaultId === null">
<button class="uk-icon-button uk-button-secondary uk-margin-medium-top" <button class="uk-icon-button uk-button-primary" (click)="addJsonPath(i)">
(click)="addJsonPath(i)"> <icon name="add" [flex]="true"></icon>
<icon name="add"></icon>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-width-1-1 uk-flex uk-flex-center"> <div class="uk-width-1-1 uk-flex uk-flex-center">
<div class="uk-flex uk-position-relative"> <div class="uk-flex uk-position-relative">
<span class="uk-padding number number-preview uk-text-center"> <span class="uk-padding number number-preview uk-flex uk-flex-column uk-flex-center uk-text-center">
<span <span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0">
*ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0">
{{numberIndicatorPaths.at(i).get('result').value | number}} {{numberIndicatorPaths.at(i).get('result').value | number}}
</span> </span>
<span <span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">
*ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">
-- --
</span> </span>
</span> </span>
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid" <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid"
class="uk-width-1-1 uk-height-1-1 refresh-indicator"> class="uk-width-1-1 uk-height-1-1 refresh-indicator">
<div class="uk-position-relative uk-height-1-1"> <div class="uk-position-relative uk-height-1-1">
<div class="uk-position-center uk-text-center clickable uk-text-small" <a class="uk-position-center uk-text-center uk-text-small uk-link-reset"
[class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid" [class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid"
(click)="validateJsonPath(i, true)"> (click)="validateJsonPath(i, true)">
<div> <div>
@ -374,7 +312,7 @@
</div> </div>
<span *ngIf="numberIndicatorPaths.at(i).get('result').errors.required">Calculate</span> <span *ngIf="numberIndicatorPaths.at(i).get('result').errors.required">Calculate</span>
<span *ngIf="numberIndicatorPaths.at(i).get('result').errors.validating">Calculating...</span> <span *ngIf="numberIndicatorPaths.at(i).get('result').errors.validating">Calculating...</span>
</div> </a>
</div> </div>
</div> </div>
</div> </div>
@ -386,48 +324,38 @@
<div #editNumberNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div> <div #editNumberNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
</div> </div>
</modal-alert> </modal-alert>
<modal-alert #editChartModal <modal-alert #editChartModal [large]="true" (alertOutput)="saveIndicator()"
[large]="true"
(alertOutput)="saveIndicator()"
[okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)"> [okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
<div class="uk-padding-small"> <div class="uk-padding-small">
<div *ngIf="chartIndicatorFb" [formGroup]="chartIndicatorFb" class="uk-grid" uk-grid> <div *ngIf="chartIndicatorFb" [formGroup]="chartIndicatorFb" class="uk-grid" uk-grid>
<div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" placeholder="Write a title" <div input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" placeholder="Title"></div>
label="Title"></div> <div *ngIf="stakeholder.defaultId !=-1 && ((indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
<div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId !=-1 && input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('description')" placeholder="Default Description" type="textarea">
((indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
[formInput]="chartIndicatorFb.get('description')" placeholder="Write a description"
label="Default Description" type="textarea">
</div> </div>
<div dashboard-input *ngIf="stakeholder.defaultId" class="uk-width-1-1" <div *ngIf="stakeholder.defaultId" input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('additionalDescription')"
[formInput]="chartIndicatorFb.get('additionalDescription')" placeholder="Write a default description" placeholder="Description" type="textarea">
label="Description" type="textarea">
</div> </div>
<div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')" <div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')"
placeholder="Select a status" placeholder="Status" [options]="stakeholderUtils.visibility" type="select">
label="Status" [options]="stakeholderUtils.visibility" type="select">
</div> </div>
<div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('width')" <div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('width')" placeholder="Chart width"
type="select" [options]="indicatorUtils.indicatorSizes" placeholder="Select a size" [options]="indicatorUtils.indicatorSizes" type="select">
label="Chart width">
</div> </div>
<div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('height')" <div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('height')" placeholder="Chart height"
type="select" [options]="indicatorUtils.indicatorSizes" placeholder="Select a size" [options]="indicatorUtils.indicatorSizes" type="select">
label="Chart height">
</div> </div>
<div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths" class="uk-width-1-1"> <div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths" class="uk-width-1-1">
<div *ngFor="let indicatorPath of chartIndicatorPaths.controls; let i=index;" <div *ngFor="let indicatorPath of chartIndicatorPaths.controls; let i=index;"
[formGroup]="indicatorPath" class="uk-grid" uk-grid> [formGroupName]="i" class="uk-grid" uk-grid>
<div class="uk-width-1-1 uk-flex uk-flex-between uk-flex-bottom"> <div class="uk-width-1-1 uk-flex uk-flex-middle">
<div dashboard-input class="uk-width-1-1" <div input class="uk-width-expand" [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
[title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''" [formInput]="indicatorPath.get('url')" placeholder="Chart URL">
[formInput]="indicatorPath.get('url')" placeholder="Write a URL" label="Chart URL" id="chartURL"> <div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div>
<div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div> </div>
</div> <div class='uk-padding-small'>
<div *ngIf='properties.environment == "development"' class='uk-padding-small'> <a class="uk-link-reset" (click)="copyToClipboard('chartURL')"><icon [flex]="true" name="content_copy"></icon></a>
<i class="clickable" uk-icon="copy" (click)="copyToClipboard('chartURL')" uk-tooltip="Copy URL"></i> </div>
</div> </div>
</div>
<div *ngIf="showCheckForSchemaEnhancements" class=" uk-width-1-1 "> <div *ngIf="showCheckForSchemaEnhancements" class=" uk-width-1-1 ">
<div class="uk-alert uk-alert-warning"> <div class="uk-alert uk-alert-warning">
There are schema enchancements that can be applied in this query. <a There are schema enchancements that can be applied in this query. <a
@ -437,59 +365,26 @@
</div> </div>
<div class="uk-width-1-1" formArrayName="parameters"> <div class="uk-width-1-1" formArrayName="parameters">
<div class="uk-grid" uk-grid> <div class="uk-grid" uk-grid>
<div *ngIf="getParameter(i, 'title')" class="uk-width-1-1"> <div *ngIf="getParameter(i, 'title')" input class="uk-width-1-1" [formInput]="getParameter(i, 'title').get('value')"
<div dashboard-input placeholder="Chart Title"></div>
[formInput]="getParameter(i, 'title').get('value')" <div *ngIf="getParameter(i, 'subtitle')" input class="uk-width-1-1" placeholder="Chart Subtitle" [formInput]="getParameter(i, 'subtitle').get('value')" label="Chart Subtitle"></div>
placeholder="Write a title" <div *ngIf="!getParameter(i, 'type')" input class="uk-width-1-3@s" [formInput]="indicatorPath.get('type')" placeholder="Chart Type"
label="Chart Title"></div> [options]="(indicatorPath.get('type').value == 'table' && getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes"
</div> type="select"></div>
<div *ngIf="getParameter(i, 'subtitle')" class="uk-width-1-1"> <div *ngIf="getParameter(i, 'type')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'type').get('value')" placeholder="Chart Type"
<div dashboard-input placeholder="Write a subtitle" [options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)" type="select"></div>
[formInput]="getParameter(i, 'subtitle').get('value')" <div *ngIf="getParameter(i, 'xAxisTitle')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'xAxisTitle').get('value')"
label="Chart Subtitle"></div> placeholder="X-Axis Title"></div>
</div> <div *ngIf="getParameter(i, 'yAxisTitle')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'yAxisTitle').get('value')"
<div *ngIf="!getParameter(i, 'type')" class="uk-width-1-3@s"> placeholder="Y-Axis Title"></div>
<div dashboard-input [formInput]="indicatorPath.get('type')" <div *ngIf="getParameter(i, 'data_title_0')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'data_title_0').get('value')"
type="select" placeholder="Select a type" placeholder="Data Title"></div>
[options]="(indicatorPath.get('type').value == 'table' && getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes" <div *ngIf="getParameter(i, 'data_title_1')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'data_title_1').get('value')"
label="Chart Type"></div> placeholder="Data Title"></div>
</div> <div *ngIf="getParameter(i, 'start_year')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'start_year').get('value')"
<div *ngIf="getParameter(i, 'type')" class="uk-width-1-3@s"> placeholder="Year (From)"></div>
<div dashboard-input [formInput]="getParameter(i, 'type').get('value')" <div *ngIf="getParameter(i, 'end_year')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'end_year').get('value')"
placeholder="Select a type" placeholder="Year (To)"></div>
type="select" [options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)"
label="Chart Type"></div>
</div>
<div *ngIf="getParameter(i, 'xAxisTitle')" class="uk-width-1-3@s">
<div dashboard-input [formInput]="getParameter(i, 'xAxisTitle').get('value')"
placeholder="Write a title for X-Axis"
label="X-Axis Title"></div>
</div>
<div *ngIf="getParameter(i, 'yAxisTitle')" class="uk-width-1-3@s">
<div dashboard-input [formInput]="getParameter(i, 'yAxisTitle').get('value')"
placeholder="Write a title"
label="Y-Axis Title"></div>
</div>
<div *ngIf="getParameter(i, 'data_title_0')" class="uk-width-1-3@s">
<div dashboard-input [formInput]="getParameter(i, 'data_title_0').get('value')"
placeholder="Write a title"
label="Data title"></div>
</div>
<div *ngIf="getParameter(i, 'data_title_1')" class="uk-width-1-3@s">
<div dashboard-input [formInput]="getParameter(i, 'data_title_1').get('value')"
placeholder="Write a title"
label="Data title"></div>
</div>
<div *ngIf="getParameter(i, 'start_year')" class="uk-width-1-3@s">
<div dashboard-input [formInput]="getParameter(i, 'start_year').get('value')"
placeholder="Write a year"
label="Year (From)"></div>
</div>
<div *ngIf="getParameter(i, 'end_year')" class="uk-width-1-3@s">
<div dashboard-input [formInput]="getParameter(i, 'end_year').get('value')"
placeholder="Write a year"
label="Year (To)"></div>
</div>
</div> </div>
</div> </div>
<div *ngIf="indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl" <div *ngIf="indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl"
@ -497,13 +392,12 @@
<div *ngIf="(hasDifference(i)) && !indicatorPath.invalid" <div *ngIf="(hasDifference(i)) && !indicatorPath.invalid"
class="uk-width-1-1 uk-height-large refresh-indicator"> class="uk-width-1-1 uk-height-large refresh-indicator">
<div class="uk-position-relative uk-height-1-1"> <div class="uk-position-relative uk-height-1-1">
<div class="uk-position-center uk-text-center clickable" <a class="uk-position-center uk-text-center uk-link-reset" (click)="refreshIndicator()">
(click)="refreshIndicator()">
<div> <div>
<icon name="refresh"></icon> <icon name="refresh"></icon>
</div> </div>
<span>Click to refresh the graph view</span> <span>Click to refresh the graph view</span>
</div> </a>
</div> </div>
</div> </div>
<iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'" <iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
@ -512,7 +406,7 @@
<!-- <div *ngIf="properties.disableFrameLoad && indicator.indicatorPaths[i].source !== 'image'" class="uk-alert uk-alert-danger uk-text-center">I frames--> <!-- <div *ngIf="properties.disableFrameLoad && indicator.indicatorPaths[i].source !== 'image'" class="uk-alert uk-alert-danger uk-text-center">I frames-->
<!-- preview is disabled</div>--> <!-- preview is disabled</div>-->
<div *ngIf="indicator.indicatorPaths[i].source === 'image'"> <div *ngIf="indicator.indicatorPaths[i].source === 'image'">
<img class="uk-width-1-1 uk-height-large" [src]="indicator.indicatorPaths[i].url"> <img class="uk-width-1-1 uk-height-large uk-blend-multiply" [src]="indicator.indicatorPaths[i].url">
</div> </div>
</div> </div>
</div> </div>
@ -563,41 +457,13 @@
You are about to delete this section and its indicators permanently. You are about to delete this section and its indicators permanently.
Are you sure you want to proceed? Are you sure you want to proceed?
</modal-alert>--> </modal-alert>-->
<ng-template #visibilityOptions let-indicator="indicator" let-sectionId="sectionId">
<span
[attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
class="uk-position-top-left uk-margin-small-left uk-margin-small-top visibility"
[class]="exportLoading ? '' : ' clickable '">
<span [class]="exportLoading ? 'uk-disabled ' : ' '" class="clickable color">
<icon [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"></icon>
</span>
<div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let v of stakeholderUtils.visibility" class="uk-position-relative">
<a *ngIf="indicator.visibility != v.value"
(click)="$event.stopPropagation();changeIndicatorStatus(sectionId, indicator,v.value);hide(element);$event.preventDefault()">
<icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon>
<span> {{v.label}}</span>
</a>
<a *ngIf="indicator.visibility == v.value">
<icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" [ratio]="0.8"></icon>
<span> {{v.label}}</span>
<span class="uk-position-center-right">
<icon customClass="uk-text-secondary" [ratio]="0.5" name="bullet"></icon>
</span>
</a>
</li>
</ul>
</div>
</span>
</ng-template>
<ng-template #new_section let-type="type"> <ng-template #new_section let-type="type">
<div class="new-section uk-margin-large-top"> <div class="section">
<div class="tools uk-flex uk-flex-middle clickable" (click)="createSection(-1, type)"> <div class="uk-flex uk-flex-center" (click)="createSection(-1, type)">
<button class="uk-margin-small-right uk-icon-button uk-button-secondary"> <button class="uk-button uk-button-primary uk-flex uk-flex-middle uk-text-uppercase">
<icon name="add" [ratio]="1.5"></icon> <icon name="add" [ratio]="1.5" [flex]="true"></icon>
<span class="uk-margin-small-left">New section</span>
</button> </button>
<span>Create a new section</span>
</div> </div>
</div> </div>
</ng-template> </ng-template>

66
src/app/topic/indicators.component.ts
View File

@ -18,7 +18,7 @@ import {
Visibility Visibility
} from "../openaireLibrary/monitor/entities/stakeholder"; } from "../openaireLibrary/monitor/entities/stakeholder";
import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils"; import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms"; import {AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {AlertModal} from "../openaireLibrary/utils/modal/alert"; import {AlertModal} from "../openaireLibrary/utils/modal/alert";
import {StatisticsService} from "../utils/services/statistics.service"; import {StatisticsService} from "../utils/services/statistics.service";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class"; import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
@ -1033,37 +1033,39 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
})); }));
} }
saveSection(section: Section, index: number, type: IndicatorType = "chart") { saveSection(focused: boolean, sectionControl: AbstractControl, index: number, type: IndicatorType = "chart") {
this.editing = true; if(!focused && sectionControl.dirty) {
let path = [ this.editing = true;
this.stakeholder._id, let path = [
this.stakeholder.topics[this.topicIndex]._id, this.stakeholder._id,
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id, this.stakeholder.topics[this.topicIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
]; this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
this.subscriptions.push(this.stakeholderService.saveSection(this.properties.monitorServiceAPIURL, section, path, index).subscribe(section => { ];
if (type === 'chart') { this.subscriptions.push(this.stakeholderService.saveSection(this.properties.monitorServiceAPIURL, sectionControl.value, path, index).subscribe(section => {
this.charts[index] = section; if (type === 'chart') {
this.setCharts(); this.charts[index] = section;
} else { this.setCharts();
this.numbers[index] = section; } else {
this.setNumbers(); this.numbers[index] = section;
} this.setNumbers();
this.initReorder(); }
UIkit.notification('Section has been <b>successfully saved</b>', { this.initReorder();
status: 'success', UIkit.notification('Section has been <b>successfully saved</b>', {
timeout: 6000, status: 'success',
pos: 'bottom-right' timeout: 6000,
}); pos: 'bottom-right'
this.editing = false; });
}, error => { this.editing = false;
UIkit.notification(error.error.message, { }, error => {
status: 'danger', UIkit.notification(error.error.message, {
timeout: 6000, status: 'danger',
pos: 'bottom-right' timeout: 6000,
}); pos: 'bottom-right'
this.editing = false; });
})); this.editing = false;
}));
}
} }
createSection(index = -1, type: IndicatorType = 'chart') { createSection(index = -1, type: IndicatorType = 'chart') {

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

@ -6,7 +6,7 @@
<a [routerLink]="'/admin/' + stakeholder.alias"> <a [routerLink]="'/admin/' + stakeholder.alias">
<div class="uk-flex uk-flex-middle uk-flex-center"> <div class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-width-auto"> <div class="uk-width-auto">
<icon class="menu-icon" name="arrow_back" [flex]="true"></icon> <icon class="menu-icon" name="west" [flex]="true"></icon>
</div> </div>
<span class="uk-width-expand uk-text-truncate uk-margin-small-left" [class.uk-hidden]="!open">Indicators</span> <span class="uk-width-expand uk-text-truncate uk-margin-small-left" [class.uk-hidden]="!open">Indicators</span>
</div> </div>
@ -81,8 +81,8 @@
</div> </div>
<div *ngIf="stakeholder && stakeholder.topics.length > 0" class="uk-position-bottom uk-margin-bottom"> <div *ngIf="stakeholder && stakeholder.topics.length > 0" class="uk-position-bottom uk-margin-bottom">
<div class="uk-flex uk-flex-center"> <div class="uk-flex uk-flex-center">
<a class="uk-icon-button uk-button-secondary" uk-tooltip="Preview"> <a class="uk-icon-button uk-button-primary" uk-tooltip="Preview">
<icon name="preview" [ratio]="0.7"></icon> <icon name="visibility" [flex]="true"></icon>
</a> </a>
<div #element uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0; flip: false" <div #element uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal"> class="uk-padding-remove-horizontal">

16
src/app/topic/topic.module.ts
View File

@ -13,19 +13,7 @@ import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module
import {InputModule} from "../openaireLibrary/sharedComponents/input/input.module"; import {InputModule} from "../openaireLibrary/sharedComponents/input/input.module";
import {ClickModule} from "../openaireLibrary/utils/click/click.module"; import {ClickModule} from "../openaireLibrary/utils/click/click.module";
import {IconsService} from "../openaireLibrary/utils/icons/icons.service"; import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
import { import {earth, incognito, restricted} from "../openaireLibrary/utils/icons/icons";
add,
arrow_right,
bullet,
close,
cloud_upload,
done,
earth,
incognito,
preview,
refresh,
restricted
} from "../openaireLibrary/utils/icons/icons";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module"; import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module"; import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module"; import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
@ -49,6 +37,6 @@ import {NotifyFormModule} from "../openaireLibrary/notifications/notify-form/not
}) })
export class TopicModule { export class TopicModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([preview, bullet, add, earth, incognito, restricted, refresh, close, arrow_right, done, cloud_upload]); this.iconsService.registerIcons([earth, incognito, restricted]);
} }
} }

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 77d3480a05f35055d0447844c184b680b3a1a502 Subproject commit c0f2132f4efa10383da21e86a46eab1786694a0f

2
src/assets/dashboard-theme

@ -1 +1 @@
Subproject commit 793534d00535931702ad6bb8e7c085babbcbfc0e Subproject commit 1831614eefba657a94a9548846cff28f5987c670

7
src/assets/monitor-dashboard-custom.css
View File

@ -259,13 +259,6 @@
/* left: 3px;*/ /* left: 3px;*/
/*}*/ /*}*/
/*.refresh-indicator {*/
/* background-color: rgba(0, 0, 0, 0.50);*/
/* border-radius: 4px;*/
/* position: absolute;*/
/* color: white;*/
/*}*/
/*.uk-modal-container .uk-modal-dialog {*/ /*.uk-modal-container .uk-modal-dialog {*/
/* width: 900px;*/ /* width: 900px;*/
/*}*/ /*}*/

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 8864b690f529aa3361406b776152942cf6153b24 Subproject commit 292419ac8255d25af31ab835d22712a36c34f92e