Igor Kulikov
7 years ago
15 changed files with 348 additions and 10 deletions
@ -0,0 +1,85 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 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 { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
||||
|
import { |
||||
|
Inject, |
||||
|
ComponentRef, |
||||
|
ElementRef, |
||||
|
ViewContainerRef, |
||||
|
ComponentFactory, |
||||
|
Injector, |
||||
|
ReflectiveInjector, |
||||
|
Component, |
||||
|
OnDestroy |
||||
|
} from '@angular/core'; |
||||
|
import { DialogComponent } from '@shared/components/dialog.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { |
||||
|
CustomDialogComponent, |
||||
|
CUSTOM_DIALOG_DATA, |
||||
|
CustomDialogData |
||||
|
} from '@home/components/widget/dialog/custom-dialog.component'; |
||||
|
|
||||
|
export interface CustomDialogContainerData { |
||||
|
controller: (instance: CustomDialogComponent) => void; |
||||
|
data?: any; |
||||
|
customComponentFactory: ComponentFactory<CustomDialogComponent>; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-custom-dialog-container-component', |
||||
|
template: '' |
||||
|
}) |
||||
|
export class CustomDialogContainerComponent extends DialogComponent<CustomDialogContainerComponent, any> implements OnDestroy { |
||||
|
|
||||
|
private customComponentRef: ComponentRef<CustomDialogComponent>; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
public viewContainerRef: ViewContainerRef, |
||||
|
public dialogRef: MatDialogRef<CustomDialogContainerComponent, any>, |
||||
|
@Inject(MAT_DIALOG_DATA) public data: CustomDialogContainerData) { |
||||
|
super(store, router, dialogRef); |
||||
|
let customDialogData: CustomDialogData = { |
||||
|
controller: this.data.controller |
||||
|
}; |
||||
|
if (this.data.data) { |
||||
|
customDialogData = {...customDialogData, ...this.data.data}; |
||||
|
} |
||||
|
const injector: Injector = ReflectiveInjector.resolveAndCreate([ |
||||
|
{ |
||||
|
provide: CUSTOM_DIALOG_DATA, |
||||
|
useValue: customDialogData |
||||
|
}, |
||||
|
{ |
||||
|
provide: MatDialogRef, |
||||
|
useValue: dialogRef |
||||
|
} |
||||
|
]); |
||||
|
this.customComponentRef = this.viewContainerRef.createComponent(this.data.customComponentFactory, 0, injector); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
super.ngOnDestroy(); |
||||
|
if (this.customComponentRef) { |
||||
|
this.customComponentRef.destroy(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,48 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 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 { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
||||
|
import { Inject, InjectionToken } from '@angular/core'; |
||||
|
import { DialogComponent } from '@shared/components/dialog.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { CustomDialogContainerComponent } from './custom-dialog-container.component'; |
||||
|
import { FormBuilder, Validators } from '@angular/forms'; |
||||
|
|
||||
|
export const CUSTOM_DIALOG_DATA = new InjectionToken<any>('ConfigDialogData'); |
||||
|
|
||||
|
export interface CustomDialogData { |
||||
|
controller: (instance: CustomDialogComponent) => void; |
||||
|
[key: string]: any; |
||||
|
} |
||||
|
|
||||
|
export class CustomDialogComponent extends PageComponent { |
||||
|
|
||||
|
[key: string]: any; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
public dialogRef: MatDialogRef<CustomDialogContainerComponent>, |
||||
|
public fb: FormBuilder, |
||||
|
@Inject(CUSTOM_DIALOG_DATA) public data: CustomDialogData) { |
||||
|
super(store); |
||||
|
// @ts-ignore
|
||||
|
this.Validators = Validators; |
||||
|
this.data.controller(this); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,85 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 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 { Injectable, Injector, NgModule } from '@angular/core'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
import { MatDialog } from '@angular/material'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { AuthService } from '@core/auth/auth.service'; |
||||
|
import { DynamicComponentFactoryService } from '@core/services/dynamic-component-factory.service'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { SharedModule } from '@shared/shared.module'; |
||||
|
import { mergeMap, tap } from 'rxjs/operators'; |
||||
|
import { CustomDialogComponent } from './custom-dialog.component'; |
||||
|
import { |
||||
|
CustomDialogContainerComponent, |
||||
|
CustomDialogContainerData |
||||
|
} from '@home/components/widget/dialog/custom-dialog-container.component'; |
||||
|
|
||||
|
@Injectable() |
||||
|
export class CustomDialogService { |
||||
|
|
||||
|
constructor( |
||||
|
private translate: TranslateService, |
||||
|
private authService: AuthService, |
||||
|
private dynamicComponentFactoryService: DynamicComponentFactoryService, |
||||
|
private injector: Injector, |
||||
|
public dialog: MatDialog |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
customDialog(template: string, controller: (instance: CustomDialogComponent) => void, data?: any): Observable<any> { |
||||
|
return this.dynamicComponentFactoryService.createDynamicComponentFactory( |
||||
|
class CustomDialogComponentInstance extends CustomDialogComponent {}, |
||||
|
template, |
||||
|
[SharedModule, CustomDialogModule]).pipe( |
||||
|
mergeMap((factory) => { |
||||
|
const dialogData: CustomDialogContainerData = { |
||||
|
controller, |
||||
|
customComponentFactory: factory, |
||||
|
data |
||||
|
}; |
||||
|
return this.dialog.open<CustomDialogContainerComponent, CustomDialogContainerData, any>( |
||||
|
CustomDialogContainerComponent, |
||||
|
{ |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
data: dialogData |
||||
|
}).afterClosed().pipe( |
||||
|
tap(() => { |
||||
|
this.dynamicComponentFactoryService.destroyDynamicComponentFactory(factory); |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
)); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@NgModule({ |
||||
|
entryComponents: [ |
||||
|
], |
||||
|
declarations: |
||||
|
[ |
||||
|
], |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
SharedModule |
||||
|
], |
||||
|
exports: [ |
||||
|
] |
||||
|
}) |
||||
|
class CustomDialogModule { } |
||||
Loading…
Reference in new issue