Resolve comments

apps/client/src/app/pages/portfolio/transactions/transactions-page.html

@@ -3,7 +3,6 @@
     <div class="col">
       <h3 class="d-flex justify-content-center mb-3" i18n>Activities</h3>
       <gf-activities-table
-        pageSize="50"
         [activities]="activities"
         [baseCurrency]="user?.settings?.baseCurrency"
         [deviceType]="deviceType"

apps/client/src/styles.scss

@@ -90,6 +90,10 @@ body {
       }
     }
 
+    .mat-paginator {
+      background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+    }
+
     .svgMap-tooltip {
       background: var(--dark-background);
 
@@ -220,6 +224,14 @@ ngx-skeleton-loader {
   }
 }
 
+.mat-paginator {
+  background-color: rgba(var(--palette-foreground-base-light), 0.02);
+
+  .mat-paginator-page-size {
+    display: none;
+  }
+}
+
 .no-min-width {
   min-width: unset !important;
 }

libs/common/src/lib/config.ts

@@ -40,6 +40,7 @@ export const DATA_GATHERING_QUEUE_PRIORITY_HIGH = 1;
 
 export const DEFAULT_DATE_FORMAT_MONTH_YEAR = 'MMM yyyy';
 export const DEFAULT_LANGUAGE_CODE = 'en';
+export const DEFAULT_PAGE_SIZE = 50;
 
 export const GATHER_ASSET_PROFILE_PROCESS = 'GATHER_ASSET_PROFILE';
 export const GATHER_ASSET_PROFILE_PROCESS_OPTIONS: JobOptions = {

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

@@ -424,7 +424,7 @@
       dataSource.data.length <= pageSize
   }"
   [pageSize]="pageSize"
-  (page)="pageChanged($event)"
+  (page)="onChangePage($event)"
 ></mat-paginator>
 
 <ngx-skeleton-loader

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

@@ -13,6 +13,7 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
+import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
 import { getDateFormatString } from '@ghostfolio/common/helper';
 import { Filter, UniqueAsset } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';
@@ -38,7 +39,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   @Input() hasPermissionToImportActivities: boolean;
   @Input() hasPermissionToOpenDetails = true;
   @Input() locale: string;
-  @Input() pageSize = Number.MAX_SAFE_INTEGER;
+  @Input() pageSize = DEFAULT_PAGE_SIZE;
   @Input() showActions: boolean;
   @Input() showSymbolColumn = true;
 
@@ -130,6 +131,13 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
     }
   }
 
+  public onChangePage(page: PageEvent) {
+    this.pageIndex = page.pageIndex;
+
+    this.totalFees = this.getTotalFees();
+    this.totalValue = this.getTotalValue();
+  }
+
   public onCloneActivity(aActivity: OrderWithAccount) {
     this.activityToClone.emit(aActivity);
   }
@@ -293,13 +301,6 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
     return totalValue.toNumber();
   }
 
-  public pageChanged(page: PageEvent) {
-    this.pageIndex = page.pageIndex;
-
-    this.totalFees = this.getTotalFees();
-    this.totalValue = this.getTotalValue();
-  }
-
   private updateFilters(filters: Filter[] = []) {
     this.isLoading = true;