Feature/improve activities import by preview step (#1540)

* Improve activities import

* Update changelog

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the activities import by a preview step
 - Improved the labels based on the type in the create or edit activity dialog
 - Refreshed the cryptocurrencies list
 - Removed the data source type `RAKUTEN`

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

@@ -120,7 +120,7 @@ export class ImportActivitiesDialog implements OnDestroy {
             try {
               this.activities = await this.importActivitiesService.importJson({
                 content: content.activities,
-                dryRun: true
+                isDryRun: true
               });
             } catch (error) {
               console.error(error);
@@ -131,8 +131,8 @@ export class ImportActivitiesDialog implements OnDestroy {
           } else if (file.name.endsWith('.csv')) {
             try {
               this.activities = await this.importActivitiesService.importCsv({
-                dryRun: true,
                 fileContent,
+                isDryRun: true,
                 userAccounts: this.data.user.accounts
               });
             } catch (error) {

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

@@ -3,9 +3,9 @@ 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';
+import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
 
 import { ImportActivitiesDialog } from './import-activities-dialog.component';
 

apps/client/src/app/pages/portfolio/holdings/holdings-page.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
 import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
+import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
 
 import { HoldingsPageRoutingModule } from './holdings-page-routing.module';
 import { HoldingsPageComponent } from './holdings-page.component';

apps/client/src/app/pages/public/public-page.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
+import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 

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

@@ -26,12 +26,12 @@ export class ImportActivitiesService {
   public constructor(private http: HttpClient) {}
 
   public async importCsv({
-    dryRun = false,
     fileContent,
+    isDryRun = false,
     userAccounts
   }: {
-    dryRun?: boolean;
     fileContent: string;
+    isDryRun?: boolean;
     userAccounts: Account[];
   }): Promise<Activity[]> {
     const content = csvToJson(fileContent, {
@@ -55,22 +55,22 @@ export class ImportActivitiesService {
       });
     }
 
-    return await this.importJson({ content: activities, dryRun });
+    return await this.importJson({ isDryRun, content: activities });
   }
 
   public importJson({
     content,
-    dryRun = false
+    isDryRun = false
   }: {
     content: CreateOrderDto[];
-    dryRun?: boolean;
+    isDryRun?: boolean;
   }): Promise<Activity[]> {
     return new Promise((resolve, reject) => {
       this.postImport(
         {
           activities: content
         },
-        dryRun
+        isDryRun
       )
         .pipe(
           catchError((error) => {
@@ -96,15 +96,22 @@ export class ImportActivitiesService {
     return this.importJson({ content: importData });
   }
 
-  private convertToCreateOrderDto(aActivity: Activity): CreateOrderDto {
+  private convertToCreateOrderDto({
+    date,
+    fee,
+    quantity,
+    SymbolProfile,
+    type,
+    unitPrice
+  }: Activity): CreateOrderDto {
     return {
-      currency: aActivity.SymbolProfile.currency,
-      date: aActivity.date.toString(),
-      fee: aActivity.fee,
-      quantity: aActivity.quantity,
-      symbol: aActivity.SymbolProfile.symbol,
-      type: aActivity.type,
-      unitPrice: aActivity.unitPrice
+      fee,
+      quantity,
+      type,
+      unitPrice,
+      currency: SymbolProfile.currency,
+      date: date.toString(),
+      symbol: SymbolProfile.symbol
     };
   }
 
@@ -337,10 +344,10 @@ export class ImportActivitiesService {
 
   private postImport(
     aImportData: { activities: CreateOrderDto[] },
-    dryRun = false
+    aIsDryRun = false
   ) {
     return this.http.post<{ activities: Activity[] }>(
-      `/api/v1/import?dryRun=${dryRun}`,
+      `/api/v1/import?dryRun=${aIsDryRun}`,
       aImportData
     );
   }

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

@@ -19,6 +19,7 @@
       <th *matHeaderCellDef class="px-1" mat-header-cell>
         <mat-checkbox
           class="mt-2"
+          color="primary"
           [checked]="selectedRows.hasValue() && areAllRowsSelected()"
           [indeterminate]="selectedRows.hasValue() && !areAllRowsSelected()"
           (change)="$event ? toggleAllRows() : null"
@@ -27,6 +28,7 @@
       <td *matCellDef="let element" class="px-1" mat-cell>
         <mat-checkbox
           class="mt-2"
+          color="primary"
           [checked]="selectedRows.isSelected(element)"
           (change)="$event ? selectedRows.toggle(element) : null"
           (click)="$event.stopPropagation()"
@@ -65,7 +67,7 @@
       </th>
       <td *matCellDef="let element" class="px-1" mat-cell>
         <div class="d-flex">
-          {{ element.date | date: defaultDateFormat }}
+          {{ element.date | date : defaultDateFormat }}
         </div>
       </td>
       <td *matFooterCellDef class="px-1" i18n mat-footer-cell>Total</td>

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

@@ -1,3 +1,4 @@
+import { SelectionModel } from '@angular/cdk/collections';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -8,7 +9,6 @@ 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';