Add support for creating asset profiles with MANUAL data source (#2479)

* Add support for creating asset profiles with MANUAL data source

* Refactoring

* Update changelog

---------

Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added the endpoint `GET api/v1/account/:id/balances` which provides historical cash balances
 - Added support to search for an asset profile by `isin`, `name` and `symbol` as an administrator (experimental)
+- Added support for creating asset profiles with `MANUAL` data source
 
 ### Changed
 

apps/api/src/app/admin/admin.controller.ts

@@ -398,8 +398,11 @@ export class AdminController {
         StatusCodes.FORBIDDEN
       );
     }
-
+    return this.adminService.addAssetProfile({
-    return this.adminService.addAssetProfile({ dataSource, symbol });
+      dataSource,
+      symbol,
+      currency: this.request.user.Settings.settings.baseCurrency
+    });
   }
 
   @Delete('profile-data/:dataSource/:symbol')

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

@@ -41,10 +41,19 @@ export class AdminService {
   ) {}
 
   public async addAssetProfile({
+    currency,
     dataSource,
     symbol
-  }: UniqueAsset): Promise<SymbolProfile | never> {
+  }: UniqueAsset & { currency?: string }): Promise<SymbolProfile | never> {
     try {
+      if (dataSource === 'MANUAL') {
+        return this.symbolProfileService.add({
+          currency,
+          dataSource,
+          symbol
+        });
+      }
+
       const assetProfiles = await this.dataProviderService.getAssetProfiles([
         { dataSource, symbol }
       ]);

apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts

@@ -1,15 +1,15 @@
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
-  Inject,
   OnDestroy,
   OnInit
 } from '@angular/core';
 import {
+  AbstractControl,
   FormBuilder,
   FormControl,
   FormGroup,
+  ValidationErrors,
   Validators
 } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
@@ -19,35 +19,75 @@ import { AdminService } from '@ghostfolio/client/services/admin.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'h-100' },
   selector: 'gf-create-asset-profile-dialog',
+  styleUrls: ['./create-asset-profile-dialog.component.scss'],
   templateUrl: 'create-asset-profile-dialog.html'
 })
 export class CreateAssetProfileDialog implements OnInit, OnDestroy {
   public createAssetProfileForm: FormGroup;
+  public mode: 'auto' | 'manual';
 
   public constructor(
     public readonly adminService: AdminService,
-    public readonly changeDetectorRef: ChangeDetectorRef,
     public readonly dialogRef: MatDialogRef<CreateAssetProfileDialog>,
     public readonly formBuilder: FormBuilder
   ) {}
 
   public ngOnInit() {
-    this.createAssetProfileForm = this.formBuilder.group({
+    this.createAssetProfileForm = this.formBuilder.group(
-      searchSymbol: new FormControl(null, [Validators.required])
+      {
-    });
+        addSymbol: new FormControl(null, [Validators.required]),
+        searchSymbol: new FormControl(null, [Validators.required])
+      },
+      {
+        validators: this.atLeastOneValid
+      }
+    );
+
+    this.mode = 'auto';
   }
 
   public onCancel() {
     this.dialogRef.close();
   }
 
+  public onRadioChange(mode: 'auto' | 'manual') {
+    this.mode = mode;
+  }
+
   public onSubmit() {
-    this.dialogRef.close({
+    this.mode === 'auto'
-      dataSource:
+      ? this.dialogRef.close({
-        this.createAssetProfileForm.controls['searchSymbol'].value.dataSource,
+          dataSource:
-      symbol: this.createAssetProfileForm.controls['searchSymbol'].value.symbol
+            this.createAssetProfileForm.controls['searchSymbol'].value
-    });
+              .dataSource,
+          symbol:
+            this.createAssetProfileForm.controls['searchSymbol'].value.symbol
+        })
+      : this.dialogRef.close({
+          dataSource: 'MANUAL',
+          symbol: this.createAssetProfileForm.controls['addSymbol'].value
+        });
   }
 
   public ngOnDestroy() {}
+
+  private atLeastOneValid(control: AbstractControl): ValidationErrors {
+    const addSymbolControl = control.get('addSymbol');
+    const searchSymbolControl = control.get('searchSymbol');
+
+    if (addSymbolControl.valid && searchSymbolControl.valid) {
+      return { atLeastOneValid: true };
+    }
+
+    if (
+      addSymbolControl.valid ||
+      !addSymbolControl ||
+      searchSymbolControl.valid ||
+      !searchSymbolControl
+    ) {
+      return { atLeastOneValid: false };
+    }
+
+    return { atLeastOneValid: true };
+  }
 }

apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.html

@@ -6,13 +6,35 @@
 >
   <h1 i18n mat-dialog-title>Add Asset Profile</h1>
   <div class="flex-grow-1 py-3" mat-dialog-content>
-    <mat-form-field appearance="outline" class="w-100">
+    <div class="mb-3">
-      <mat-label i18n>Name, symbol or ISIN</mat-label>
+      <mat-radio-group
-      <gf-symbol-autocomplete
+        color="primary"
-        formControlName="searchSymbol"
+        [value]="mode"
-        [includeIndices]="true"
+        (change)="onRadioChange($event.value)"
-      />
+      >
-    </mat-form-field>
+        <mat-radio-button name="auto" value="auto"></mat-radio-button>
+        <label class="m-0" for="auto" i18n>Search</label>
+        <mat-radio-button class="ml-3" name="manual" value="manual">
+        </mat-radio-button>
+        <label class="m-0" for="manual" i18n>Add Manually</label>
+      </mat-radio-group>
+    </div>
+
+    <div *ngIf="mode === 'auto'">
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Name, symbol or ISIN</mat-label>
+        <gf-symbol-autocomplete
+          formControlName="searchSymbol"
+          [includeIndices]="true"
+        />
+      </mat-form-field>
+    </div>
+    <div *ngIf="mode === 'manual'">
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Symbol</mat-label>
+        <input formControlName="addSymbol" matInput />
+      </mat-form-field>
+    </div>
   </div>
   <div class="d-flex justify-content-end" mat-dialog-actions>
     <button i18n mat-button type="button" (click)="onCancel()">Cancel</button>
@@ -20,7 +42,7 @@
       color="primary"
       mat-flat-button
       type="submit"
-      [disabled]="!createAssetProfileForm.valid"
+      [disabled]="createAssetProfileForm.hasError('atLeastOneValid')"
     >
       <ng-container i18n>Save</ng-container>
     </button>

apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.module.ts

@@ -4,6 +4,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
 import { GfSymbolAutocompleteModule } from '@ghostfolio/ui/symbol-autocomplete';
 
 import { CreateAssetProfileDialog } from './create-asset-profile-dialog.component';
@@ -17,6 +19,8 @@ import { CreateAssetProfileDialog } from './create-asset-profile-dialog.componen
     MatDialogModule,
     MatButtonModule,
     MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
     ReactiveFormsModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]