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

[MonitorDashboard]: Make custom css for sidebar width and header height. Add indicators on page. Remove global save. Add indicator filters 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57555 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2019-11-08 15:47:47 +00:00
parent 1c80a95291
commit 153912442d
16 changed files with 444 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,7 @@
<div class="md-card">
<div class="md-card-content uk-position-relative">
<a [routerLink]="" class="uk-position-top-right">
<i (click)="close(newTopic)" class="material-icons">close</i>
<i (click)="hide(newTopic)" class="material-icons">close</i>
</a>
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-1">
@ -61,7 +61,7 @@
<hr>
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
<div>
<button class="md-btn md-btn-small" (click)="close(newTopic)">Cancel</button>
<button class="md-btn md-btn-small" (click)="hide(newTopic)">Cancel</button>
</div>
<div>
<button class="md-btn md-btn-small md-btn-primary uk-float-right" (click)="createTopic(newTopic)">Create</button>

4
src/app/home/home.component.ts
View File

@ -61,7 +61,7 @@ export class HomeComponent implements OnInit, OnDestroy {
this.valid = true;
}
public close(element) {
public hide(element) {
UIkit.drop(element).hide();
}
@ -81,7 +81,7 @@ export class HomeComponent implements OnInit, OnDestroy {
if(this.topic.name && this.topic.name !== '') {
this.topic.alias = this.topic.name.toLowerCase();
this.stakeholder.topics.push(this.topic);
this.close(element);
this.hide(element);
} else {
this.valid = false;
}

25
src/app/library/sharedComponents/loading/loading.component.ts Normal file
View File

@ -0,0 +1,25 @@
import {Component, Input} from "@angular/core";
@Component({
selector: 'loading',
template: `
<div *ngIf="loading" class="uk-flex uk-flex-center uk-margin-small-top">
<div class="md-preloader" [ngClass]="'md-preloader-' + color">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="48" width="48" viewBox="0 0 75 75">
<circle cx="37.5" cy="37.5" r="33.5" stroke-width="4"></circle>
</svg>
</div>
</div>`
})
export class LoadingComponent {
@Input()
public loading: boolean = false;
/**
* Possible values '': blue, 'success': green, 'warning': orange and 'danger': red
*/
@Input() color: string = '';
constructor() {
}
}

18
src/app/library/sharedComponents/loading/loading.module.ts Normal file
View File

@ -0,0 +1,18 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {LoadingComponent} from "./loading.component";
@NgModule({
imports: [
CommonModule,
],
declarations: [
LoadingComponent
],
providers: [],
exports: [
LoadingComponent
]
})
export class LoadingModule {
}

3
src/app/login/libUser.module.ts
View File

@ -9,11 +9,12 @@ import { UserModule} from '../openaireLibrary/login/user.module';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import { SubscribeService } from '../openaireLibrary/utils/subscribe/subscribe.service';
import {EmailService} from "../openaireLibrary/utils/email/email.service";
import {SubscribeModule} from "../utils/subscribe/subscribe.module";
@NgModule({
imports: [
CommonModule, FormsModule,
UserRoutingModule, UserModule
UserRoutingModule, UserModule, SubscribeModule
],
providers:[PreviousRouteRecorder, SubscribeService, EmailService],
declarations: [

2
src/app/login/user.component.ts
View File

@ -38,7 +38,7 @@ import {ConnectHelper} from '../openaireLibrary/connect/connectHelper';
</div>
</div>
<!--<subscribe [communityId]="communityId" [showTemplate]= false class="" (subscribeEvent)="afterSubscibeEvent($event)">--></subscribe>
<subscribe [communityId]="communityId" [showTemplate]= false class="" (subscribeEvent)="afterSubscibeEvent($event)"></subscribe>
`
})

1
src/app/services/stakeholder.service.ts
View File

@ -15,6 +15,7 @@ export class StakeholderService {
}
getStakeholder(url: string, alias:string): Observable<Stakeholder> {
// return new BehaviorSubject<Stakeholder>(Stakeholder.createECStakeholder()).asObservable();
return this.http.get<Stakeholder>(url + '/stakeholder/' + alias);
}

173
src/app/topic/indicators.component.html Normal file
View File

@ -0,0 +1,173 @@
<div id="page_content" click-outside-or-esc targetId="page_content" (clickOutside)="toggleOpen($event)">
<div class="uk-padding-small md-bg-white" uk-grid>
<div class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<div class="uk-flex uk-flex-middle">
<label>Chart Type:</label>
<select class="uk-select uk-form-small uk-margin-small-left"
(ngModelChange)="onChartTypeChange($event)"
[(ngModel)]="chartType">
<option [value]="'all'">All</option>
<option [value]="'pie'">Pie</option>
<option [value]="'table'">Table</option>
<option [value]="'line'">Line</option>
<option [value]="'column'">Column</option>
<option [value]="'bar'">Bar</option>
</select>
</div>
<div class="uk-flex uk-flex-middle">
<label>Privacy:</label>
<select class="uk-select uk-form-small uk-margin-small-left"
(ngModelChange)="onPrivacyChange($event)"
[(ngModel)]="isPublic">
<option [value]="'all'">All</option>
<option [value]="'public'">Public</option>
<option [value]="'private'">Private</option>
</select>
</div>
<div class="uk-flex uk-flex-middle">
<label>Status:</label>
<select class="uk-select uk-form-small uk-margin-small-left"
(ngModelChange)="onStatusChange($event)"
[(ngModel)]="isActive">
<option [value]="'all'">All</option>
<option [value]="'active'">Active</option>
<option [value]="'inactive'">Inactive</option>
</select>
</div>
</div>
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
<div class="uk-inline">
<span class="uk-form-icon uk-form-icon-flip"><i class="material-icons">search</i></span>
<input (ngModelChange)="onKeywordChange($event)"
[(ngModel)]="keyword"
class="uk-input uk-form-small" placeholder="Locate indicator..">
</div>
<div [class.uk-active]="grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
class="material-icons">view_module</i></a>
</div>
<div [class.uk-active]="!grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
</div>
</div>
</div>
<div *ngIf="stakeholder" id="page_content_inner">
<div class="uk-child-width-1-2 uk-flex-middle" uk-grid>
<div>
<ul class="uk-breadcrumb">
<li class="uk-disabled">{{stakeholder.topics[topicIndex].name}}</li>
<li>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</li>
<li>{{stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subcategoryIndex].name}}</li>
</ul>
</div>
<div class="uk-flex uk-flex-right">
<button class="md-btn md-btn-primary">Preview</button>
</div>
</div>
<h6 class="uk-text-bold">Number Indicators</h6>
<div [class.uk-child-width-1-3@m]="grid"
[class.uk-child-width-1-2@s]="grid"
[class.uk-child-width-1-1]="!grid"
uk-height-match="target: .md-card"
uk-grid>
<ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
<div>
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
<i
class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
{{(indicator.isPublic) ? 'Public' : 'Private'}}
</span>
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
<i class="material-icons md-24 uk-margin-small-right"
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
{{(indicator.isActive) ? 'Active' : 'Inactive'}}
</span>
<i class="md-icon material-icons">more_vert</i>
</div>
<h3 class="md-card-toolbar-heading-text">{{indicator.name}}</h3>
</div>
<div *ngIf="grid" class="md-card-content">
<div class="uk-flex uk-flex-center" uk-grid>
<div class="uk-width-1-1">
{{indicator.description}}
</div>
<div class="uk-width-1-2 uk-text-center">
<i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
<div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
</div>
<div class="uk-width-1-2 uk-text-center">
<i class="material-icons md-24"
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
<div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</div>
<h6 class="uk-text-bold">Chart Indicators</h6>
<div [class.uk-child-width-1-3@m]="grid"
[class.uk-child-width-1-2@s]="grid"
[class.uk-child-width-1-1]="!grid"
uk-height-match="target: .md-card"
uk-grid>
<ng-template ngFor [ngForOf]="displayCharts" let-indicator let-i="index">
<div>
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<ng-template [ngIf]="!grid">
<span *ngFor="let indicatorPath of indicator.indicatorPaths"
class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
<i
class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i>
{{indicatorPath.type + ' Chart'}}
</span>
</ng-template>
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
<i
class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
{{(indicator.isPublic) ? 'Public' : 'Private'}}
</span>
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
<i class="material-icons md-24 uk-margin-small-right"
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
{{(indicator.isActive) ? 'Active' : 'Inactive'}}
</span>
<i class="md-icon material-icons">more_vert</i>
</div>
<h3 class="md-card-toolbar-heading-text">{{indicator.name}}</h3>
</div>
<div *ngIf="grid" class="md-card-content">
<div class="uk-flex uk-flex-center" uk-grid>
<div class="uk-width-1-1">
{{indicator.description}}
</div>
<div class="uk-width-1-3 uk-text-center"
[ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
<div *ngFor="let indicatorPath of indicator.indicatorPaths">
<i class="material-icons md-24">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i>
<div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
</div>
</div>
<div class="uk-width-1-3 uk-text-center">
<i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
<div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
</div>
<div class="uk-width-1-3 uk-text-center">
<i class="material-icons md-24"
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
<div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</div>
</div>
</div>

114
src/app/topic/indicators.component.ts Normal file
View File

@ -0,0 +1,114 @@
import {Component, Input, OnChanges, OnInit, SimpleChanges} from "@angular/core";
import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
import {Indicator, Stakeholder} from "../utils/entities/stakeholder";
import {IndicatorUtils} from "../utils/Tools";
@Component({
selector: 'indicators',
templateUrl: './indicators.component.html'
})
export class IndicatorsComponent implements OnInit, OnChanges {
@Input()
public topicIndex: number = 0;
@Input()
public categoryIndex: number = 0;
@Input()
public subcategoryIndex: number = 0;
@Input()
public stakeholder: Stakeholder = null;
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
public charts: Indicator[] = [];
public numbers: Indicator[] = [];
public displayCharts: Indicator[] = [];
public displayNumbers: Indicator[] = [];
public chartType: string = 'all';
public isPublic: string = 'all';
public isActive: string = 'all';
public keyword: string = null;
public grid: boolean = true;
constructor(private sideBarService: SideBarService) {}
ngOnInit(): void {
}
ngOnChanges(changes: SimpleChanges): void {
if(this.stakeholder) {
this.charts = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
subCategories[this.subcategoryIndex].charts;
this.displayCharts = this.charts;
this.numbers = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
subCategories[this.subcategoryIndex].numbers;
this.displayNumbers = this.numbers;
}
}
onChartTypeChange(value) {
this.displayCharts = this.filterChartType(this.charts, value);
}
onPrivacyChange(value) {
this.displayCharts = this.filterPrivacy(this.charts, value);
this.displayNumbers = this.filterPrivacy(this.numbers, value);
}
onStatusChange(value) {
this.displayCharts = this.filterStatus(this.charts, value);
this.displayNumbers = this.filterStatus(this.numbers, value);
}
onKeywordChange(value) {
this.displayCharts = this.filterByKeyword(this.charts, value);
this.displayNumbers = this.filterByKeyword(this.numbers, value);
}
filterChartType(indicators: Indicator[], value): Indicator[] {
if (value === 'all') {
return indicators;
} else {
return indicators.filter(indicator =>
indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0);
}
}
filterPrivacy(indicators: Indicator[], value): Indicator[] {
if (value === 'all') {
return indicators;
} else {
return indicators.filter(indicator => indicator.isPublic === (value === 'public'));
}
}
filterStatus(indicators: Indicator[], value): Indicator[] {
if (value === 'all') {
return indicators;
} else {
return indicators.filter(indicator => indicator.isActive === (value === 'active'));
}
}
filterByKeyword(indicators: Indicator[], value): Indicator[] {
if (value === null || value === '') {
return indicators;
} else {
return indicators.filter(indicator => indicator.name.includes(value) || indicator.description.includes(value));
}
}
get open(): boolean {
return this.sideBarService.open;
}
public toggleOpen(event = null) {
if (!event) {
this.sideBarService.setOpen(!this.open);
} else if (event && event['value'] === true) {
this.sideBarService.setOpen(false);
}
}
public changeGrid(value) {
this.grid = value;
}
}

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

@ -9,11 +9,11 @@
<div *ngIf="stakeholder" class="menu_section">
<ul>
<li class="uk-margin-bottom md-bg-blue-700 uk-padding-small">
<a class="md-color-white" (click)="back()">
<a class="md-color-white uk-flex uk-flex-middle" (click)="back()">
<span class="menu_icon"><i class="material-icons md-color-white">arrow_back</i></span>
<div class="menu_title uk-inline">
{{stakeholder.topics[topicIndex].name.toUpperCase()}}
<button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link"
<button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
(click)="$event.stopPropagation();editTopicOpen(editTopic)">
<i class="material-icons md-color-white">more_horiz</i>
</button>
@ -64,7 +64,7 @@
</li>
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
<li [class.current_section]="categoryIndex === i"
[class.act_section]="categoryIndex === i && toggle"
[class.act_section]="selectedCategoryIndex === i && toggle"
[title]="category.name"
class="submenu_trigger">
<a (click)="toggleCategory(i);hide(editCategory)">
@ -72,7 +72,7 @@
class="material-icons">{{category.icon}}</i></span>
<div class="menu_title uk-inline">
{{category.name}}
<button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link"
<button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
(click)="$event.stopPropagation();editCategoryOpen(i, editCategory)">
<i class="material-icons">more_horiz</i>
</button>
@ -120,22 +120,22 @@
</div>
</div>
</div>
<ul [style.display]="((categoryIndex === i && toggle)?'block':'none')">
<ul [style.display]="((selectedCategoryIndex === i && toggle)?'block':'none')">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[i].subCategories"
let-subcategory let-j="index">
<li>
<a (click)="editSubCategoryOpen(j, editSubCategory)">
<li [class.act_item]="categoryIndex === i && subCategoryIndex === j">
<a (click)="chooseSubcategory(i, j)">
<span *ngIf="subcategory.icon" class="menu_icon uk-margin-small-right"><i
class="material-icons">{{subcategory.icon}}</i></span>
<div class="menu_title uk-inline">
{{subcategory.name}}
<button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link"
<button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
(click)="$event.stopPropagation();editSubCategoryOpen(j, editSubCategory)">
<i class="material-icons">more_horiz</i>
</button>
</div>
</a>
<div uk-drop="mode: click; offset: -2; delay-hide: 0" #editSubCategory
<div uk-drop="mode: none; offset: -2; delay-hide: 0" #editSubCategory
class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
<div *ngIf="copySubCategory">
<div class="md-card">
@ -280,56 +280,8 @@
</li>
</ul>
</div>
<hr class="uk-hr">
<div class="uk-padding-small uk-padding-remove-vertical">
<button [class.md-btn-primary]="unsaved" [class.disabled]="!unsaved"
class="md-btn md-btn-small uk-float-right">Save</button>
</div>
</aside>
<div id="page_content" click-outside-or-esc targetId="page_content" (clickOutside)="toggleOpen($event)">
<div class="uk-padding-small md-bg-white" uk-grid>
<div class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<div class="uk-flex uk-flex-middle">
<label>Chart Type:</label>
<select class="uk-select uk-form-small uk-margin-small-left" [(ngModel)]="chartType">
<option [value]="null">all</option>
<option [value]="'pie'">Pie</option>
<option [value]="'table'">Table</option>
<option [value]="'line'">Line</option>
<option [value]="'column'">Column</option>
<option [value]="'bar'">Bar</option>
</select>
</div>
<div class="uk-flex uk-flex-middle">
<label>Privacy:</label>
<select class="uk-select uk-form-small uk-margin-small-left" [(ngModel)]="isPublic">
<option [value]="null">all</option>
<option [value]="true">Public</option>
<option [value]="false">Private</option>
</select>
</div>
<div class="uk-flex uk-flex-middle">
<label>Status:</label>
<select class="uk-select uk-form-small uk-margin-small-left" [(ngModel)]="isActive">
<option [value]="null">all</option>
<option [value]="true">Active</option>
<option [value]="false">Inactive</option>
</select>
</div>
</div>
<div class="uk-width-expand uk-flex uk-flex-middle uk-flex-right">
<div class="uk-inline">
<span class="uk-form-icon uk-form-icon-flip"><i class="material-icons">search</i></span>
<input class="uk-input uk-form-small" placeholder="Locate indicator..">
</div>
<div [class.uk-active]="grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i class="material-icons">view_module</i></a>
</div>
<div [class.uk-active]="!grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
</div>
</div>
</div>
<div id="page_content_inner">
</div>
</div>
<indicators [stakeholder]="stakeholder"
[topicIndex]="topicIndex"
[categoryIndex]="categoryIndex"
[subcategoryIndex]="subCategoryIndex"></indicators>

81
src/app/topic/topic.component.ts
View File

@ -2,9 +2,6 @@ import {Component, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
import {Category, Stakeholder, SubCategory, Topic} from "../utils/entities/stakeholder";
import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
import {StakeholderService} from "../services/stakeholder.service";
@ -17,26 +14,19 @@ declare var UIkit;
templateUrl: './topic.component.html',
})
export class TopicComponent implements OnInit, OnDestroy {
public status: number;
public properties: EnvProperties;
public loading: boolean = true;
public errorCodes: ErrorCodes;
public stakeholder: Stakeholder;
private errorMessages: ErrorMessagesComponent;
public topicIndex: number = -1;
public topic: Topic = null;
public categoryIndex: number = -1;
public selectedCategoryIndex: number = -1;
public copyCategory: Category = null;
public subCategoryIndex: number = -1;
public copySubCategory: SubCategory = null;
public valid = true;
public edit: boolean = false;
public toggle: boolean = false;
public unsaved: boolean = false;
public properties: EnvProperties;
public chartType: string = null;
public isPublic: boolean = null;
public isActive: boolean = null;
grid: boolean = true;
constructor(
private route: ActivatedRoute,
@ -44,9 +34,6 @@ export class TopicComponent implements OnInit, OnDestroy {
private title: Title,
private sideBarService: SideBarService,
private stakeholderService: StakeholderService) {
this.errorCodes = new ErrorCodes();
this.errorMessages = new ErrorMessagesComponent();
this.status = this.errorCodes.LOADING;
}
public ngOnInit() {
@ -63,6 +50,10 @@ export class TopicComponent implements OnInit, OnDestroy {
this.navigateToError();
} else {
this.title.setTitle(stakeholder.index_name);
this.categoryIndex = 0;
this.selectedCategoryIndex = 0;
this.subCategoryIndex = 0;
this.toggle = true;
}
}
});
@ -83,21 +74,9 @@ export class TopicComponent implements OnInit, OnDestroy {
UIkit.drop(element).show();
}
get open(): boolean {
return this.sideBarService.open;
}
public toggleOpen(event = null) {
if (!event) {
this.sideBarService.setOpen(!this.open);
} else if (event && event['value'] === true) {
this.sideBarService.setOpen(false);
}
}
public toggleCategory(index: number) {
if(this.categoryIndex !== index) {
this.categoryIndex = index;
if(this.selectedCategoryIndex !== index) {
this.selectedCategoryIndex = index;
this.toggle = true;
} else {
this.toggle = !this.toggle;
@ -127,22 +106,11 @@ export class TopicComponent implements OnInit, OnDestroy {
this.stakeholder.topics[this.topicIndex].categories[index] = Tools.copy(this.copyCategory);
}
this.hide(element);
this.unsaved = true;
} else {
this.valid = false;
}
}
public editTopicOpen(element) {
if(element.className.indexOf('uk-open') !== -1) {
this.hide(element);
} else {
this.topic = Tools.copy(this.stakeholder.topics[this.topicIndex]);
this.valid = true;
this.show(element);
}
}
public editSubCategoryOpen(index:number = -1, element = null) {
if(index === -1) {
this.copySubCategory = new SubCategory(null, null, null, true, true);
@ -162,25 +130,33 @@ export class TopicComponent implements OnInit, OnDestroy {
if(this.copySubCategory.name && this.copySubCategory.name !== '') {
this.copySubCategory.alias = this.copySubCategory.name.toLowerCase();
if(index === -1) {
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].
subCategories.push(this.copySubCategory);
} else {
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].
subCategories[index] = Tools.copy(this.copySubCategory);
}
this.hide(element);
this.unsaved = true;
} else {
this.valid = false;
}
}
public editTopicOpen(element) {
if(element.className.indexOf('uk-open') !== -1) {
this.hide(element);
} else {
this.topic = Tools.copy(this.stakeholder.topics[this.topicIndex]);
this.valid = true;
this.show(element);
}
}
public saveTopic(element) {
if(this.topic.name && this.topic.name !== '') {
this.topic.alias = this.topic.name.toLowerCase();
this.stakeholder.topics[this.topicIndex] = Tools.copy(this.topic);
this.hide(element);
this.unsaved = true;
} else {
this.valid = false;
}
@ -192,17 +168,26 @@ export class TopicComponent implements OnInit, OnDestroy {
this.back();*/
}
public changeGrid(value) {
this.grid = value;
}
private navigateToError() {
this.router.navigate(['/error'], {queryParams: {'page': this.router.url}});
}
public getDefaultSubcategoryIndex(categoryIndex: number) {
return this.stakeholder.topics[this.topicIndex].categories[categoryIndex].
subCategories.findIndex(subcategory => subcategory.alias === null);
}
back() {
this.router.navigate(['../'], {
relativeTo: this.route
});
}
chooseSubcategory(categoryIndex: number, subcategoryIndex: number) {
/*let topic: Topic = this.stakeholder.topics[this.topicIndex];
let category: Category = topic.categories[this.categoryIndex];
let subCatetegory: SubCategory = category.subCategories[index];*/
this.categoryIndex = categoryIndex;
this.subCategoryIndex = subcategoryIndex;
}
}

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

@ -10,13 +10,14 @@ import {TopicRoutingModule} from "./topic-routing.module";
import {ModalModule} from "../openaireLibrary/utils/modal/modal.module";
import {RouterModule} from "@angular/router";
import {FormsModule} from "@angular/forms";
import {IndicatorsComponent} from "./indicators.component";
@NgModule({
imports: [
CommonModule, TopicRoutingModule, ModalModule, RouterModule, FormsModule
],
declarations: [
TopicComponent
TopicComponent, IndicatorsComponent
],
providers: [
FreeGuard, PreviousRouteRecorder,

19
src/app/utils/Tools.ts
View File

@ -1,3 +1,22 @@
export class IndicatorUtils {
chartTypes: Map<string, string> = new Map([
['pie', 'pie_chart'],
['table', 'table_chart'],
['line', 'show_chart'],
['column', 'bar_chart'],
['bar', 'bar_chart'],
['image', 'perm_media']
]);
isPublicIcon: Map<boolean, string> = new Map([
[true, 'public'],
[false, 'lock']
]);
isActiveIcon: string = 'brightness_1';
}
export class Tools {
public static copy(element: any): any {

6
src/app/utils/entities/stakeholder.ts
View File

@ -94,8 +94,8 @@ export class Stakeholder {
//Numbers
let n_total_pubs = new Indicator("Publications",null, "number","small",true, true, [new IndicatorPath(null, "statistics","/funders/"+stakeholder.id, null, ["statistics","publications"])]);
let n_open_pubs = new Indicator("OA Publications",null, "number","small",true, true, [new IndicatorPath(null, "statistics","/funders/"+stakeholder.id, null,["statistics","open_access"])]);
let n_total_pubs = new Indicator("Publications",'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...', "number","small",true, true, [new IndicatorPath(null, "statistics","/funders/"+stakeholder.id, null, ["statistics","publications"])]);
let n_open_pubs = new Indicator("OA Publications",'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...', "number","small",true, true, [new IndicatorPath(null, "statistics","/funders/"+stakeholder.id, null,["statistics","open_access"])]);
let n_total_projects = new Indicator("Projects",null, "number","small",true, true, [new IndicatorPath(null, "statistics","/funders/"+stakeholder.id, null, ["statistics","total_projects"])]);
let n_total_data = new Indicator("Reserach data",null, "number","small",true, true, [new IndicatorPath(null, "search",
"/datasets/count?fq="+(encodeURIComponent("relfunderid exact "+stakeholder.index_id))+"&format=json", null, ["total"])]);
@ -121,7 +121,7 @@ export class Stakeholder {
//Charts
let c_pubs_per_project = new Indicator("Which are the top "+stakeholder.index_shortName+" projects?",null, "chart","large",true, true, [
let c_pubs_per_project = new Indicator("Which are the top "+stakeholder.index_shortName+" projects?",'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...', "chart","large",true, true, [
new IndicatorPath("bar", "old","chart.php?com=query&data=",'{"table":"result","fields":[{"fld":"number","agg":"count","type":"'+ChartHelper.prefix+'type'+ChartHelper.suffix+'","yaxis":1,"c":false}],"xaxis":{"name":"result_projects-project-acronym","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"count-number","yaxisheaders":[""],"fieldsheaders":["publications"],"in":[],"filters":[{"name":"result_projects-project-funder","values":["'+ChartHelper.prefix+'funder_name'+ChartHelper.suffix+'"],"to":"-1"},{"name":"type","values":["publication"],"to":"-1"}],"having":[],"xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"title":"'+ChartHelper.prefix+'title'+ChartHelper.suffix+'","subtitle":"","xaxistitle":"project","order":"d"}', null )]);
c_pubs_per_project.indicatorPaths[0].parameters = IndicatorPath.createParameters(stakeholder.index_name,"Publications per project (top 30)","bar");
pubDefSub.charts.push(c_pubs_per_project);

41
src/assets/monitor-custom.css
View File

@ -16,16 +16,45 @@
--monitor-portal-lower-tone: #7c9144;
--connect-portal-lower-tone: #b48536;
--develop-portal-lower-tone: #9f4e7e;
--sidebar-width: 300px;
--header-height: 60px;
}
html {
color: black !important;
}
li>a .uk-button {
/* On link hover, his items with this class will be displayed*/
li>a .onHover {
display: none;
}
li>a:hover .uk-button {
li>a:hover .onHover {
display: block;
}
/*---*/
/* Custom width of sidebar, change var: sidebar-width*/
#sidebar_main {
width: var(--sidebar-width) !important;
-webkit-transform: translate3d(calc(-1 * var(--sidebar-width)),0,0) !important;
transform: translate3d(calc(-1 * var(--sidebar-width)),0,0) !important;
}
.sidebar_main_active #sidebar_main {
-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;
}
@media only screen and (min-width: 1220px) {
.sidebar_main_active #header_main, .sidebar_main_active #page_content, .sidebar_main_active #top_bar {
margin-left: var(--sidebar-width) !important;
}
}
/* Custom width of sidebar, change var: sidebar-width*/
body {
padding-top: var(--header-height) !important;
}
#header_main {
padding: calc((var(--header-height) - 48px)/2) 25px !important;
}
/*---*/