dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
View File

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

3
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
View File

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

46
ui-ngx/src/app/modules/home/components/dashboard-page/states/state-controller.component.ts
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,18 +101,20 @@ export abstract class StateControllerComponent implements IStateControllerCompon
}
ngOnInit(): void {
this.rxSubscriptions.push(this.route.queryParamMap.subscribe((paramMap) => {
const dashboardId = this.route.snapshot.params.dashboardId || '';
if (this.dashboardId === dashboardId) {
const newState = this.decodeStateParam(paramMap.get('state'));
if (this.currentState !== newState) {
this.currentState = newState;
if (this.inited) {
this.onStateChanged();
if (this.syncStateWithQueryParam) {
this.rxSubscriptions.push(this.route.queryParamMap.subscribe((paramMap) => {
const dashboardId = this.route.snapshot.params.dashboardId || '';
if (this.dashboardId === dashboardId) {
const newState = this.decodeStateParam(paramMap.get('state'));
if (this.currentState !== newState) {
this.currentState = newState;
if (this.inited) {
this.onStateChanged();
}
}
}
}
}));
}));
}
this.init();
this.inited = true;
}
@ -124,16 +128,18 @@ export abstract class StateControllerComponent implements IStateControllerCompon
protected updateStateParam(newState: string) {
this.currentState = newState;
const queryParams: Params = { state: this.currentState };
this.ngZone.run(() => {
this.router.navigate(
[],
{
relativeTo: this.route,
queryParams,
queryParamsHandling: 'merge',
});
});
if (this.syncStateWithQueryParam) {
const queryParams: Params = {state: this.currentState};
this.ngZone.run(() => {
this.router.navigate(
[],
{
relativeTo: this.route,
queryParams,
queryParamsHandling: 'merge',
});
});
}
}
public openRightLayout(): void {

1
ui-ngx/src/app/modules/home/components/dashboard-page/states/state-controller.models.ts
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;

6
ui-ngx/src/app/modules/home/components/dashboard-page/states/states-component.directive.ts
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;

3
ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
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"