chore: added a dialog service for confirmation and errors

Author: Leonardo Chaia

src/app/tim-dialog/tim-dialog-model.ts

@@ -0,0 +1,18 @@
+import { MatDialogRef } from '@angular/material';
+import { TimDialogRendererComponent } from './tim-dialog-renderer/tim-dialog-renderer.component';
+
+export interface TimDialogData {
+    title?: string;
+    titleClass: string;
+    message: string;
+    confirmButton: TimDialogButtonConfiguration;
+    cancelButton: TimDialogButtonConfiguration;
+    debuggingInfo?: any;
+}
+
+export interface TimDialogButtonConfiguration {
+    text: string;
+    icon: string;
+    action?: (dialog?: MatDialogRef<TimDialogRendererComponent>) => void;
+    color?: 'primary' | 'accent' | 'warn';
+}

src/app/tim-dialog/tim-dialog-renderer/tim-dialog-renderer.component.html

@@ -0,0 +1,42 @@
+<div class="h-100"
+     fxLayout="column">
+
+  <h1 fxFlex
+      mat-dialog-title
+      *ngIf="data.title"
+      [ngClass]="data.titleClass">
+    {{data.title}}
+  </h1>
+
+  <div>
+    <h2>
+      {{data.message}}
+    </h2>
+
+    <ng-container *ngIf="data.debuggingInfo">
+      <pre style="background: #ccc;
+    padding: 10px;
+    white-space: pre-wrap;
+    border-radius: 5px;">{{data.debuggingInfo|json}}</pre>
+    </ng-container>
+  </div>
+
+  <div fxFlex>
+    <button mat-raised-button
+            (click)="onConfirm()"
+            [color]="data.confirmButton.color"
+            *ngIf="data.confirmButton">
+      <mat-icon *ngIf="data.confirmButton.icon">{{data.confirmButton.icon}}</mat-icon>
+      {{data.confirmButton.text}}
+    </button>
+    <button mat-raised-button
+            *ngIf="data.cancelButton"
+            [color]="data.cancelButton.color"
+            (click)="onClose()"
+            style="float: right;">
+      <mat-icon *ngIf="data.cancelButton.icon">{{data.cancelButton.icon}}</mat-icon>
+      {{data.cancelButton.text}}
+    </button>
+  </div>
+
+</div>

src/app/tim-dialog/tim-dialog-renderer/tim-dialog-renderer.component.scss

@@ -0,0 +1,33 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { TimDialogData } from '../tim-dialog-model';
+
+@Component({
+  selector: 'tim-dialog-renderer',
+  templateUrl: './tim-dialog-renderer.component.html',
+  styleUrls: ['./tim-dialog-renderer.component.scss']
+})
+export class TimDialogRendererComponent implements OnInit {
+
+  constructor(
+    private dialog: MatDialogRef<TimDialogRendererComponent>,
+    @Inject(MAT_DIALOG_DATA)
+    public data: TimDialogData) { }
+
+  public ngOnInit() {
+  }
+
+  public onConfirm() {
+    if (this.data.confirmButton && this.data.confirmButton.action) {
+      this.data.confirmButton.action(this.dialog);
+    }
+    this.dialog.close();
+  }
+
+  public onClose() {
+    if (this.data.cancelButton && this.data.cancelButton.action) {
+      this.data.cancelButton.action(this.dialog);
+    }
+    this.dialog.close();
+  }
+}

src/app/tim-dialog/tim-dialog-renderer/tim-dialog-renderer.component.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDialogModule, MatButtonModule, MatIconModule, MatInputModule } from '@angular/material';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormsModule } from '@angular/forms';
+import { TimDialogRendererComponent } from './tim-dialog-renderer/tim-dialog-renderer.component';
+import { TimDialogService } from './tim-dialog.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+
+    MatDialogModule,
+    MatButtonModule,
+    MatInputModule,
+    MatIconModule,
+    FlexLayoutModule,
+  ],
+  declarations: [
+    TimDialogRendererComponent
+  ],
+  entryComponents: [
+    TimDialogRendererComponent,
+  ],
+  providers: [
+    TimDialogService,
+  ]
+})
+export class TimDialogModule { }

src/app/tim-dialog/tim-dialog.module.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { TimDialogData } from './tim-dialog-model';
+import { TimDialogRendererComponent } from './tim-dialog-renderer/tim-dialog-renderer.component';
+
+@Injectable()
+export class TimDialogService {
+
+  constructor(private dialog: MatDialog) { }
+
+  public openErrorMessageModal(title: string, error: string, debuggingInfo?: string) {
+    return this.openMessageModal({
+      title: title,
+      titleClass: 'mat-text-warn',
+      message: error,
+      debuggingInfo: debuggingInfo,
+      cancelButton: {
+        text: 'Close',
+        icon: 'close',
+      }
+    });
+  }
+
+  public openMessageModal(data: Partial<TimDialogData>) {
+    if (!data.cancelButton) {
+      data.cancelButton = {
+        text: 'Cancel',
+        icon: 'close',
+      };
+    }
+
+    return this.dialog.open(TimDialogRendererComponent, {
+      data: data,
+      panelClass: 'mat-typography',
+    });
+  }
+}