From 0afc18f254f8fcebad355ee3b347b2b70c621b72 Mon Sep 17 00:00:00 2001
From: yksolanki9 <yashsolanki1709@gmail.com>
Date: Fri, 4 Nov 2022 00:08:18 +0530
Subject: [PATCH] Resolve comments

---
 .../transactions/transactions-page.html         |  1 -
 apps/client/src/styles.scss                     | 12 ++++++++++++
 libs/common/src/lib/config.ts                   |  1 +
 .../activities-table.component.html             |  2 +-
 .../activities-table.component.ts               | 17 +++++++++--------
 5 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/app/pages/portfolio/transactions/transactions-page.html b/apps/client/src/app/pages/portfolio/transactions/transactions-page.html
index ae6f026c4..ee2e4181c 100644
--- a/apps/client/src/app/pages/portfolio/transactions/transactions-page.html
+++ b/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"
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index c31d7596c..8537cdb80 100644
--- a/apps/client/src/styles.scss
+++ b/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;
 }
diff --git a/libs/common/src/lib/config.ts b/libs/common/src/lib/config.ts
index ffd67667b..1389200a6 100644
--- a/libs/common/src/lib/config.ts
+++ b/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 = {
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.html b/libs/ui/src/lib/activities-table/activities-table.component.html
index 8ecad54f4..6ed4b293b 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/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
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.ts b/libs/ui/src/lib/activities-table/activities-table.component.ts
index 7f03d64a1..c6099806e 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.ts
+++ b/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;