Refactoring

apps/api/src/services/data-provider/data-provider.service.ts

@@ -15,7 +15,6 @@ import { UniqueAsset } from '@ghostfolio/common/interfaces';
 import type { Granularity, UserWithSettings } from '@ghostfolio/common/types';
 import { Inject, Injectable, Logger } from '@nestjs/common';
 import { DataSource, MarketData, SymbolProfile } from '@prisma/client';
-import { data } from 'cheerio/lib/api/attributes';
 import { format, isValid } from 'date-fns';
 import { groupBy, isEmpty, isNumber } from 'lodash';
 

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,8 +1,6 @@
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
-  Inject,
   OnDestroy,
   OnInit
 } from '@angular/core';
@@ -21,37 +19,15 @@ 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 {
-  private atLeastOneValid = (
-    control: AbstractControl
-  ): ValidationErrors | null => {
-    const addSymbolControl = control.get('addSymbol');
-    const searchSymbolControl = control.get('searchSymbol');
-
-    if (addSymbolControl.valid && searchSymbolControl.valid) {
-      return { atLeastOneValid: true };
-    }
-
-    if (
-      !searchSymbolControl ||
-      !addSymbolControl ||
-      searchSymbolControl.valid ||
-      addSymbolControl.valid
-    ) {
-      return { atLeastOneValid: false };
-    }
-
-    return { atLeastOneValid: true };
-  };
-
   public createAssetProfileForm: FormGroup;
-  public selectedOption: string;
+  public mode: 'auto' | 'manual' = 'auto';
 
   public constructor(
     public readonly adminService: AdminService,
-    public readonly changeDetectorRef: ChangeDetectorRef,
     public readonly dialogRef: MatDialogRef<CreateAssetProfileDialog>,
     public readonly formBuilder: FormBuilder
   ) {}
@@ -59,27 +35,27 @@ export class CreateAssetProfileDialog implements OnInit, OnDestroy {
   public ngOnInit() {
     this.createAssetProfileForm = this.formBuilder.group(
       {
-        searchSymbol: new FormControl(null, [Validators.required]),
+        addSymbol: new FormControl(null, [Validators.required]),
-        addSymbol: new FormControl(null, [Validators.required])
+        searchSymbol: new FormControl(null, [Validators.required])
       },
       {
         validators: this.atLeastOneValid
       }
     );
 
-    this.selectedOption = 'auto';
+    this.mode = 'auto';
   }
 
   public onCancel() {
     this.dialogRef.close();
   }
 
-  public onRadioChange(option: string) {
+  public onRadioChange(mode: 'auto' | 'manual') {
-    this.selectedOption = option;
+    this.mode = mode;
   }
 
   public onSubmit() {
-    this.selectedOption === 'auto'
+    this.mode === 'auto'
       ? this.dialogRef.close({
           dataSource:
             this.createAssetProfileForm.controls['searchSymbol'].value
@@ -94,4 +70,24 @@ export class CreateAssetProfileDialog implements OnInit, OnDestroy {
   }
 
   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

@@ -9,30 +9,18 @@
     <div class="my-2">
       <mat-radio-group
         color="primary"
-        formControlName="selectedOption"
+        [value]="mode"
-        name="radioOptions"
+        (change)="onRadioChange($event.value)"
       >
-        <mat-radio-button
+        <mat-radio-button name="auto" value="auto"></mat-radio-button>
-          i18n
+        <label class="m-0" for="auto" i18n>Search</label>
-          name="auto"
+        <mat-radio-button class="ml-3" name="manual" value="manual">
-          value="auto"
-          [checked]="selectedOption==='auto'"
-          (click)="onRadioChange('auto')"
-        ></mat-radio-button>
-        <label for="auto"> Search </label>
-        <mat-radio-button
-          i18n
-          name="manual"
-          style="margin-left: 10px"
-          value="manual"
-          (click)="onRadioChange('manual')"
-        >
         </mat-radio-button>
-        <label for="manual"> Add Manually </label>
+        <label class="m-0" for="manual" i18n>Add Manually</label>
       </mat-radio-group>
     </div>
 
-    <div *ngIf="selectedOption === 'auto'">
+    <div *ngIf="mode === 'auto'">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Name, symbol or ISIN</mat-label>
         <gf-symbol-autocomplete
@@ -41,14 +29,10 @@
         />
       </mat-form-field>
     </div>
-    <div *ngIf="selectedOption === 'manual'">
+    <div *ngIf="mode === 'manual'">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Symbol</mat-label>
-        <input
+        <input formControlName="addSymbol" matInput />
-          formControlName="addSymbol"
-          matInput
-          placeholder="Enter symbol"
-        />
       </mat-form-field>
     </div>
   </div>

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

@@ -3,10 +3,9 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
-import { MatInputModule } from '@angular/material/input';
 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';