From d180ca01f7fecf682dffd328376d97239536cfe0 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 19 Oct 2024 09:58:37 +0200
Subject: [PATCH] Add data providers management to admin control panel

---
 .../admin-settings.component.html             | 33 +++++++++++++
 .../admin-settings.component.ts               | 49 +++++++++++++++++--
 .../admin-settings/admin-settings.module.ts   |  6 +++
 ...ghostfolio-premium-api-dialog.component.ts | 39 +++++++++++++++
 .../ghostfolio-premium-api-dialog.html        | 42 ++++++++++++++++
 .../ghostfolio-premium-api-dialog.scss        |  2 +
 .../interfaces/interfaces.ts                  |  4 ++
 apps/client/src/styles.scss                   |  4 ++
 8 files changed, 175 insertions(+), 4 deletions(-)
 create mode 100644 apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts
 create mode 100644 apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.html
 create mode 100644 apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.scss
 create mode 100644 apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/interfaces/interfaces.ts

diff --git a/apps/client/src/app/components/admin-settings/admin-settings.component.html b/apps/client/src/app/components/admin-settings/admin-settings.component.html
index 4c4a6df1e..8b7511268 100644
--- a/apps/client/src/app/components/admin-settings/admin-settings.component.html
+++ b/apps/client/src/app/components/admin-settings/admin-settings.component.html
@@ -1,4 +1,37 @@
 <div class="container">
+  <div class="d-md-block d-none mb-5 row">
+    <div class="col">
+      <h2 class="text-center" i18n>Data Providers</h2>
+      <mat-card appearance="outlined">
+        <mat-card-content>
+          <div class="align-items-center d-flex my-3">
+            <div class="w-50">
+              <a
+                class="align-items-center d-inline-flex"
+                target="_blank"
+                [href]="pricingUrl"
+                >Ghostfolio Premium
+                <gf-premium-indicator
+                  class="d-inline-block ml-1"
+                  [enableLink]="false"
+                />
+              </a>
+            </div>
+            <div class="w-50">
+              <button
+                color="accent"
+                mat-flat-button
+                (click)="onSetGhostfolioApiKey()"
+              >
+                <ion-icon class="mr-1" name="key-outline" />
+                <span i18n>Set API Key</span>
+              </button>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
   <div class="mb-5 row">
     <div class="col">
       <h2 class="text-center" i18n>Platforms</h2>
diff --git a/apps/client/src/app/components/admin-settings/admin-settings.component.ts b/apps/client/src/app/components/admin-settings/admin-settings.component.ts
index 35e6d5c63..7ce1092ad 100644
--- a/apps/client/src/app/components/admin-settings/admin-settings.component.ts
+++ b/apps/client/src/app/components/admin-settings/admin-settings.component.ts
@@ -1,10 +1,17 @@
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { User } from '@ghostfolio/common/interfaces';
+
 import {
   ChangeDetectionStrategy,
   Component,
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { Subject } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { Subject, takeUntil } from 'rxjs';
+
+import { GfGhostfolioPremiumApiDialogComponent } from './ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -12,12 +19,46 @@ import { Subject } from 'rxjs';
   styleUrls: ['./admin-settings.component.scss'],
   templateUrl: './admin-settings.component.html'
 })
