Refactoring

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

@@ -3,9 +3,9 @@
     class="gf-table w-100"
     mat-table
     matSort
+    matSortActive="name"
+    matSortDirection="asc"
     [dataSource]="dataSource"
-    [matSortActive]="sortColumn"
-    [matSortDirection]="sortDirection"
   >
     <ng-container matColumnDef="name">
       <th *matHeaderCellDef class="px-2" i18n mat-header-cell mat-sort-header>
@@ -102,9 +102,9 @@
     <ng-container matColumnDef="change">
       <th
         *matHeaderCellDef
-        class="px-2 text-right"
+        class="px-2 justify-content-end"
         mat-header-cell
-        mat-sort-header
+        mat-sort-header="performances.allTimeHigh.performancePercent"
       >
         <span class="d-none d-sm-block text-nowrap" i18n
           >Change from All Time High</span

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

@@ -1,3 +1,13 @@
 :host {
   display: block;
+
+  .gf-table {
+    th {
+      ::ng-deep {
+        .mat-sort-header-container {
+          justify-content: inherit;
+        }
+      }
+    }
+  }
 }

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

@@ -12,7 +12,6 @@ import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import {
-  AfterViewInit,
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
@@ -26,7 +25,7 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatSort, MatSortModule, SortDirection } from '@angular/material/sort';
+import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { get, isNumber } from 'lodash';
@@ -54,9 +53,7 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
   styleUrls: ['./benchmark.component.scss'],
   templateUrl: './benchmark.component.html'
 })
-export class GfBenchmarkComponent
+export class GfBenchmarkComponent implements OnChanges, OnDestroy {
-  implements AfterViewInit, OnChanges, OnDestroy
-{
   @Input() benchmarks: Benchmark[];
   @Input() deviceType: string;
   @Input() hasPermissionToDeleteItem: boolean;
@@ -78,8 +75,6 @@ export class GfBenchmarkComponent
   public isLoading = true;
   public isNumber = isNumber;
   public resolveMarketCondition = resolveMarketCondition;
-  public sortColumn = 'name';
-  public sortDirection: SortDirection = 'asc';
   public translate = translate;
 
   private unsubscribeSubject = new Subject<void>();
@@ -106,22 +101,12 @@ export class GfBenchmarkComponent
       });
   }
 
-  ngAfterViewInit() {
-    this.dataSource.sort = this.sort;
-
-    this.dataSource.sortingDataAccessor = (item, property) => {
-      switch (property) {
-        case 'change':
-          return item.performances?.allTimeHigh?.performancePercent;
-        default:
-          return get(item, property);
-      }
-    };
-  }
-
   public ngOnChanges() {
     if (this.benchmarks) {
       this.dataSource.data = this.benchmarks;
+      this.dataSource.sort = this.sort;
+      this.dataSource.sortingDataAccessor = get;
+
       this.isLoading = false;
     }