Add checkbox for selecting activities

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

@@ -7,9 +7,14 @@ import {
 } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import {
+  Activities,
+  Activity
+} from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { ImportActivitiesService } from '@ghostfolio/client/services/import-activities.service';
 import { isArray } from 'lodash';
 import { Subject } from 'rxjs';
+import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 
 import { ImportActivitiesDialogParams } from './interfaces/interfaces';
 
@@ -20,8 +25,10 @@ import { ImportActivitiesDialogParams } from './interfaces/interfaces';
   templateUrl: 'import-activities-dialog.html'
 })
 export class ImportActivitiesDialog implements OnDestroy {
+  public activities: Activity[] | CreateOrderDto[] = [];
   public details: any[] = [];
   public errorMessages: string[] = [];
+  public importComplete = false;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -93,7 +100,7 @@ export class ImportActivitiesDialog implements OnDestroy {
             return;
           } else if (file.name.endsWith('.csv')) {
             try {
-              await this.importActivitiesService.importCsv({
+              this.activities = await this.importActivitiesService.importCsv({
                 fileContent,
                 userAccounts: this.data.user.accounts
               });
@@ -163,14 +170,18 @@ export class ImportActivitiesDialog implements OnDestroy {
   }
 
   private handleImportSuccess() {
-    this.snackBar.open(
+    this.importComplete = true;
-      '✅ ' + $localize`Import has been completed`,
-      undefined,
-      {
-        duration: 3000
-      }
-    );
 
-    this.dialogRef.close();
+    //Needed to trigger onPush change detection strategy
+    this.changeDetectorRef.markForCheck();
+    // this.snackBar.open(
+    //   '✅ ' + $localize`Import has been completed`,
+    //   undefined,
+    //   {
+    //     duration: 3000
+    //   }
+    // );
+
+    // this.dialogRef.close();
   }
 }

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

@@ -6,7 +6,22 @@
 ></gf-dialog-header>
 
 <div class="flex-grow-1" mat-dialog-content>
-  <ng-container *ngIf="errorMessages.length === 0">
+  <ng-container *ngIf="importComplete">
+    <gf-activities-table
+      [activities]="activities"
+      [baseCurrency]="data?.user?.settings?.baseCurrency"
+      [deviceType]="data.deviceType"
+      [hasPermissionToCreateActivity]="false"
+      [hasPermissionToExportActivities]="true"
+      [hasPermissionToFilter]="false"
+      [hasPermissionToImportActivities]="false"
+      [hasPermissionToOpenDetails]="false"
+      [locale]="data?.user?.settings?.locale"
+      [showActions]="false"
+      [showSymbolColumn]="false"
+    ></gf-activities-table>
+  </ng-container>
+  <ng-container *ngIf="errorMessages.length === 0 && !importComplete">
     <div class="d-flex justify-content-center flex-column">
       <button
         class="py-3"

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

@@ -3,6 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 
@@ -12,6 +13,7 @@ import { ImportActivitiesDialog } from './import-activities-dialog.component';
   declarations: [ImportActivitiesDialog],
   imports: [
     CommonModule,
+    GfActivitiesTableModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
     MatButtonModule,

apps/client/src/app/services/import-activities.service.ts

@@ -52,7 +52,9 @@ export class ImportActivitiesService {
       });
     }
 
-    await this.importJson({ content: activities });
+    return activities;
+
+    // await this.importJson({ content: activities });
   }
 
   public importJson({ content }: { content: CreateOrderDto[] }): Promise<void> {

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

@@ -15,6 +15,24 @@
     matSortDirection="desc"
     [dataSource]="dataSource"
   >
+    <ng-container matColumnDef="select">
+      <th *matHeaderCellDef class="px-1" mat-header-cell>
+        <mat-checkbox
+          [checked]="selectedRows.hasValue() && areAllRowsSelected()"
+          [indeterminate]="selectedRows.hasValue() && !areAllRowsSelected()"
+          (change)="$event ? toggleAll() : null"
+        ></mat-checkbox>
+      </th>
+      <td *matCellDef="let element" class="px-1" mat-cell>
+        <mat-checkbox
+          [checked]="selectedRows.isSelected(element)"
+          (change)="$event ? selectedRows.toggle(element) : null"
+          (click)="$event.stopPropagation()"
+        ></mat-checkbox>
+      </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
+    </ng-container>
+
     <ng-container matColumnDef="count">
       <th
         *matHeaderCellDef
@@ -122,7 +140,7 @@
         class="d-none d-lg-table-cell px-1"
         mat-cell
       >
-        {{ element.SymbolProfile.currency }}
+        {{ baseCurrency }}
       </td>
       <td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
         {{ baseCurrency }}
@@ -238,7 +256,9 @@
           <gf-value
             [isCurrency]="true"
             [locale]="locale"
-            [value]="isLoading ? undefined : element.value"
+            [value]="
+              isLoading ? undefined : element.unitPrice * element.quantity
+            "
           ></gf-value>
         </div>
       </td>

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

@@ -8,6 +8,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
+import { SelectionModel } from '@angular/cdk/collections';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
@@ -57,6 +58,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
   public allFilters: Filter[];
   public dataSource: MatTableDataSource<Activity> = new MatTableDataSource();
+  public selectedRows = new SelectionModel<Activity>(true, []);
   public defaultDateFormat: string;
   public displayedColumns = [];
   public endOfToday = endOfToday();
@@ -83,8 +85,24 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
       });
   }
 
