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

Merge pull request #10368 from vvlladd28/improvement/dialog-service/extend-dialog-component

Browse Source 
Automatically close default dialogs (Alert/Confirm/Error) on route change
This commit is contained in:
Igor Kulikov 2024-03-14 12:43:35 +02:00 committed by GitHub
commit 22041c072f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 51 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui-ngx/src/app/core/services/dialog.service.ts
View File

@ -21,22 +21,25 @@ import { TranslateService } from '@ngx-translate/core';
import { AuthService } from '@core/auth/auth.service'; import { AuthService } from '@core/auth/auth.service';
import { import {
ColorPickerDialogComponent, ColorPickerDialogComponent,
ColorPickerDialogData, ColorPickerDialogResult ColorPickerDialogData,
ColorPickerDialogResult
} from '@shared/components/dialog/color-picker-dialog.component'; } from '@shared/components/dialog/color-picker-dialog.component';
import { import {
MaterialIconsDialogComponent, MaterialIconsDialogComponent,
MaterialIconsDialogData, MaterialIconsDialogResult MaterialIconsDialogData,
MaterialIconsDialogResult
} from '@shared/components/dialog/material-icons-dialog.component'; } from '@shared/components/dialog/material-icons-dialog.component';
import { ConfirmDialogComponent } from '@shared/components/dialog/confirm-dialog.component'; import { ConfirmDialogComponent, ConfirmDialogData } from '@shared/components/dialog/confirm-dialog.component';
import { AlertDialogComponent } from '@shared/components/dialog/alert-dialog.component'; import { AlertDialogComponent, AlertDialogData } from '@shared/components/dialog/alert-dialog.component';
import { ErrorAlertDialogComponent } from '@shared/components/dialog/error-alert-dialog.component'; import {
ErrorAlertDialogComponent,
ErrorAlertDialogData
} from '@shared/components/dialog/error-alert-dialog.component';
import { TodoDialogComponent } from '@shared/components/dialog/todo-dialog.component'; import { TodoDialogComponent } from '@shared/components/dialog/todo-dialog.component';
@Injectable( @Injectable({
{
providedIn: 'root' providedIn: 'root'
} })
)
export class DialogService { export class DialogService {
constructor( constructor(
@ -47,7 +50,7 @@ export class DialogService {
} }
confirm(title: string, message: string, cancel: string = null, ok: string = null, fullscreen: boolean = false): Observable<boolean> { confirm(title: string, message: string, cancel: string = null, ok: string = null, fullscreen: boolean = false): Observable<boolean> {
const dialogConfig: MatDialogConfig = { const dialogConfig: MatDialogConfig<ConfirmDialogData> = {
disableClose: true, disableClose: true,
data: { data: {
title, title,
@ -59,12 +62,12 @@ export class DialogService {
if (fullscreen) { if (fullscreen) {
dialogConfig.panelClass = ['tb-fullscreen-dialog']; dialogConfig.panelClass = ['tb-fullscreen-dialog'];
} }
const dialogRef = this.dialog.open(ConfirmDialogComponent, dialogConfig); const dialogRef = this.dialog.open<ConfirmDialogComponent, ConfirmDialogData, boolean>(ConfirmDialogComponent, dialogConfig);
return dialogRef.afterClosed(); return dialogRef.afterClosed();
} }
alert(title: string, message: string, ok: string = null, fullscreen: boolean = false): Observable<boolean> { alert(title: string, message: string, ok: string = null, fullscreen: boolean = false): Observable<boolean> {
const dialogConfig: MatDialogConfig = { const dialogConfig: MatDialogConfig<AlertDialogData> = {
disableClose: true, disableClose: true,
data: { data: {
title, title,
@ -75,12 +78,12 @@ export class DialogService {
if (fullscreen) { if (fullscreen) {
dialogConfig.panelClass = ['tb-fullscreen-dialog']; dialogConfig.panelClass = ['tb-fullscreen-dialog'];
} }
const dialogRef = this.dialog.open(AlertDialogComponent, dialogConfig); const dialogRef = this.dialog.open<AlertDialogComponent, AlertDialogData, boolean>(AlertDialogComponent, dialogConfig);
return dialogRef.afterClosed(); return dialogRef.afterClosed();
} }
errorAlert(title: string, message: string, error: any, ok: string = null, fullscreen: boolean = false): Observable<any> { errorAlert(title: string, message: string, error: any, ok: string = null, fullscreen: boolean = false): Observable<boolean> {
const dialogConfig: MatDialogConfig = { const dialogConfig: MatDialogConfig<ErrorAlertDialogData> = {
disableClose: true, disableClose: true,
data: { data: {
title, title,
@ -92,7 +95,7 @@ export class DialogService {
if (fullscreen) { if (fullscreen) {
dialogConfig.panelClass = ['tb-fullscreen-dialog']; dialogConfig.panelClass = ['tb-fullscreen-dialog'];
} }
const dialogRef = this.dialog.open(ErrorAlertDialogComponent, dialogConfig); const dialogRef = this.dialog.open<ErrorAlertDialogComponent, ErrorAlertDialogData, boolean>(ErrorAlertDialogComponent, dialogConfig);
return dialogRef.afterClosed(); return dialogRef.afterClosed();
} }

14
ui-ngx/src/app/shared/components/dialog/alert-dialog.component.ts
View File

@ -16,6 +16,10 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DialogComponent } from '@shared/components/dialog.component';
import { AppState } from '@core/core.state';
import { Router } from '@angular/router';
import { Store } from '@ngrx/store';
export interface AlertDialogData { export interface AlertDialogData {
title: string; title: string;
@ -29,7 +33,11 @@ export interface AlertDialogData {
templateUrl: './alert-dialog.component.html', templateUrl: './alert-dialog.component.html',
styleUrls: ['./alert-dialog.component.scss'] styleUrls: ['./alert-dialog.component.scss']
}) })
export class AlertDialogComponent { export class AlertDialogComponent extends DialogComponent<AlertDialogComponent, boolean>{
constructor(public dialogRef: MatDialogRef<AlertDialogComponent>, constructor(protected store: Store<AppState>,
@Inject(MAT_DIALOG_DATA) public data: AlertDialogData) {} protected router: Router,
public dialogRef: MatDialogRef<AlertDialogComponent, boolean>,
@Inject(MAT_DIALOG_DATA) public data: AlertDialogData) {
super(store, router, dialogRef);
}
} }

14
ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.ts
View File

@ -16,6 +16,10 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DialogComponent } from '@shared/components/dialog.component';
import { AppState } from '@core/core.state';
import { Router } from '@angular/router';
import { Store } from '@ngrx/store';
export interface ConfirmDialogData { export interface ConfirmDialogData {
title: string; title: string;
@ -30,7 +34,11 @@ export interface ConfirmDialogData {
templateUrl: './confirm-dialog.component.html', templateUrl: './confirm-dialog.component.html',
styleUrls: ['./confirm-dialog.component.scss'] styleUrls: ['./confirm-dialog.component.scss']
}) })
export class ConfirmDialogComponent { export class ConfirmDialogComponent extends DialogComponent<ConfirmDialogComponent, boolean>{
constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>, constructor(protected store: Store<AppState>,
@Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData) {} protected router: Router,
public dialogRef: MatDialogRef<ConfirmDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData) {
super(store, router, dialogRef);
}
} }

11
ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.ts
View File

@ -16,6 +16,10 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { AppState } from '@core/core.state';
import { Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { DialogComponent } from '@shared/components/dialog.component';
export interface ErrorAlertDialogData { export interface ErrorAlertDialogData {
title: string; title: string;
@ -29,15 +33,18 @@ export interface ErrorAlertDialogData {
templateUrl: './error-alert-dialog.component.html', templateUrl: './error-alert-dialog.component.html',
styleUrls: ['./error-alert-dialog.component.scss'] styleUrls: ['./error-alert-dialog.component.scss']
}) })
export class ErrorAlertDialogComponent { export class ErrorAlertDialogComponent extends DialogComponent<ErrorAlertDialogComponent, boolean>{
title: string; title: string;
message: string; message: string;
errorMessage: string; errorMessage: string;
errorDetails?: string; errorDetails?: string;
constructor(public dialogRef: MatDialogRef<ErrorAlertDialogComponent>, constructor(protected store: Store<AppState>,
protected router: Router,
public dialogRef: MatDialogRef<ErrorAlertDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: ErrorAlertDialogData) { @Inject(MAT_DIALOG_DATA) public data: ErrorAlertDialogData) {
super(store, router, dialogRef);
this.title = this.data.title; this.title = this.data.title;
this.message = this.data.message; this.message = this.data.message;
this.errorMessage = this.data.error.message ? this.data.error.message : JSON.stringify(this.data.error); this.errorMessage = this.data.error.message ? this.data.error.message : JSON.stringify(this.data.error);