[Monitor Dashboard | Trunk]: 1. Fix bug with topics. 2. Change number edit to be same as charts

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59891 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-11-16 16:48:07 +00:00
parent d0687323bd
commit f54486f752
3 changed files with 105 additions and 86 deletions

View File

@ -55,7 +55,7 @@
<i uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i> <i uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"> <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a <li *ngIf="!editing"><a
(click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li> (click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v> <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li *ngIf="indicator.visibility != v.value"><a (click)="changeIndicatorStatus(number._id, <li *ngIf="indicator.visibility != v.value"><a (click)="changeIndicatorStatus(number._id,
@ -92,7 +92,7 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
<div *ngIf="isAdministrator" class="disable-sortable uk-sortable-nodrag uk-width-1-1"> <div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
<div class="uk-width-1-3@l uk-width-1-2@m uk-width-1-1 uk-card uk-card-default uk-card-body clickable" <div class="uk-width-1-3@l uk-width-1-2@m uk-width-1-1 uk-card uk-card-default uk-card-body clickable"
(click)="editNumberIndicatorOpen(number)"> (click)="editNumberIndicatorOpen(number)">
<div> <div>
@ -301,7 +301,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="uk-flex uk-flex-middle"> <div *ngIf="indicator.defaultId === null" class="uk-flex uk-flex-middle">
<button class="uk-icon-button uk-button-secondary uk-margin-medium-top" <button class="uk-icon-button uk-button-secondary uk-margin-medium-top"
(click)="addJsonPath(i)"> (click)="addJsonPath(i)">
<icon name="add"></icon> <icon name="add"></icon>

View File

@ -262,6 +262,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.numberSections.push(this.fb.group({ this.numberSections.push(this.fb.group({
_id: this.fb.control(section._id), _id: this.fb.control(section._id),
title: this.fb.control(section.title), title: this.fb.control(section.title),
creationDate: this.fb.control(section.creationDate),
stakeholderAlias: this.fb.control(section.stakeholderAlias), stakeholderAlias: this.fb.control(section.stakeholderAlias),
defaultId: this.fb.control(section.defaultId), defaultId: this.fb.control(section.defaultId),
type: this.fb.control(section.type), type: this.fb.control(section.type),
@ -273,6 +274,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.chartSections.push(this.fb.group({ this.chartSections.push(this.fb.group({
_id: this.fb.control(section._id), _id: this.fb.control(section._id),
title: this.fb.control(section.title), title: this.fb.control(section.title),
creationDate: this.fb.control(section.creationDate),
stakeholderAlias: this.fb.control(section.stakeholderAlias), stakeholderAlias: this.fb.control(section.stakeholderAlias),
defaultId: this.fb.control(section.defaultId), defaultId: this.fb.control(section.defaultId),
type: this.fb.control(section.type), type: this.fb.control(section.type),
@ -430,7 +432,9 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public validateJsonPath(index: number) { public validateJsonPath(index: number) {
let indicatorPath: FormGroup = <FormGroup>this.numberIndicatorPaths.at(index); let indicatorPath: FormGroup = <FormGroup>this.numberIndicatorPaths.at(index);
this.getJsonPath(index).disable(); if(this.indicator.defaultId === null) {
this.getJsonPath(index).disable();
}
indicatorPath.get('result').setErrors({validating: true}); indicatorPath.get('result').setErrors({validating: true});
this.subscriptions.push(this.statisticsService.getNumbers(null, indicatorPath.get('url').value).subscribe(response => { this.subscriptions.push(this.statisticsService.getNumbers(null, indicatorPath.get('url').value).subscribe(response => {
let result = JSON.parse(JSON.stringify(response)); let result = JSON.parse(JSON.stringify(response));
@ -440,8 +444,11 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
} }
}); });
setTimeout(() => { setTimeout(() => {
this.getJsonPath(index).enable(); if(this.indicator.defaultId === null) {
this.getJsonPath(index).enable();
}
indicatorPath.get('result').setErrors(null); indicatorPath.get('result').setErrors(null);
console.debug(result);
if(typeof result === 'string' || typeof result === 'number') { if(typeof result === 'string' || typeof result === 'number') {
result = Number(result); result = Number(result);
if (result !== Number.NaN) { if (result !== Number.NaN) {
@ -497,48 +504,54 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
if(this.numberIndicatorPaths.at(index).get('url').valid) { if(this.numberIndicatorPaths.at(index).get('url').valid) {
this.validateJsonPath(index); this.validateJsonPath(index);
} }
this.subscriptions.push(this.numberIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => { if(this.indicator.defaultId === null) {
this.numberIndicatorPaths.at(index).get('result').setValue(null); this.subscriptions.push(this.numberIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
if (this.numberIndicatorPaths.at(index).get('url').valid) { this.numberIndicatorPaths.at(index).get('result').setValue(null);
let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.statisticsService.getNumberSource(value), value, this.stakeholder, this.numberIndicatorPaths.at(index).get('jsonPath').value); if (this.numberIndicatorPaths.at(index).get('url').valid) {
if ((indicatorPath.chartObject && Object.keys(indicatorPath.parameters).indexOf("index_id") == -1 && Object.keys(indicatorPath.parameters).indexOf("index_name") == -1 && Object.keys(indicatorPath.parameters).indexOf("index_shortName") == -1) let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.statisticsService.getNumberSource(value), value, this.stakeholder, this.numberIndicatorPaths.at(index).get('jsonPath').value);
|| (!indicatorPath.chartObject && indicatorPath.url.indexOf("index_id") == -1 && indicatorPath.url.indexOf("index_name") == -1 && (indicatorPath.url).indexOf("index_shortName") == -1)) { if ((indicatorPath.chartObject && Object.keys(indicatorPath.parameters).indexOf("index_id") == -1 && Object.keys(indicatorPath.parameters).indexOf("index_name") == -1 && Object.keys(indicatorPath.parameters).indexOf("index_shortName") == -1)
// default profile || (!indicatorPath.chartObject && indicatorPath.url.indexOf("index_id") == -1 && indicatorPath.url.indexOf("index_name") == -1 && (indicatorPath.url).indexOf("index_shortName") == -1)) {
if (this.stakeholder.defaultId == null) { // default profile
this.urlParameterizedMessage = "This indicator couldn't be generated properly. Stakeholders based on this profile may not inherit the data correctly." if (this.stakeholder.defaultId == null) {
this.urlParameterizedMessage = "This indicator couldn't be generated properly. Stakeholders based on this profile may not inherit the data correctly."
} else {
this.urlParameterizedMessage = "This indicator couldn't be generated properly. Please make sure chart data is for the current stakeholder."
}
} else { } else {
this.urlParameterizedMessage = "This indicator couldn't be generated properly. Please make sure chart data is for the current stakeholder." this.urlParameterizedMessage = null;
}
if (this.indicator.indicatorPaths[index]) {
this.indicator.indicatorPaths[index] = indicatorPath;
} else {
this.indicator.indicatorPaths.push(indicatorPath);
}
if (indicatorPath.source) {
this.numberIndicatorPaths.at(index).get('source').setValue(indicatorPath.source);
} }
} else { } else {
this.urlParameterizedMessage = null; this.urlParameterizedMessage = null;
} }
})
);
this.subscriptions.push(this.numberIndicatorPaths.at(index).get('jsonPath').valueChanges.subscribe(value => {
if (this.indicator.indicatorPaths[index]) { if (this.indicator.indicatorPaths[index]) {
this.indicator.indicatorPaths[index] = indicatorPath; this.indicator.indicatorPaths[index].jsonPath = value;
} else {
this.indicator.indicatorPaths.push(indicatorPath);
} }
if(indicatorPath.source) { this.numberIndicatorPaths.at(index).get('result').setValue(null);
this.numberIndicatorPaths.at(index).get('source').setValue(indicatorPath.source); })
);
this.subscriptions.push(this.numberIndicatorPaths.at(index).get('source').valueChanges.subscribe(value => {
if (this.indicator.indicatorPaths[index]) {
this.indicator.indicatorPaths[index].source = value;
} }
} else { })
this.urlParameterizedMessage = null; );
} } else {
}) this.numberIndicatorPaths.at(index).get('url').disable();
); this.numberIndicatorPaths.at(index).get('jsonPath').disable();
this.numberIndicatorPaths.at(index).get('source').disable();
this.subscriptions.push(this.numberIndicatorPaths.at(index).get('jsonPath').valueChanges.subscribe(value => { }
if (this.indicator.indicatorPaths[index]) {
this.indicator.indicatorPaths[index].jsonPath = value;
}
this.numberIndicatorPaths.at(index).get('result').setValue(null);
})
);
this.subscriptions.push(this.numberIndicatorPaths.at(index).get('source').valueChanges.subscribe(value => {
if (this.indicator.indicatorPaths[index]) {
this.indicator.indicatorPaths[index].source = value;
}
})
);
} }
} }
@ -632,6 +645,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
_id: this.fb.control(this.indicator._id), _id: this.fb.control(this.indicator._id),
name: this.fb.control(this.indicator.name, Validators.required), name: this.fb.control(this.indicator.name, Validators.required),
description: this.fb.control(this.indicator.description), description: this.fb.control(this.indicator.description),
creationDate: this.fb.control(this.indicator.creationDate),
additionalDescription: this.fb.control(this.indicator.additionalDescription), additionalDescription: this.fb.control(this.indicator.additionalDescription),
visibility: this.fb.control(this.indicator.visibility), visibility: this.fb.control(this.indicator.visibility),
indicatorPaths: this.fb.array([], Validators.required), indicatorPaths: this.fb.array([], Validators.required),
@ -689,6 +703,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.chartIndicatorFb = this.fb.group({ this.chartIndicatorFb = this.fb.group({
_id: this.fb.control(this.indicator._id), _id: this.fb.control(this.indicator._id),
name: this.fb.control(this.indicator.name), name: this.fb.control(this.indicator.name),
creationDate: this.fb.control(this.indicator.creationDate),
description: this.fb.control(this.indicator.description), description: this.fb.control(this.indicator.description),
additionalDescription: this.fb.control(this.indicator.additionalDescription), additionalDescription: this.fb.control(this.indicator.additionalDescription),
visibility: this.fb.control(this.indicator.visibility), visibility: this.fb.control(this.indicator.visibility),

View File

@ -28,7 +28,8 @@ declare var UIkit;
templateUrl: './topic.component.html', templateUrl: './topic.component.html',
}) })
export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent { export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
public subscriptions: any[] = []; private subscriptions: any[] = [];
private paramsSub: any;
public properties: EnvProperties; public properties: EnvProperties;
public stakeholderUtils: StakeholderUtils = new StakeholderUtils(); public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
public loading: boolean = true; public loading: boolean = true;
@ -79,7 +80,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
public ngOnInit() { public ngOnInit() {
this.properties = properties; this.properties = properties;
let subscription: Subscription; let subscription: Subscription;
this.subscriptions.push(this.route.params.subscribe(params => { this.paramsSub = this.route.params.subscribe(params => {
if (subscription) { if (subscription) {
subscription.unsubscribe(); subscription.unsubscribe();
} }
@ -107,8 +108,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
} }
}); });
this.subscriptions.push(subscription); this.subscriptions.push(subscription);
})); });
} }
public ngOnDestroy() { public ngOnDestroy() {
@ -117,9 +117,12 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
value.unsubscribe(); value.unsubscribe();
} }
}); });
if(this.paramsSub instanceof Subscriber) {
this.paramsSub.unsubscribe();
}
} }
canExit():boolean { canExit(): boolean {
this.subscriptions.forEach(value => { this.subscriptions.forEach(value => {
if (value instanceof Subscriber) { if (value instanceof Subscriber) {
value.unsubscribe(); value.unsubscribe();
@ -142,7 +145,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
this.saveSubCategory(); this.saveSubCategory();
} }
} }
// public closeDeleteModal() { // public closeDeleteModal() {
// this.deleteModal.cancel(); // this.deleteModal.cancel();
// } // }
@ -163,6 +166,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
_id: this.fb.control(topic._id), _id: this.fb.control(topic._id),
name: this.fb.control(topic.name, Validators.required), name: this.fb.control(topic.name, Validators.required),
description: this.fb.control(topic.description), description: this.fb.control(topic.description),
creationDate: this.fb.control(topic.creationDate),
alias: this.fb.control(topic.alias, [ alias: this.fb.control(topic.alias, [
Validators.required, Validators.required,
this.stakeholderUtils.aliasValidator(topics) this.stakeholderUtils.aliasValidator(topics)
@ -184,7 +188,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
})); }));
} }
public editTopicOpen(index= -1) { public editTopicOpen(index = -1) {
this.index = index; this.index = index;
this.type = 'topic'; this.type = 'topic';
if (index === -1) { if (index === -1) {
@ -213,7 +217,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
} }
} }
public changeTopicStatus(index: number, visibility:Visibility) { public changeTopicStatus(index: number, visibility: Visibility) {
this.type = 'topic'; this.type = 'topic';
let path = [ let path = [
this.stakeholder._id, this.stakeholder._id,
@ -221,16 +225,16 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
]; ];
this.changeStatus(this.stakeholder.topics[index], path, visibility); this.changeStatus(this.stakeholder.topics[index], path, visibility);
} }
public deleteTopicOpen( index=this.topicIndex, childrenAction: string = null) {
public deleteTopicOpen(index = this.topicIndex, childrenAction: string = null) {
this.type = 'topic'; this.type = 'topic';
this.index = index; this.index = index;
this.element = this.stakeholder.topics[this.index]; this.element = this.stakeholder.topics[this.index];
this.deleteOpen(childrenAction); this.deleteOpen(childrenAction);
} }
public deleteTopic(index=this.topicIndex) { public deleteTopic(index = this.topicIndex) {
let path: string[] = [ let path: string[] = [
this.stakeholder._id, this.stakeholder._id,
this.stakeholder.topics[index]._id this.stakeholder.topics[index]._id
@ -256,6 +260,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
_id: this.fb.control(category._id), _id: this.fb.control(category._id),
name: this.fb.control(category.name, Validators.required), name: this.fb.control(category.name, Validators.required),
description: this.fb.control(category.description), description: this.fb.control(category.description),
creationDate: this.fb.control(category.creationDate),
alias: this.fb.control(category.alias, [ alias: this.fb.control(category.alias, [
Validators.required, Validators.required,
this.stakeholderUtils.aliasValidator(categories) this.stakeholderUtils.aliasValidator(categories)
@ -305,7 +310,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
} }
} }
public changeCategoryStatus(index: number, visibility:Visibility) { public changeCategoryStatus(index: number, visibility: Visibility) {
this.index = index; this.index = index;
this.type = 'category'; this.type = 'category';
let path = [ let path = [
@ -315,7 +320,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
]; ];
this.changeStatus(this.stakeholder.topics[this.topicIndex].categories[this.index], path, visibility); this.changeStatus(this.stakeholder.topics[this.topicIndex].categories[this.index], path, visibility);
} }
public deleteCategoryOpen(index: number, childrenAction: string = null) { public deleteCategoryOpen(index: number, childrenAction: string = null) {
this.type = 'category'; this.type = 'category';
@ -342,6 +347,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
_id: this.fb.control(subCategory._id), _id: this.fb.control(subCategory._id),
name: this.fb.control(subCategory.name, Validators.required), name: this.fb.control(subCategory.name, Validators.required),
description: this.fb.control(subCategory.description), description: this.fb.control(subCategory.description),
creationDate: this.fb.control(subCategory.creationDate),
alias: this.fb.control(subCategory.alias, [ alias: this.fb.control(subCategory.alias, [
Validators.required, Validators.required,
this.stakeholderUtils.aliasValidator(subCategories) this.stakeholderUtils.aliasValidator(subCategories)
@ -395,20 +401,19 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
} }
} }
} }
public changeSubcategoryStatus(index: number, visibility:Visibility) { public changeSubcategoryStatus(index: number, visibility: Visibility) {
this.index = index; this.index = index;
this.type = 'subcategory'; this.type = 'subcategory';
let path = [ let path = [
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,
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index]._id this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index]._id
]; ];
this.changeStatus(this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index], path, visibility); this.changeStatus(this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index], path, visibility);
} }
public deleteSubcategoryOpen(index, childrenAction: string = null) { public deleteSubcategoryOpen(index, childrenAction: string = null) {
this.type = 'subcategory'; this.type = 'subcategory';
@ -450,12 +455,12 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
private deleteOpen(childrenAction: string = null) { private deleteOpen(childrenAction: string = null) {
this.elementChildrenActionOnDelete = null; this.elementChildrenActionOnDelete = null;
if(childrenAction == "delete") { if (childrenAction == "delete") {
this.elementChildrenActionOnDelete = childrenAction; this.elementChildrenActionOnDelete = childrenAction;
} else if(childrenAction == "disconnect") { } else if (childrenAction == "disconnect") {
this.elementChildrenActionOnDelete = childrenAction; this.elementChildrenActionOnDelete = childrenAction;
} }
this.deleteModal.alertTitle = 'Delete ' + this.type; this.deleteModal.alertTitle = 'Delete ' + this.type;
this.deleteModal.cancelButtonText = 'No'; this.deleteModal.cancelButtonText = 'No';
this.deleteModal.okButtonText = 'Yes'; this.deleteModal.okButtonText = 'Yes';
@ -467,7 +472,6 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
private save(message: string, path: string[], saveElement: any, callback: Function, redirect = false) { private save(message: string, path: string[], saveElement: any, callback: Function, redirect = false) {
this.subscriptions.push(this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, saveElement, path).subscribe(saveElement => { this.subscriptions.push(this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, saveElement, path).subscribe(saveElement => {
callback(saveElement); callback(saveElement);
this.stakeholderService.setStakeholder(this.stakeholder);
UIkit.notification(message, { UIkit.notification(message, {
status: 'success', status: 'success',
timeout: 3000, timeout: 3000,
@ -507,19 +511,18 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
}); });
})); }));
} }
public toggleStatusByIndex(index: number, visibility:Visibility, type) { public toggleStatusByIndex(index: number, visibility: Visibility, type) {
if(type == "sub"){ if (type == "sub") {
this.changeSubcategoryStatus(index,visibility); this.changeSubcategoryStatus(index, visibility);
}else if(type == "cat"){ } else if (type == "cat") {
this.changeCategoryStatus(index,visibility); this.changeCategoryStatus(index, visibility);
} } else if (type == "topic") {
else if(type == "topic") { this.changeTopicStatus(index, visibility);
this.changeTopicStatus(index,visibility);
} }
} }
private changeStatus(element: Topic | Category | SubCategory, path: string[], visibility:Visibility) { private changeStatus(element: Topic | Category | SubCategory, path: string[], visibility: Visibility) {
this.subscriptions.push(this.stakeholderService.changeVisibility(this.properties.monitorServiceAPIURL, path, visibility).subscribe(visibility => { this.subscriptions.push(this.stakeholderService.changeVisibility(this.properties.monitorServiceAPIURL, path, visibility).subscribe(visibility => {
element.visibility = visibility; element.visibility = visibility;
this.stakeholderService.setStakeholder(this.stakeholder); this.stakeholderService.setStakeholder(this.stakeholder);
@ -547,26 +550,27 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
this.categoryIndex = categoryIndex; this.categoryIndex = categoryIndex;
this.subCategoryIndex = subcategoryIndex; this.subCategoryIndex = subcategoryIndex;
} }
public getPluralTypeName(): string { public getPluralTypeName(): string {
if(this.type == "topic") { if (this.type == "topic") {
return "Topics"; return "Topics";
} else if(this.type == "category") { } else if (this.type == "category") {
return "Categories"; return "Categories";
} else if(this.type == "subcategory") { } else if (this.type == "subcategory") {
return "Subcategories"; return "Subcategories";
} else { } else {
return this.type; return this.type;
} }
} }
public get isSmallScreen() { public get isSmallScreen() {
return this.layoutService.isSmallScreen; return this.layoutService.isSmallScreen;
} }
public get open() { public get open() {
return this.layoutService.open; return this.layoutService.open;
} }
public toggleOpen(event: MouseEvent) { public toggleOpen(event: MouseEvent) {
event.preventDefault(); event.preventDefault();
this.layoutService.setOpen(!this.open); this.layoutService.setOpen(!this.open);