@ -15,6 +15,7 @@
///
import {
AfterViewInit ,
ChangeDetectionStrategy ,
ChangeDetectorRef ,
Component ,
@ -56,7 +57,8 @@ import { WINDOW } from '@core/services/window.service';
import { WindowMessage } from '@shared/models/window-message.model' ;
import { deepClone , guid , isDefined , isDefinedAndNotNull , isNotEmptyStr } from '@app/core/utils' ;
import {
DashboardContext , DashboardPageInitData ,
DashboardContext ,
DashboardPageInitData ,
DashboardPageLayout ,
DashboardPageLayoutContext ,
DashboardPageLayouts ,
@ -148,6 +150,7 @@ import { TbPopoverService } from '@shared/components/popover.service';
import { tap } from 'rxjs/operators' ;
import { LayoutFixedSize , LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models' ;
import { TbPopoverComponent } from '@shared/components/popover.component' ;
import { ResizeObserver } from '@juggle/resize-observer' ;
// @dynamic
@Component ( {
@ -157,7 +160,7 @@ import { TbPopoverComponent } from '@shared/components/popover.component';
encapsulation : ViewEncapsulation.None ,
changeDetection : ChangeDetectionStrategy.OnPush
} )
export class DashboardPageComponent extends PageComponent implements IDashboardController , OnInit , OnDestroy {
export class DashboardPageComponent extends PageComponent implements IDashboardController , OnInit , AfterViewInit , OnDestroy {
authState : AuthState = getCurrentAuthState ( this . store ) ;
@ -244,9 +247,14 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
addingLayoutCtx : DashboardPageLayoutContext ;
mainLayoutSize : { width : string ; height : string } = { width : '100%' , height : '100%' } ;
rightLayoutSize : { width : string ; height : string } = { width : '100%' , height : '100%' } ;
private dashboardLogoCache : SafeUrl ;
private defaultDashboardLogo = 'assets/logo_title_white.svg' ;
private dashboardResize$ : ResizeObserver ;
dashboardCtx : DashboardContext = {
instanceId : this.utils.guid ( ) ,
getDashboard : ( ) = > this . dashboard ,
@ -402,6 +410,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
. observe ( MediaBreakpoints [ 'gt-sm' ] )
. subscribe ( ( state : BreakpointState ) = > {
this . isMobile = ! state . matches ;
this . updateLayoutSizes ( ) ;
}
) ) ;
if ( this . isMobileApp && this . syncStateWithQueryParam ) {
@ -414,6 +423,13 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
}
ngAfterViewInit() {
this . dashboardResize $ = new ResizeObserver ( ( ) = > {
this . updateLayoutSizes ( ) ;
} ) ;
this . dashboardResize $ . observe ( this . dashboardContainer . nativeElement ) ;
}
private init ( data : DashboardPageInitData ) {
this . reset ( ) ;
@ -537,6 +553,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
subscription . unsubscribe ( ) ;
} ) ;
this . rxSubscriptions . length = 0 ;
if ( this . dashboardResize $ ) {
this . dashboardResize $ . disconnect ( ) ;
}
}
public runChangeDetection() {
@ -679,28 +698,48 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
this . mobileService . onDashboardRightLayoutChanged ( this . isRightLayoutOpened ) ;
}
public mainLayoutWidth ( ) : string {
if ( this . isEditingWidget && this . editingLayoutCtx . id === 'main' ) {
return '100%' ;
} else {
return this . layouts . right . show && ! this . isMobile ? this . calculateWidth ( 'main' ) : '100%' ;
private updateLayoutSizes() {
let changeMainLayoutSize = false ;
let changeRightLayoutSize = false ;
if ( this . dashboardCtx . state ) {
changeMainLayoutSize = this . updateMainLayoutSize ( ) ;
changeRightLayoutSize = this . updateRightLayoutSize ( ) ;
}
if ( changeMainLayoutSize || changeRightLayoutSize ) {
this . cd . markForCheck ( ) ;
}
}
public mainLayoutHeight ( ) : string {
private updateMainLayoutSize ( ) : boolean {
const prevMainLayoutWidth = this . mainLayoutSize . width ;
const prevMainLayoutHeight = this . mainLayoutSize . height ;
if ( this . isEditingWidget && this . editingLayoutCtx . id === 'main' ) {
this . mainLayoutSize . width = '100%' ;
} else {
this . mainLayoutSize . width = this . layouts . right . show && ! this . isMobile ? this . calculateWidth ( 'main' ) : '100%' ;
}
if ( ! this . isEditingWidget || this . editingLayoutCtx . id === 'main' ) {
return '100%' ;
this . mainLayoutSize . height = '100%' ;
} else {
return '0px' ;
this . mainLayoutSize . height = '0px' ;
}
return prevMainLayoutWidth !== this . mainLayoutSize . width || prevMainLayoutHeight !== this . mainLayoutSize . height ;
}
public rightLayoutWidth ( ) : string {
private updateRightLayoutSize ( ) : boolean {
const prevRightLayoutWidth = this . rightLayoutSize . width ;
const prevRightLayoutHeight = this . rightLayoutSize . height ;
if ( this . isEditingWidget && this . editingLayoutCtx . id === 'right' ) {
return '100%' ;
this . rightLayoutSize . width = '100%' ;
} else {
this . rightLayoutSize . width = this . isMobile ? '100%' : this . calculateWidth ( 'right' ) ;
}
if ( ! this . isEditingWidget || this . editingLayoutCtx . id === 'right' ) {
this . rightLayoutSize . height = '100%' ;
} else {
return this . isMobile ? '100%' : this . calculateWidth ( 'right' ) ;
this . rightLayoutSize . height = '0px' ;
}
return prevRightLayoutWidth !== this . rightLayoutSize . width || prevRightLayoutHeight !== this . rightLayoutSize . height ;
}
private calculateWidth ( layout : DashboardLayoutId ) : string {
@ -743,14 +782,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
}
public rightLayoutHeight ( ) : string {
if ( ! this . isEditingWidget || this . editingLayoutCtx . id === 'right' ) {
return '100%' ;
} else {
return '0px' ;
}
}
public isPublicUser ( ) : boolean {
return this . authUser . isPublic ;
}
@ -977,6 +1008,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
layout . layoutCtx . ctrl . reload ( ) ;
}
layout . layoutCtx . ignoreLoading = true ;
this . updateLayoutSizes ( ) ;
}
private setEditMode ( isEdit : boolean , revert : boolean ) {
@ -1191,6 +1223,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
this . editingLayoutCtx = null ;
this . editingWidgetSubtitle = null ;
this . isEditingWidget = false ;
this . updateLayoutSizes ( ) ;
this . resetHighlight ( ) ;
this . forceDashboardMobileMode = false ;
}
@ -1216,6 +1249,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
this . editingWidgetSubtitle = this . widgetComponentService . getInstantWidgetInfo ( this . editingWidget ) . widgetName ;
this . forceDashboardMobileMode = true ;
this . isEditingWidget = true ;
this . updateLayoutSizes ( ) ;
if ( layoutCtx ) {
const delayOffset = transition ? 350 : 0 ;
const delay = transition ? 400 : 300 ;
Andrii Shvaika
3 years ago