Feature/add lazy loaded activities table to import activities dialog (#2754)

* Add lazy-loaded activities table

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Introduced the lazy-loaded activities table to the account detail dialog (experimental)
+- Introduced the lazy-loaded activities table to the import activities dialog (experimental)
 - Introduced the lazy-loaded activities table to the position detail dialog (experimental)
 - Improved the font weight in the value component
 - Improved the language localization for Türkçe (`tr`)

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

@@ -12,7 +12,9 @@ import {
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { SortDirection } from '@angular/material/sort';
 import { MatStepper } from '@angular/material/stepper';
+import { MatTableDataSource } from '@angular/material/table';
 import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -35,6 +37,7 @@ import { ImportActivitiesDialogParams } from './interfaces/interfaces';
 export class ImportActivitiesDialog implements OnDestroy {
   public accounts: CreateAccountDto[] = [];
   public activities: Activity[] = [];
+  public dataSource: MatTableDataSource<Activity>;
   public details: any[] = [];
   public deviceType: string;
   public dialogTitle = $localize`Import Activities`;
@@ -45,7 +48,10 @@ export class ImportActivitiesDialog implements OnDestroy {
   public maxSafeInteger = Number.MAX_SAFE_INTEGER;
   public mode: 'DIVIDEND';
   public selectedActivities: Activity[] = [];
+  public sortColumn = 'date';
+  public sortDirection: SortDirection = 'desc';
   public stepperOrientation: StepperOrientation;
+  public totalItems: number;
   public uniqueAssetForm: FormGroup;
 
   private unsubscribeSubject = new Subject<void>();
@@ -173,6 +179,8 @@ export class ImportActivitiesDialog implements OnDestroy {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ activities }) => {
         this.activities = activities;
+        this.dataSource = new MatTableDataSource(activities.reverse());
+        this.totalItems = activities.length;
 
         aStepper.next();
 
@@ -260,6 +268,8 @@ export class ImportActivitiesDialog implements OnDestroy {
                 isDryRun: true
               });
             this.activities = activities;
+            this.dataSource = new MatTableDataSource(activities.reverse());
+            this.totalItems = activities.length;
           } catch (error) {
             console.error(error);
             this.handleImportError({ error, activities: content.activities });
@@ -276,6 +286,8 @@ export class ImportActivitiesDialog implements OnDestroy {
               userAccounts: this.data.user.accounts
             });
             this.activities = data.activities;
+            this.dataSource = new MatTableDataSource(data.activities.reverse());
+            this.totalItems = data.activities.length;
           } catch (error) {
             console.error(error);
             this.handleImportError({

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

@@ -119,8 +119,29 @@
       </ng-template>
       <div class="pt-3">
         <ng-container *ngIf="errorMessages?.length === 0; else errorMessage">
+          <gf-activities-table-lazy
+            *ngIf="importStep === 1 && data?.user?.settings?.isExperimentalFeatures === true"
+            [baseCurrency]="data?.user?.settings?.baseCurrency"
+            [dataSource]="dataSource"
+            [deviceType]="data?.deviceType"
+            [hasPermissionToCreateActivity]="false"
+            [hasPermissionToExportActivities]="false"
+            [hasPermissionToFilter]="false"
+            [hasPermissionToOpenDetails]="false"
+            [locale]="data?.user?.settings?.locale"
+            [pageSize]="maxSafeInteger"
+            [showActions]="false"
+            [showCheckbox]="true"
+            [showFooter]="false"
+            [showSymbolColumn]="false"
+            [sortColumn]="sortColumn"
+            [sortDirection]="sortDirection"
+            [sortDisabled]="true"
+            [totalItems]="totalItems"
+            (selectedActivities)="updateSelection($event)"
+          ></gf-activities-table-lazy>
           <gf-activities-table
-            *ngIf="importStep === 1"
+            *ngIf="importStep === 1 && data?.user?.settings?.isExperimentalFeatures !== true"
             [activities]="activities"
             [baseCurrency]="data?.user?.settings?.baseCurrency"
             [deviceType]="data?.deviceType"

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

@@ -13,6 +13,7 @@ import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-heade
 import { GfFileDropModule } from '@ghostfolio/client/directives/file-drop/file-drop.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
+import { GfActivitiesTableLazyModule } from '@ghostfolio/ui/activities-table-lazy/activities-table-lazy.module';
 
 import { ImportActivitiesDialog } from './import-activities-dialog.component';
 
@@ -22,6 +23,7 @@ import { ImportActivitiesDialog } from './import-activities-dialog.component';
     CommonModule,
     FormsModule,
     GfActivitiesTableModule,
+    GfActivitiesTableLazyModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
     GfFileDropModule,