[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:
parent
7ba7798abb
commit
dd5ed9db7b
|
@ -1,7 +1,7 @@
|
||||||
import {Injectable} from "@angular/core";
|
import {Injectable} from "@angular/core";
|
||||||
import {HttpClient} from "@angular/common/http";
|
import {HttpClient} from "@angular/common/http";
|
||||||
import {BehaviorSubject, Observable} from "rxjs";
|
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 {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
|
||||||
import {map} from "rxjs/operators";
|
import {map} from "rxjs/operators";
|
||||||
import {StakeholderCreator} from "../utils/entities/stakeholderCreator";
|
import {StakeholderCreator} from "../utils/entities/stakeholderCreator";
|
||||||
|
@ -75,6 +75,14 @@ export class StakeholderService {
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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> {
|
deleteElement(url: string, path: string[]): Observable<any> {
|
||||||
path = HelperFunctions.encodeArray(path);
|
path = HelperFunctions.encodeArray(path);
|
||||||
return this.http.delete<any>(url + '/' + path.join('/') + '/delete');
|
return this.http.delete<any>(url + '/' + path.join('/') + '/delete');
|
||||||
|
|
|
@ -64,16 +64,16 @@
|
||||||
</div>
|
</div>
|
||||||
<h4 class="uk-text-bold">Number Indicators</h4>
|
<h4 class="uk-text-bold">Number Indicators</h4>
|
||||||
<div [class.list-view]="!grid" [id]="number._id"
|
<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"
|
*ngFor="let number of displayNumbers; let i = index"
|
||||||
uk-sortable="group: number" uk-grid>
|
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">
|
<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">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 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"><i class="material-icons">clear</i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>-->
|
||||||
<div *ngIf="false"
|
<div *ngIf="false"
|
||||||
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle disable-sortable uk-sortable-nodrag"
|
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle disable-sortable uk-sortable-nodrag"
|
||||||
uk-grid>
|
uk-grid>
|
||||||
|
@ -160,9 +160,9 @@
|
||||||
uk-sortable="group: chart" uk-grid>
|
uk-sortable="group: chart" 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">
|
<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" (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"><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)="deleteChartSectionOpen(chart, i)"><i class="material-icons">clear</i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="grid && chartSections.at(i)"
|
<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')"
|
<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>
|
label="Add a section title"></div>
|
||||||
<div class="uk-width-expand">
|
<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
|
Save
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -259,10 +259,10 @@
|
||||||
</i>
|
</i>
|
||||||
<div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
|
<div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
|
<iframe *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !== 'image'"
|
||||||
[src]="indicator.indicatorPaths[i].safeResourceUrl"
|
[src]="indicator.indicatorPaths[0].safeResourceUrl"
|
||||||
class="uk-width-1-1 uk-height-medium"></iframe>
|
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">
|
<img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[i].url">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -300,7 +300,7 @@
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<div *ngIf="grid" class="new-section uk-margin-top">
|
<div *ngIf="grid" class="new-section uk-margin-top">
|
||||||
<div class="tools uk-flex uk-flex-middle">
|
<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>
|
<i class="material-icons md-24 md-color-white">add</i>
|
||||||
</button>
|
</button>
|
||||||
<span>Create a new section</span>
|
<span>Create a new section</span>
|
||||||
|
@ -402,3 +402,7 @@
|
||||||
"{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
|
"{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
|
||||||
Are you sure you want to proceed?
|
Are you sure you want to proceed?
|
||||||
</modal-alert>
|
</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>
|
||||||
|
|
|
@ -73,6 +73,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
private urlSubscriptions: any[] = [];
|
private urlSubscriptions: any[] = [];
|
||||||
@ViewChild('editModal') editModal: AlertModal;
|
@ViewChild('editModal') editModal: AlertModal;
|
||||||
@ViewChild('deleteModal') deleteModal: AlertModal;
|
@ViewChild('deleteModal') deleteModal: AlertModal;
|
||||||
|
@ViewChild('deleteChartSectionModal') deleteChartSectionModal: AlertModal;
|
||||||
|
|
||||||
constructor(private layoutService: LayoutService,
|
constructor(private layoutService: LayoutService,
|
||||||
private stakeholderService: StakeholderService,
|
private stakeholderService: StakeholderService,
|
||||||
|
@ -99,6 +100,28 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterViewInit(): void {
|
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) {
|
if (document !== undefined) {
|
||||||
let callback = (list, type: IndicatorType): void => {
|
let callback = (list, type: IndicatorType): void => {
|
||||||
let items: HTMLCollection = list.current.children;
|
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) {
|
hide(element: any) {
|
||||||
UIkit.dropdown(element).hide();
|
UIkit.dropdown(element).hide();
|
||||||
}
|
}
|
||||||
|
@ -216,6 +226,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
this.buildSections();
|
||||||
}
|
}
|
||||||
|
|
||||||
filterNumbers() {
|
filterNumbers() {
|
||||||
|
@ -223,6 +234,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
this.filterByKeyword(HelperFunctions.copy(this.numbers), this.filters.value.keyword),
|
this.filterByKeyword(HelperFunctions.copy(this.numbers), this.filters.value.keyword),
|
||||||
this.filters.value.status),
|
this.filters.value.status),
|
||||||
this.filters.value.privacy);
|
this.filters.value.privacy);
|
||||||
|
this.buildSections();
|
||||||
}
|
}
|
||||||
|
|
||||||
onChartTypeChange(value) {
|
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'
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@ import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
|
||||||
import {ActivatedRoute, Router} from '@angular/router';
|
import {ActivatedRoute, Router} from '@angular/router';
|
||||||
import {Title} from '@angular/platform-browser';
|
import {Title} from '@angular/platform-browser';
|
||||||
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
|
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 {StakeholderService} from "../services/stakeholder.service";
|
||||||
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
|
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
|
||||||
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
|
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
|
||||||
|
@ -355,7 +355,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
|
||||||
let path: string[] = [
|
let path: string[] = [
|
||||||
this.stakeholder._id,
|
this.stakeholder._id,
|
||||||
this.stakeholder.topics[this.topicIndex]._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 => {
|
let callback = (subCategory: SubCategory): void => {
|
||||||
if (this.index === -1) {
|
if (this.index === -1) {
|
||||||
|
|
|
@ -111,8 +111,8 @@ export class SubCategory {
|
||||||
this.isActive = isActive;
|
this.isActive = isActive;
|
||||||
this.isPublic = isPublic;
|
this.isPublic = isPublic;
|
||||||
this.defaultId = defaultId;
|
this.defaultId = defaultId;
|
||||||
this.charts = [new Section("chart")];
|
this.charts = [];
|
||||||
this.numbers = [new Section("number")];
|
this.numbers = [];
|
||||||
this.recommendedFor= [];
|
this.recommendedFor= [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -413,20 +413,20 @@ body.dashboard {
|
||||||
|
|
||||||
.dashboard .section:hover .tools .md-btn-group::before {
|
.dashboard .section:hover .tools .md-btn-group::before {
|
||||||
content: "";
|
content: "";
|
||||||
border-bottom: 25px solid var(--secondary-color);
|
border-bottom: 23px solid var(--secondary-color);
|
||||||
border-left:solid 12px transparent;
|
border-left:solid 12px transparent;
|
||||||
width: 0;
|
width: 0;
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
border-top-right-radius: 5px;
|
padding-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard .section:hover .tools .md-btn-group::after {
|
.dashboard .section:hover .tools .md-btn-group::after {
|
||||||
content: "";
|
content: "";
|
||||||
border-bottom: 25px solid var(--secondary-color);
|
border-bottom: 23px solid var(--secondary-color);
|
||||||
border-right: solid 12px transparent;
|
border-right: solid 12px transparent;
|
||||||
width: 0;
|
width: 0;
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
border-top-left-radius: 5px;
|
padding-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* New section*/
|
/* New section*/
|
||||||
|
|
Loading…
Reference in New Issue