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

37
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 {
ColorPickerDialogComponent,
ColorPickerDialogData, ColorPickerDialogResult
ColorPickerDialogData,
ColorPickerDialogResult
} from '@shared/components/dialog/color-picker-dialog.component';
import {
MaterialIconsDialogComponent,
MaterialIconsDialogData, MaterialIconsDialogResult
MaterialIconsDialogData,
MaterialIconsDialogResult
} from '@shared/components/dialog/material-icons-dialog.component';
import { ConfirmDialogComponent } from '@shared/components/dialog/confirm-dialog.component';
import { AlertDialogComponent } from '@shared/components/dialog/alert-dialog.component';
import { ErrorAlertDialogComponent } from '@shared/components/dialog/error-alert-dialog.component';
import { ConfirmDialogComponent, ConfirmDialogData } from '@shared/components/dialog/confirm-dialog.component';
import { AlertDialogComponent, AlertDialogData } from '@shared/components/dialog/alert-dialog.component';
import {
ErrorAlertDialogComponent,
ErrorAlertDialogData
} from '@shared/components/dialog/error-alert-dialog.component';
import { TodoDialogComponent } from '@shared/components/dialog/todo-dialog.component';
@Injectable(
{
providedIn: 'root'
}
)
@Injectable({
providedIn: 'root'
})
export class DialogService {
constructor(
@ -47,7 +50,7 @@ export class DialogService {
}
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,
data: {
title,
@ -59,12 +62,12 @@ export class DialogService {
if (fullscreen) {
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();
}
alert(title: string, message: string, ok: string = null, fullscreen: boolean = false): Observable<boolean> {
const dialogConfig: MatDialogConfig = {
const dialogConfig: MatDialogConfig<AlertDialogData> = {
disableClose: true,
data: {
title,
@ -75,12 +78,12 @@ export class DialogService {
if (fullscreen) {
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();
}
errorAlert(title: string, message: string, error: any, ok: string = null, fullscreen: boolean = false): Observable<any> {
const dialogConfig: MatDialogConfig = {
errorAlert(title: string, message: string, error: any, ok: string = null, fullscreen: boolean = false): Observable<boolean> {
const dialogConfig: MatDialogConfig<ErrorAlertDialogData> = {
disableClose: true,
data: {
title,
@ -92,7 +95,7 @@ export class DialogService {
if (fullscreen) {
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();
}

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 { 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 {
title: string;
@ -29,7 +33,11 @@ export interface AlertDialogData {
templateUrl: './alert-dialog.component.html',
styleUrls: ['./alert-dialog.component.scss']
})
export class AlertDialogComponent {
constructor(public dialogRef: MatDialogRef<AlertDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: AlertDialogData) {}
export class AlertDialogComponent extends DialogComponent<AlertDialogComponent, boolean>{
constructor(protected store: Store<AppState>,
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 { 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 {
title: string;
@ -30,7 +34,11 @@ export interface ConfirmDialogData {
templateUrl: './confirm-dialog.component.html',
styleUrls: ['./confirm-dialog.component.scss']
})
export class ConfirmDialogComponent {
constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData) {}
export class ConfirmDialogComponent extends DialogComponent<ConfirmDialogComponent, boolean>{
constructor(protected store: Store<AppState>,
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 { 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 {
title: string;
@ -29,15 +33,18 @@ export interface ErrorAlertDialogData {
templateUrl: './error-alert-dialog.component.html',
styleUrls: ['./error-alert-dialog.component.scss']
})
export class ErrorAlertDialogComponent {
export class ErrorAlertDialogComponent extends DialogComponent<ErrorAlertDialogComponent, boolean>{
title: string;
message: string;
errorMessage: 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) {
super(store, router, dialogRef);
this.title = this.data.title;
this.message = this.data.message;
this.errorMessage = this.data.error.message ? this.data.error.message : JSON.stringify(this.data.error);