Introduced stepper to import activities (#1990)

* Introduced stepper to import activities

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added a stepper to the activities import dialog
 - Added a link to manage the benchmarks to the benchmark comparator
 - Added support for localized routes
 

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

@@ -0,0 +1,4 @@
+export enum ImportStep {
+  UPLOAD_FILE = 0,
+  SELECT_ACTIVITIES = 1
+}

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

@@ -1,3 +1,7 @@
+import {
+  StepperOrientation,
+  StepperSelectionEvent
+} from '@angular/cdk/stepper';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -8,6 +12,7 @@ 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 { MatStepper } from '@angular/material/stepper';
 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';
@@ -15,8 +20,10 @@ import { ImportActivitiesService } from '@ghostfolio/client/services/import-acti
 import { Position } from '@ghostfolio/common/interfaces';
 import { AssetClass } from '@prisma/client';
 import { isArray, sortBy } from 'lodash';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
 
+import { ImportStep } from './enums/import-step';
 import { ImportActivitiesDialogParams } from './interfaces/interfaces';
 
 @Component({
@@ -29,12 +36,14 @@ export class ImportActivitiesDialog implements OnDestroy {
   public accounts: CreateAccountDto[] = [];
   public activities: Activity[] = [];
   public details: any[] = [];
+  public deviceType: string;
   public errorMessages: string[] = [];
   public holdings: Position[] = [];
-  public isFileSelected = false;
+  public importStep: ImportStep = ImportStep.UPLOAD_FILE;
   public maxSafeInteger = Number.MAX_SAFE_INTEGER;
   public mode: 'DIVIDEND';
   public selectedActivities: Activity[] = [];
+  public stepperOrientation: StepperOrientation;
   public uniqueAssetForm: FormGroup;
 
   private unsubscribeSubject = new Subject<void>();
@@ -43,6 +52,7 @@ export class ImportActivitiesDialog implements OnDestroy {
     private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: ImportActivitiesDialogParams,
     private dataService: DataService,
+    private deviceService: DeviceDetectorService,
     private formBuilder: FormBuilder,
     public dialogRef: MatDialogRef<ImportActivitiesDialog>,
     private importActivitiesService: ImportActivitiesService,
@@ -50,6 +60,10 @@ export class ImportActivitiesDialog implements OnDestroy {
   ) {}
 
   public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+    this.stepperOrientation =
+      this.deviceType === 'mobile' ? 'vertical' : 'horizontal';
+
     this.uniqueAssetForm = this.formBuilder.group({
       uniqueAsset: [undefined, Validators.required]
     });
@@ -116,7 +130,15 @@ export class ImportActivitiesDialog implements OnDestroy {
     }
   }
 
-  public onLoadDividends() {
+  public onImportStepChange(event: StepperSelectionEvent) {
+    if (event.selectedIndex === ImportStep.UPLOAD_FILE) {
+      this.importStep = ImportStep.UPLOAD_FILE;
+    } else if (event.selectedIndex === ImportStep.SELECT_ACTIVITIES) {
+      this.importStep = ImportStep.SELECT_ACTIVITIES;
+    }
+  }
+
+  public onLoadDividends(aStepper: MatStepper) {
     this.uniqueAssetForm.controls['uniqueAsset'].disable();
 
     const { dataSource, symbol } =
@@ -130,19 +152,23 @@ export class ImportActivitiesDialog implements OnDestroy {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ activities }) => {
         this.activities = activities;
-        this.isFileSelected = true;
+
+        aStepper.next();
 
         this.changeDetectorRef.markForCheck();
       });
   }
 
-  public onReset() {
+  public onReset(aStepper: MatStepper) {
     this.details = [];
     this.errorMessages = [];
-    this.isFileSelected = false;
+    this.importStep = ImportStep.SELECT_ACTIVITIES;
+    this.uniqueAssetForm.controls['uniqueAsset'].enable();
+
+    aStepper.reset();
   }
 
-  public onSelectFile() {
+  public onSelectFile(aStepper: MatStepper) {
     const input = document.createElement('input');
     input.accept = 'application/JSON, .csv';
     input.type = 'file';
@@ -225,8 +251,11 @@ export class ImportActivitiesDialog implements OnDestroy {
             error: { error: { message: ['Unexpected format'] } }
           });
         } finally {
-          this.isFileSelected = true;
+          this.importStep = ImportStep.SELECT_ACTIVITIES;
           this.snackBar.dismiss();
+
+          aStepper.next();
+
           this.changeDetectorRef.markForCheck();
         }
       };

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

@@ -5,10 +5,23 @@
   (closeButtonClicked)="onCancel()"
 ></gf-dialog-header>
 
-<div class="flex-grow-1 py-3" mat-dialog-content>
+<div class="flex-grow-1" mat-dialog-content>
-  <ng-container *ngIf="!isFileSelected">
+  <mat-stepper
+    #stepper
+    [animationDuration]="0"
+    [linear]="true"
+    [orientation]="stepperOrientation"
+    [selectedIndex]="importStep"
+    (selectionChange)="onImportStepChange($event)"
+  >
+    <mat-step [completed]="importStep === 0" [selected]="importStep === 0">
+      <ng-template i18n matStepLabel>Select File</ng-template>
+      <div class="pt-3">
         <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
-      <form [formGroup]="uniqueAssetForm" (ngSubmit)="onLoadDividends()">
+          <form
+            [formGroup]="uniqueAssetForm"
+            (ngSubmit)="onLoadDividends(stepper)"
+          >
             <mat-form-field appearance="outline" class="w-100">
               <mat-label i18n>Holding</mat-label>
               <mat-select formControlName="uniqueAsset">
@@ -19,7 +32,7 @@
                 >
               </mat-select>
             </mat-form-field>
-        <div class="d-flex justify-content-center flex-column">
+            <div class="d-flex flex-column justify-content-center">
               <button
                 color="primary"
                 mat-flat-button
@@ -32,12 +45,12 @@
           </form>
         </ng-container>
         <ng-template #selectFile>
-      <div class="d-flex justify-content-center flex-column">
+          <div class="d-flex flex-column justify-content-center">
             <button
               class="py-4"
               color="primary"
               mat-stroked-button
-          (click)="onSelectFile()"
+              (click)="onSelectFile(stepper)"
             >
               <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
               <span i18n>Choose File</span>
@@ -60,10 +73,15 @@
             </p>
           </div>
         </ng-template>
-  </ng-container>
+      </div>
-  <ng-container *ngIf="isFileSelected">
+    </mat-step>
+
+    <mat-step [completed]="importStep === 1" [selected]="importStep === 1">
+      <ng-template i18n matStepLabel>Select Activities</ng-template>
+      <div class="pt-3">
         <ng-container *ngIf="errorMessages.length === 0; else errorMessage">
           <gf-activities-table
+            *ngIf="importStep === 1"
             [activities]="activities"
             [baseCurrency]="data?.user?.settings?.baseCurrency"
             [deviceType]="data?.deviceType"
@@ -79,6 +97,20 @@
             [showSymbolColumn]="false"
             (selectedActivities)="updateSelection($event)"
           ></gf-activities-table>
+          <div class="d-flex justify-content-end mt-3">
+            <button mat-button (click)="onReset(stepper)">
+              <ng-container i18n>Back</ng-container>
+            </button>
+            <button
+              class="ml-1"
+              color="primary"
+              mat-flat-button
+              [disabled]="!selectedActivities?.length"
+              (click)="onImportActivities()"
+            >
+              <ng-container i18n>Import</ng-container>
+            </button>
+          </div>
         </ng-container>
         <ng-template #errorMessage>
           <mat-accordion displayMode="flat">
@@ -102,27 +134,24 @@
               ><code>{{ details[i] | json }}</code></pre>
             </mat-expansion-panel>
           </mat-accordion>
-      <div class="mt-2">
+          <div class="d-flex justify-content-end mt-3">
-        <button mat-button (click)="onReset()">
+            <button mat-button (click)="onReset(stepper)">
-          <ion-icon class="mr-2" name="arrow-back-outline"></ion-icon>
+              <ng-container i18n>Back</ng-container>
-          <span i18n>Back</span>
             </button>
-      </div>
-    </ng-template>
-  </ng-container>
-</div>
-
-<div *ngIf="isFileSelected" class="justify-content-end" mat-dialog-actions>
-  <button i18n mat-button (click)="onCancel()">Cancel</button>
             <button
+              class="ml-1"
               color="primary"
               mat-flat-button
-    [disabled]="!selectedActivities?.length"
+              [disabled]="true"
-    (click)="onImportActivities()"
             >
               <ng-container i18n>Import</ng-container>
             </button>
           </div>
+        </ng-template>
+      </div>
+    </mat-step>
+  </mat-stepper>
+</div>
 
 <gf-dialog-footer
   mat-dialog-actions

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

@@ -6,6 +6,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
+import { MatStepperModule } from '@angular/material/stepper';
 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';
@@ -25,6 +26,7 @@ import { ImportActivitiesDialog } from './import-activities-dialog.component';
     MatExpansionModule,
     MatFormFieldModule,
     MatSelectModule,
+    MatStepperModule,
     ReactiveFormsModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

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

@@ -5,6 +5,16 @@
     color: rgba(var(--palette-primary-500), 1);
   }
 
+  mat-stepper {
+    ::ng-deep {
+      .mat-step-header {
+        &[aria-selected='false'] {
+          pointer-events: none;
+        }
+      }
+    }
+  }
+
   .mat-expansion-panel {
     background: none;
     box-shadow: none;