Import dividend (#1560)

* Import dividend

* Update changelog

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

@@ -11,7 +11,7 @@ import { IcsService } from '@ghostfolio/client/services/ics/ics.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { downloadAsFile } from '@ghostfolio/common/helper';
-import { User } from '@ghostfolio/common/interfaces';
+import { UniqueAsset, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DataSource, Order as OrderModel } from '@prisma/client';
 import { format, parseISO } from 'date-fns';
@@ -198,6 +198,24 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public onImportDividends() {
+    const dialogRef = this.dialog.open(ImportActivitiesDialog, {
+      data: <ImportActivitiesDialogParams>{
+        activityTypes: ['DIVIDEND'],
+        deviceType: this.deviceType,
+        user: this.user
+      },
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.fetchActivities();
+      });
+  }
+
   public onUpdateActivity(aActivity: OrderModel) {
     this.router.navigate([], {
       queryParams: { activityId: aActivity.id, editDialog: true }

apps/client/src/app/pages/portfolio/activities/activities-page.html

@@ -17,6 +17,7 @@
         (export)="onExport($event)"
         (exportDrafts)="onExportDrafts($event)"
         (import)="onImport()"
+        (importDividends)="onImportDividends()"
       ></gf-activities-table>
     </div>
   </div>

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

@@ -5,12 +5,16 @@ import {
   Inject,
   OnDestroy
 } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
+import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImportActivitiesService } from '@ghostfolio/client/services/import-activities.service';
-import { isArray } from 'lodash';
-import { Subject } from 'rxjs';
+import { Position } from '@ghostfolio/common/interfaces';
+import { AssetClass } from '@prisma/client';
+import { isArray, sortBy } from 'lodash';
+import { Subject, takeUntil } from 'rxjs';
 
 import { ImportActivitiesDialogParams } from './interfaces/interfaces';
 
@@ -24,20 +28,55 @@ export class ImportActivitiesDialog implements OnDestroy {
   public activities: Activity[] = [];
   public details: any[] = [];
   public errorMessages: string[] = [];
+  public holdings: Position[] = [];
   public isFileSelected = false;
+  public mode: 'DIVIDEND';
   public selectedActivities: Activity[] = [];
+  public uniqueAssetForm: FormGroup;
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: ImportActivitiesDialogParams,
+    private dataService: DataService,
+    private formBuilder: FormBuilder,
     public dialogRef: MatDialogRef<ImportActivitiesDialog>,
     private importActivitiesService: ImportActivitiesService,
     private snackBar: MatSnackBar
   ) {}
 
-  public ngOnInit() {}
+  public ngOnInit() {
+    this.uniqueAssetForm = this.formBuilder.group({
+      uniqueAsset: [undefined, Validators.required]
+    });
+
+    if (
+      this.data?.activityTypes?.length === 1 &&
+      this.data?.activityTypes?.[0] === 'DIVIDEND'
+    ) {
+      this.mode = 'DIVIDEND';
+
+      this.dataService
+        .fetchPositions({
+          filters: [
+            {
+              id: AssetClass.EQUITY,
+              type: 'ASSET_CLASS'
+            }
+          ],
+          range: 'max'
+        })
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe(({ positions }) => {
+          this.holdings = sortBy(positions, ({ name }) => {
+            return name.toLowerCase();
+          });
+
+          this.changeDetectorRef.markForCheck();
+        });
+    }
+  }
 
   public onCancel(): void {
     this.dialogRef.close();
@@ -71,6 +110,24 @@ export class ImportActivitiesDialog implements OnDestroy {
     }
   }
 
+  public onLoadDividends() {
+    const { dataSource, symbol } =
+      this.uniqueAssetForm.controls['uniqueAsset'].value;
+
+    this.dataService
+      .fetchDividendsImport({
+        dataSource,
+        symbol
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ activities }) => {
+        this.activities = activities;
+        this.isFileSelected = true;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
   public onReset() {
     this.details = [];
     this.errorMessages = [];
@@ -95,8 +152,6 @@ export class ImportActivitiesDialog implements OnDestroy {
       reader.onload = async (readerEvent) => {
         const fileContent = readerEvent.target.result as string;
 
-        console.log(fileContent);
-
         try {
           if (file.name.endsWith('.json')) {
             const content = JSON.parse(fileContent);

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

@@ -7,31 +7,59 @@
 
 <div class="flex-grow-1" mat-dialog-content>
   <ng-container *ngIf="!isFileSelected">
-    <div class="d-flex justify-content-center flex-column">
-      <button
-        class="py-3"
-        color="primary"
-        mat-stroked-button
-        (click)="onSelectFile()"
-      >
-        <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
-        <span i18n>Choose File</span>
-      </button>
-      <p class="mb-0 mt-4 text-center">
-        <span class="mr-1" i18n>The following file formats are supported:</span>
-        <a
-          href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.csv"
-          target="_blank"
-          >CSV</a
+    <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
+      <form [formGroup]="uniqueAssetForm" (ngSubmit)="onLoadDividends()">
+        <mat-form-field appearance="outline" class="w-100">
+          <mat-label i18n>Holding</mat-label>
+          <mat-select formControlName="uniqueAsset">
+            <mat-option
+              *ngFor="let holding of holdings"
+              [value]="{dataSource: holding.dataSource, symbol: holding.symbol}"
+              >{{ holding.name }}</mat-option
+            >
+          </mat-select>
+        </mat-form-field>
+        <div class="d-flex justify-content-center flex-column">
+          <button
+            color="primary"
+            mat-flat-button
+            type="submit"
+            [disabled]="!uniqueAssetForm.valid"
+          >
+            <span i18n>Load Dividends</span>
+          </button>
+        </div>
+      </form>
+    </ng-container>
+    <ng-template #selectFile>
+      <div class="d-flex justify-content-center flex-column">
+        <button
+          class="py-3"
+          color="primary"
+          mat-stroked-button
+          (click)="onSelectFile()"
         >
-        <span class="mx-1" i18n>or</span>
-        <a
-          href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.json"
-          target="_blank"
-          >JSON</a
-        >
-      </p>
-    </div>
+          <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
+          <span i18n>Choose File</span>
+        </button>
+        <p class="mb-0 mt-4 text-center">
+          <span class="mr-1" i18n
+            >The following file formats are supported:</span
+          >
+          <a
+            href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.csv"
+            target="_blank"
+            >CSV</a
+          >
+          <span class="mx-1" i18n>or</span>
+          <a
+            href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.json"
+            target="_blank"
+            >JSON</a
+          >
+        </p>
+      </div>
+    </ng-template>
   </ng-container>
   <ng-container *ngIf="isFileSelected">
     <ng-container *ngIf="errorMessages.length === 0; else errorMessage">
@@ -47,6 +75,7 @@
         [locale]="data?.user?.settings?.locale"
         [showActions]="false"
         [showCheckbox]="true"
+        [showFooter]="false"
         [showSymbolColumn]="false"
         (selectedActivities)="updateSelection($event)"
       ></gf-activities-table>

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

@@ -1,8 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 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 { 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';
@@ -13,12 +16,16 @@ import { ImportActivitiesDialog } from './import-activities-dialog.component';
   declarations: [ImportActivitiesDialog],
   imports: [
     CommonModule,
+    FormsModule,
     GfActivitiesTableModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
     MatButtonModule,
     MatDialogModule,
-    MatExpansionModule
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    ReactiveFormsModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

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

@@ -1,6 +1,8 @@
 import { User } from '@ghostfolio/common/interfaces';
+import { Type } from '@prisma/client';
 
 export interface ImportActivitiesDialogParams {
+  activityTypes: Type[];
   deviceType: string;
   user: User;
 }

apps/client/src/app/services/data.service.ts

@@ -24,6 +24,7 @@ import {
   BenchmarkResponse,
   Export,
   Filter,
+  ImportResponse,
   InfoItem,
   OAuthResponse,
   PortfolioDetails,
@@ -119,6 +120,12 @@ export class DataService {
     });
   }
 
+  public fetchDividendsImport({ dataSource, symbol }: UniqueAsset) {
+    return this.http.get<ImportResponse>(
+      `/api/v1/import/dividends/${dataSource}/${symbol}`
+    );
+  }
+
   public fetchExchangeRateForDate({
     date,
     symbol

apps/client/src/app/services/import-activities.service.ts

@@ -90,13 +90,16 @@ export class ImportActivitiesService {
     selectedActivities: Activity[]
   ): Promise<Activity[]> {
     const importData: CreateOrderDto[] = [];
+
     for (const activity of selectedActivities) {
       importData.push(this.convertToCreateOrderDto(activity));
     }
+
     return this.importJson({ content: importData });
   }
 
   private convertToCreateOrderDto({
+    accountId,
     date,
     fee,
     quantity,
@@ -105,6 +108,7 @@ export class ImportActivitiesService {
     unitPrice
   }: Activity): CreateOrderDto {
     return {
+      accountId,
       fee,
       quantity,
       type,