Feature/improve activities import dialog (#2016)

* Improve activities import dialog

* Update changelog

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added support for localized routes in Spanish (`es`)
 
+### Changed
+
+- Improved the activities import dialog
+
 ## 1.273.0 - 2023-05-28
 
 ### Added

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -61,20 +61,18 @@
           [displayWith]="displayFn"
           (optionSelected)="onUpdateSymbol($event)"
         >
-          <ng-container>
+          <mat-option
-            <mat-option
+            *ngFor="let lookupItem of filteredLookupItemsObservable | async"
-              *ngFor="let lookupItem of filteredLookupItemsObservable | async"
+            class="line-height-1"
-              class="line-height-1"
+            [value]="lookupItem"
-              [value]="lookupItem"
+          >
+            <span><b>{{ lookupItem.name }}</b></span>
+            <br />
+            <small class="text-muted"
+              >{{ lookupItem.symbol | gfSymbol }} · {{ lookupItem.currency
+              }}</small
             >
-              <span><b>{{ lookupItem.name }}</b></span>
+          </mat-option>
-              <br />
-              <small class="text-muted"
-                >{{ lookupItem.symbol | gfSymbol }} · {{ lookupItem.currency
-                }}</small
-              >
-            </mat-option>
-          </ng-container>
         </mat-autocomplete>
         <mat-spinner *ngIf="isLoading" matSuffix [diameter]="20"></mat-spinner>
       </mat-form-field>

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

@@ -37,6 +37,7 @@ export class ImportActivitiesDialog implements OnDestroy {
   public activities: Activity[] = [];
   public details: any[] = [];
   public deviceType: string;
+  public dialogTitle = $localize`Import Activities`;
   public errorMessages: string[] = [];
   public holdings: Position[] = [];
   public importStep: ImportStep = ImportStep.UPLOAD_FILE;
@@ -72,6 +73,7 @@ export class ImportActivitiesDialog implements OnDestroy {
       this.data?.activityTypes?.length === 1 &&
       this.data?.activityTypes?.[0] === 'DIVIDEND'
     ) {
+      this.dialogTitle = $localize`Import Dividends`;
       this.mode = 'DIVIDEND';
       this.uniqueAssetForm.controls['uniqueAsset'].disable();
 

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

@@ -1,7 +1,7 @@
 <gf-dialog-header
   mat-dialog-title
   [deviceType]="data.deviceType"
-  [title]="errorMessages.length === 0 ?  'Import Activities' : 'Import Activities Error'"
+  [title]="dialogTitle"
   (closeButtonClicked)="onCancel()"
 ></gf-dialog-header>
 
@@ -15,7 +15,14 @@
     (selectionChange)="onImportStepChange($event)"
   >
     <mat-step [completed]="importStep === 0" [selected]="importStep === 0">
-      <ng-template i18n matStepLabel>Select File</ng-template>
+      <ng-template matStepLabel>
+        <ng-container *ngIf="mode === 'DIVIDEND'" i18n
+          >Select Holding</ng-container
+        >
+        <ng-container *ngIf="mode !== 'DIVIDEND'" i18n
+          >Select File</ng-container
+        >
+      </ng-template>
       <div class="pt-3">
         <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
           <form
@@ -27,9 +34,16 @@
               <mat-select formControlName="uniqueAsset">
                 <mat-option
                   *ngFor="let holding of holdings"
+                  class="line-height-1"
                   [value]="{dataSource: holding.dataSource, symbol: holding.symbol}"
-                  >{{ holding.name }}</mat-option
                 >
+                  <span><b>{{ holding.name }}</b></span>
+                  <br />
+                  <small class="text-muted"
+                    >{{ holding.symbol | gfSymbol }} · {{ holding.currency
+                    }}</small
+                  >
+                </mat-option>
               </mat-select>
             </mat-form-field>
             <div class="d-flex flex-column justify-content-center">
@@ -77,7 +91,14 @@
     </mat-step>
 
     <mat-step [completed]="importStep === 1" [selected]="importStep === 1">
-      <ng-template i18n matStepLabel>Select Activities</ng-template>
+      <ng-template matStepLabel>
+        <ng-container *ngIf="mode === 'DIVIDEND'" i18n
+          >Select Dividends</ng-container
+        >
+        <ng-container *ngIf="mode !== 'DIVIDEND'" i18n
+          >Select Activities</ng-container
+        >
+      </ng-template>
       <div class="pt-3">
         <ng-container *ngIf="errorMessages.length === 0; else errorMessage">
           <gf-activities-table

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 { 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 { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
 
 import { ImportActivitiesDialog } from './import-activities-dialog.component';
@@ -21,6 +22,7 @@ import { ImportActivitiesDialog } from './import-activities-dialog.component';
     GfActivitiesTableModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
+    GfSymbolModule,
     MatButtonModule,
     MatDialogModule,
     MatExpansionModule,

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -13,7 +13,7 @@
     (click)="onImport()"
   >
     <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
-    <span i18n>Import Activities...</span>
+    <ng-container i18n>Import Activities</ng-container>...
   </button>
   <button
     *ngIf="hasPermissionToExportActivities"
@@ -31,7 +31,7 @@
       (click)="onImportDividends()"
     >
       <ion-icon class="mr-2" name="color-wand-outline"></ion-icon>
-      <span i18n>Import Dividends...</span>
+      <ng-container i18n>Import Dividends</ng-container>...
     </button>
     <button
       *ngIf="hasPermissionToExportActivities"
@@ -463,7 +463,7 @@
             (click)="onImport()"
           >
             <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
-            <span i18n>Import Activities...</span>
+            <ng-container i18n>Import Activities</ng-container>...
           </button>
           <button
             *ngIf="hasPermissionToCreateActivity"
@@ -472,7 +472,7 @@
             (click)="onImportDividends()"
           >
             <ion-icon class="mr-2" name="color-wand-outline"></ion-icon>
-            <span i18n>Import Dividends...</span>
+            <ng-container i18n>Import Dividends</ng-container>...
           </button>
           <button
             *ngIf="hasPermissionToExportActivities"