+  public areAllRowsSelected() {
+    const numSelectedRows = this.selectedRows.selected.length;
+    const numTotalRows = this.dataSource.data.length;
+    return numSelectedRows === numTotalRows;
+  }
+
+  public toggleAll() {
+    this.areAllRowsSelected()
+      ? this.selectedRows.clear()
+      : this.dataSource.data.forEach((row) => this.selectedRows.select(row));
+
+    this.selectedActivities.emit(this.selectedRows.selected);
+  }
+
   public ngOnChanges() {
+    console.log('INSIDE LIIB', this.activities);
     this.displayedColumns = [
+      'select',
       'count',
       'date',
       'type',
@@ -219,13 +237,18 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
       };
     }
 
-    fieldValueMap[activity.SymbolProfile.currency] = {
+    if (activity.SymbolProfile?.currency) {
-      id: activity.SymbolProfile.currency,
+      fieldValueMap[activity.SymbolProfile.currency] = {
-      label: activity.SymbolProfile.currency,
+        id: activity.SymbolProfile.currency,
-      type: 'TAG'
+        label: activity.SymbolProfile.currency,
-    };
+        type: 'TAG'
+      };
+    }
 
-    if (!isUUID(activity.SymbolProfile.symbol)) {
+    if (
+      activity.SymbolProfile?.symbol &&
+      !isUUID(activity.SymbolProfile.symbol)
+    ) {
       fieldValueMap[activity.SymbolProfile.symbol] = {
         id: activity.SymbolProfile.symbol,
         label: activity.SymbolProfile.symbol,
@@ -233,17 +256,21 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
       };
     }
 
-    fieldValueMap[activity.type] = {
+    if (activity?.type) {
-      id: activity.type,
+      fieldValueMap[activity.type] = {
-      label: activity.type,
+        id: activity.type,
-      type: 'TAG'
+        label: activity.type,
-    };
+        type: 'TAG'
-
+      };
-    fieldValueMap[format(activity.date, 'yyyy')] = {
+    }
-      id: format(activity.date, 'yyyy'),
+
-      label: format(activity.date, 'yyyy'),
+    // if (typeof activity?.date) {
-      type: 'TAG'
+    //   fieldValueMap[format(activity.date, 'yyyy')] = {
-    };
+    //     id: format(activity.date, 'yyyy'),
+    //     label: format(activity.date, 'yyyy'),
+    //     type: 'TAG'
+    //   };
+    // }
 
     return Object.values(fieldValueMap);
   }

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

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
@@ -26,6 +27,7 @@ import { ActivitiesTableComponent } from './activities-table.component';
     GfSymbolModule,
     GfValueModule,
     MatButtonModule,
+    MatCheckboxModule,
     MatMenuModule,
     MatPaginatorModule,
     MatSortModule,