refactor: import step, allowed to return to start over

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/enums/enums.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

@@ -16,13 +16,11 @@ import { Position } from '@ghostfolio/common/interfaces';
 import { AssetClass } from '@prisma/client';
 import { isArray, sortBy } from 'lodash';
 import { Subject, takeUntil } from 'rxjs';
+import { ImportStep } from './enums/enums';
 
 import { ImportActivitiesDialogParams } from './interfaces/interfaces';
-
-enum FileStatus {
-  SELECT = 0,
-  UPLOADED
-}
+import { StepperSelectionEvent } from '@angular/cdk/stepper';
+import { MatStepper } from '@angular/material/stepper';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -36,12 +34,12 @@ export class ImportActivitiesDialog implements OnDestroy {
   public details: any[] = [];
   public errorMessages: string[] = [];
   public holdings: Position[] = [];
+  public importStep: ImportStep = ImportStep.UPLOAD_FILE;
   public isFileSelected = false;
   public maxSafeInteger = Number.MAX_SAFE_INTEGER;
   public mode: 'DIVIDEND';
   public selectedActivities: Activity[] = [];
   public uniqueAssetForm: FormGroup;
-  public fileStatus: FileStatus = FileStatus.SELECT;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -148,6 +146,16 @@ export class ImportActivitiesDialog implements OnDestroy {
     this.isFileSelected = false;
   }
 
+  public onImportStepChange(event: StepperSelectionEvent) {
+    if (event.selectedIndex === ImportStep.UPLOAD_FILE) {
+      this.importStep = ImportStep.UPLOAD_FILE;
+      this.isFileSelected = false;
+    } else if (event.selectedIndex === ImportStep.SELECT_ACTIVITIES) {
+      this.importStep = ImportStep.SELECT_ACTIVITIES;
+      this.isFileSelected = true;
+    }
+  }
+
   public onSelectFile() {
     const input = document.createElement('input');
     input.accept = 'application/JSON, .csv';
@@ -232,9 +240,9 @@ export class ImportActivitiesDialog implements OnDestroy {
           });
         } finally {
           this.isFileSelected = true;
+          this.importStep = ImportStep.SELECT_ACTIVITIES;
           this.snackBar.dismiss();
           this.changeDetectorRef.markForCheck();
-          this.fileStatus = FileStatus.UPLOADED;
         }
       };
     };

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

@@ -4,14 +4,23 @@
   [title]="errorMessages.length === 0 ?  'Import Activities' : 'Import Activities Error'"
   (closeButtonClicked)="onCancel()"
 ></gf-dialog-header>
-<link
-  href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet"
-/>
 
 <div class="flex-grow-1 py-3" mat-dialog-content>
-  <mat-stepper #stepper [linear]="true" [selectedIndex]="fileStatus">
-    <mat-step editable="false" label="Select File">
+  <mat-stepper
+    [linear]="true"
+    [selectedIndex]="importStep"
+    (selectionChange)="onImportStepChange($event)"
+  >
+    <ng-template matStepperIcon="done">
+      <ion-icon name="checkmark-outline"></ion-icon>
+    </ng-template>
+    <ng-template matStepperIcon="edit">
+      <ion-icon name="pencil-outline"></ion-icon>
+    </ng-template>
+    <mat-step
+      label="Select File"
+      [completed]="isFileSelected || activities.length !== 0"
+    >
       <ng-container *ngIf="!isFileSelected">
         <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
           <form [formGroup]="uniqueAssetForm" (ngSubmit)="onLoadDividends()">
@@ -68,8 +77,8 @@
         </ng-template>
       </ng-container>
     </mat-step>
-    <mat-step editable="false" label="Select Activities">
-      <ng-container *ngIf="isFileSelected">
+
+    <mat-step label="Select Activities">
       <ng-container *ngIf="errorMessages.length === 0; else errorMessage">
         <gf-activities-table
           [activities]="activities"
@@ -117,7 +126,6 @@
           </button>
         </div>
       </ng-template>
-      </ng-container>
     </mat-step>
   </mat-stepper>
 </div>

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

@@ -17,16 +17,4 @@
       }
     }
   }
-
-  .mat-stepper-horizontal {
-    margin-top: 8px;
-  }
-
-  .mat-mdc-form-field {
-    margin-top: 16px;
-  }
-
-  ::ng-deep .mat-horizontal-stepper-header {
-    pointer-events: none !important;
-  }
 }