Feature/export draft activities as ics (#830)

* Export draft activities as ICS

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Added support to export future activities (drafts) as `.ics` files
+
 ## 1.136.0 - 13.04.2022
 
 ### Changed

apps/api/src/app/export/export.service.ts

@@ -42,6 +42,7 @@ export class ExportService {
           accountId,
           date,
           fee,
+          id,
           quantity,
           SymbolProfile,
           type,
@@ -49,13 +50,14 @@ export class ExportService {
         }) => {
           return {
             accountId,
-            date,
             fee,
+            id,
             quantity,
             type,
             unitPrice,
             currency: SymbolProfile.currency,
             dataSource: SymbolProfile.dataSource,
+            date: date.toISOString(),
             symbol: type === 'ITEM' ? SymbolProfile.name : SymbolProfile.symbol
           };
         }

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts

@@ -211,14 +211,14 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
       )
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((data) => {
-        downloadAsFile(
+        downloadAsFile({
-          data,
+          content: data,
-          `ghostfolio-export-${this.SymbolProfile?.symbol}-${format(
+          fileName: `ghostfolio-export-${this.SymbolProfile?.symbol}-${format(
             parseISO(data.meta.date),
             'yyyyMMddHHmm'
           )}.json`,
-          'text/plain'
+          format: 'json'
-        );
+        });
       });
   }
 

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

@@ -7,6 +7,7 @@ import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interf
 import { UpdateOrderDto } from '@ghostfolio/api/app/order/update-order.dto';
 import { PositionDetailDialog } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
+import { IcsService } from '@ghostfolio/client/services/ics/ics.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';
@@ -50,6 +51,7 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
+    private icsService: IcsService,
     private impersonationStorageService: ImpersonationStorageService,
     private importTransactionsService: ImportTransactionsService,
     private route: ActivatedRoute,
@@ -152,14 +154,36 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
       .fetchExport(activityIds)
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((data) => {
-        downloadAsFile(
+        for (const activity of data.activities) {
-          data,
+          delete activity.id;
-          `ghostfolio-export-${format(
+        }
+
+        downloadAsFile({
+          content: data,
+          fileName: `ghostfolio-export-${format(
             parseISO(data.meta.date),
             'yyyyMMddHHmm'
           )}.json`,
-          'text/plain'
+          format: 'json'
-        );
+        });
+      });
+  }
+
+  public onExportDrafts(activityIds?: string[]) {
+    this.dataService
+      .fetchExport(activityIds)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((data) => {
+        downloadAsFile({
+          content: this.icsService.transformActivitiesToIcsContent(
+            data.activities
+          ),
+          fileName: `ghostfolio-drafts-${format(
+            parseISO(data.meta.date),
+            'yyyyMMddHHmm'
+          )}.ics`,
+          format: 'string'
+        });
       });
   }
 

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

@@ -15,6 +15,7 @@
         (activityToClone)="onCloneTransaction($event)"
         (activityToUpdate)="onUpdateTransaction($event)"
         (export)="onExport($event)"
+        (exportDrafts)="onExportDrafts($event)"
         (import)="onImport()"
       ></gf-activities-table>
     </div>

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

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { capitalize } from '@ghostfolio/common/helper';
+import { Export } from '@ghostfolio/common/interfaces';
+import { Type } from '@prisma/client';
+import { format, parseISO } from 'date-fns';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IcsService {
+  private readonly ICS_DATE_FORMAT = 'yyyyMMdd';
+
+  public constructor() {}
+
+  public transformActivitiesToIcsContent(
+    aActivities: Export['activities']
+  ): string {
+    const header = [
+      'BEGIN:VCALENDAR',
+      'VERSION:2.0',
+      'PRODID:-//Ghostfolio//NONSGML v1.0//EN'
+    ];
+    const events = aActivities.map((activity) => {
+      return this.getEvent({
+        date: parseISO(activity.date),
+        id: activity.id,
+        symbol: activity.symbol,
+        type: activity.type
+      });
+    });
+    const footer = ['END:VCALENDAR'];
+
+    return [...header, ...events, ...footer].join('\n');
+  }
+
+  private getEvent({
+    date,
+    id,
+    symbol,
+    type
+  }: {
+    date: Date;
+    id: string;
+    symbol: string;
+    type: Type;
+  }) {
+    const today = format(new Date(), this.ICS_DATE_FORMAT);
+
+    return [
+      'BEGIN:VEVENT',
+      `UID:${id}`,
+      `DTSTAMP:${today}T000000`,
+      `DTSTART;VALUE=DATE:${format(date, this.ICS_DATE_FORMAT)}`,
+      `DTEND;VALUE=DATE:${format(date, this.ICS_DATE_FORMAT)}`,
+      `SUMMARY:${capitalize(type)} ${symbol}`,
+      'END:VEVENT'
+    ].join('\n');
+  }
+}

libs/common/src/lib/helper.ts

@@ -12,17 +12,28 @@ export function decodeDataSource(encodedDataSource: string) {
   return Buffer.from(encodedDataSource, 'hex').toString();
 }
 
-export function downloadAsFile(
+export function downloadAsFile({
-  aContent: unknown,
+  content,
-  aFileName: string,
+  contentType = 'text/plain',
-  aContentType: string
+  fileName,
-) {
+  format
+}: {
+  content: unknown;
+  contentType?: string;
+  fileName: string;
+  format: 'json' | 'string';
+}) {
   const a = document.createElement('a');
-  const file = new Blob([JSON.stringify(aContent, undefined, '  ')], {
+
-    type: aContentType
+  if (format === 'json') {
+    content = JSON.stringify(content, undefined, '  ');
+  }
+
+  const file = new Blob([<string>content], {
+    type: contentType
   });
   a.href = URL.createObjectURL(file);
-  a.download = aFileName;
+  a.download = fileName;
   a.click();
 }
 

libs/common/src/lib/interfaces/export.interface.ts

@@ -5,5 +5,14 @@ export interface Export {
     date: string;
     version: string;
   };
-  activities: Partial<Order>[];
+  activities: (Omit<
+    Order,
+    | 'accountUserId'
+    | 'createdAt'
+    | 'date'
+    | 'isDraft'
+    | 'symbolProfileId'
+    | 'updatedAt'
+    | 'userId'
+  > & { date: string; symbol: string })[];
 }

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

@@ -356,11 +356,22 @@
             *ngIf="hasPermissionToExportActivities"
             class="align-items-center d-flex"
             mat-menu-item
+            [disabled]="dataSource.data.length === 0"
             (click)="onExport()"
           >
             <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
             <span i18n>Export</span>
           </button>
+          <button
+            *ngIf="hasPermissionToExportActivities"
+            class="align-items-center d-flex"
+            mat-menu-item
+            [disabled]="!hasDrafts"
+            (click)="onExportDrafts()"
+          >
+            <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+            <span i18n>Export Drafts as ICS</span>
+          </button>
         </mat-menu>
       </th>
       <td *matCellDef="let element" class="px-1 text-center" mat-cell>

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

@@ -56,6 +56,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   @Output() activityToClone = new EventEmitter<OrderWithAccount>();
   @Output() activityToUpdate = new EventEmitter<OrderWithAccount>();
   @Output() export = new EventEmitter<string[]>();
+  @Output() exportDrafts = new EventEmitter<string[]>();
   @Output() import = new EventEmitter<void>();
 
   @ViewChild('autocomplete') matAutocomplete: MatAutocomplete;
@@ -68,6 +69,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   public endOfToday = endOfToday();
   public filters$: Subject<string[]> = new BehaviorSubject([]);
   public filters: Observable<string[]> = this.filters$.asObservable();
+  public hasDrafts = false;
   public isAfter = isAfter;
   public isLoading = true;
   public isUUID = isUUID;
@@ -198,6 +200,18 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
     }
   }
 
+  public onExportDrafts() {
+    this.exportDrafts.emit(
+      this.dataSource.filteredData
+        .filter((activity) => {
+          return activity.isDraft;
+        })
+        .map((activity) => {
+          return activity.id;
+        })
+    );
+  }
+
   public onImport() {
     this.import.emit();
   }
@@ -234,6 +248,9 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
     this.filters$.next(this.allFilters);
 
+    this.hasDrafts = this.dataSource.data.some((activity) => {
+      return activity.isDraft === true;
+    });
     this.totalFees = this.getTotalFees();
     this.totalValue = this.getTotalValue();
   }