Refactoring

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -29,14 +29,15 @@ import { AccountDetailDialogParams } from './interfaces/interfaces';
   styleUrls: ['./account-detail-dialog.component.scss']
 })
 export class AccountDetailDialog implements OnDestroy, OnInit {
+  public activities: OrderWithAccount[];
   public balance: number;
   public currency: string;
   public equity: number;
   public hasImpersonationId: boolean;
   public historicalDataItems: HistoricalDataItem[];
+  public isLoadingActivities: boolean;
   public isLoadingChart: boolean;
   public name: string;
-  public orders: OrderWithAccount[];
   public platformName: string;
   public transactionCount: number;
   public user: User;
@@ -64,6 +65,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
   }
 
   public ngOnInit() {
+    this.isLoadingActivities = true;
     this.isLoadingChart = true;
 
     this.dataService
@@ -103,7 +105,9 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
       })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ activities }) => {
-        this.orders = activities;
+        this.activities = activities;
+
+        this.isLoadingActivities = false;
 
         this.changeDetectorRef.markForCheck();
       });
@@ -153,8 +157,8 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
   public onExport() {
     this.dataService
       .fetchExport(
-        this.orders.map((order) => {
-          return order.id;
+        this.activities.map(({ id }) => {
+          return id;
         })
       )
       .pipe(takeUntil(this.unsubscribeSubject))

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -64,11 +64,15 @@
       </div>
     </div>
 
-    <mat-tab-group animationDuration="0" [mat-stretch-tabs]="false">
+    <mat-tab-group
+      animationDuration="0"
+      [mat-stretch-tabs]="false"
+      [ngClass]="{ 'd-none': isLoadingActivities }"
+    >
       <mat-tab>
         <ng-template i18n mat-tab-label>Activities</ng-template>
         <gf-activities-table
-          [activities]="orders"
+          [activities]="activities"
           [baseCurrency]="user?.settings?.baseCurrency"
           [deviceType]="data.deviceType"
           [hasPermissionToCreateActivity]="false"
@@ -81,10 +85,9 @@
         ></gf-activities-table>
       </mat-tab>
       <mat-tab>
-        <ng-template i18n mat-tab-label>Balances</ng-template>
+        <ng-template i18n mat-tab-label>Cash Balances</ng-template>
         <gf-account-balances
           [accountId]="data.accountId"
-          [currency]="currency"
           [locale]="user?.settings?.locale"
         ></gf-account-balances>
       </mat-tab>

libs/ui/src/lib/account-balances/account-balances.component.html

@@ -1,21 +1,30 @@
-<table class="gf-table w-100" mat-table [dataSource]="dataSource">
+<table
+  class="gf-table w-100"
+  mat-table
+  matSort
+  matSortActive="date"
+  matSortDirection="desc"
+  [dataSource]="dataSource"
+>
   <ng-container matColumnDef="date">
-    <th *matHeaderCellDef class="px-2" i18n mat-header-cell>Date</th>
+    <th *matHeaderCellDef class="px-2" mat-header-cell mat-sort-header>
+      <ng-container i18n>Date</ng-container>
+    </th>
     <td *matCellDef="let element" class="px-2" mat-cell>
       <gf-value [isDate]="true" [locale]="locale" [value]="element?.date" />
     </td>
   </ng-container>
 
   <ng-container matColumnDef="value">
-    <th *matHeaderCellDef class="px-2 text-right" i18n mat-header-cell>
-      Value
+    <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
+      <ng-container i18n>Value</ng-container>
     </th>
     <td *matCellDef="let element" class="px-2" mat-cell>
       <div class="d-flex justify-content-end">
         <gf-value
           [isCurrency]="true"
           [locale]="locale"
-          [unit]="currency"
+          [unit]="element?.Account?.currency"
           [value]="element?.value"
         ></gf-value>
       </div>

libs/ui/src/lib/account-balances/account-balances.component.scss

@@ -2,18 +2,4 @@
 
 :host {
   display: block;
-
-  .activities {
-    overflow-x: auto;
-
-    .mat-mdc-table {
-      th {
-        ::ng-deep {
-          .mat-sort-header-container {
-            justify-content: inherit;
-          }
-        }
-      }
-    }
-  }
 }

libs/ui/src/lib/account-balances/account-balances.component.ts

@@ -4,11 +4,14 @@ import {
   Component,
   Input,
   OnDestroy,
-  OnInit
+  OnInit,
+  ViewChild
 } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { AccountBalance } from '@ghostfolio/common/interfaces';
+import { get } from 'lodash';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
@@ -19,9 +22,10 @@ import { Subject, takeUntil } from 'rxjs';
 })
 export class AccountBalancesComponent implements OnDestroy, OnInit {
   @Input() accountId: string;
-  @Input() currency: string;
   @Input() locale: string;
 
+  @ViewChild(MatSort) sort: MatSort;
+
   public dataSource: MatTableDataSource<AccountBalance> =
     new MatTableDataSource();
   public displayedColumns: string[] = ['date', 'value'];
@@ -37,19 +41,22 @@ export class AccountBalancesComponent implements OnDestroy, OnInit {
     this.fetchBalances();
   }
 
-  public fetchBalances() {
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private fetchBalances() {
     this.dataService
       .fetchAccountBalances(this.accountId)
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ balances }) => {
         this.dataSource = new MatTableDataSource(balances);
 
+        this.dataSource.sort = this.sort;
+        this.dataSource.sortingDataAccessor = get;
+
         this.changeDetectorRef.markForCheck();
       });
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

libs/ui/src/lib/account-balances/account-balances.module.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -8,7 +9,7 @@ import { AccountBalancesComponent } from './account-balances.component';
 @NgModule({
   declarations: [AccountBalancesComponent],
   exports: [AccountBalancesComponent],
-  imports: [CommonModule, GfValueModule, MatTableModule],
+  imports: [CommonModule, GfValueModule, MatSortModule, MatTableModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfAccountBalancesModule {}