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

[Monitor Dashboard]: Add sections functionalities. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@58685 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-05-12 15:30:49 +00:00
parent 7ba7798abb
commit dd5ed9db7b
6 changed files with 163 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {BehaviorSubject, Observable} from "rxjs";
import {Indicator, IndicatorPath, Stakeholder} from "../utils/entities/stakeholder";
import {Indicator, IndicatorPath, Section, Stakeholder} from "../utils/entities/stakeholder";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {map} from "rxjs/operators";
import {StakeholderCreator} from "../utils/entities/stakeholderCreator";
@ -74,6 +74,14 @@ export class StakeholderService {
return this.formalize(element);
}));
}
saveSection(url: string, element: any, path: string[] = [], index: number = -1): Observable<Section> {
path = HelperFunctions.encodeArray(path);
return this.http.post<Section>(url + ((path.length > 0)?'/':'') + path.join('/') +
'/save/' + index, element).pipe(map(element => {
return this.formalize(element);
}));
}
deleteElement(url: string, path: string[]): Observable<any> {
path = HelperFunctions.encodeArray(path);

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

@ -64,16 +64,16 @@
</div>
<h4 class="uk-text-bold">Number Indicators</h4>
<div [class.list-view]="!grid" [id]="number._id"
class="uk-grid-match section uk-grid-small"
class="uk-grid-match uk-grid-small"
*ngFor="let number of displayNumbers; let i = index"
uk-sortable="group: number" uk-grid>
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
<!--<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
<div class="md-btn-group">
<button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>
<button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
</div>
</div>
</div>-->
<div *ngIf="false"
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle disable-sortable uk-sortable-nodrag"
uk-grid>
@ -160,9 +160,9 @@
uk-sortable="group: chart" uk-grid>
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
<div class="md-btn-group">
<button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>
<button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
<button class="md-btn md-btn-mini" (click)="createSection(i)"><i class="material-icons">add</i></button>
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
<button class="md-btn md-btn-mini" (click)="deleteChartSectionOpen(chart, i)"><i class="material-icons">clear</i></button>
</div>
</div>
<div *ngIf="grid && chartSections.at(i)"
@ -171,7 +171,7 @@
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="chartSections.at(i).get('title')"
label="Add a section title"></div>
<div class="uk-width-expand">
<button *ngIf="chartSections.at(i).dirty" class="md-btn">
<button *ngIf="chartSections.at(i).dirty" class="md-btn" (click)="saveSection(chartSections.at(i).value, i)">
Save
</button>
</div>
@ -259,10 +259,10 @@
</i>
<div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
</div>
<iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
[src]="indicator.indicatorPaths[i].safeResourceUrl"
<iframe *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !== 'image'"
[src]="indicator.indicatorPaths[0].safeResourceUrl"
class="uk-width-1-1 uk-height-medium"></iframe>
<div *ngIf="indicator.indicatorPaths[i].source === 'image'">
<div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
<img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[i].url">
</div>
</div>
@ -300,7 +300,7 @@
</ng-template>
<div *ngIf="grid" class="new-section uk-margin-top">
<div class="tools uk-flex uk-flex-middle">
<button class="md-btn uk-margin-small-right">
<button class="md-btn uk-margin-small-right" (click)="createSection()">
<i class="material-icons md-24 md-color-white">add</i>
</button>
<span>Create a new section</span>
@ -402,3 +402,7 @@
"{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
Are you sure you want to proceed?
</modal-alert>
<modal-alert #deleteChartSectionModal (alertOutput)="deleteSection()">
You are about to delete this section and his indicators permanently.
Are you sure you want to proceed?
</modal-alert>

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

@ -73,6 +73,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
private urlSubscriptions: any[] = [];
@ViewChild('editModal') editModal: AlertModal;
@ViewChild('deleteModal') deleteModal: AlertModal;
@ViewChild('deleteChartSectionModal') deleteChartSectionModal: AlertModal;
constructor(private layoutService: LayoutService,
private stakeholderService: StakeholderService,
@ -99,6 +100,28 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}
ngAfterViewInit(): void {
this.initReorder();
}
ngOnChanges(changes: SimpleChanges): void {
if (this.canEdit) {
if (changes.topicIndex || changes.categoryIndex || changes.subcategoryIndex) {
this.buildFilters();
}
this.filterCharts();
this.filterNumbers();
}
this.preview = '/' + this.stakeholder.alias + '/' + this.stakeholder.topics[this.topicIndex].alias +
'/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].alias +
'/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].alias;
}
initReorder() {
this.subscriptions.forEach(value => {
if (value instanceof Function) {
value();
}
});
if (document !== undefined) {
let callback = (list, type: IndicatorType): void => {
let items: HTMLCollection = list.current.children;
@ -135,19 +158,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}
}
ngOnChanges(changes: SimpleChanges): void {
if (this.canEdit) {
if (changes.topicIndex || changes.categoryIndex || changes.subcategoryIndex) {
this.buildFilters();
}
this.filterCharts();
this.filterNumbers();
}
this.preview = '/' + this.stakeholder.alias + '/' + this.stakeholder.topics[this.topicIndex].alias +
'/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].alias +
'/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].alias;
}
hide(element: any) {
UIkit.dropdown(element).hide();
}
@ -216,6 +226,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
});
})
});
this.buildSections();
}
filterNumbers() {
@ -223,6 +234,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.filterByKeyword(HelperFunctions.copy(this.numbers), this.filters.value.keyword),
this.filters.value.status),
this.filters.value.privacy);
this.buildSections();
}
onChartTypeChange(value) {
@ -554,7 +566,112 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
});
}
createSection(index: number = -1) {
saveSection(section : Section, index: number, type: IndicatorType = "chart") {
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
];
this.stakeholderService.saveSection(this.properties.monitorServiceAPIURL, section, path, index).subscribe(section => {
if(type === 'chart') {
this.charts[index] = section;
this.filterCharts();
} else {
this.numbers[index] = section;
this.filterNumbers();
}
this.initReorder();
UIkit.notification('Section has been successfully saved', {
status: 'success',
timeout: 3000,
pos: 'top-left'
});
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
});
}
createSection(index = -1, type: IndicatorType = 'chart') {
this.section = new Section(type, null, null, this.stakeholder.alias);
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
];
this.stakeholderService.saveSection(this.properties.monitorServiceAPIURL, this.section, path, index).subscribe(section => {
if(type === 'chart') {
if(index !== -1) {
this.charts.splice(index, 0, section);
} else {
this.charts.push(section);
}
this.filterCharts();
} else {
if(index !== -1) {
this.numbers.splice(index, 0, section);
} else {
this.numbers.push(section);
}
this.filterNumbers();
}
this.initReorder();
UIkit.notification('Section has been successfully created', {
status: 'success',
timeout: 3000,
pos: 'top-left'
});
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
});
}
deleteChartSectionOpen(section: Section, index: number) {
this.section = section;
this.index = index;
this.deleteChartSectionModal.alertTitle = 'Delete Section';
this.deleteChartSectionModal.cancelButtonText = 'No';
this.deleteChartSectionModal.okButtonText = 'Yes';
this.deleteChartSectionModal.open();
}
deleteSection(type: IndicatorType = 'chart') {
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
this.section._id
];
this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe(()=> {
if(type === "chart") {
this.charts.splice(this.index, 1);
this.filterCharts();
} else {
this.numbers.splice(this.index, 1);
this.filterNumbers();
}
this.initReorder();
UIkit.notification('Section has been successfully deleted', {
status: 'success',
timeout: 3000,
pos: 'top-left'
});
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
});
}
}

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

