Add data export

apps/client/src/app/pages/account/account-page.component.ts

@@ -21,7 +21,7 @@ import {
 } from '@ghostfolio/client/services/settings-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
-import { getDateFormatString } from '@ghostfolio/common/helper';
+import { downloadAsFile, getDateFormatString } from '@ghostfolio/common/helper';
 import { Access, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { uniq } from 'lodash';
@@ -31,6 +31,7 @@ import { EMPTY, Subject } from 'rxjs';
 import { catchError, switchMap, takeUntil } from 'rxjs/operators';
 
 import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog/create-or-update-access-dialog.component';
+import { format, parseISO } from 'date-fns';
 
 @Component({
   host: { class: 'page' },
@@ -237,6 +238,26 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public onExport() {
+    this.dataService
+      .fetchExport()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((data) => {
+        for (const activity of data.activities) {
+          delete activity.id;
+        }
+
+        downloadAsFile({
+          content: data,
+          fileName: `ghostfolio-export-${format(
+            parseISO(data.meta.date),
+            'yyyyMMddHHmm'
+          )}.json`,
+          format: 'json'
+        });
+      });
+  }
+
   public onRedeemCoupon() {
     let couponCode = prompt($localize`Please enter your coupon code:`);
     couponCode = couponCode?.trim();

apps/client/src/app/pages/account/account-page.html

@@ -273,6 +273,14 @@
             <div class="pr-1 w-50" i18n>User ID</div>
             <div class="pl-1 text-monospace w-50">{{ user?.id }}</div>
           </div>
+          <div class="align-items-center d-flex py-1">
+            <div class="pr-1 w-50"></div>
+            <div class="pl-1 text-monospace w-50">
+              <button color="primary" mat-flat-button (click)="onExport()">
+                <span i18n>Export Data</span>
+              </button>
+            </div>
+          </div>
         </mat-card-content>
       </mat-card>
     </div>