Fix review comments

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -14,7 +14,6 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { AdminMarketDataItem } from '@ghostfolio/common/interfaces/admin-market-data.interface';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import { AssetProfileDialogParams } from '@ghostfolio/ui/admin-market-data-detail/interfaces/interfaces';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import { SelectionModel } from '@angular/cdk/collections';
@@ -42,6 +41,7 @@ import { AdminMarketDataService } from './admin-market-data.service';
 import { AssetProfileDialog } from './asset-profile-dialog/asset-profile-dialog.component';
 import { CreateAssetProfileDialog } from './create-asset-profile-dialog/create-asset-profile-dialog.component';
 import { CreateAssetProfileDialogParams } from './create-asset-profile-dialog/interfaces/interfaces';
+import { AssetProfileDialogParams } from './interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -3,8 +3,9 @@
 
   .mat-mdc-dialog-content {
     max-height: unset;
-  }
+
-  gf-line-chart {
+    gf-line-chart {
-    aspect-ratio: 16/9;
+      aspect-ratio: 16/9;
+    }
   }
 }

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

@@ -13,7 +13,6 @@ import {
   User,
   LineChartItem
 } from '@ghostfolio/common/interfaces';
-import { AssetProfileDialogParams } from '@ghostfolio/ui/admin-market-data-detail/interfaces/interfaces';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import {
@@ -36,6 +35,8 @@ import { format } from 'date-fns';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
 
+import { AssetProfileDialogParams } from '../interfaces/interfaces';
+
 @Component({
   host: { class: 'd-flex flex-column h-100' },
   selector: 'gf-asset-profile-dialog',

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

@@ -68,7 +68,6 @@
   </div>
 
   <div class="flex-grow-1" mat-dialog-content>
-    <p>Line</p>
     <gf-line-chart
       class="mb-4"
       [colorScheme]="user?.settings?.colorScheme"
@@ -79,7 +78,7 @@
       [showYAxis]="true"
       [symbol]="data.symbol"
     />
-    <gf-admin-market-data-detail
+    <gf-market-data-details
       class="mb-3"
       [currency]="assetProfile?.currency"
       [dataSource]="data.dataSource"
@@ -88,8 +87,8 @@
       [marketData]="marketDataDetails"
       [symbol]="data.symbol"
       [user]="user"
+      (historicalDataUpdated)="onImportHistoricalDataChanged()"
       (marketDataChanged)="onMarketDataChanged($event)"
-      (updateHistoricalData)="onImportHistoricalDataChanged()"
     />
 
     <div class="row">

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

@@ -1,8 +1,8 @@
 import { AdminMarketDataService } from '@ghostfolio/client/components/admin-market-data/admin-market-data.service';
 import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
-import { AdminMarketDataDetailComponent } from '@ghostfolio/ui/admin-market-data-detail';
 import { GfCurrencySelectorComponent } from '@ghostfolio/ui/currency-selector';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
+import { GfMarketDataDetailComponent } from '@ghostfolio/ui/market-data-detail';
 import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
@@ -23,7 +23,7 @@ import { AssetProfileDialog } from './asset-profile-dialog.component';
 @NgModule({
   declarations: [AssetProfileDialog],
   imports: [
-    AdminMarketDataDetailComponent,
+    GfMarketDataDetailComponent,
     CommonModule,
     FormsModule,
     GfAssetProfileIconComponent,

libs/ui/src/lib/admin-market-data-detail/index.ts

@@ -1 +0,0 @@
-export * from './admin-market-data-detail.component';

libs/ui/src/lib/market-data-detail/index.ts

@@ -0,0 +1 @@
+export * from './market-data-detail.component';

libs/ui/src/lib/admin-market-data-detail/admin-market-data-detail.component.scss → libs/ui/src/lib/market-data-detail/market-data-detail.component.scss

@@ -2,10 +2,6 @@
   display: block;
   font-size: 0.9rem;
 
-  gf-line-chart {
-    aspect-ratio: 16/9;
-  }
-
   .date {
     font-feature-settings: 'tnum';
     font-variant-numeric: tabular-nums;

libs/ui/src/lib/admin-market-data-detail/admin-market-data-detail.component.ts → libs/ui/src/lib/market-data-detail/market-data-detail.component.ts

@@ -6,14 +6,12 @@ import {
   getLocale
 } from '@ghostfolio/common/helper';
 import { LineChartItem, User } from '@ghostfolio/common/interfaces';
-import { AssetProfileDialogParams } from '@ghostfolio/ui/admin-market-data-detail/interfaces/interfaces';
 
 import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
-  Inject,
   Input,
   OnChanges,
   OnInit,
@@ -21,7 +19,7 @@ import {
 } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { DataSource, MarketData } from '@prisma/client';
@@ -38,6 +36,7 @@ import {
   parseISO
 } from 'date-fns';
 import { first, last } from 'lodash';
+import ms from 'ms';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { parse as csvToJson } from 'papaparse';
 import { EMPTY, Subject, takeUntil } from 'rxjs';
@@ -48,13 +47,13 @@ import { MarketDataDetailDialogComponent } from './market-data-detail-dialog/mar
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, ReactiveFormsModule, MatButtonModule, MatInputModule],
+  imports: [CommonModule, MatButtonModule, MatInputModule, ReactiveFormsModule],
-  selector: 'gf-admin-market-data-detail',
+  selector: 'gf-market-data-details',
   standalone: true,
-  styleUrls: ['./admin-market-data-detail.component.scss'],
+  styleUrls: ['./market-data-detail.component.scss'],
-  templateUrl: './admin-market-data-detail.component.html'
+  templateUrl: './market-data-detail.component.html'
 })
-export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
+export class GfMarketDataDetailComponent implements OnChanges, OnInit {
   @Input() currency: string;
   @Input() dataSource: DataSource;
   @Input() dateOfFirstActivity: string;
@@ -64,11 +63,16 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
   @Input() user: User;
 
   @Output() marketDataChanged = new EventEmitter<boolean>();
-  @Output() updateHistoricalData = new EventEmitter();
+  @Output() historicalDataUpdated = new EventEmitter();
 
   public days = Array(31);
   public defaultDateFormat: string;
   public deviceType: string;
+  public historicalDataForm = this.formBuilder.group({
+    historicalData: this.formBuilder.group({
+      csvString: ''
+    })
+  });
   public historicalDataItems: LineChartItem[];
   public marketDataByMonth: {
     [yearMonth: string]: {
@@ -76,12 +80,6 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
     };
   } = {};
 
-  public historicalDataForm = this.formBuilder.group({
-    historicalData: this.formBuilder.group({
-      csvString: ''
-    })
-  });
-
   private static readonly HISTORICAL_DATA_TEMPLATE = `date;marketPrice\n${format(
     new Date(),
     DATE_FORMAT
@@ -91,11 +89,10 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
 
   public constructor(
     private adminService: AdminService,
-    @Inject(MAT_DIALOG_DATA) public data: AssetProfileDialogParams,
     private deviceService: DeviceDetectorService,
+    private formBuilder: FormBuilder,
     private dialog: MatDialog,
-    private snackBar: MatSnackBar,
+    private snackBar: MatSnackBar
-    private formBuilder: FormBuilder
   ) {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
   }
@@ -236,38 +233,38 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
 
       this.adminService
         .postMarketData({
-          dataSource: this.data.dataSource,
+          dataSource: this.dataSource,
           marketData: {
             marketData
           },
-          symbol: this.data.symbol
+          symbol: this.symbol
         })
         .pipe(
           catchError(({ error, message }) => {
             this.snackBar.open(`${error}: ${message[0]}`, undefined, {
-              duration: 3000
+              duration: ms('3 seconds')
             });
             return EMPTY;
           }),
           takeUntil(this.unsubscribeSubject)
         )
         .subscribe(() => {
-          this.updateHistoricalData.emit();
+          this.historicalDataUpdated.emit();
           this.initializeHistoricalDataForm();
         });
     } catch {
       this.snackBar.open(
         $localize`Oops! Could not parse historical data.`,
         undefined,
-        { duration: 3000 }
+        { duration: ms('3 seconds') }
       );
     }
   }
 
-  public initializeHistoricalDataForm() {
+  private initializeHistoricalDataForm() {
     this.historicalDataForm.setValue({
       historicalData: {
-        csvString: AdminMarketDataDetailComponent.HISTORICAL_DATA_TEMPLATE
+        csvString: GfMarketDataDetailComponent.HISTORICAL_DATA_TEMPLATE
       }
     });
   }