Feature/set up pagination in import activities dialog (#5527)

* Set up pagination in import activities dialog

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added the symbol to the benchmark component
+- Added pagination to the activities table of the activities import dialog
 - Added an option to configure the account column of the activities table component
 
 ### Changed

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -36,6 +36,7 @@ import {
 } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { PageEvent } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -90,8 +91,9 @@ export class GfImportActivitiesDialog implements OnDestroy {
   public holdings: PortfolioPosition[] = [];
   public importStep: ImportStep = ImportStep.UPLOAD_FILE;
   public isLoading = false;
-  public maxSafeInteger = Number.MAX_SAFE_INTEGER;
   public mode: 'DIVIDEND';
+  public pageIndex = 0;
+  public pageSize = 8;
   public selectedActivities: Activity[] = [];
   public sortColumn = 'date';
   public sortDirection: SortDirection = 'desc';
@@ -236,6 +238,7 @@ export class GfImportActivitiesDialog implements OnDestroy {
       .subscribe(({ activities }) => {
         this.activities = activities;
         this.dataSource = new MatTableDataSource(activities.reverse());
+        this.pageIndex = 0;
         this.totalItems = activities.length;
 
         aStepper.next();
@@ -244,10 +247,15 @@ export class GfImportActivitiesDialog implements OnDestroy {
       });
   }
 
+  public onPageChanged({ pageIndex }: PageEvent) {
+    this.pageIndex = pageIndex;
+  }
+
   public onReset(aStepper: MatStepper) {
     this.details = [];
     this.errorMessages = [];
     this.importStep = ImportStep.SELECT_ACTIVITIES;
+    this.pageIndex = 0;
     this.assetProfileForm.get('assetProfileIdentifier').enable();
 
     aStepper.reset();
@@ -338,6 +346,7 @@ export class GfImportActivitiesDialog implements OnDestroy {
               });
             this.activities = activities;
             this.dataSource = new MatTableDataSource(activities.reverse());
+            this.pageIndex = 0;
             this.totalItems = activities.length;
           } catch (error) {
             console.error(error);
@@ -356,6 +365,7 @@ export class GfImportActivitiesDialog implements OnDestroy {
             });
             this.activities = data.activities;
             this.dataSource = new MatTableDataSource(data.activities.reverse());
+            this.pageIndex = 0;
             this.totalItems = data.activities.length;
           } catch (error) {
             console.error(error);

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -21,9 +21,10 @@
           <ng-container i18n>Select File</ng-container>
         }
       </ng-template>
-      <div class="pt-3">
+      <div>
         @if (mode === 'DIVIDEND') {
           <form
+            class="pt-3"
             [formGroup]="assetProfileForm"
             (ngSubmit)="onLoadDividends(stepper)"
           >
@@ -114,7 +115,7 @@
           <ng-container i18n>Select Activities</ng-container>
         }
       </ng-template>
-      <div class="pt-3">
+      <div>
         @if (errorMessages?.length === 0) {
           @if (importStep === 1) {
             <gf-activities-table
@@ -127,7 +128,8 @@
               [hasPermissionToFilter]="false"
               [hasPermissionToOpenDetails]="false"
               [locale]="data?.user?.settings?.locale"
-              [pageSize]="maxSafeInteger"
+              [pageIndex]="pageIndex"
+              [pageSize]="pageSize"
               [showActions]="false"
               [showCheckbox]="true"
               [showSymbolColumn]="false"
@@ -135,6 +137,7 @@
               [sortDirection]="sortDirection"
               [sortDisabled]="true"
               [totalItems]="totalItems"
+              (pageChanged)="onPageChanged($event)"
               (selectedActivities)="updateSelection($event)"
             />
           }
@@ -153,25 +156,27 @@
             </button>
           </div>
         } @else {
-          <mat-accordion displayMode="flat">
+          <div class="pt-3">
-            @for (message of errorMessages; track message; let i = $index) {
+            <mat-accordion displayMode="flat">
-              <mat-expansion-panel [disabled]="!details[i]">
+              @for (message of errorMessages; track message; let i = $index) {
-                <mat-expansion-panel-header class="pl-1">
+                <mat-expansion-panel [disabled]="!details[i]">
-                  <mat-panel-title>
+                  <mat-expansion-panel-header class="pl-1">
-                    <div class="d-flex">
+                    <mat-panel-title>
-                      <div class="align-items-center d-flex mr-2">
+                      <div class="d-flex">
-                        <ion-icon name="warning-outline" />
+                        <div class="align-items-center d-flex mr-2">
+                          <ion-icon name="warning-outline" />
+                        </div>
+                        <div>{{ message }}</div>
                       </div>
-                      <div>{{ message }}</div>
+                    </mat-panel-title>
-                    </div>
+                  </mat-expansion-panel-header>
-                  </mat-panel-title>
+                  @if (details[i]) {
-                </mat-expansion-panel-header>
+                    <pre class="m-0"><code>{{ details[i] | json }}</code></pre>
-                @if (details[i]) {
+                  }
-                  <pre class="m-0"><code>{{ details[i] | json }}</code></pre>
+                </mat-expansion-panel>
-                }
+              }
-              </mat-expansion-panel>
+            </mat-accordion>
-            }
+          </div>
-          </mat-accordion>
           <div class="d-flex justify-content-end mt-3">
             <button mat-button (click)="onReset(stepper)">
               <ng-container i18n>Back</ng-container>

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

@@ -169,6 +169,10 @@ export class GfActivitiesTableComponent
   }
 
   public ngAfterViewInit() {
+    if (this.dataSource) {
+      this.dataSource.paginator = this.paginator;
+    }
+
     this.sort.sortChange.subscribe((value: Sort) => {
       this.sortChanged.emit(value);
     });