Setup form

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

@@ -6,12 +6,10 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
-import {
+import { EnhancedSymbolProfile } from '@ghostfolio/common/interfaces';
-  EnhancedSymbolProfile,
-  UniqueAsset
-} from '@ghostfolio/common/interfaces';
 import { MarketData } from '@prisma/client';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -27,6 +25,9 @@ import { AssetProfileDialogParams } from './interfaces/interfaces';
 })
 export class AssetProfileDialog implements OnDestroy, OnInit {
   public assetProfile: EnhancedSymbolProfile;
+  public assetProfileForm = this.formBuilder.group({
+    symbolMapping: ''
+  });
   public countries: {
     [code: string]: { name: string; value: number };
   };
@@ -41,7 +42,8 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
     public dialogRef: MatDialogRef<AssetProfileDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: AssetProfileDialogParams
+    @Inject(MAT_DIALOG_DATA) public data: AssetProfileDialogParams,
+    private formBuilder: FormBuilder
   ) {}
 
   public ngOnInit(): void {
@@ -58,14 +60,25 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
     }
   }
 
+  public onSubmit() {
+    const assetProfile = {
+      symbolMapping: this.assetProfileForm.controls['symbolMapping'].value
+    };
+
+    console.log(assetProfile);
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
   }
 
-  private fetchAdminMarketDataBySymbol({ dataSource, symbol }: UniqueAsset) {
+  private initialize() {
     this.adminService
-      .fetchAdminMarketDataBySymbol({ dataSource, symbol })
+      .fetchAdminMarketDataBySymbol({
+        dataSource: this.data.dataSource,
+        symbol: this.data.symbol
+      })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ assetProfile, marketData }) => {
         this.assetProfile = assetProfile;
@@ -91,14 +104,11 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
           }
         }
 
-        this.changeDetectorRef.markForCheck();
+        this.assetProfileForm.setValue({
+          symbolMapping: JSON.stringify(this.assetProfile?.symbolMapping)
         });
-  }
 
-  private initialize() {
+        this.changeDetectorRef.markForCheck();
-    this.fetchAdminMarketDataBySymbol({
-      dataSource: this.data.dataSource,
-      symbol: this.data.symbol
       });
   }
 }

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

@@ -1,11 +1,10 @@
-<gf-dialog-header
+<form
-  mat-dialog-title
+  class="d-flex flex-column h-100"
-  position="center"
+  [formGroup]="assetProfileForm"
-  [deviceType]="data.deviceType"
+  (keyup.enter)="assetProfileForm.valid && onSubmit()"
-  [title]="assetProfile?.name ?? data.symbol"
+  (ngSubmit)="onSubmit()"
-  (closeButtonClicked)="onClose()"
+>
-></gf-dialog-header>
+  <h1 mat-dialog-title>{{ assetProfile?.name ?? data.symbol }}</h1>
-
   <div class="flex-grow-1" mat-dialog-content>
     <gf-admin-market-data-detail
       class="mb-3"
@@ -103,10 +102,28 @@
         </ng-template>
       </ng-container>
     </div>
+    <div class="mt-3">
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Symbol Mapping</mat-label>
+        <textarea
+          cdkTextareaAutosize
+          formControlName="symbolMapping"
+          matInput
+          type="text"
+        ></textarea>
+      </mat-form-field>
+    </div>
   </div>
 
-<gf-dialog-footer
+  <div class="d-flex justify-content-end" mat-dialog-actions>
-  mat-dialog-actions
+    <button i18n mat-button type="button" (click)="onClose()">Cancel</button>
-  [deviceType]="data.deviceType"
+    <button
-  (closeButtonClicked)="onClose()"
+      color="primary"
-></gf-dialog-footer>
+      mat-flat-button
+      type="submit"
+      [disabled]="!(assetProfileForm.dirty && assetProfileForm.valid)"
+    >
+      <ng-container i18n>Save</ng-container>
+    </button>
+  </div>
+</form>

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

@@ -1,10 +1,11 @@
+import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 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 { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
-import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
-import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -14,13 +15,15 @@ import { AssetProfileDialog } from './asset-profile-dialog.component';
   declarations: [AssetProfileDialog],
   imports: [
     CommonModule,
+    FormsModule,
     GfAdminMarketDataDetailModule,
-    GfDialogFooterModule,
-    GfDialogHeaderModule,
     GfPortfolioProportionChartModule,
     GfValueModule,
     MatButtonModule,
-    MatDialogModule
+    MatDialogModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    TextFieldModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts

@@ -19,9 +19,9 @@ import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog
   declarations: [CreateOrUpdateActivityDialog],
   imports: [
     CommonModule,
+    FormsModule,
     GfSymbolModule,
     GfValueModule,
-    FormsModule,
     MatAutocompleteModule,
     MatButtonModule,
     MatChipsModule,