Feature/add export functionality to position detail dialog (#672)

* Add export functionality to the position detail dialog * Respect filters in activities export * Update changelog
2022-02-05 20:26:10 +01:00
parent 67d40333f6
commit 48b524de5a
14 changed files with 127 additions and 38 deletions
--- a/apps/client/src/app/components/home-holdings/home-holdings.component.ts
+++ b/apps/client/src/app/components/home-holdings/home-holdings.component.ts
@@ -3,6 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { PositionDetailDialog } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
+import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import {
  RANGE,
  SettingsStorageService
@@ -26,6 +27,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
  public dateRange: DateRange;
  public dateRangeOptions = defaultDateRangeOptions;
  public deviceType: string;
+  public hasImpersonationId: boolean;
  public hasPermissionToCreateOrder: boolean;
  public positions: Position[];
  public user: User;
@@ -40,6 +42,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
    private dataService: DataService,
    private deviceService: DeviceDetectorService,
    private dialog: MatDialog,
+    private impersonationStorageService: ImpersonationStorageService,
    private route: ActivatedRoute,
    private router: Router,
    private settingsStorageService: SettingsStorageService,
@@ -82,6 +85,13 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
  public ngOnInit() {
    this.deviceType = this.deviceService.getDeviceInfo().deviceType;

+    this.impersonationStorageService
+      .onChangeHasImpersonation()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((aId) => {
+        this.hasImpersonationId = !!aId;
+      });
+
    this.dateRange =
      <DateRange>this.settingsStorageService.getSetting(RANGE) || 'max';

@@ -119,6 +129,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
            symbol,
            baseCurrency: this.user?.settings?.baseCurrency,
            deviceType: this.deviceType,
+            hasImpersonationId: this.hasImpersonationId,
            locale: this.user?.settings?.locale
          },
          height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
--- a/apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts
+++ b/apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts
@@ -4,6 +4,7 @@ export interface PositionDetailDialogParams {
  baseCurrency: string;
  dataSource: DataSource;
  deviceType: string;
+  hasImpersonationId: boolean;
  locale: string;
  symbol: string;
 }
--- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts
+++ b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts
@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { DATE_FORMAT } from '@ghostfolio/common/helper';
+import { DATE_FORMAT, downloadAsFile } from '@ghostfolio/common/helper';
 import { OrderWithAccount } from '@ghostfolio/common/types';
 import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { AssetSubClass } from '@prisma/client';
@@ -185,6 +185,26 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
    this.dialogRef.close();
  }

+  public onExport() {
+    this.dataService
+      .fetchExport(
+        this.orders.map((order) => {
+          return order.id;
+        })
+      )
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((data) => {
+        downloadAsFile(
+          data,
+          `ghostfolio-export-${this.symbol}-${format(
+            parseISO(data.meta.date),
+            'yyyyMMddHHmm'
+          )}.json`,
+          'text/plain'
+        );
+      });
+  }
+
  public ngOnDestroy() {
    this.unsubscribeSubject.next();
    this.unsubscribeSubject.complete();
--- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
+++ b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
@@ -131,12 +131,14 @@
    [baseCurrency]="data.baseCurrency"
    [deviceType]="data.deviceType"
    [hasPermissionToCreateActivity]="false"
+    [hasPermissionToExportActivities]="!hasImpersonationId"
    [hasPermissionToFilter]="false"
    [hasPermissionToImportActivities]="false"
    [hasPermissionToOpenDetails]="false"
    [locale]="data.locale"
    [showActions]="false"
    [showSymbolColumn]="false"
+    (export)="onExport()"
  ></gf-activities-table>
 </div>

--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
@@ -316,6 +316,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
            symbol,
            baseCurrency: this.user?.settings?.baseCurrency,
            deviceType: this.deviceType,
+            hasImpersonationId: this.hasImpersonationId,
            locale: this.user?.settings?.locale
          },
          height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
--- a/apps/client/src/app/pages/portfolio/transactions/transactions-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/transactions/transactions-page.component.ts
@@ -10,6 +10,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { ImportTransactionsService } from '@ghostfolio/client/services/import-transactions.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { downloadAsFile } from '@ghostfolio/common/helper';
 import { User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DataSource, Order as OrderModel } from '@prisma/client';
@@ -90,11 +91,6 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
  public ngOnInit() {
    const { globalPermissions } = this.dataService.fetchInfo();

-    this.hasPermissionToImportOrders = hasPermission(
-      globalPermissions,
-      permissions.enableImport
-    );
-
    this.deviceType = this.deviceService.getDeviceInfo().deviceType;

    this.impersonationStorageService
@@ -102,6 +98,10 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
      .pipe(takeUntil(this.unsubscribeSubject))
      .subscribe((aId) => {
        this.hasImpersonationId = !!aId;
+
+        this.hasPermissionToImportOrders =
+          hasPermission(globalPermissions, permissions.enableImport) &&
+          !this.hasImpersonationId;
      });

    this.userService.stateChanged
@@ -147,12 +147,12 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
      });
  }

