Fix holding detail activities pagination

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

@@ -1,5 +1,6 @@
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
+  DEFAULT_PAGE_SIZE,
   NUMERICAL_PRECISION_THRESHOLD_3_FIGURES,
   NUMERICAL_PRECISION_THRESHOLD_5_FIGURES,
   NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
@@ -48,6 +49,7 @@ import {
   MatDialogRef
 } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { PageEvent } from '@angular/material/paginator';
 import { SortDirection } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -140,6 +142,8 @@ export class GfHoldingDetailDialogComponent implements OnInit {
   public netPerformancePercentWithCurrencyEffectPrecision = 2;
   public netPerformanceWithCurrencyEffect: number;
   public netPerformanceWithCurrencyEffectPrecision = 2;
+  public pageIndex = 0;
+  public pageSize = DEFAULT_PAGE_SIZE;
   public quantity: number;
   public quantityPrecision = 2;
   public reportDataGlitchMail: string;
@@ -240,18 +244,7 @@ export class GfHoldingDetailDialogComponent implements OnInit {
         this.changeDetectorRef.markForCheck();
       });
 
-    this.dataService
+    this.fetchActivities(filters);
-      .fetchActivities({
-        filters,
-        sortColumn: this.sortColumn,
-        sortDirection: this.sortDirection
-      })
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(({ activities }) => {
-        this.dataSource = new MatTableDataSource(activities);
-
-        this.changeDetectorRef.markForCheck();
-      });
 
     this.dataService
       .fetchHoldingDetail({
@@ -615,6 +608,12 @@ export class GfHoldingDetailDialogComponent implements OnInit {
     }
   }
 
+  public onChangePage(page: PageEvent) {
+    this.pageIndex = page.pageIndex;
+
+    this.fetchActivities();
+  }
+
   public onUpdateActivity(aActivity: Activity) {
     this.router.navigate(
       internalRoutes.portfolio.subRoutes.activities.routerLink,
@@ -626,6 +625,30 @@ export class GfHoldingDetailDialogComponent implements OnInit {
     this.dialogRef.close();
   }
 
+  private fetchActivities(filters = this.getActivityFilters()) {
+    this.dataService
+      .fetchActivities({
+        filters,
+        skip: this.pageIndex * this.pageSize,
+        sortColumn: this.sortColumn,
+        sortDirection: this.sortDirection,
+        take: this.pageSize
+      })
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(({ activities }) => {
+        this.dataSource = new MatTableDataSource(activities);
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
+  private getActivityFilters(): Filter[] {
+    return [
+      { id: this.data.dataSource, type: 'DATA_SOURCE' },
+      { id: this.data.symbol, type: 'SYMBOL' }
+    ];
+  }
+
   private fetchMarketData() {
     this.dataService
       .fetchMarketDataBySymbol({

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

@@ -353,6 +353,8 @@
           [hasPermissionToFilter]="false"
           [hasPermissionToOpenDetails]="false"
           [locale]="data.locale"
+          [pageIndex]="pageIndex"
+          [pageSize]="pageSize"
           [showActions]="
             !data.hasImpersonationId &&
             data.hasPermissionToCreateActivity &&
@@ -367,6 +369,7 @@
           (activityToClone)="onCloneActivity($event)"
           (activityToUpdate)="onUpdateActivity($event)"
           (export)="onExport()"
+          (pageChanged)="onChangePage($event)"
         />
       </mat-tab>
       <mat-tab>

libs/ui/src/lib/services/data.service.ts

@@ -235,7 +235,7 @@ export class DataService {
       params = params.append('range', range);
     }
 
-    if (skip) {
+    if (skip !== undefined) {
       params = params.append('skip', skip);
     }
 
@@ -247,7 +247,7 @@ export class DataService {
       params = params.append('sortDirection', sortDirection);
     }
 
-    if (take) {
+    if (take !== undefined) {
       params = params.append('take', take);
     }