-export class AdminSettingsComponent implements OnInit, OnDestroy {
+export class AdminSettingsComponent implements OnDestroy, OnInit {
+  public pricingUrl: string;
+
+  private deviceType: string;
   private unsubscribeSubject = new Subject<void>();
+  private user: User;
+
+  public constructor(
+    private deviceService: DeviceDetectorService,
+    private matDialog: MatDialog,
+    private userService: UserService
+  ) {}
 
-  public constructor() {}
+  public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 
-  public ngOnInit() {}
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.pricingUrl =
+            `https://ghostfol.io/${this.user.settings.language}/` +
+            $localize`:snake-case:pricing`;
+        }
+      });
+  }
+
+  public onSetGhostfolioApiKey() {
+    this.matDialog.open(GfGhostfolioPremiumApiDialogComponent, {
+      autoFocus: false,
+      data: {
+        deviceType: this.deviceType,
+        pricingUrl: this.pricingUrl
+      },
+      height: this.deviceType === 'mobile' ? '97.5vh' : undefined,
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+  }
 
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
diff --git a/apps/client/src/app/components/admin-settings/admin-settings.module.ts b/apps/client/src/app/components/admin-settings/admin-settings.module.ts
index d7fe79f26..3a3e04a2d 100644
--- a/apps/client/src/app/components/admin-settings/admin-settings.module.ts
+++ b/apps/client/src/app/components/admin-settings/admin-settings.module.ts
@@ -1,8 +1,11 @@
 import { GfAdminPlatformModule } from '@ghostfolio/client/components/admin-platform/admin-platform.module';
 import { GfAdminTagModule } from '@ghostfolio/client/components/admin-tag/admin-tag.module';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 
 import { AdminSettingsComponent } from './admin-settings.component';
@@ -13,6 +16,9 @@ import { AdminSettingsComponent } from './admin-settings.component';
     CommonModule,
     GfAdminPlatformModule,
     GfAdminTagModule,
+    GfPremiumIndicatorComponent,
+    MatButtonModule,
+    MatCardModule,
     RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
diff --git a/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts
new file mode 100644
index 000000000..856ddc852
--- /dev/null
+++ b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts
@@ -0,0 +1,39 @@
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
+
+import { CommonModule } from '@angular/common';
+import { Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef
+} from '@angular/material/dialog';
+
+import { GfDialogFooterModule } from '../../dialog-footer/dialog-footer.module';
+import { GfDialogHeaderModule } from '../../dialog-header/dialog-header.module';
+import { GhostfolioPremiumApiDialogParams } from './interfaces/interfaces';
+
+@Component({
+  imports: [
+    CommonModule,
+    GfDialogFooterModule,
+    GfDialogHeaderModule,
+    GfPremiumIndicatorComponent,
+    MatButtonModule,
+    MatDialogModule
+  ],
+  selector: 'gf-ghostfolio-premium-api-dialog',
+  standalone: true,
+  styleUrls: ['./ghostfolio-premium-api-dialog.scss'],
+  templateUrl: './ghostfolio-premium-api-dialog.html'
+})
+export class GfGhostfolioPremiumApiDialogComponent {
+  public constructor(
+    @Inject(MAT_DIALOG_DATA) public data: GhostfolioPremiumApiDialogParams,
+    public dialogRef: MatDialogRef<GfGhostfolioPremiumApiDialogComponent>
+  ) {}
+
+  public onCancel() {
+    this.dialogRef.close();
+  }
+}
diff --git a/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.html b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.html
new file mode 100644
index 000000000..25673075d
--- /dev/null
+++ b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.html
@@ -0,0 +1,42 @@
+<gf-dialog-header
+  mat-dialog-title
+  position="center"
+  title="Ghostfolio Premium Data Provider"
+  [deviceType]="data.deviceType"
+  (closeButtonClicked)="onCancel()"
+/>
+
+<div class="text-center" mat-dialog-content>
+  <p class="gf-text-wrap-balance mb-1">
+    The official
+    <a
+      class="align-items-center d-inline-flex"
+      target="_blank"
+      [href]="data.pricingUrl"
+      >Ghostfolio Premium
+      <gf-premium-indicator class="d-inline-block ml-1" [enableLink]="false" />
+    </a>
+    data provider <strong>for self-hosters</strong>, offering
+    <strong>100’000+ tickers</strong> from over <strong>50 exchanges</strong>,
+    is coming soon!
+  </p>
+  <p i18n>
+    Want to stay updated? Click below to get notified as soon as it’s available.
+  </p>
+  <div>
+    <a
+      color="primary"
+      href="mailto:hi@ghostfol.io?Subject=Ghostfolio Premium Data Provider&body=Hello%0D%0DPlease notify me as soon as the Ghostfolio Premium Data Provider is available.%0D%0DKind regards"
+      i18n
+      mat-flat-button
+    >
+      Notify me
+    </a>
+  </div>
+</div>
+
+<gf-dialog-footer
+  mat-dialog-actions
+  [deviceType]="data.deviceType"
+  (closeButtonClicked)="onCancel()"
+/>
diff --git a/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.scss b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.scss
new file mode 100644
index 000000000..dc9093b45
--- /dev/null
+++ b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.scss
@@ -0,0 +1,2 @@
+:host {
+}
diff --git a/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/interfaces/interfaces.ts b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/interfaces/interfaces.ts
new file mode 100644
index 000000000..0c629599e
--- /dev/null
+++ b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/interfaces/interfaces.ts
@@ -0,0 +1,4 @@
+export interface GhostfolioPremiumApiDialogParams {
+  deviceType: string;
+  pricingUrl: string;
+}
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 1f068da1b..b72583050 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -377,6 +377,10 @@ ngx-skeleton-loader {
   @include gf-table;
 }
 
+.gf-text-wrap-balance {
+  text-wrap: balance;
+}
+
 .has-fab {
   padding-bottom: 3rem !important;
 }