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,56 +77,55 @@
         </ng-template>
       </ng-container>
     </mat-step>
-    <mat-step editable="false" label="Select Activities">
-      <ng-container *ngIf="isFileSelected">
-        <ng-container *ngIf="errorMessages.length === 0; else errorMessage">
-          <gf-activities-table
-            [activities]="activities"
-            [baseCurrency]="data?.user?.settings?.baseCurrency"
-            [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"
-            (selectedActivities)="updateSelection($event)"
-          ></gf-activities-table>
-        </ng-container>
-        <ng-template #errorMessage>
-          <mat-accordion displayMode="flat">
-            <mat-expansion-panel
-              *ngFor="let message of errorMessages; let i = index"
-              [disabled]="!details[i]"
-            >
-              <mat-expansion-panel-header class="pl-1">
-                <mat-panel-title>
-                  <div class="d-flex">
-                    <div class="align-items-center d-flex mr-2">
-                      <ion-icon name="warning-outline"></ion-icon>
-                    </div>
-                    <div>{{ message }}</div>
-                  </div>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <pre
-                *ngIf="details[i]"
-                class="m-0"
-              ><code>{{ details[i] | json }}</code></pre>
-            </mat-expansion-panel>
-          </mat-accordion>
-          <div class="mt-2">
-            <button mat-button (click)="onReset()">
-              <ion-icon class="mr-2" name="arrow-back-outline"></ion-icon>
-              <span i18n>Back</span>
-            </button>
-          </div>
-        </ng-template>
+
+    <mat-step label="Select Activities">
+      <ng-container *ngIf="errorMessages.length === 0; else errorMessage">
+        <gf-activities-table
+          [activities]="activities"
+          [baseCurrency]="data?.user?.settings?.baseCurrency"
+          [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"
+          (selectedActivities)="updateSelection($event)"
+        ></gf-activities-table>
       </ng-container>
+      <ng-template #errorMessage>
+        <mat-accordion displayMode="flat">
+          <mat-expansion-panel
+            *ngFor="let message of errorMessages; let i = index"
+            [disabled]="!details[i]"
+          >
+            <mat-expansion-panel-header class="pl-1">
+              <mat-panel-title>
+                <div class="d-flex">
+                  <div class="align-items-center d-flex mr-2">
+                    <ion-icon name="warning-outline"></ion-icon>
+                  </div>
+                  <div>{{ message }}</div>
+                </div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <pre
+              *ngIf="details[i]"
+              class="m-0"
+            ><code>{{ details[i] | json }}</code></pre>
+          </mat-expansion-panel>
+        </mat-accordion>
+        <div class="mt-2">
+          <button mat-button (click)="onReset()">
+            <ion-icon class="mr-2" name="arrow-back-outline"></ion-icon>
+            <span i18n>Back</span>
+          </button>
+        </div>
+      </ng-template>
     </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;
-  }
 }