Release 1.77.0 (#476)

* Fix footer on mobile

* Update changelog

CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.77.0 - 16.11.2021
+
+### Changed
+
+- Hid the _Get Started_ button on the registration page
+
+### Fixed
+
+- Fixed the footer row of the accounts table on mobile
+- Fixed the transactions count calculation in the accounts table (exclude drafts)
+
+## 1.76.0 - 14.11.2021
+
+### Added
+
+- Added the footer row with buying power and net worth to the accounts table
+
 ## 1.75.0 - 13.11.2021
 
 ### Added

apps/api/src/app/account/account.controller.ts

@@ -1,16 +1,17 @@
 import { PortfolioService } from '@ghostfolio/api/app/portfolio/portfolio.service';
 import { UserService } from '@ghostfolio/api/app/user/user.service';
-import { nullifyValuesInObjects } from '@ghostfolio/api/helper/object.helper';
+import {
+  nullifyValuesInObject,
+  nullifyValuesInObjects
+} from '@ghostfolio/api/helper/object.helper';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
+import { Accounts } from '@ghostfolio/common/interfaces';
 import {
   getPermissions,
   hasPermission,
   permissions
 } from '@ghostfolio/common/permissions';
-import type {
-  AccountWithValue,
-  RequestWithUser
-} from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,
@@ -90,32 +91,39 @@ export class AccountController {
   @UseGuards(AuthGuard('jwt'))
   public async getAllAccounts(
     @Headers('impersonation-id') impersonationId
-  ): Promise<AccountWithValue[]> {
+  ): Promise<Accounts> {
     const impersonationUserId =
       await this.impersonationService.validateImpersonationId(
         impersonationId,
         this.request.user.id
       );
 
-    let accounts = await this.portfolioService.getAccounts(
-      impersonationUserId || this.request.user.id
-    );
+    let accountsWithAggregations =
+      await this.portfolioService.getAccountsWithAggregations(
+        impersonationUserId || this.request.user.id
+      );
 
     if (
       impersonationUserId ||
       this.userService.isRestrictedView(this.request.user)
     ) {
-      accounts = nullifyValuesInObjects(accounts, [
-        'balance',
-        'convertedBalance',
-        'fee',
-        'quantity',
-        'unitPrice',
-        'value'
-      ]);
+      accountsWithAggregations = {
+        ...nullifyValuesInObject(accountsWithAggregations, [
+          'totalBalance',
+          'totalValue'
+        ]),
+        accounts: nullifyValuesInObjects(accountsWithAggregations.accounts, [
+          'balance',
+          'convertedBalance',
+          'fee',
+          'quantity',
+          'unitPrice',
+          'value'
+        ])
+      };
     }
 
-    return accounts;
+    return accountsWithAggregations;
   }
 
   @Get(':id')

apps/api/src/app/account/account.service.ts

@@ -85,7 +85,15 @@ export class AccountService {
     });
 
     return accounts.map((account) => {
-      const result = { ...account, transactionCount: account.Order.length };
+      let transactionCount = 0;
+
+      for (const order of account.Order) {
+        if (!order.isDraft) {
+          transactionCount += 1;
+        }
+      }
+
+      const result = { ...account, transactionCount };
 
       delete result.Order;
 

apps/api/src/app/portfolio/portfolio.service.ts

@@ -28,6 +28,7 @@ import {
 } from '@ghostfolio/common/config';
 import { DATE_FORMAT, parseDate } from '@ghostfolio/common/helper';
 import {
+  Accounts,
   PortfolioDetails,
   PortfolioPerformance,
   PortfolioReport,
@@ -93,15 +94,23 @@ export class PortfolioService {
     const userCurrency = this.request.user.Settings.currency;
 
     return accounts.map((account) => {
+      let transactionCount = 0;
+
+      for (const order of account.Order) {
+        if (!order.isDraft) {
+          transactionCount += 1;
+        }
+      }
+
       const result = {
         ...account,
+        transactionCount,
         convertedBalance: this.exchangeRateDataService.toCurrency(
           account.balance,
           account.currency,
           userCurrency
         ),
-        transactionCount: account.Order.length,
-        value: details.accounts[account.name].current
+        value: details.accounts[account.name]?.current ?? 0
       };
 
       delete result.Order;
@@ -110,6 +119,21 @@ export class PortfolioService {
     });
   }
 
+  public async getAccountsWithAggregations(aUserId: string): Promise<Accounts> {
+    const accounts = await this.getAccounts(aUserId);
+    let totalBalance = 0;
+    let totalValue = 0;
+    let transactionCount = 0;
+
+    for (const account of accounts) {
+      totalBalance += account.convertedBalance;
+      totalValue += account.value;
+      transactionCount += account.transactionCount;
+    }
+
+    return { accounts, totalBalance, totalValue, transactionCount };
+  }
+
   public async getInvestments(
     aImpersonationId: string
   ): Promise<InvestmentItem[]> {
@@ -924,16 +948,9 @@ export class PortfolioService {
       };
 
       for (const order of ordersByAccount) {
-        let currentValueOfSymbol = this.exchangeRateDataService.toCurrency(
-          order.quantity * portfolioItemsNow[order.symbol].marketPrice,
-          order.currency,
-          userCurrency
-        );
-        let originalValueOfSymbol = this.exchangeRateDataService.toCurrency(
-          order.quantity * order.unitPrice,
-          order.currency,
-          userCurrency
-        );
+        let currentValueOfSymbol =
+          order.quantity * portfolioItemsNow[order.symbol].marketPrice;
+        let originalValueOfSymbol = order.quantity * order.unitPrice;
 
         if (order.type === 'SELL') {
           currentValueOfSymbol *= -1;

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,9 @@
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       {{ element.currency }}
     </td>
+    <td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
+      {{ baseCurrency }}
+    </td>
   </ng-container>
 
   <ng-container matColumnDef="platform">
@@ -51,6 +55,11 @@
         <span>{{ element.Platform?.name }}</span>
       </div>
     </td>
+    <td
+      *matFooterCellDef
+      class="d-none d-lg-table-cell px-1"
+      mat-footer-cell
+    ></td>
   </ng-container>
 
   <ng-container matColumnDef="transactions">
@@ -63,6 +72,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 +89,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 +111,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 +146,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/components/header/header.component.html

@@ -270,6 +270,7 @@
       Sign In
     </button>
     <a
+      *ngIf="currentRoute !== 'register'"
       class="d-none d-sm-block"
       color="primary"
       i18n

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -77,7 +77,7 @@
   <div class="row px-3 py-1">
     <div class="d-flex flex-grow-1" i18n>
       Fees for {{ summary?.ordersCount }} {summary?.ordersCount, plural, =1
-      {order} other {orders}}
+      {transaction} other {transactions}}
     </div>
     <div class="d-flex justify-content-end">
       <span *ngIf="summary?.fees || summary?.fees === 0" class="mr-1">-</span>
@@ -132,7 +132,7 @@
     </div>
   </div>
   <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Cash</div>
+    <div class="d-flex flex-grow-1" i18n>Cash (Buying Power)</div>
     <div class="d-flex justify-content-end">
       <gf-value
         class="justify-content-end"

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/pages/home/home-page.scss

@@ -27,7 +27,6 @@
           &.overview {
             .chart-container {
               aspect-ratio: 16 / 9;
-              cursor: pointer;
               max-height: 50vh;
 
               // Fallback for aspect-ratio (using padding hack)

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 {

libs/common/src/lib/interfaces/accounts.interface.ts

@@ -0,0 +1,8 @@
+import { AccountWithValue } from '@ghostfolio/common/types';
+
+export interface Accounts {
+  accounts: AccountWithValue[];
+  totalBalance: number;
+  totalValue: number;
+  transactionCount: number;
+}

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

@@ -1,4 +1,5 @@
 import { Access } from './access.interface';
+import { Accounts } from './accounts.interface';
 import { AdminData } from './admin-data.interface';
 import { Export } from './export.interface';
 import { InfoItem } from './info-item.interface';
@@ -19,6 +20,7 @@ import { User } from './user.interface';
 
 export {
   Access,
+  Accounts,
   AdminData,
   Export,
   InfoItem,

libs/common/src/lib/types/account-with-value.type.ts

@@ -2,5 +2,6 @@ import { Account as AccountModel } from '@prisma/client';
 
 export type AccountWithValue = AccountModel & {
   convertedBalance: number;
+  transactionCount: number;
   value: number;
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "1.75.0",
+  "version": "1.77.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "scripts": {