diff --git a/ui-ngx/src/app/core/api/widget-api.models.ts b/ui-ngx/src/app/core/api/widget-api.models.ts index b26abdb320..1579ae8d1e 100644 --- a/ui-ngx/src/app/core/api/widget-api.models.ts +++ b/ui-ngx/src/app/core/api/widget-api.models.ts @@ -53,6 +53,7 @@ import { EntityDataService } from '@core/api/entity-data.service'; import { PageData } from '@shared/models/page/page-data'; import { TranslateService } from '@ngx-translate/core'; import { AlarmDataService } from '@core/api/alarm-data.service'; +import { IDashboardController } from '@home/components/dashboard-page/dashboard-page.models'; export interface TimewindowFunctions { onUpdateTimewindow: (startTimeMs: number, endTimeMs: number, interval?: number) => void; @@ -137,6 +138,7 @@ export interface StateParams { export type StateControllerHolder = () => IStateController; export interface IStateController { + dashboardCtrl: IDashboardController; getStateParams(): StateParams; getStateParamsByStateId(stateId: string): StateParams; openState(id: string, params?: StateParams, openRightLayout?: boolean): void; diff --git a/ui-ngx/src/app/modules/dashboard/dashboard-pages.module.ts b/ui-ngx/src/app/modules/dashboard/dashboard-pages.module.ts index f09c80fea4..b7e11982f9 100644 --- a/ui-ngx/src/app/modules/dashboard/dashboard-pages.module.ts +++ b/ui-ngx/src/app/modules/dashboard/dashboard-pages.module.ts @@ -19,7 +19,6 @@ import { CommonModule } from '@angular/common'; import { SharedModule } from '@shared/shared.module'; import { HomeComponentsModule } from '@modules/home/components/home-components.module'; import { HomeDialogsModule } from '@app/modules/home/dialogs/home-dialogs.module'; -import { DashboardModule } from '@home/pages/dashboard/dashboard.module'; import { DashboardPagesRoutingModule } from './dashboard-pages.routing.module'; @NgModule({ @@ -28,7 +27,6 @@ import { DashboardPagesRoutingModule } from './dashboard-pages.routing.module'; SharedModule, HomeComponentsModule, HomeDialogsModule, - DashboardModule, DashboardPagesRoutingModule ] }) diff --git a/ui-ngx/src/app/modules/dashboard/dashboard-pages.routing.module.ts b/ui-ngx/src/app/modules/dashboard/dashboard-pages.routing.module.ts index 1354f9ef2b..2d500f1da4 100644 --- a/ui-ngx/src/app/modules/dashboard/dashboard-pages.routing.module.ts +++ b/ui-ngx/src/app/modules/dashboard/dashboard-pages.routing.module.ts @@ -18,7 +18,7 @@ import { Injectable, NgModule } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/router'; import { Authority } from '@shared/models/authority.enum'; -import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component'; +import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component'; import { Dashboard } from '@app/shared/models/dashboard.models'; import { DashboardService } from '@core/http/dashboard.service'; import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/add-widget-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/pages/dashboard/add-widget-dialog.component.html rename to ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/add-widget-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.ts similarity index 100% rename from ui-ngx/src/app/modules/home/pages/dashboard/add-widget-dialog.component.ts rename to ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.ts diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html similarity index 97% rename from ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html rename to ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html index 5aae43bec6..97f5071955 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html @@ -21,7 +21,7 @@
-
@@ -52,6 +52,7 @@ [dashboardId]="dashboard.id ? dashboard.id.id : ''" [isMobile]="isMobile" [state]="dashboardCtx.state" + [currentState]="currentState" [states]="dashboardConfiguration.states">
@@ -183,11 +184,12 @@
- - + + + +
+
+ +
+
+ +
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.scss new file mode 100644 index 0000000000..b13379a744 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.scss @@ -0,0 +1,42 @@ +/** + * Copyright © 2016-2021 The Thingsboard Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +:host { + .dashboard-state-dialog { + .mat-dialog-content.dashboard-state-dialog-content { + max-height: 100%; + } + + @media screen and (max-width: 599px) { + width: 100% !important; + height: 100% !important; + } + + @media screen and (min-width: 600px) { + width: 480px; + height: 600px; + } + + @media screen and (min-width: 960px) { + width: 768px; + height: 600px; + } + + @media screen and (min-width: 1280px) { + width: 1000px; + height: 800px; + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.ts new file mode 100644 index 0000000000..0d12f3c22c --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.ts @@ -0,0 +1,79 @@ +/// +/// Copyright © 2016-2021 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { + Component, + ComponentFactoryResolver, + Inject, + Injector, + OnInit, + ViewChild, + ViewContainerRef +} from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { Router } from '@angular/router'; +import { DialogComponent } from '@shared/components/dialog.component'; +import { Dashboard } from '@shared/models/dashboard.models'; + +export interface EmbedDashboardDialogData { + dashboard: Dashboard; + state: string; + title: string; + hideToolbar: boolean; + width?: number; + height?: number; +} + +@Component({ + selector: 'tb-embed-dashboard-dialog', + templateUrl: './embed-dashboard-dialog.component.html', + styleUrls: ['./embed-dashboard-dialog.component.scss'] +}) +export class EmbedDashboardDialogComponent extends DialogComponent + implements OnInit { + + @ViewChild('dashboardContent', {read: ViewContainerRef, static: true}) dashboardContentContainer: ViewContainerRef; + + dashboard = this.data.dashboard; + state = this.data.state; + title = this.data.title; + hideToolbar = this.data.hideToolbar; + + dialogStyle: any = {}; + + constructor(protected store: Store, + protected router: Router, + @Inject(MAT_DIALOG_DATA) public data: EmbedDashboardDialogData, + public dialogRef: MatDialogRef) { + super(store, router, dialogRef); + if (this.data.width) { + this.dialogStyle.width = this.data.width + 'vw'; + } + if (this.data.height) { + this.dialogStyle.height = this.data.height + 'vh'; + } + } + + ngOnInit(): void { + } + + close(): void { + this.dialogRef.close(null); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts index ef5555e5eb..e780bbfedf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts @@ -22,6 +22,7 @@ import { ComponentFactoryResolver, ComponentRef, ElementRef, + Inject, Injector, Input, NgZone, @@ -54,7 +55,7 @@ import { AppState } from '@core/core.state'; import { WidgetService } from '@core/http/widget.service'; import { UtilsService } from '@core/services/utils.service'; import { forkJoin, Observable, of, ReplaySubject, Subscription, throwError } from 'rxjs'; -import { deepClone, isDefined, objToBase64URI } from '@core/utils'; +import { deepClone, insertVariable, isDefined, objToBase64, objToBase64URI } from '@core/utils'; import { IDynamicWidgetComponent, WidgetContext, @@ -93,6 +94,10 @@ import { EntityDataService } from '@core/api/entity-data.service'; import { TranslateService } from '@ngx-translate/core'; import { NotificationType } from '@core/notification/notification.models'; import { AlarmDataService } from '@core/api/alarm-data.service'; +import { MatDialog } from '@angular/material/dialog'; +import { ComponentType } from '@angular/cdk/portal'; +import { EMBED_DASHBOARD_DIALOG_TOKEN } from '@home/components/widget/dialog/embed-dashboard-dialog-token'; +import { Dashboard } from '@shared/models/dashboard.models'; @Component({ selector: 'tb-widget', @@ -161,6 +166,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI private componentFactoryResolver: ComponentFactoryResolver, private elementRef: ElementRef, private injector: Injector, + private dialog: MatDialog, + @Inject(EMBED_DASHBOARD_DIALOG_TOKEN) private embedDashboardDialogComponent: ComponentType, private widgetService: WidgetService, private resources: ResourcesService, private timeService: TimeService, @@ -1007,7 +1014,11 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI const params = deepClone(this.widgetContext.stateController.getStateParams()); this.updateEntityParams(params, targetEntityParamName, targetEntityId, entityName, entityLabel); if (type === WidgetActionType.openDashboardState) { - this.widgetContext.stateController.openState(targetDashboardStateId, params, descriptor.openRightLayout); + if (descriptor.openInSeparateDialog) { + this.openDashboardStateInDialog(descriptor, entityId, entityName, additionalParams, entityLabel); + } else { + this.widgetContext.stateController.openState(targetDashboardStateId, params, descriptor.openRightLayout); + } } else { this.widgetContext.stateController.updateState(targetDashboardStateId, params, descriptor.openRightLayout); } @@ -1083,6 +1094,61 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI } } + private openDashboardStateInDialog(descriptor: WidgetActionDescriptor, + entityId?: EntityId, entityName?: string, additionalParams?: any, entityLabel?: string) { + const dashboard = deepClone(this.widgetContext.stateController.dashboardCtrl.dashboardCtx.getDashboard()); + const stateObject: StateObject = {}; + stateObject.params = {}; + const targetEntityParamName = descriptor.stateEntityParamName; + const targetDashboardStateId = descriptor.targetDashboardStateId; + let targetEntityId: EntityId; + if (descriptor.setEntityId) { + targetEntityId = entityId; + } + this.updateEntityParams(stateObject.params, targetEntityParamName, targetEntityId, entityName, entityLabel); + if (targetDashboardStateId) { + stateObject.id = targetDashboardStateId; + } + let title = descriptor.dialogTitle; + if (!title) { + if (targetDashboardStateId && dashboard.configuration.states) { + const dashboardState = dashboard.configuration.states[targetDashboardStateId]; + if (dashboardState) { + title = dashboardState.name; + } + } + } + if (!title) { + title = dashboard.title; + } + title = this.utils.customTranslation(title, title); + const params = stateObject.params; + const paramsEntityName = params && params.entityName ? params.entityName : ''; + const paramsEntityLabel = params && params.entityLabel ? params.entityLabel : ''; + title = insertVariable(title, 'entityName', paramsEntityName); + title = insertVariable(title, 'entityLabel', paramsEntityLabel); + for (const prop of Object.keys(params)) { + if (params[prop] && params[prop].entityName) { + title = insertVariable(title, prop + ':entityName', params[prop].entityName); + } + if (params[prop] && params[prop].entityLabel) { + title = insertVariable(title, prop + ':entityLabel', params[prop].entityLabel); + } + } + this.dialog.open(this.embedDashboardDialogComponent, { + disableClose: true, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], + data: { + dashboard, + state: objToBase64([ stateObject ]), + title, + hideToolbar: descriptor.dialogHideDashboardToolbar, + width: descriptor.dialogWidth, + height: descriptor.dialogHeight + } + }); + } + private elementClick($event: Event) { const e = ($event.target || $event.srcElement) as Element; if (e.id) { diff --git a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.module.ts b/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.module.ts index a95b396d92..47bf4bd0d2 100644 --- a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.module.ts +++ b/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.module.ts @@ -19,7 +19,6 @@ import { CommonModule } from '@angular/common'; import { SharedModule } from '@app/shared/shared.module'; import { HomeComponentsModule } from '@modules/home/components/home-components.module'; import { ApiUsageComponent } from '@home/pages/api-usage/api-usage.component'; -import { DashboardModule } from '@home/pages/dashboard/dashboard.module'; import { ApiUsageRoutingModule } from '@home/pages/api-usage/api-usage-routing.module'; @NgModule({ @@ -31,7 +30,6 @@ import { ApiUsageRoutingModule } from '@home/pages/api-usage/api-usage-routing.m CommonModule, SharedModule, HomeComponentsModule, - DashboardModule, ApiUsageRoutingModule ] }) diff --git a/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts b/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts index 166efa46e2..2807baae04 100644 --- a/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts +++ b/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts @@ -24,7 +24,7 @@ import { CustomersTableConfigResolver } from './customers-table-config.resolver' import { DevicesTableConfigResolver } from '@modules/home/pages/device/devices-table-config.resolver'; import { AssetsTableConfigResolver } from '../asset/assets-table-config.resolver'; import { DashboardsTableConfigResolver } from '@modules/home/pages/dashboard/dashboards-table-config.resolver'; -import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component'; +import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component'; import { BreadCrumbConfig } from '@shared/components/breadcrumb'; import { dashboardBreadcumbLabelFunction, DashboardResolver } from '@home/pages/dashboard/dashboard-routing.module'; diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts index 7cf02aea32..55c1fc0d28 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts @@ -20,7 +20,7 @@ import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/ import { EntitiesTableComponent } from '../../components/entity/entities-table.component'; import { Authority } from '@shared/models/authority.enum'; import { DashboardsTableConfigResolver } from './dashboards-table-config.resolver'; -import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component'; +import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component'; import { BreadCrumbConfig, BreadCrumbLabelFunction } from '@shared/components/breadcrumb'; import { Observable } from 'rxjs'; import { Dashboard } from '@app/shared/models/dashboard.models'; diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard.module.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard.module.ts index 9b4e8690d7..0c1e7887f0 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard.module.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard.module.ts @@ -24,44 +24,19 @@ import { DashboardRoutingModule } from './dashboard-routing.module'; import { MakeDashboardPublicDialogComponent } from '@modules/home/pages/dashboard/make-dashboard-public-dialog.component'; import { HomeComponentsModule } from '@modules/home/components/home-components.module'; import { DashboardTabsComponent } from '@home/pages/dashboard/dashboard-tabs.component'; -import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component'; -import { DashboardToolbarComponent } from './dashboard-toolbar.component'; -import { StatesControllerModule } from '@home/pages/dashboard/states/states-controller.module'; -import { DashboardLayoutComponent } from './layout/dashboard-layout.component'; -import { EditWidgetComponent } from './edit-widget.component'; -import { DashboardWidgetSelectComponent } from './dashboard-widget-select.component'; -import { AddWidgetDialogComponent } from './add-widget-dialog.component'; -import { ManageDashboardLayoutsDialogComponent } from './layout/manage-dashboard-layouts-dialog.component'; -import { DashboardSettingsDialogComponent } from './dashboard-settings-dialog.component'; -import { ManageDashboardStatesDialogComponent } from './states/manage-dashboard-states-dialog.component'; -import { DashboardStateDialogComponent } from './states/dashboard-state-dialog.component'; @NgModule({ declarations: [ DashboardFormComponent, DashboardTabsComponent, ManageDashboardCustomersDialogComponent, - MakeDashboardPublicDialogComponent, - DashboardToolbarComponent, - DashboardPageComponent, - DashboardLayoutComponent, - EditWidgetComponent, - DashboardWidgetSelectComponent, - AddWidgetDialogComponent, - ManageDashboardLayoutsDialogComponent, - DashboardSettingsDialogComponent, - ManageDashboardStatesDialogComponent, - DashboardStateDialogComponent - ], - exports: [ - DashboardPageComponent + MakeDashboardPublicDialogComponent ], imports: [ CommonModule, SharedModule, HomeComponentsModule, HomeDialogsModule, - StatesControllerModule, DashboardRoutingModule ] }) diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index 24ea528b46..179a6ff47b 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -345,6 +345,11 @@ export interface WidgetActionDescriptor extends CustomActionDescriptor { targetDashboardStateId?: string; openRightLayout?: boolean; openNewBrowserTab?: boolean; + openInSeparateDialog?: boolean; + dialogTitle?: string; + dialogHideDashboardToolbar?: boolean; + dialogWidth?: number; + dialogHeight?: number; setEntityId?: boolean; stateEntityParamName?: string; } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 5ebc491c49..a099baaeb3 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2258,6 +2258,12 @@ "set-entity-from-widget": "Set entity from widget", "target-dashboard": "Target dashboard", "open-right-layout": "Open right dashboard layout (mobile view)", + "open-in-separate-dialog": "Open in separate dialog", + "dialog-title": "Dialog title", + "dialog-hide-dashboard-toolbar": "Hide dashboard toolbar in dialog", + "dialog-width": "Dialog width in percents relative to viewport width", + "dialog-height": "Dialog height in percents relative to viewport height", + "dialog-size-range-error": "Dialog size percent value should be in a range from 1 to 100.", "open-new-browser-tab": "Open in a new browser tab" }, "widgets-bundle": {