Do not use dashboard state param from url location inside embed dashboard dialog

This commit is contained in:
Igor Kulikov 2021-02-05 11:50:35 +02:00
parent 6f2a4409c1
commit 03fa7dcd41
6 changed files with 39 additions and 21 deletions

View File

@ -53,6 +53,7 @@
[isMobile]="isMobile"
[state]="dashboardCtx.state"
[currentState]="currentState"
[syncStateWithQueryParam]="syncStateWithQueryParam"
[states]="dashboardConfiguration.states">
</tb-states-component>
</div>

View File

@ -123,6 +123,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
@Input()
hideToolbar: boolean;
@Input()
syncStateWithQueryParam = true;
@Input()
dashboard: Dashboard;
dashboardConfiguration: DashboardConfiguration;

View File

@ -88,6 +88,8 @@ export abstract class StateControllerComponent implements IStateControllerCompon
currentState: string;
syncStateWithQueryParam: boolean;
private rxSubscriptions = new Array<Subscription>();
private inited = false;
@ -99,6 +101,7 @@ export abstract class StateControllerComponent implements IStateControllerCompon
}
ngOnInit(): void {
if (this.syncStateWithQueryParam) {
this.rxSubscriptions.push(this.route.queryParamMap.subscribe((paramMap) => {
const dashboardId = this.route.snapshot.params.dashboardId || '';
if (this.dashboardId === dashboardId) {
@ -111,6 +114,7 @@ export abstract class StateControllerComponent implements IStateControllerCompon
}
}
}));
}
this.init();
this.inited = true;
}
@ -124,7 +128,8 @@ export abstract class StateControllerComponent implements IStateControllerCompon
protected updateStateParam(newState: string) {
this.currentState = newState;
const queryParams: Params = { state: this.currentState };
if (this.syncStateWithQueryParam) {
const queryParams: Params = {state: this.currentState};
this.ngZone.run(() => {
this.router.navigate(
[],
@ -135,6 +140,7 @@ export abstract class StateControllerComponent implements IStateControllerCompon
});
});
}
}
public openRightLayout(): void {
this.dashboardCtrl.openRightLayout();

View File

@ -24,6 +24,7 @@ export interface IStateControllerComponent extends IStateController {
stateControllerInstanceId: string;
state: string;
currentState: string;
syncStateWithQueryParam: boolean;
isMobile: boolean;
states: {[id: string]: DashboardState };
dashboardId: string;

View File

@ -53,6 +53,9 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
@Input()
currentState: string;
@Input()
syncStateWithQueryParam: boolean;
@Input()
isMobile: boolean;
@ -89,6 +92,8 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
this.stateControllerComponent.state = this.state;
} else if (propName === 'currentState') {
this.stateControllerComponent.currentState = this.currentState;
} else if (propName === 'syncStateWithQueryParam') {
this.stateControllerComponent.syncStateWithQueryParam = this.syncStateWithQueryParam;
}
}
}
@ -119,6 +124,7 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
this.stateControllerComponent.stateControllerInstanceId = stateControllerInstanceId;
this.stateControllerComponent.state = this.state;
this.stateControllerComponent.currentState = this.currentState;
this.stateControllerComponent.syncStateWithQueryParam = this.syncStateWithQueryParam;
this.stateControllerComponent.isMobile = this.isMobile;
this.stateControllerComponent.states = this.states;
this.stateControllerComponent.dashboardId = this.dashboardId;

View File

@ -27,7 +27,8 @@
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div class="dashboard-state-dialog-content" mat-dialog-content fxFlex fxLayout="column" style="padding: 8px;">
<tb-dashboard-page [embedded]="true" [hideToolbar]="hideToolbar" [currentState]="state" [dashboard]="dashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
<tb-dashboard-page [embedded]="true" [syncStateWithQueryParam]="false" [hideToolbar]="hideToolbar"
[currentState]="state" [dashboard]="dashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<button mat-button color="primary"