Feature/improve import dividends dialog (#2086)

* Improve dialog

* Add loading indicator
* Improve selected item of holding selector

* Update changelog

CHANGELOG.md

@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added a loading indicator to the import dividends dialog
+
+### Changed
+
+- Improved the selected item of the holding selector in the import dividends dialog
 - Extended the symbol search component by asset sub classes
 
 ## 1.282.0 - 2023-06-19

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();
         });
     }

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

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

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);
+  }
 }