Feature/add footer row to accounts table (#471)

* Add footer row to accounts table with total balance and value

* Update changelog

apps/client/src/app/components/accounts-table/accounts-table.component.html

@@ -15,6 +15,7 @@
         >(Default)</span
       >
     </td>
+    <td *matFooterCellDef class="px-1" mat-footer-cell>Total</td>
   </ng-container>
 
   <ng-container matColumnDef="currency">
@@ -29,6 +30,7 @@
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       {{ element.currency }}
     </td>
+    <td *matFooterCellDef class="px-1" mat-footer-cell>{{ baseCurrency }}</td>
   </ng-container>
 
   <ng-container matColumnDef="platform">
@@ -51,6 +53,7 @@
         <span>{{ element.Platform?.name }}</span>
       </div>
     </td>
+    <td *matFooterCellDef class="px-1" mat-footer-cell></td>
   </ng-container>
 
   <ng-container matColumnDef="transactions">
@@ -63,6 +66,9 @@
         element.transactionCount
       }}</ng-container>
     </td>
+    <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+      {{ transactionCount }}
+    </td>
   </ng-container>
 
   <ng-container matColumnDef="balance">
@@ -77,6 +83,14 @@
         [value]="element.convertedBalance"
       ></gf-value>
     </td>
+    <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+      <gf-value
+        class="d-inline-block justify-content-end"
+        [isCurrency]="true"
+        [locale]="locale"
+        [value]="totalBalance"
+      ></gf-value>
+    </td>
   </ng-container>
 
   <ng-container matColumnDef="value">
@@ -91,6 +105,14 @@
         [value]="element.value"
       ></gf-value>
     </td>
+    <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+      <gf-value
+        class="d-inline-block justify-content-end"
+        [isCurrency]="true"
+        [locale]="locale"
+        [value]="totalValue"
+      ></gf-value>
+    </td>
   </ng-container>
 
   <ng-container matColumnDef="actions">
@@ -118,10 +140,16 @@
         </button>
       </mat-menu>
     </td>
+    <td *matFooterCellDef class="px-1" mat-footer-cell></td>
   </ng-container>
 
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
   <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+  <tr
+    *matFooterRowDef="displayedColumns"
+    mat-footer-row
+    [ngClass]="{ 'd-none': isLoading }"
+  ></tr>
 </table>
 
 <ngx-skeleton-loader

apps/client/src/app/components/accounts-table/accounts-table.component.scss

@@ -10,6 +10,16 @@
   }
 
   .mat-table {
+    td {
+      &.mat-footer-cell {
+        border-top: 1px solid
+          rgba(
+            var(--palette-foreground-divider),
+            var(--palette-foreground-divider-alpha)
+          );
+      }
+    }
+
     th {
       ::ng-deep {
         .mat-sort-header-container {

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -24,6 +24,9 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() deviceType: string;
   @Input() locale: string;
   @Input() showActions: boolean;
+  @Input() totalBalance: number;
+  @Input() totalValue: number;
+  @Input() transactionCount: number;
 
   @Output() accountDeleted = new EventEmitter<string>();
   @Output() accountToUpdate = new EventEmitter<AccountModel>();

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -28,6 +28,9 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
   public hasPermissionToCreateAccount: boolean;
   public hasPermissionToDeleteAccount: boolean;
   public routeQueryParams: Subscription;
+  public totalBalance = 0;
+  public totalValue = 0;
+  public transactionCount = 0;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -103,8 +106,11 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
     this.dataService
       .fetchAccounts()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((response) => {
-        this.accounts = response;
+      .subscribe(({ accounts, totalBalance, totalValue, transactionCount }) => {
+        this.accounts = accounts;
+        this.totalBalance = totalBalance;
+        this.totalValue = totalValue;
+        this.transactionCount = transactionCount;
 
         if (this.accounts?.length <= 0) {
           this.router.navigate([], { queryParams: { createDialog: true } });

apps/client/src/app/pages/accounts/accounts-page.html

@@ -8,6 +8,9 @@
         [deviceType]="deviceType"
         [locale]="user?.settings?.locale"
         [showActions]="!hasImpersonationId && hasPermissionToDeleteAccount && !user.settings.isRestrictedView"
+        [totalBalance]="totalBalance"
+        [totalValue]="totalValue"
+        [transactionCount]="transactionCount"
         (accountDeleted)="onDeleteAccount($event)"
         (accountToUpdate)="onUpdateAccount($event)"
       ></gf-accounts-table>

apps/client/src/app/services/data.service.ts

@@ -17,6 +17,7 @@ import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setti
 import { UpdateUserSettingsDto } from '@ghostfolio/api/app/user/update-user-settings.dto';
 import {
   Access,
+  Accounts,
   AdminData,
   Export,
   InfoItem,
@@ -62,7 +63,7 @@ export class DataService {
   }
 
   public fetchAccounts() {
-    return this.http.get<AccountWithValue[]>('/api/account');
+    return this.http.get<Accounts>('/api/account');
   }
 
   public fetchAdminData() {

apps/client/src/styles/table.scss

@@ -1,8 +1,12 @@
 @mixin gf-table($darkTheme: false) {
   background: transparent !important;
 
-  td {
-    border: 0 !important;
+  .mat-footer-row,
+  .mat-row {
+    .mat-cell,
+    .mat-footer-cell {
+      border-bottom: 0;
+    }
   }
 
   .mat-row {