feat #1970: introduced stepper to import activities

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

@@ -19,6 +19,11 @@ import { Subject, takeUntil } from 'rxjs';
 
 import { ImportActivitiesDialogParams } from './interfaces/interfaces';
 
+enum FileStatus {
+  SELECT = 0,
+  UPLOADED
+}
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'gf-import-activities-dialog',
@@ -36,6 +41,7 @@ export class ImportActivitiesDialog implements OnDestroy {
   public mode: 'DIVIDEND';
   public selectedActivities: Activity[] = [];
   public uniqueAssetForm: FormGroup;
+  public fileStatus: FileStatus = FileStatus.SELECT;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -228,6 +234,7 @@ export class ImportActivitiesDialog implements OnDestroy {
           this.isFileSelected = true;
           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,8 +4,14 @@
   [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">
       <ng-container *ngIf="!isFileSelected">
         <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
           <form [formGroup]="uniqueAssetForm" (ngSubmit)="onLoadDividends()">
@@ -61,6 +67,8 @@
           </div>
         </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
@@ -110,6 +118,8 @@
           </div>
         </ng-template>
       </ng-container>
+    </mat-step>
+  </mat-stepper>
 </div>
 
 <div *ngIf="isFileSelected" class="justify-content-end" mat-dialog-actions>

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

@@ -9,6 +9,7 @@ import { MatSelectModule } from '@angular/material/select';
 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 { MatStepperModule } from '@angular/material/stepper';
 
 import { ImportActivitiesDialog } from './import-activities-dialog.component';
 
@@ -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

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