-  public onExport() {
+  public onExport(activityIds?: string[]) {
    this.dataService
-      .fetchExport()
+      .fetchExport(activityIds)
      .pipe(takeUntil(this.unsubscribeSubject))
      .subscribe((data) => {
-        this.downloadAsFile(
+        downloadAsFile(
          data,
          `ghostfolio-export-${format(
            parseISO(data.meta.date),
@@ -303,20 +303,6 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
    this.unsubscribeSubject.complete();
  }

-  private downloadAsFile(
-    aContent: unknown,
-    aFileName: string,
-    aContentType: string
-  ) {
-    const a = document.createElement('a');
-    const file = new Blob([JSON.stringify(aContent, undefined, '  ')], {
-      type: aContentType
-    });
-    a.href = URL.createObjectURL(file);
-    a.download = aFileName;
-    a.click();
-  }
-
  private handleImportError({ error, orders }: { error: any; orders: any[] }) {
    this.snackBar.dismiss();

@@ -406,6 +392,7 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
            symbol,
            baseCurrency: this.user?.settings?.baseCurrency,
            deviceType: this.deviceType,
+            hasImpersonationId: this.hasImpersonationId,
            locale: this.user?.settings?.locale
          },
          height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
--- a/apps/client/src/app/pages/portfolio/transactions/transactions-page.html
+++ b/apps/client/src/app/pages/portfolio/transactions/transactions-page.html
@@ -7,13 +7,14 @@
        [baseCurrency]="user?.settings?.baseCurrency"
        [deviceType]="deviceType"
        [hasPermissionToCreateActivity]="hasPermissionToCreateOrder"
+        [hasPermissionToExportActivities]="!hasImpersonationId"
        [hasPermissionToImportActivities]="hasPermissionToImportOrders"
        [locale]="user?.settings?.locale"
        [showActions]="!hasImpersonationId && hasPermissionToDeleteOrder && !user.settings.isRestrictedView"
        (activityDeleted)="onDeleteTransaction($event)"
        (activityToClone)="onCloneTransaction($event)"
        (activityToUpdate)="onUpdateTransaction($event)"
-        (export)="onExport()"
+        (export)="onExport($event)"
        (import)="onImport()"
      ></gf-activities-table>
    </div>
--- a/apps/client/src/app/services/data.service.ts
+++ b/apps/client/src/app/services/data.service.ts
@@ -94,8 +94,16 @@ export class DataService {
    });
  }

-  public fetchExport() {
-    return this.http.get<Export>('/api/export');
+  public fetchExport(activityIds?: string[]) {
+    let params = new HttpParams();
+
+    if (activityIds) {
+      params = params.append('activityIds', activityIds.join(','));
+    }
+
+    return this.http.get<Export>('/api/export', {
+      params
+    });
  }

  public fetchInfo(): InfoItem {