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

[Monitor Dashboard]: Merge create and edit modals. Rename SidebarService to LayoutService and add hasSidebar on it 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57706 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2019-11-27 10:09:14 +00:00
parent 228ebb8e11
commit bd82b388ef
9 changed files with 124 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<!--disable_transitions -->
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar">
<div id="header_main"[class.header_full]="!hasSidebar">
<div *ngIf="hasHeader" id="header_main" [class.header_full]="!hasSidebar">
<div class="uk-light">
<a *ngIf="hasSidebar" id="sidebar_main_toggle" (click)="toggleOpen()" class="sSwitch sSwitch_left">
<span class="sSwitchIcon"></span>

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

@ -5,9 +5,9 @@ import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
import {User} from './openaireLibrary/login/utils/helper.class';
import {UserManagementService} from "./openaireLibrary/services/user-management.service";
import {SideBarService} from "./library/sharedComponents/sidebar/sideBar.service";
import {StakeholderService} from "./services/stakeholder.service";
import {Subscriber} from "rxjs";
import {LayoutService} from "./library/sharedComponents/sidebar/layout.service";
@Component({
@ -19,13 +19,14 @@ export class AppComponent implements OnInit, OnDestroy {
user: User;
loginCheck: boolean = false;
hasSidebar: boolean = false;
hasHeader: boolean = false;
private subscriptions: any[] = [];
constructor(private route: ActivatedRoute,
private propertiesService: EnvironmentSpecificService,
private router: Router,
private userManagementService: UserManagementService,
private sidebarService: SideBarService,
private layoutService: LayoutService,
private stakeholderService: StakeholderService,
private cdr: ChangeDetectorRef) {
}
@ -46,8 +47,7 @@ export class AppComponent implements OnInit, OnDestroy {
this.stakeholderService.stakeholder.alias !== params['stakeholder']) {
this.stakeholderService.getStakeholder(this.properties.monitorServiceAPIURL, params['stakeholder']).subscribe(stakeholder => {
this.stakeholderService.setStakeholder(stakeholder);
console.log(stakeholder);
this.sidebarService.setOpen(true);
this.layoutService.setOpen(true);
});
}
} else {
@ -64,10 +64,15 @@ export class AppComponent implements OnInit, OnDestroy {
console.log(error);
});
});
this.subscriptions.push(this.sidebarService.hasSidebar.subscribe(hasSidebar => {
this.subscriptions.push(this.layoutService.hasSidebar.subscribe(hasSidebar => {
this.hasSidebar = hasSidebar;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.hasHeader.subscribe(hasHeader => {
this.hasHeader = hasHeader;
console.log(this.hasHeader);
this.cdr.detectChanges();
}));
}
public ngOnDestroy() {
@ -79,14 +84,14 @@ export class AppComponent implements OnInit, OnDestroy {
}
public get open() {
return this.sidebarService.open;
return this.layoutService.open;
}
public toggleOpen(event = null) {
if (!event) {
this.sidebarService.setOpen(!this.open);
this.layoutService.setOpen(!this.open);
} else if (event && event['value'] === true) {
this.sidebarService.setOpen(false);
this.layoutService.setOpen(false);
}
}
}

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

@ -6,12 +6,12 @@ import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties'
import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
import {Stakeholder, Topic} from "../utils/entities/stakeholder";
import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
import {StakeholderService} from "../services/stakeholder.service";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
import {Subscriber} from "rxjs";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {LayoutService} from "../library/sharedComponents/sidebar/layout.service";
declare var UIkit;
@ -37,7 +37,7 @@ export class HomeComponent implements OnInit, OnDestroy {
private route: ActivatedRoute,
private router: Router,
private title: Title,
private sideBarService: SideBarService,
private layoutService: LayoutService,
private fb: FormBuilder,
private stakeholderService: StakeholderService) {
this.errorCodes = new ErrorCodes();
@ -75,14 +75,14 @@ export class HomeComponent implements OnInit, OnDestroy {
}
get open(): boolean {
return this.sideBarService.open;
return this.layoutService.open;
}
public toggleOpen(event = null) {
if (!event) {
this.sideBarService.setOpen(!this.open);
this.layoutService.setOpen(!this.open);
} else if (event && event['value'] === true) {
this.sideBarService.setOpen(false);
this.layoutService.setOpen(false);
}
}

22
src/app/library/sharedComponents/sidebar/sideBar.service.ts → src/app/library/sharedComponents/sidebar/layout.service.ts
View File

@ -5,7 +5,7 @@ import {ActivationStart, Router} from "@angular/router";
@Injectable({
providedIn: 'root'
})
export class SideBarService {
export class LayoutService {
/**
* Set this to true when sidebar items are ready.
@ -17,6 +17,11 @@ export class SideBarService {
*/
private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
/**
* Add hasHeader: false on data of route config, if header is not needed.
*/
private hasHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
constructor(private router: Router) {
this.router.events.subscribe(event => {
if (event instanceof ActivationStart) {
@ -28,6 +33,13 @@ export class SideBarService {
} else if (this.hasSidebarSubject.value === false) {
this.setHasSidebar(true);
}
if (this.hasHeaderSubject.value === true &&
data['hasHeader'] !== undefined &&
data['hasHeader'] === false) {
this.setHasHeader(false);
} else if (this.hasHeaderSubject.value === false) {
this.setHasHeader(true);
}
}
});
}
@ -47,4 +59,12 @@ export class SideBarService {
setHasSidebar(value: boolean) {
this.hasSidebarSubject.next(value);
}
get hasHeader(): Observable<boolean> {
return this.hasHeaderSubject.asObservable();
}
setHasHeader(value: boolean) {
this.hasHeaderSubject.next(value);
}
}

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

@ -12,25 +12,29 @@ import {MonitorComponent} from "./monitor.component";
path: ':stakeholder',
component: MonitorComponent,
canActivate: [FreeGuard],
canDeactivate: [PreviousRouteRecorder]
canDeactivate: [PreviousRouteRecorder],
data: {hasHeader: false}
},
{
path: ':stakeholder/:topic',
component: MonitorComponent,
canActivate: [FreeGuard],
canDeactivate: [PreviousRouteRecorder]
canDeactivate: [PreviousRouteRecorder],
data: {hasHeader: false}
},
{
path: ':stakeholder/:topic/:category',
component: MonitorComponent,
canActivate: [FreeGuard],
canDeactivate: [PreviousRouteRecorder]
canDeactivate: [PreviousRouteRecorder],
data: {hasHeader: false}
},
{
path: ':stakeholder/:topic/:category/:subCategory',
component: MonitorComponent,
canActivate: [FreeGuard],
canDeactivate: [PreviousRouteRecorder]
canDeactivate: [PreviousRouteRecorder],
data: {hasHeader: false}
}
])
]

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

@ -14,8 +14,8 @@ import {StakeholderService} from "../services/stakeholder.service";
import {Category, ChartHelper, IndicatorPath, Stakeholder, SubCategory, Topic} from "../utils/entities/stakeholder";
import {StatisticsService} from "../utils/services/statistics.service";
import {Item, Sidebar} from "../utils/entities/sidebar";
import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
import {IndicatorUtils} from "../utils/indicator-utils";
import {LayoutService} from "../library/sharedComponents/sidebar/layout.service";
@Component({
selector: 'monitor',
@ -51,7 +51,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
private helper: HelperService,
private stakeholderService: StakeholderService,
private statisticsService: StatisticsService,
private sideBarService: SideBarService,
private layoutService: LayoutService,
private seoService: SEOService,
private cdr: ChangeDetectorRef,
private sanitizer: DomSanitizer) {
@ -100,14 +100,14 @@ export class MonitorComponent implements OnInit, OnDestroy {
}
public get open() {
return this.sideBarService.open;
return this.layoutService.open;
}
public toggleOpen(event = null) {
if(!event) {
this.sideBarService.setOpen(!this.open);
this.layoutService.setOpen(!this.open);
} else if(event && event['value'] === true) {
this.sideBarService.setOpen(false);
this.layoutService.setOpen(false);
}
}

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

@ -207,41 +207,34 @@
</div>
</div>
</div>
<modal-alert #createIndicatorModal
(alertOutput)="createIndicator()"
[okDisabled]="indicatorFb && indicatorFb.invalid">
<div *ngIf="indicatorFb" class="uk-form-stacked" [formGroup]="indicatorFb">
<div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('name')" label="Title"></div>
<div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('description')"
label="Description" type="textarea"></div>
<div dashboard-input class="uk-form-row" *ngFor="let chartUrl of urls.controls;"
[formInput]="chartUrl"
label="Chart Url"></div>
</div>
</modal-alert>
<modal-alert #editIndicatorModal
[classBody]="'large-modal'"
(alertOutput)="saveIndicator()"
[okDisabled]="editIndicatorFb && (editIndicatorFb.invalid ||(!editIndicatorFb.dirty && index !==-1))">
<div *ngIf="editIndicatorFb" class="uk-padding-small" [formGroup]="editIndicatorFb">
<div dashboard-input class="uk-form-row" [formInput]="editIndicatorFb.get('name')" label="Title"></div>
<div dashboard-input class="uk-form-row" [formInput]="editIndicatorFb.get('description')"
[okDisabled]="indicatorFb && (indicatorFb.invalid ||(!indicatorFb.dirty && index !==-1))">
<div *ngIf="indicatorFb" class="uk-padding-small" [formGroup]="indicatorFb">
<div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('name')" label="Title"></div>
<div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('description')"
label="Description" type="textarea">
</div>
<div class="uk-form-row uk-flex uk-flex-middle">
<div dashboard-input class="uk-width-small" [formInput]="editIndicatorFb.get('isPublic')"
<div dashboard-input class="uk-width-small" [formInput]="indicatorFb.get('isPublic')"
label="Accessibility" [options]="indicatorUtils.isPublic" type="select">
</div>
<div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="editIndicatorFb.get('isActive')"
<div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="indicatorFb.get('isActive')"
label="Visibility" [options]="indicatorUtils.isActive" type="select">
</div>
<div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="editIndicatorFb.get('width')"
<div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="indicatorFb.get('width')"
type="select" [options]="indicatorUtils.chartSizes"
label="Chart Size">
</div>
</div>
<hr class="uk-margin-large-top uk-margin-large-bottom">
<div formArrayName="indicatorPaths">
<div *ngIf="urls" formArrayName="urls">
<div dashboard-input class="uk-form-row" *ngFor="let chartUrl of urls.controls;"
[formInput]="chartUrl"
label="Chart Url"></div>
</div>
<div *ngIf="indicatorPaths" formArrayName="indicatorPaths">
<div *ngFor="let indicatorPath of indicatorPaths.controls; let i=index"
[formGroup]="indicatorPath">
<div formArrayName="parameters">

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

@ -1,5 +1,4 @@
import {AfterViewInit, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild} from "@angular/core";
import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
import {Indicator, IndicatorPath, Stakeholder} from "../utils/entities/stakeholder";
import {IndicatorUtils, Option} from "../utils/indicator-utils";
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
@ -10,6 +9,7 @@ import {DomSanitizer} from "@angular/platform-browser";
import {StakeholderService} from "../services/stakeholder.service";
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
import {Subscriber} from "rxjs";
import {LayoutService} from "../library/sharedComponents/sidebar/layout.service";
declare var UIkit;
@ -31,7 +31,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public stakeholder: Stakeholder = null;
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
public indicatorFb: FormGroup;
public editIndicatorFb: FormGroup;
/**
* Editable indicator
*/
@ -55,12 +54,10 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
*/
public grid: boolean = true;
private subscriptions: any[] = [];
@ViewChild('createIndicatorModal') createIndicatorModal: AlertModal;
@ViewChild('editIndicatorModal') editIndicatorModal: AlertModal;
@ViewChild('deleteIndicatorModal') deleteIndicatorModal: AlertModal;
constructor(private sideBarService: SideBarService,
constructor(private layoutService: LayoutService,
private stakeholderService: StakeholderService,
private statisticsService: StatisticsService,
private fb: FormBuilder,
@ -108,9 +105,9 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public toggleOpen(event = null) {
if (!event) {
this.sideBarService.setOpen(!this.open);
this.layoutService.setOpen(!this.open);
} else if (event && event['value'] === true) {
this.sideBarService.setOpen(false);
this.layoutService.setOpen(false);
}
}
@ -226,7 +223,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}
get open(): boolean {
return this.sideBarService.open;
return this.layoutService.open;
}
get canNumbersReorder(): boolean {
@ -249,7 +246,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}
public get indicatorPaths(): FormArray {
return this.editIndicatorFb.get('indicatorPaths') as FormArray;
return this.indicatorFb.get('indicatorPaths') as FormArray;
}
public getParameters(index: number): FormArray {
@ -274,19 +271,24 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}
public createIndicatorOpen() {
this.indicator = null;
this.indicatorFb = this.fb.group({
id: this.fb.control(null),
name: this.fb.control('', Validators.required),
description: this.fb.control(''),
width: this.fb.control('small', Validators.required),
isPublic: this.fb.control(false),
isActive: this.fb.control(false),
urls: this.fb.array([]),
width: this.fb.control('small', Validators.required),
});
this.addUrl();
this.createIndicatorModal.alertTitle = 'Create a new chart Indicator';
this.createIndicatorModal.cancelButtonText = 'Cancel';
this.createIndicatorModal.okButtonText = 'Create';
this.createIndicatorModal.okButtonLeft = false;
this.createIndicatorModal.alertMessage = false;
this.createIndicatorModal.open();
this.editIndicatorModal.alertTitle = 'Create a new chart Indicator';
this.editIndicatorModal.cancelButtonText = 'Cancel';
this.editIndicatorModal.okButtonText = 'Create';
this.editIndicatorModal.okButtonLeft = false;
this.editIndicatorModal.alertMessage = false;
this.editIndicatorModal.stayOpen = true;
this.editIndicatorModal.open();
}
public createIndicator() {
@ -295,8 +297,8 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.indicatorFb.value.description,
'chart',
this.indicatorFb.value.width,
false,
false,
this.indicatorFb.value.isActive,
this.indicatorFb.value.isPublic,
[]
);
this.indicatorFb.value.urls.forEach(url => {
@ -335,7 +337,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
parameters: parameters
}));
});
this.editIndicatorFb = this.fb.group({
this.indicatorFb = this.fb.group({
id: this.fb.control(this.indicator._id),
name: this.fb.control(this.indicator.name, Validators.required),
description: this.fb.control(this.indicator.description),
@ -344,35 +346,45 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
indicatorPaths: indicatorPaths,
width: this.fb.control(this.indicator.width, Validators.required),
});
this.editIndicatorModal.cancelButtonText = 'Cancel';
this.editIndicatorModal.okButtonText = 'Save Changes';
this.editIndicatorModal.okButtonLeft = false;
this.editIndicatorModal.alertMessage = false;
this.editIndicatorModal.open();
setTimeout(() => {
this.indicator.indicatorPaths.forEach(indicatorPath => {
indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)
});
}, (index === -1)?500:0);
if(index === -1) {
this.editIndicatorModal.okButtonText = 'Save';
this.editIndicatorModal.stayOpen = false;
} else {
this.editIndicatorModal.cancelButtonText = 'Cancel';
this.editIndicatorModal.okButtonText = 'Save Changes';
this.editIndicatorModal.okButtonLeft = false;
this.editIndicatorModal.alertMessage = false;
this.editIndicatorModal.open();
}
this.indicator.indicatorPaths.forEach(indicatorPath => {
indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)
});
}
saveIndicator() {
this.indicator = this.indicatorUtils.generateIndicatorByForm(this.editIndicatorFb.value, this.indicator.indicatorPaths);
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.saveElement(this.properties.monitorServiceAPIURL, this.indicator, path).subscribe(indicator => {
if (this.index !== -1) {
this.charts[this.index] = indicator;
} else {
this.charts.push(indicator);
}
this.filterCharts();
this.stakeholderService.setStakeholder(this.stakeholder);
});
if(this.indicator) {
this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths);
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.saveElement(this.properties.monitorServiceAPIURL, this.indicator, path).subscribe(indicator => {
if (this.index !== -1) {
this.charts[this.index] = indicator;
} else {
this.charts.push(indicator);
}
this.filterCharts();
this.stakeholderService.setStakeholder(this.stakeholder);
this.indicatorFb = null;
}, error => {
this.indicatorFb = null;
});
} else {
this.createIndicator();
}
}
reorderIndicators(type: string, indicatorIds: string[]) {
@ -395,7 +407,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}
refreshIndicator(index: number) {
this.indicator = this.indicatorUtils.generateIndicatorByForm(this.editIndicatorFb.value, this.indicator.indicatorPaths);
this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths);
this.indicator.indicatorPaths.forEach(indicatorPath => {
indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)
});

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

@ -3,7 +3,6 @@ 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 {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
import {StakeholderService} from "../services/stakeholder.service";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
@ -57,7 +56,6 @@ export class TopicComponent implements OnInit, OnDestroy {
private router: Router,
private title: Title,
private fb: FormBuilder,
private sideBarService: SideBarService,
private stakeholderService: StakeholderService) {
}