From 07c397e965f574197bed3faf325b7d4c94cfc93d Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 20 Jun 2023 20:23:06 +0200
Subject: [PATCH] Improve dialog

* Add loading indicator
* Improve selected item of holding selector
---
 .../import-activities-dialog.component.ts             |  5 +++++
 .../import-activities-dialog.html                     | 11 ++++++++++-
 .../import-activities-dialog.module.ts                |  2 ++
 .../import-activities-dialog.scss                     |  5 +++++
 4 files changed, 22 insertions(+), 1 deletion(-)

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 67a41dc88..46a307318 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
@@ -41,6 +41,7 @@ export class ImportActivitiesDialog implements OnDestroy {
   public errorMessages: string[] = [];
   public holdings: Position[] = [];
   public importStep: ImportStep = ImportStep.UPLOAD_FILE;
+  public isLoading = false;
   public maxSafeInteger = Number.MAX_SAFE_INTEGER;
   public mode: 'DIVIDEND';
   public selectedActivities: Activity[] = [];
@@ -73,6 +74,8 @@ export class ImportActivitiesDialog implements OnDestroy {
       this.data?.activityTypes?.length === 1 &&
       this.data?.activityTypes?.[0] === 'DIVIDEND'
     ) {
+      this.isLoading = true;
+
       this.dialogTitle = $localize`Import Dividends`;
       this.mode = 'DIVIDEND';
       this.uniqueAssetForm.controls['uniqueAsset'].disable();
@@ -94,6 +97,8 @@ export class ImportActivitiesDialog implements OnDestroy {
           });
           this.uniqueAssetForm.controls['uniqueAsset'].enable();
 
+          this.isLoading = false;
+
           this.changeDetectorRef.markForCheck();
         });
     }
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 9cbaff34e..02071c137 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
@@ -32,10 +32,14 @@
             <mat-form-field appearance="outline" class="w-100">
               <mat-label i18n>Holding</mat-label>
               <mat-select formControlName="uniqueAsset">
+                <mat-select-trigger
+                  >{{ uniqueAssetForm.controls['uniqueAsset']?.value?.name
+                  }}</mat-select-trigger
+                >
                 <mat-option
                   *ngFor="let holding of holdings"
                   class="line-height-1"
-                  [value]="{dataSource: holding.dataSource, symbol: holding.symbol}"
+                  [value]="{ dataSource: holding.dataSource, name: holding.name, symbol: holding.symbol }"
                 >
                   <span><b>{{ holding.name }}</b></span>
                   <br />
@@ -45,6 +49,11 @@
                   >
                 </mat-option>
               </mat-select>
+              <mat-spinner
+                *ngIf="isLoading"
+                class="position-absolute"
+                [diameter]="20"
+              ></mat-spinner>
             </mat-form-field>
             <div class="d-flex flex-column justify-content-center">
               <button
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 62632e580..915932483 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
@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatStepperModule } from '@angular/material/stepper';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
@@ -27,6 +28,7 @@ import { ImportActivitiesDialog } from './import-activities-dialog.component';
     MatDialogModule,
     MatExpansionModule,
     MatFormFieldModule,
+    MatProgressSpinnerModule,
     MatSelectModule,
     MatStepperModule,
     ReactiveFormsModule
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 6cf64693e..c0836db22 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
@@ -27,4 +27,9 @@
       }
     }
   }
+
+  .mat-mdc-progress-spinner {
+    right: 1.5rem;
+    top: calc(50% - 10px);
+  }
 }