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

Automatically close default dialogs (Alert/Confirm/Error) on route change

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

@@ -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();
   }
 

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

@@ -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);
+  }
 }

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

@@ -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);
+  }
 }

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

@@ -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);