From bd82b388efea622773047a3818c2914578ec1a3e Mon Sep 17 00:00:00 2001 From: Konstantinos Triantafyllou Date: Wed, 27 Nov 2019 10:09:14 +0000 Subject: [PATCH] [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 --- src/app/app.component.html | 2 +- src/app/app.component.ts | 21 ++-- src/app/home/home.component.ts | 10 +- .../{sideBar.service.ts => layout.service.ts} | 22 +++- src/app/monitor/monitor-routing.module.ts | 12 +- src/app/monitor/monitor.component.ts | 10 +- src/app/topic/indicators.component.html | 33 +++--- src/app/topic/indicators.component.ts | 104 ++++++++++-------- src/app/topic/topic.component.ts | 2 - 9 files changed, 124 insertions(+), 92 deletions(-) rename src/app/library/sharedComponents/sidebar/{sideBar.service.ts => layout.service.ts} (66%) diff --git a/src/app/app.component.html b/src/app/app.component.html index 142ccff..0067220 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,6 @@
-
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 80c96d6..812b9ff 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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); } } } diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 174ca91..3af4bae 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -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); } } diff --git a/src/app/library/sharedComponents/sidebar/sideBar.service.ts b/src/app/library/sharedComponents/sidebar/layout.service.ts similarity index 66% rename from src/app/library/sharedComponents/sidebar/sideBar.service.ts rename to src/app/library/sharedComponents/sidebar/layout.service.ts index f3038bf..7ce2bfc 100644 --- a/src/app/library/sharedComponents/sidebar/sideBar.service.ts +++ b/src/app/library/sharedComponents/sidebar/layout.service.ts @@ -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 = new BehaviorSubject(true); + /** + * Add hasHeader: false on data of route config, if header is not needed. + */ + private hasHeaderSubject: BehaviorSubject = new BehaviorSubject(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 { + return this.hasHeaderSubject.asObservable(); + } + + setHasHeader(value: boolean) { + this.hasHeaderSubject.next(value); + } } diff --git a/src/app/monitor/monitor-routing.module.ts b/src/app/monitor/monitor-routing.module.ts index 1f59dca..d5a8a2f 100644 --- a/src/app/monitor/monitor-routing.module.ts +++ b/src/app/monitor/monitor-routing.module.ts @@ -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} } ]) ] diff --git a/src/app/monitor/monitor.component.ts b/src/app/monitor/monitor.component.ts index d62f74c..1fc7a76 100644 --- a/src/app/monitor/monitor.component.ts +++ b/src/app/monitor/monitor.component.ts @@ -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); } } diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html index c10abb9..4c8a9bd 100644 --- a/src/app/topic/indicators.component.html +++ b/src/app/topic/indicators.component.html @@ -207,41 +207,34 @@
- -
-
-
-
-
- -
-
-
+
+
+
-
-
-
-
+
+
+
+
diff --git a/src/app/topic/indicators.component.ts b/src/app/topic/indicators.component.ts index 1a1d23c..5c8a3ac 100644 --- a/src/app/topic/indicators.component.ts +++ b/src/app/topic/indicators.component.ts @@ -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) }); diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts index ea77ac3..c82e389 100644 --- a/src/app/topic/topic.component.ts +++ b/src/app/topic/topic.component.ts @@ -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) { }