Refactoring

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,16 +20,11 @@ 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/enums';
 
+import { ImportStep } from './enums/import-step';
 import { ImportActivitiesDialogParams } from './interfaces/interfaces';
-import {
-  StepperOrientation,
-  StepperSelectionEvent
-} from '@angular/cdk/stepper';
-import { MatStepper } from '@angular/material/stepper';
-import { DeviceDetectorService } from 'ngx-device-detector';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -101,10 +101,6 @@ export class ImportActivitiesDialog implements OnDestroy {
     this.dialogRef.close();
   }
 
-  public onImportCancel(aStepper: MatStepper) {
-    aStepper.previous();
-  }
-
   public async onImportActivities() {
     try {
       this.snackBar.open('⏳ ' + $localize`Importing data...`);
@@ -159,6 +155,7 @@ export class ImportActivitiesDialog implements OnDestroy {
     this.details = [];
     this.errorMessages = [];
     this.importStep = ImportStep.SELECT_ACTIVITIES;
+    this.uniqueAssetForm.controls['uniqueAsset'].enable();
 
     aStepper.reset();
   }

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

@@ -16,10 +16,9 @@
   >
     <mat-step [completed]="importStep === 0" [selected]="importStep === 0">
       <ng-template i18n matStepLabel>Select File</ng-template>
-      <ng-container>
+      <div class="pt-3">
         <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
           <form
-            class="mt-3"
             [formGroup]="uniqueAssetForm"
             (ngSubmit)="onLoadDividends(stepper)"
           >
@@ -46,7 +45,7 @@
           </form>
         </ng-container>
         <ng-template #selectFile>
-          <div class="d-flex flex-column justify-content-center mt-3">
+          <div class="d-flex flex-column justify-content-center">
             <button
               class="py-4"
               color="primary"
@@ -74,11 +73,12 @@
             </p>
           </div>
         </ng-template>
-      </ng-container>
+      </div>
     </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"
@@ -98,8 +98,8 @@
             (selectedActivities)="updateSelection($event)"
           ></gf-activities-table>
           <div class="d-flex justify-content-end mt-3">
-          <button i18n mat-button (click)="onImportCancel(stepper)">
-            Cancel
+            <button mat-button (click)="onReset(stepper)">
+              <ng-container i18n>Back</ng-container>
             </button>
             <button
               class="ml-1"
@@ -134,13 +134,21 @@
               ><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(stepper)">
-            <ion-icon class="mr-2" name="arrow-back-outline"></ion-icon>
-            <span i18n>Back</span>
+              <ng-container i18n>Back</ng-container>
+            </button>
+            <button
+              class="ml-1"
+              color="primary"
+              mat-flat-button
+              [disabled]="true"
+            >
+              <ng-container i18n>Import</ng-container>
             </button>
           </div>
         </ng-template>
+      </div>
     </mat-step>
   </mat-stepper>
 </div>

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

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