Task/improve pagination for activities in account detail dialog (#6887)

* Improve pagination in activities table

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the pagination in the activities table of the account detail dialog
 - Improved the pagination in the activities table of the holding detail dialog
 - Randomized the placeholder in the assistant
 - Enabled the _Bull Dashboard_ in the admin control panel without requiring an environment variable (experimental)

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

@@ -1,6 +1,9 @@
 import { GfInvestmentChartComponent } from '@ghostfolio/client/components/investment-chart/investment-chart.component';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { NUMERICAL_PRECISION_THRESHOLD_6_FIGURES } from '@ghostfolio/common/config';
+import {
+  DEFAULT_PAGE_SIZE,
+  NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
+} from '@ghostfolio/common/config';
 import { CreateAccountBalanceDto } from '@ghostfolio/common/dtos';
 import { DATE_FORMAT, downloadAsFile } from '@ghostfolio/common/helper';
 import {
@@ -33,6 +36,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
+import { PageEvent } from '@angular/material/paginator';
 import { Sort, SortDirection } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -93,6 +97,8 @@ export class GfAccountDetailDialogComponent implements OnInit {
   protected isLoadingActivities: boolean;
   protected isLoadingChart: boolean;
   protected name: string | null;
+  protected pageIndex = 0;
+  protected pageSize = DEFAULT_PAGE_SIZE;
   protected platformName: string;
   protected sortColumn = 'date';
   protected sortDirection: SortDirection = 'desc';
@@ -133,6 +139,21 @@ export class GfAccountDetailDialogComponent implements OnInit {
     this.initialize();
   }
 
+  protected onAddAccountBalance(accountBalance: CreateAccountBalanceDto) {
+    this.dataService
+      .postAccountBalance(accountBalance)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.initialize();
+      });
+  }
+
+  protected onChangePage(page: PageEvent) {
+    this.pageIndex = page.pageIndex;
+
+    this.fetchActivities();
+  }
+
   protected onCloneActivity(aActivity: Activity) {
     this.router.navigate(
       internalRoutes.portfolio.subRoutes.activities.routerLink,
@@ -148,15 +169,6 @@ export class GfAccountDetailDialogComponent implements OnInit {
     this.dialogRef.close();
   }
 
-  protected onAddAccountBalance(accountBalance: CreateAccountBalanceDto) {
-    this.dataService
-      .postAccountBalance(accountBalance)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => {
-        this.initialize();
-      });
-  }
-
   protected onDeleteAccountBalance(aId: string) {
     this.dataService
       .deleteAccountBalance(aId)
@@ -287,8 +299,10 @@ export class GfAccountDetailDialogComponent implements OnInit {
     this.dataService
       .fetchActivities({
         filters: [{ id: this.data.accountId, type: 'ACCOUNT' }],
+        skip: this.pageIndex * this.pageSize,
         sortColumn: this.sortColumn,
-        sortDirection: this.sortDirection
+        sortDirection: this.sortDirection,
+        take: this.pageSize
       })
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ activities, count }) => {

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

@@ -120,6 +120,8 @@
           [hasPermissionToFilter]="false"
           [hasPermissionToOpenDetails]="false"
           [locale]="user?.settings?.locale"
+          [pageIndex]="pageIndex"
+          [pageSize]="pageSize"
           [showAccountColumn]="false"
           [showActions]="
             !data.hasImpersonationId &&
@@ -133,6 +135,7 @@
           (activityToClone)="onCloneActivity($event)"
           (activityToUpdate)="onUpdateActivity($event)"
           (export)="onExport()"
+          (pageChanged)="onChangePage($event)"
           (sortChanged)="onSortChanged($event)"
         />
       </mat-tab>