Task/improve notification components type safety (#6305)

* feat(lib): improve type safety for notification components

* feat(lib): replace constructor based injections with inject functions

* feat(lib): destructure parameters

* fix(lib): remove confirmLabel from AlertDialogParams interface

* feat(lib): destructure parameters in alert and confirmation dialogs

libs/ui/src/lib/notifications/alert-dialog/alert-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 
@@ -12,14 +12,15 @@ import { AlertDialogParams } from './interfaces/interfaces';
 })
 export class GfAlertDialogComponent {
   public discardLabel: string;
-  public message: string;
+  public message?: string;
   public title: string;
 
-  public constructor(public dialogRef: MatDialogRef<GfAlertDialogComponent>) {}
+  protected readonly dialogRef =
+    inject<MatDialogRef<GfAlertDialogComponent>>(MatDialogRef);
 
-  public initialize(aParams: AlertDialogParams) {
+  public initialize({ discardLabel, message, title }: AlertDialogParams) {
-    this.discardLabel = aParams.discardLabel;
+    this.discardLabel = discardLabel;
-    this.message = aParams.message;
+    this.message = message;
-    this.title = aParams.title;
+    this.title = title;
   }
 }

libs/ui/src/lib/notifications/alert-dialog/interfaces/interfaces.ts

@@ -1,6 +1,5 @@
 export interface AlertDialogParams {
-  confirmLabel?: string;
+  discardLabel: string;
-  discardLabel?: string;
   message?: string;
   title: string;
 }

libs/ui/src/lib/notifications/confirmation-dialog/confirmation-dialog.component.ts

@@ -1,6 +1,6 @@
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 
-import { Component, HostListener } from '@angular/core';
+import { Component, HostListener, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 
@@ -16,12 +16,11 @@ export class GfConfirmationDialogComponent {
   public confirmLabel: string;
   public confirmType: ConfirmationDialogType;
   public discardLabel: string;
-  public message: string;
+  public message?: string;
   public title: string;
 
-  public constructor(
+  protected readonly dialogRef =
-    public dialogRef: MatDialogRef<GfConfirmationDialogComponent>
+    inject<MatDialogRef<GfConfirmationDialogComponent>>(MatDialogRef);
-  ) {}
 
   @HostListener('window:keyup', ['$event'])
   public keyEvent(event: KeyboardEvent) {
@@ -30,11 +29,17 @@ export class GfConfirmationDialogComponent {
     }
   }
 
-  public initialize(aParams: ConfirmDialogParams) {
+  public initialize({
-    this.confirmLabel = aParams.confirmLabel;
+    confirmLabel,
-    this.confirmType = aParams.confirmType;
+    confirmType,
-    this.discardLabel = aParams.discardLabel;
+    discardLabel,
-    this.message = aParams.message;
+    message,
-    this.title = aParams.title;
+    title
+  }: ConfirmDialogParams) {
+    this.confirmLabel = confirmLabel;
+    this.confirmType = confirmType;
+    this.discardLabel = discardLabel;
+    this.message = message;
+    this.title = title;
   }
 }

libs/ui/src/lib/notifications/confirmation-dialog/interfaces/interfaces.ts

@@ -1,9 +1,9 @@
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 
 export interface ConfirmDialogParams {
-  confirmLabel?: string;
+  confirmLabel: string;
   confirmType: ConfirmationDialogType;
-  discardLabel?: string;
+  discardLabel: string;
   message?: string;
   title: string;
 }

libs/ui/src/lib/notifications/notification.service.ts

@@ -1,7 +1,7 @@
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { translate } from '@ghostfolio/ui/i18n';
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { isFunction } from 'lodash';
 
@@ -19,12 +19,10 @@ export class NotificationService {
   private dialogMaxWidth: string;
   private dialogWidth: string;
 
-  public constructor(private matDialog: MatDialog) {}
+  private readonly matDialog = inject(MatDialog);
 
   public alert(aParams: AlertParams) {
-    if (!aParams.discardLabel) {
+    aParams.discardLabel ??= translate('CLOSE');
-      aParams.discardLabel = translate('CLOSE');
-    }
 
     const dialog = this.matDialog.open(GfAlertDialogComponent, {
       autoFocus: false,
@@ -46,24 +44,19 @@ export class NotificationService {
   }
 
   public confirm(aParams: ConfirmParams) {
-    if (!aParams.confirmLabel) {
+    aParams.confirmLabel ??= translate('YES');
-      aParams.confirmLabel = translate('YES');
+    aParams.discardLabel ??= translate('CANCEL');
-    }
-
-    if (!aParams.discardLabel) {
-      aParams.discardLabel = translate('CANCEL');
-    }
 
     const dialog = this.matDialog.open(GfConfirmationDialogComponent, {
       autoFocus: false,
-      disableClose: aParams.disableClose || false,
+      disableClose: aParams.disableClose ?? false,
       maxWidth: this.dialogMaxWidth,
       width: this.dialogWidth
     });
 
     dialog.componentInstance.initialize({
       confirmLabel: aParams.confirmLabel,
-      confirmType: aParams.confirmType || ConfirmationDialogType.Primary,
+      confirmType: aParams.confirmType ?? ConfirmationDialogType.Primary,
       discardLabel: aParams.discardLabel,
       message: aParams.message,
       title: aParams.title
@@ -79,13 +72,8 @@ export class NotificationService {
   }
 
   public prompt(aParams: PromptParams) {
-    if (!aParams.confirmLabel) {
+    aParams.confirmLabel ??= translate('OK');
-      aParams.confirmLabel = translate('OK');
+    aParams.discardLabel ??= translate('CANCEL');
-    }
-
-    if (!aParams.discardLabel) {
-      aParams.discardLabel = translate('CANCEL');
-    }
 
     const dialog = this.matDialog.open(GfPromptDialogComponent, {
       autoFocus: true,

libs/ui/src/lib/notifications/prompt-dialog/interfaces/interfaces.ts

@@ -0,0 +1,7 @@
+export interface PromptDialogParams {
+  confirmLabel: string;
+  defaultValue?: string;
+  discardLabel: string;
+  title: string;
+  valueLabel?: string;
+}

libs/ui/src/lib/notifications/prompt-dialog/prompt-dialog.component.ts

@@ -1,10 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 
+import { PromptDialogParams } from './interfaces/interfaces';
+
 @Component({
   imports: [
     MatButtonModule,
@@ -18,26 +20,27 @@ import { MatInputModule } from '@angular/material/input';
 })
 export class GfPromptDialogComponent {
   public confirmLabel: string;
-  public defaultValue: string;
+  public defaultValue?: string;
   public discardLabel: string;
   public formControl = new FormControl('');
   public title: string;
-  public valueLabel: string;
+  public valueLabel?: string;
 
-  public constructor(public dialogRef: MatDialogRef<GfPromptDialogComponent>) {}
+  protected readonly dialogRef =
+    inject<MatDialogRef<GfPromptDialogComponent>>(MatDialogRef);
 
-  public initialize(aParams: {
+  public initialize({
-    confirmLabel?: string;
+    confirmLabel,
-    defaultValue?: string;
+    defaultValue,
-    discardLabel?: string;
+    discardLabel,
-    title: string;
+    title,
-    valueLabel?: string;
+    valueLabel
-  }) {
+  }: PromptDialogParams) {
-    this.confirmLabel = aParams.confirmLabel;
+    this.confirmLabel = confirmLabel;
-    this.defaultValue = aParams.defaultValue;
+    this.defaultValue = defaultValue;
-    this.discardLabel = aParams.discardLabel;
+    this.discardLabel = discardLabel;
-    this.formControl.setValue(aParams.defaultValue);
+    this.formControl.setValue(defaultValue ?? null);
-    this.title = aParams.title;
+    this.title = title;
-    this.valueLabel = aParams.valueLabel;
+    this.valueLabel = valueLabel;
   }
 }