Make responsive, simplify code

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

@@ -19,8 +19,12 @@ import { Subject, takeUntil } from 'rxjs';
 import { ImportStep } from './enums/enums';
 
 import { ImportActivitiesDialogParams } from './interfaces/interfaces';
-import { StepperSelectionEvent } from '@angular/cdk/stepper';
+import {
+  StepperOrientation,
+  StepperSelectionEvent
+} from '@angular/cdk/stepper';
 import { MatStepper } from '@angular/material/stepper';
+import { DeviceDetectorService } from 'ngx-device-detector';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -32,13 +36,14 @@ export class ImportActivitiesDialog implements OnDestroy {
   public accounts: CreateAccountDto[] = [];
   public activities: Activity[] = [];
   public details: any[] = [];
+  public deviceType: string;
   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 stepperOrientation: StepperOrientation;
   public uniqueAssetForm: FormGroup;
 
   private unsubscribeSubject = new Subject<void>();
@@ -47,6 +52,7 @@ export class ImportActivitiesDialog implements OnDestroy {
     private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: ImportActivitiesDialogParams,
     private dataService: DataService,
+    private deviceService: DeviceDetectorService,
     private formBuilder: FormBuilder,
     public dialogRef: MatDialogRef<ImportActivitiesDialog>,
     private importActivitiesService: ImportActivitiesService,
@@ -54,6 +60,10 @@ export class ImportActivitiesDialog implements OnDestroy {
   ) {}
 
   public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+    this.stepperOrientation =
+      this.deviceType === 'mobile' ? 'vertical' : 'horizontal';
+
     this.uniqueAssetForm = this.formBuilder.group({
       uniqueAsset: [undefined, Validators.required]
     });
@@ -134,7 +144,6 @@ export class ImportActivitiesDialog implements OnDestroy {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ activities }) => {
         this.activities = activities;
-        this.isFileSelected = true;
 
         aStepper.next();
 
@@ -146,7 +155,6 @@ export class ImportActivitiesDialog implements OnDestroy {
     this.details = [];
     this.errorMessages = [];
     this.importStep = ImportStep.SELECT_ACTIVITIES;
-    this.isFileSelected = false;
 
     aStepper.reset();
   }
@@ -154,10 +162,8 @@ export class ImportActivitiesDialog implements OnDestroy {
   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;
     }
   }
 
@@ -244,7 +250,6 @@ export class ImportActivitiesDialog implements OnDestroy {
             error: { error: { message: ['Unexpected format'] } }
           });
         } finally {
-          this.isFileSelected = true;
           this.importStep = ImportStep.SELECT_ACTIVITIES;
           this.snackBar.dismiss();
 

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

@@ -10,17 +10,13 @@
     #stepper
     [animationDuration]="0"
     [linear]="true"
+    [orientation]="stepperOrientation"
     [selectedIndex]="importStep"
     (selectionChange)="onImportStepChange($event)"
   >
-    <ng-template matStepperIcon="done">
+    <mat-step [completed]="importStep === 0" [selected]="importStep === 0">
-      <ion-icon name="checkmark-outline"></ion-icon>
+      <ng-template i18n matStepLabel>Select File</ng-template>
-    </ng-template>
+      <ng-container>
-    <ng-template matStepperIcon="edit">
-      <ion-icon name="pencil-outline"></ion-icon>
-    </ng-template>
-    <mat-step label="Select File">
-      <ng-container *ngIf="!isFileSelected">
         <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
           <form
             class="mt-3"
@@ -81,7 +77,8 @@
       </ng-container>
     </mat-step>
 
-    <mat-step label="Select Activities">
+    <mat-step [completed]="importStep === 1" [selected]="importStep === 1">
+      <ng-template i18n matStepLabel>Select Activities</ng-template>
       <ng-container *ngIf="errorMessages.length === 0; else errorMessage">
         <gf-activities-table
           [activities]="activities"
@@ -99,6 +96,18 @@
           [showSymbolColumn]="false"
           (selectedActivities)="updateSelection($event)"
         ></gf-activities-table>
+        <div class="d-flex justify-content-end mt-3">
+          <button i18n mat-button (click)="onCancel()">Cancel</button>
+          <button
+            class="ml-1"
+            color="primary"
+            mat-flat-button
+            [disabled]="!selectedActivities?.length"
+            (click)="onImportActivities()"
+          >
+            <ng-container i18n>Import</ng-container>
+          </button>
+        </div>
       </ng-container>
       <ng-template #errorMessage>
         <mat-accordion displayMode="flat">
@@ -133,18 +142,6 @@
   </mat-stepper>
 </div>
 
-<div *ngIf="isFileSelected" class="justify-content-end" mat-dialog-actions>
-  <button i18n mat-button (click)="onCancel()">Cancel</button>
-  <button
-    color="primary"
-    mat-flat-button
-    [disabled]="!selectedActivities?.length"
-    (click)="onImportActivities()"
-  >
-    <ng-container i18n>Import</ng-container>
-  </button>
-</div>
-
 <gf-dialog-footer
   mat-dialog-actions
   [deviceType]="data.deviceType"

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

@@ -5,6 +5,16 @@
     color: rgba(var(--palette-primary-500), 1);
   }
 
+  mat-stepper {
+    ::ng-deep {
+      .mat-step-header {
+        &[aria-selected='false'] {
+          pointer-events: none;
+        }
+      }
+    }
+  }
+
   .mat-expansion-panel {
     background: none;
     box-shadow: none;