diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts index afdf11a9a..1cf9b06d0 100644 --- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts +++ b/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(); @@ -228,6 +234,7 @@ export class ImportActivitiesDialog implements OnDestroy { this.isFileSelected = true; this.snackBar.dismiss(); this.changeDetectorRef.markForCheck(); + this.fileStatus = FileStatus.UPLOADED; } }; }; diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html index 3e47b966f..38dba25c0 100644 --- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html +++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html @@ -4,112 +4,122 @@ [title]="errorMessages.length === 0 ? 'Import Activities' : 'Import Activities Error'" (closeButtonClicked)="onCancel()" > +
- - -
- - Holding - - {{ holding.name }} + + + + + + Holding + + {{ holding.name }} + + +
+ +
+ +
+ +
+ -
- -
- -
- -

- The following file formats are supported: - CSV - or - JSON -

-
-
-
- - - - - - - - - -
-
- -
-
{{ message }}
-
-
-
-
{{ details[i] | json }}
-
-
-
- -
-
-
+ + Choose File + +

+ The following file formats are supported: + CSV + or + JSON +

+
+ + + + + + + + + + + + + +
+
+ +
+
{{ message }}
+
+
+
+
{{ details[i] | json }}
+
+
+
+ +
+
+
+
+
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts index fdae625f9..5c59d1634 100644 --- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts +++ b/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] diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss index 49b40947d..61644b1ee 100644 --- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss +++ b/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; + } }