Refactoring

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

@@ -1,50 +1,99 @@
-<gf-dialog-header mat-dialog-title position="center" [deviceType]="data.deviceType" [title]="name"
-  (closeButtonClicked)="onClose()"></gf-dialog-header>
+<gf-dialog-header
+  mat-dialog-title
+  position="center"
+  [deviceType]="data.deviceType"
+  [title]="name"
+  (closeButtonClicked)="onClose()"
+></gf-dialog-header>
 
 <div class="flex-grow-1" mat-dialog-content>
   <div class="container p-0">
     <div class="row">
       <div class="col-12 d-flex justify-content-center mb-3">
-        <gf-value size="large" [isCurrency]="true" [locale]="user?.settings?.locale"
-          [unit]="user?.settings?.baseCurrency" [value]="valueInBaseCurrency"></gf-value>
+        <gf-value
+          size="large"
+          [isCurrency]="true"
+          [locale]="user?.settings?.locale"
+          [unit]="user?.settings?.baseCurrency"
+          [value]="valueInBaseCurrency"
+        ></gf-value>
       </div>
     </div>
 
     <div class="chart-container mb-3">
-      <gf-investment-chart class="h-100" [currency]="user?.settings?.baseCurrency"
-        [historicalDataItems]="historicalDataItems" [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
-        [isLoading]="isLoadingChart" [locale]="user?.settings?.locale"></gf-investment-chart>
+      <gf-investment-chart
+        class="h-100"
+        [currency]="user?.settings?.baseCurrency"
+        [historicalDataItems]="historicalDataItems"
+        [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+        [isLoading]="isLoadingChart"
+        [locale]="user?.settings?.locale"
+      ></gf-investment-chart>
     </div>
 
     <div class="row mb-3">
       <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [isCurrency]="true" [locale]="user?.settings?.locale" [unit]="currency"
-          [value]="balance">Cash Balance</gf-value>
+        <gf-value
+          i18n
+          size="medium"
+          [isCurrency]="true"
+          [locale]="user?.settings?.locale"
+          [unit]="currency"
+          [value]="balance"
+          >Cash Balance</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [isCurrency]="true" [locale]="user?.settings?.locale" [unit]="currency"
-          [value]="equity">Equity</gf-value>
+        <gf-value
+          i18n
+          size="medium"
+          [isCurrency]="true"
+          [locale]="user?.settings?.locale"
+          [unit]="currency"
+          [value]="equity"
+          >Equity</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [value]="transactionCount">Activities</gf-value>
+        <gf-value i18n size="medium" [value]="transactionCount"
+          >Activities</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value i18n size="medium" [value]="platformName">Platform</gf-value>
       </div>
     </div>
 
-    <mat-tab-group>
-      <mat-tab label="Activities">
-        <gf-activities-table [activities]="orders" [baseCurrency]="user?.settings?.baseCurrency"
-          [deviceType]="data.deviceType" [hasPermissionToCreateActivity]="false"
-          [hasPermissionToExportActivities]="true" [hasPermissionToFilter]="false" [hasPermissionToOpenDetails]="false"
-          [locale]="user?.settings?.locale" [showActions]="false" (export)="onExport()"></gf-activities-table>
+    <mat-tab-group animationDuration="0" [mat-stretch-tabs]="false">
+      <mat-tab>
+        <ng-template i18n mat-tab-label>Activities</ng-template>
+        <gf-activities-table
+          [activities]="orders"
+          [baseCurrency]="user?.settings?.baseCurrency"
+          [deviceType]="data.deviceType"
+          [hasPermissionToCreateActivity]="false"
+          [hasPermissionToExportActivities]="true"
+          [hasPermissionToFilter]="false"
+          [hasPermissionToOpenDetails]="false"
+          [locale]="user?.settings?.locale"
+          [showActions]="false"
+          (export)="onExport()"
+        ></gf-activities-table>
       </mat-tab>
-      <mat-tab label="Balances">
-        <gf-account-balances [accountId]="data.accountId"></gf-account-balances>
+      <mat-tab>
+        <ng-template i18n mat-tab-label>Balances</ng-template>
+        <gf-account-balances
+          [accountId]="data.accountId"
+          [currency]="currency"
+          [locale]="user?.settings?.locale"
+        ></gf-account-balances>
       </mat-tab>
     </mat-tab-group>
   </div>
 </div>
 
-<gf-dialog-footer mat-dialog-actions [deviceType]="data.deviceType" (closeButtonClicked)="onClose()"></gf-dialog-footer>
+<gf-dialog-footer
+  mat-dialog-actions
+  [deviceType]="data.deviceType"
+  (closeButtonClicked)="onClose()"
+></gf-dialog-footer>

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

@@ -6,8 +6,8 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
-import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
 import { GfAccountBalancesModule } from '@ghostfolio/ui/account-balances/account-balances.module';
+import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 

libs/common/src/lib/interfaces/index.ts

@@ -1,6 +1,6 @@
 import type { Access } from './access.interface';
-import type { Accounts } from './accounts.interface';
 import type { AccountBalance } from './account-balance.interface';
+import type { Accounts } from './accounts.interface';
 import type { AdminData } from './admin-data.interface';
 import type { AdminJobs } from './admin-jobs.interface';
 import type { AdminMarketDataDetails } from './admin-market-data-details.interface';

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

@@ -1,15 +1,27 @@
-<table mat-table [dataSource]="balances" class="mat-elevation-z8">
-
+<table class="gf-table w-100" mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="date">
-    <th mat-header-cell *matHeaderCellDef> Date </th>
-    <td mat-cell *matCellDef="let balance"> {{balance.date}} </td>
+    <th *matHeaderCellDef class="px-2" i18n mat-header-cell>Date</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 mat-header-cell *matHeaderCellDef> Value </th>
-    <td mat-cell *matCellDef="let balance"> {{balance.value}} </td>
+    <th *matHeaderCellDef class="px-2 text-right" i18n mat-header-cell>
+      Value
+    </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"
+          [value]="element?.value"
+        ></gf-value>
+      </div>
+    </td>
   </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
+  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+</table>

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

@@ -1,10 +1,12 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   Input,
   OnDestroy,
   OnInit
 } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { AccountBalance } from '@ghostfolio/common/interfaces';
 import { Subject, takeUntil } from 'rxjs';
@@ -17,26 +19,33 @@ import { Subject, takeUntil } from 'rxjs';
 })
 export class AccountBalancesComponent implements OnDestroy, OnInit {
   @Input() accountId: string;
+  @Input() currency: string;
+  @Input() locale: string;
 
-  public balances: AccountBalance[];
+  public dataSource: MatTableDataSource<AccountBalance> =
+    new MatTableDataSource();
   public displayedColumns: string[] = ['date', 'value'];
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private dataService: DataService) {}
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService
+  ) {}
+
+  public ngOnInit() {
+    this.fetchBalances();
+  }
 
   public fetchBalances() {
     this.dataService
       .fetchAccountBalances(this.accountId)
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ balances }) => {
-        console.log({ balances });
-        this.balances = balances;
-      });
-  }
+        this.dataSource = new MatTableDataSource(balances);
 
-  public ngOnInit() {
-    this.fetchBalances();
+        this.changeDetectorRef.markForCheck();
+      });
   }
 
   public ngOnDestroy() {

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

@@ -1,44 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { RouterModule } from '@angular/router';
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
-import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
-import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
-import { GfActivityTypeModule } from '@ghostfolio/ui/activity-type';
-import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 import { GfValueModule } from '@ghostfolio/ui/value';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AccountBalancesComponent } from './account-balances.component';
 
 @NgModule({
   declarations: [AccountBalancesComponent],
   exports: [AccountBalancesComponent],
-  imports: [
-    CommonModule,
-    GfActivitiesFilterModule,
-    GfActivityTypeModule,
-    GfNoTransactionsInfoModule,
-    GfSymbolIconModule,
-    GfSymbolModule,
-    GfValueModule,
-    MatButtonModule,
-    MatCheckboxModule,
-    MatMenuModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatTableModule,
-    MatTooltipModule,
-    NgxSkeletonLoaderModule,
-    RouterModule
-  ],
+  imports: [CommonModule, GfValueModule, MatTableModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfAccountBalancesModule {}