Improve handling of active step

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

@@ -120,7 +120,7 @@ export class ImportActivitiesDialog implements OnDestroy {
     }
   }
 
-  public onLoadDividends() {
+  public onLoadDividends(aStepper: MatStepper) {
     this.uniqueAssetForm.controls['uniqueAsset'].disable();
 
     const { dataSource, symbol } =
@@ -136,14 +136,19 @@ export class ImportActivitiesDialog implements OnDestroy {
         this.activities = activities;
         this.isFileSelected = true;
 
+        aStepper.next();
+
         this.changeDetectorRef.markForCheck();
       });
   }
 
-  public onReset() {
+  public onReset(aStepper: MatStepper) {
     this.details = [];
     this.errorMessages = [];
+    this.importStep = ImportStep.SELECT_ACTIVITIES;
     this.isFileSelected = false;
+
+    aStepper.reset();
   }
 
   public onImportStepChange(event: StepperSelectionEvent) {
@@ -156,7 +161,7 @@ export class ImportActivitiesDialog implements OnDestroy {
     }
   }
 
-  public onSelectFile() {
+  public onSelectFile(aStepper: MatStepper) {
     const input = document.createElement('input');
     input.accept = 'application/JSON, .csv';
     input.type = 'file';
@@ -242,6 +247,9 @@ export class ImportActivitiesDialog implements OnDestroy {
           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,8 +5,10 @@
   (closeButtonClicked)="onCancel()"
 ></gf-dialog-header>
 
-<div class="flex-grow-1 py-3" mat-dialog-content>
+<div class="flex-grow-1" mat-dialog-content>
   <mat-stepper
+    #stepper
+    [animationDuration]="0"
     [linear]="true"
     [selectedIndex]="importStep"
     (selectionChange)="onImportStepChange($event)"
@@ -17,13 +19,14 @@
     <ng-template matStepperIcon="edit">
       <ion-icon name="pencil-outline"></ion-icon>
     </ng-template>
-    <mat-step
+    <mat-step label="Select File">
-      label="Select File"
-      [completed]="isFileSelected || activities.length !== 0"
-    >
       <ng-container *ngIf="!isFileSelected">
         <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
-          <form [formGroup]="uniqueAssetForm" (ngSubmit)="onLoadDividends()">
+          <form
+            class="mt-3"
+            [formGroup]="uniqueAssetForm"
+            (ngSubmit)="onLoadDividends(stepper)"
+          >
             <mat-form-field appearance="outline" class="w-100">
               <mat-label i18n>Holding</mat-label>
               <mat-select formControlName="uniqueAsset">
@@ -34,7 +37,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
@@ -47,12 +50,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 mt-3">
             <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>
@@ -120,7 +123,7 @@
           </mat-expansion-panel>
         </mat-accordion>
         <div class="mt-2">
-          <button mat-button (click)="onReset()">
+          <button mat-button (click)="onReset(stepper)">
             <ion-icon class="mr-2" name="arrow-back-outline"></ion-icon>
             <span i18n>Back</span>
           </button>