Task/improve type safety of benchmark component (#6555)

* Improve type safety

libs/ui/src/lib/benchmark/benchmark-detail-dialog/interfaces/interfaces.ts

@@ -3,7 +3,7 @@ import { ColorScheme } from '@ghostfolio/common/types';
 import { DataSource } from '@prisma/client';
 
 export interface BenchmarkDetailDialogParams {
-  colorScheme: ColorScheme;
+  colorScheme?: ColorScheme;
   dataSource: DataSource;
   deviceType: string;
   locale: string;

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -15,7 +15,7 @@
         <div class="text-truncate">
           {{ element?.name }}
         </div>
-        @if (showSymbol) {
+        @if (showSymbol()) {
           <div>
             <small class="text-muted">{{ element?.symbol }}</small>
           </div>
@@ -98,7 +98,7 @@
           @if (element?.performances?.allTimeHigh?.date) {
             <gf-value
               [isDate]="true"
-              [locale]="locale"
+              [locale]="locale()"
               [value]="element?.performances?.allTimeHigh?.date"
             />
           }
@@ -123,7 +123,7 @@
           <gf-value
             class="d-inline-block justify-content-end"
             [isPercent]="true"
-            [locale]="locale"
+            [locale]="locale()"
             [ngClass]="{
               'text-danger':
                 element?.performances?.allTimeHigh?.performancePercent < 0,
@@ -150,7 +150,7 @@
     <ng-container matColumnDef="actions" stickyEnd>
       <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
       <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-        @if (hasPermissionToDeleteItem) {
+        @if (hasPermissionToDeleteItem()) {
           <button
             class="mx-1 no-min-width px-2"
             mat-button
@@ -163,7 +163,7 @@
         <mat-menu #benchmarkMenu="matMenu" xPosition="before">
           <button
             mat-menu-item
-            [disabled]="!hasPermissionToDeleteItem"
+            [disabled]="!hasPermissionToDeleteItem()"
             (click)="
               onDeleteItem({
                 dataSource: element.dataSource,
@@ -180,9 +180,9 @@
       </td>
     </ng-container>
 
-    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matHeaderRowDef="displayedColumns()" mat-header-row></tr>
     <tr
-      *matRowDef="let row; columns: displayedColumns"
+      *matRowDef="let row; columns: displayedColumns()"
       class="cursor-pointer"
       mat-row
       (click)="
@@ -204,7 +204,7 @@
       width: '100%'
     }"
   />
-} @else if (benchmarks?.length === 0) {
+} @else if (benchmarks()?.length === 0) {
   <div class="p-3 text-center text-muted">
     <small i18n>No data available</small>
   </div>

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -16,13 +16,15 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnDestroy,
-  Output,
-  ViewChild
+  DestroyRef,
+  computed,
+  effect,
+  inject,
+  input,
+  output,
+  viewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
@@ -34,7 +36,6 @@ import { addIcons } from 'ionicons';
 import { ellipsisHorizontal, trashOutline } from 'ionicons/icons';
 import { isNumber } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { Subject, takeUntil } from 'rxjs';
 
 import { translate } from '../i18n';
 import { GfTrendIndicatorComponent } from '../trend-indicator/trend-indicator.component';
@@ -61,41 +62,58 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
   styleUrls: ['./benchmark.component.scss'],
   templateUrl: './benchmark.component.html'
 })
-export class GfBenchmarkComponent implements OnChanges, OnDestroy {
-  @Input() benchmarks: Benchmark[];
-  @Input() deviceType: string;
-  @Input() hasPermissionToDeleteItem: boolean;
-  @Input() locale = getLocale();
-  @Input() showSymbol = true;
-  @Input() user: User;
+export class GfBenchmarkComponent {
+  public readonly benchmarks = input.required<Benchmark[]>();
+  public readonly deviceType = input.required<string>();
+  public readonly hasPermissionToDeleteItem = input<boolean>();
+  public readonly locale = input(getLocale());
+  public readonly showSymbol = input(true);
+  public readonly user = input<User>();
 
-  @Output() itemDeleted = new EventEmitter<AssetProfileIdentifier>();
+  public readonly itemDeleted = output<AssetProfileIdentifier>();
 
-  @ViewChild(MatSort) sort: MatSort;
+  protected readonly sort = viewChild(MatSort);
 
-  public dataSource = new MatTableDataSource<Benchmark>([]);
-  public displayedColumns = [
+  protected readonly dataSource = new MatTableDataSource<Benchmark>([]);
+  protected readonly displayedColumns = computed(() => {
+    return [
       'name',
+      ...(this.user()?.settings?.isExperimentalFeatures
+        ? ['trend50d', 'trend200d']
+        : []),
       'date',
       'change',
       'marketCondition',
       'actions'
     ];
-  public isLoading = true;
-  public isNumber = isNumber;
-  public resolveMarketCondition = resolveMarketCondition;
-  public translate = translate;
-
-  private unsubscribeSubject = new Subject<void>();
-
-  public constructor(
-    private dialog: MatDialog,
-    private notificationService: NotificationService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  });
+  protected isLoading = true;
+  protected readonly isNumber = isNumber;
+  protected readonly resolveMarketCondition = resolveMarketCondition;
+  protected readonly translate = translate;
+
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly dialog = inject(MatDialog);
+  private readonly notificationService = inject(NotificationService);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+
+  public constructor() {
+    effect(() => {
+      const benchmarks = this.benchmarks();
+
+      if (benchmarks) {
+        this.dataSource.data = benchmarks;
+        this.dataSource.sortingDataAccessor = getLowercase;
+
+        this.dataSource.sort = this.sort() ?? null;
+
+        this.isLoading = false;
+      }
+    });
+
     this.route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
         if (
           params['benchmarkDetailDialog'] &&
@@ -112,30 +130,7 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
     addIcons({ ellipsisHorizontal, trashOutline });
   }
 
-  public ngOnChanges() {
-    if (this.benchmarks) {
-      this.dataSource.data = this.benchmarks;
-      this.dataSource.sortingDataAccessor = getLowercase;
-
-      this.dataSource.sort = this.sort;
-
-      this.isLoading = false;
-    }
-
-    if (this.user?.settings?.isExperimentalFeatures) {
-      this.displayedColumns = [
-        'name',
-        'trend50d',
-        'trend200d',
-        'date',
-        'change',
-        'marketCondition',
-        'actions'
-      ];
-    }
-  }
-
-  public onDeleteItem({ dataSource, symbol }: AssetProfileIdentifier) {
+  protected onDeleteItem({ dataSource, symbol }: AssetProfileIdentifier) {
     this.notificationService.confirm({
       confirmFn: () => {
         this.itemDeleted.emit({ dataSource, symbol });
@@ -145,17 +140,15 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
     });
   }
 
-  public onOpenBenchmarkDialog({ dataSource, symbol }: AssetProfileIdentifier) {
+  protected onOpenBenchmarkDialog({
+    dataSource,
+    symbol
+  }: AssetProfileIdentifier) {
     this.router.navigate([], {
       queryParams: { dataSource, symbol, benchmarkDetailDialog: true }
     });
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private openBenchmarkDetailDialog({
     dataSource,
     symbol
@@ -167,17 +160,17 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
       data: {
         dataSource,
         symbol,
-        colorScheme: this.user?.settings?.colorScheme,
-        deviceType: this.deviceType,
-        locale: this.locale
+        colorScheme: this.user()?.settings?.colorScheme,
+        deviceType: this.deviceType(),
+        locale: this.locale()
       },
-      height: this.deviceType === 'mobile' ? '98vh' : undefined,
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
+      width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 
     dialogRef
       .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.router.navigate(['.'], { relativeTo: this.route });
       });