@ -2,7 +2,7 @@ import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {Category, Stakeholder, SubCategory, Topic} from "../utils/entities/stakeholder";
import {Category, Section, Stakeholder, SubCategory, Topic} from "../utils/entities/stakeholder";
import {StakeholderService} from "../services/stakeholder.service";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
@ -355,7 +355,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
let path: string[] = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex]._id
];
let callback = (subCategory: SubCategory): void => {
if (this.index === -1) {

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

@ -111,8 +111,8 @@ export class SubCategory {
this.isActive = isActive;
this.isPublic = isPublic;
this.defaultId = defaultId;
this.charts = [new Section("chart")];
this.numbers = [new Section("number")];
this.charts = [];
this.numbers = [];
this.recommendedFor= [];
}

8
src/assets/theme-assets/dashboard-custom.css
View File

@ -413,20 +413,20 @@ body.dashboard {
.dashboard .section:hover .tools .md-btn-group::before {
content: "";
border-bottom: 25px solid var(--secondary-color);
border-bottom: 23px solid var(--secondary-color);
border-left:solid 12px transparent;
width: 0;
margin-left: -1px;
border-top-right-radius: 5px;
padding-bottom: 2px;
}
.dashboard .section:hover .tools .md-btn-group::after {
content: "";
border-bottom: 25px solid var(--secondary-color);
border-bottom: 23px solid var(--secondary-color);
border-right: solid 12px transparent;
width: 0;
margin-left: -1px;
border-top-left-radius: 5px;
padding-bottom: 2px;
}
/* New section*/