Task/refactor transactions in accounts table component (#6266)

* Refactor showTransactions and transactionCount

* Update changelog

CHANGELOG.md

@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Refactored `showTransactions` in favor of `showActivitiesCount` in the accounts table component
+- Refactored `transactionCount` in favor of `activitiesCount` in the accounts table component
 - Deprecated `transactionCount` in favor of `activitiesCount` in the endpoint `GET api/v1/admin`
 - Removed the deprecated `firstBuyDate` in the portfolio calculator
 - Upgraded `yahoo-finance2` from version `3.11.2` to `3.13.0`

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

@@ -380,10 +380,10 @@
           [deviceType]="data.deviceType"
           [hasPermissionToOpenDetails]="false"
           [locale]="user?.settings?.locale"
+          [showActivitiesCount]="false"
           [showAllocationInPercentage]="user?.settings?.isExperimentalFeatures"
           [showBalance]="false"
           [showFooter]="false"
-          [showTransactions]="false"
           [showValue]="false"
           [showValueInBaseCurrency]="false"
         />

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

@@ -38,6 +38,7 @@ import { GfTransferBalanceDialogComponent } from './transfer-balance/transfer-ba
 })
 export class GfAccountsPageComponent implements OnDestroy, OnInit {
   public accounts: AccountModel[];
+  public activitiesCount = 0;
   public deviceType: string;
   public hasImpersonationId: boolean;
   public hasPermissionToCreateAccount: boolean;
@@ -45,7 +46,6 @@ export class GfAccountsPageComponent implements OnDestroy, OnInit {
   public routeQueryParams: Subscription;
   public totalBalanceInBaseCurrency = 0;
   public totalValueInBaseCurrency = 0;
-  public transactionCount = 0;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -128,14 +128,14 @@ export class GfAccountsPageComponent implements OnDestroy, OnInit {
       .subscribe(
         ({
           accounts,
+          activitiesCount,
           totalBalanceInBaseCurrency,
-          totalValueInBaseCurrency,
-          transactionCount
+          totalValueInBaseCurrency
         }) => {
           this.accounts = accounts;
+          this.activitiesCount = activitiesCount;
           this.totalBalanceInBaseCurrency = totalBalanceInBaseCurrency;
           this.totalValueInBaseCurrency = totalValueInBaseCurrency;
-          this.transactionCount = transactionCount;
 
           if (this.accounts?.length <= 0) {
             this.router.navigate([], { queryParams: { createDialog: true } });
@@ -358,8 +358,8 @@ export class GfAccountsPageComponent implements OnDestroy, OnInit {
 
   private reset() {
     this.accounts = undefined;
+    this.activitiesCount = 0;
     this.totalBalanceInBaseCurrency = 0;
     this.totalValueInBaseCurrency = 0;
-    this.transactionCount = 0;
   }
 }

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

@@ -4,6 +4,7 @@
       <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Accounts</h1>
       <gf-accounts-table
         [accounts]="accounts"
+        [activitiesCount]="activitiesCount"
         [baseCurrency]="user?.settings?.baseCurrency"
         [deviceType]="deviceType"
         [locale]="user?.settings?.locale"
@@ -14,7 +15,6 @@
         "
         [totalBalanceInBaseCurrency]="totalBalanceInBaseCurrency"
         [totalValueInBaseCurrency]="totalValueInBaseCurrency"
-        [transactionCount]="transactionCount"
         (accountDeleted)="onDeleteAccount($event)"
         (accountToUpdate)="onUpdateAccount($event)"
         (transferBalance)="onTransferBalance()"

libs/ui/src/lib/accounts-table/accounts-table.component.html

@@ -115,7 +115,7 @@
       ></td>
     </ng-container>
 
-    <ng-container matColumnDef="transactions">
+    <ng-container matColumnDef="activitiesCount">
       <th
         *matHeaderCellDef
         class="justify-content-end px-1"
@@ -129,7 +129,7 @@
         {{ element.transactionCount }}
       </td>
       <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
-        {{ transactionCount }}
+        {{ activitiesCount }}
       </td>
     </ng-container>
 

libs/ui/src/lib/accounts-table/accounts-table.component.stories.ts

@@ -115,10 +115,10 @@ export const Loading: Story = {
     hasPermissionToOpenDetails: false,
     locale: 'en-US',
     showActions: false,
+    showActivitiesCount: true,
     showAllocationInPercentage: false,
     showBalance: true,
     showFooter: true,
-    showTransactions: true,
     showValue: true,
     showValueInBaseCurrency: true
   }
@@ -127,39 +127,39 @@ export const Loading: Story = {
 export const Default: Story = {
   args: {
     accounts,
+    activitiesCount: 12,
     baseCurrency: 'USD',
     deviceType: 'desktop',
     hasPermissionToOpenDetails: false,
     locale: 'en-US',
     showActions: false,
+    showActivitiesCount: true,
     showAllocationInPercentage: false,
     showBalance: true,
     showFooter: true,
-    showTransactions: true,
     showValue: true,
     showValueInBaseCurrency: true,
     totalBalanceInBaseCurrency: 12428.2,
-    totalValueInBaseCurrency: 107971.70321466809,
-    transactionCount: 12
+    totalValueInBaseCurrency: 107971.70321466809
   }
 };
 
 export const WithoutFooter: Story = {
   args: {
     accounts,
+    activitiesCount: 12,
     baseCurrency: 'USD',
     deviceType: 'desktop',
     hasPermissionToOpenDetails: false,
     locale: 'en-US',
     showActions: false,
+    showActivitiesCount: true,
     showAllocationInPercentage: false,
     showBalance: true,
     showFooter: false,
-    showTransactions: true,
     showValue: true,
     showValueInBaseCurrency: true,
     totalBalanceInBaseCurrency: 12428.2,
-    totalValueInBaseCurrency: 107971.70321466809,
-    transactionCount: 12
+    totalValueInBaseCurrency: 107971.70321466809
   }
 };

libs/ui/src/lib/accounts-table/accounts-table.component.ts

@@ -55,20 +55,20 @@ import { Subject, Subscription } from 'rxjs';
 })
 export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   @Input() accounts: Account[];
+  @Input() activitiesCount: number;
   @Input() baseCurrency: string;
   @Input() deviceType: string;
   @Input() hasPermissionToOpenDetails = true;
   @Input() locale = getLocale();
   @Input() showActions: boolean;
+  @Input() showActivitiesCount = true;
   @Input() showAllocationInPercentage: boolean;
   @Input() showBalance = true;
   @Input() showFooter = true;
-  @Input() showTransactions = true;
   @Input() showValue = true;
   @Input() showValueInBaseCurrency = true;
   @Input() totalBalanceInBaseCurrency: number;
   @Input() totalValueInBaseCurrency: number;
-  @Input() transactionCount: number;
 
   @Output() accountDeleted = new EventEmitter<string>();
   @Output() accountToUpdate = new EventEmitter<Account>();
@@ -101,8 +101,8 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   public ngOnChanges() {
     this.displayedColumns = ['status', 'account', 'platform'];
 
-    if (this.showTransactions) {
-      this.displayedColumns.push('transactions');
+    if (this.showActivitiesCount) {
+      this.displayedColumns.push('activitiesCount');
     }
 
     if (this.showBalance) {