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.assetProfileForm.setValue({
+          symbolMapping: JSON.stringify(this.assetProfile?.symbolMapping)
+        });
+
         this.changeDetectorRef.markForCheck();
       });
   }
-
-  private initialize() {
-    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,112 +1,129 @@
-<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>
-<div class="flex-grow-1" mat-dialog-content>
+    <gf-admin-market-data-detail
-  <gf-admin-market-data-detail
+      class="mb-3"
-    class="mb-3"
+      [dataSource]="data.dataSource"
-    [dataSource]="data.dataSource"
+      [dateOfFirstActivity]="data.dateOfFirstActivity"
-    [dateOfFirstActivity]="data.dateOfFirstActivity"
+      [locale]="data.locale"
-    [locale]="data.locale"
+      [marketData]="marketDataDetails"
-    [marketData]="marketDataDetails"
+      [symbol]="data.symbol"
-    [symbol]="data.symbol"
+      (marketDataChanged)="onMarketDataChanged($event)"
-    (marketDataChanged)="onMarketDataChanged($event)"
+    ></gf-admin-market-data-detail>
-  ></gf-admin-market-data-detail>
+    <div class="row">
-  <div class="row">
+      <div class="col-6 mb-3">
-    <div class="col-6 mb-3">
+        <gf-value
-      <gf-value
+          i18n
-        i18n
+          size="medium"
-        size="medium"
+          [isDate]="data.dateOfFirstActivity ? true : false"
-        [isDate]="data.dateOfFirstActivity ? true : false"
+          [locale]="data.locale"
-        [locale]="data.locale"
+          [value]="data.dateOfFirstActivity ?? '-'"
-        [value]="data.dateOfFirstActivity ?? '-'"
+          >First Buy Date</gf-value
-        >First Buy Date</gf-value
+        >
-      >
+      </div>
-    </div>
+      <div class="col-6 mb-3">
-    <div class="col-6 mb-3">
+        <gf-value
-      <gf-value
+          i18n
-        i18n
+          size="medium"
-        size="medium"
+          [locale]="data.locale"
-        [locale]="data.locale"
+          [value]="assetProfile?.activitiesCount ?? 0"
-        [value]="assetProfile?.activitiesCount ?? 0"
+          >Transactions</gf-value
-        >Transactions</gf-value
+        >
-      >
+      </div>
-    </div>
+      <div class="col-6 mb-3">
-    <div class="col-6 mb-3">
+        <gf-value
-      <gf-value
+          i18n
-        i18n
+          size="medium"
-        size="medium"
+          [hidden]="!assetProfile?.assetClass"
-        [hidden]="!assetProfile?.assetClass"
+          [value]="assetProfile?.assetClass"
-        [value]="assetProfile?.assetClass"
+          >Asset Class</gf-value
-        >Asset Class</gf-value
+        >
-      >
+      </div>
-    </div>
+      <div class="col-6 mb-3">
-    <div class="col-6 mb-3">
+        <gf-value
-      <gf-value
+          i18n
-        i18n
+          size="medium"
-        size="medium"
+          [hidden]="!assetProfile?.assetSubClass"
-        [hidden]="!assetProfile?.assetSubClass"
+          [value]="assetProfile?.assetSubClass"
-        [value]="assetProfile?.assetSubClass"
+          >Asset Sub Class</gf-value
-        >Asset Sub Class</gf-value
+        >
-      >
+      </div>
-    </div>
-    <ng-container
-      *ngIf="assetProfile?.countries?.length > 0 || assetProfile?.sectors?.length > 0"
-    >
       <ng-container
-        *ngIf="assetProfile?.countries?.length === 1 && assetProfile?.sectors?.length === 1; else charts"
+        *ngIf="assetProfile?.countries?.length > 0 || assetProfile?.sectors?.length > 0"
       >
-        <div *ngIf="assetProfile?.sectors?.length === 1" class="col-6 mb-3">
+        <ng-container
-          <gf-value
+          *ngIf="assetProfile?.countries?.length === 1 && assetProfile?.sectors?.length === 1; else charts"
-            i18n
+        >
-            size="medium"
+          <div *ngIf="assetProfile?.sectors?.length === 1" class="col-6 mb-3">
-            [locale]="data.locale"
+            <gf-value
-            [value]="assetProfile?.sectors[0].name"
+              i18n
-            >Sector</gf-value
+              size="medium"
-          >
+              [locale]="data.locale"
-        </div>
+              [value]="assetProfile?.sectors[0].name"
-        <div *ngIf="assetProfile?.countries?.length === 1" class="col-6 mb-3">
+              >Sector</gf-value
-          <gf-value
+            >
-            i18n
+          </div>
-            size="medium"
+          <div *ngIf="assetProfile?.countries?.length === 1" class="col-6 mb-3">
-            [locale]="data.locale"
+            <gf-value
-            [value]="assetProfile?.countries[0].name"
+              i18n
-            >Country</gf-value
+              size="medium"
-          >
+              [locale]="data.locale"
-        </div>
+              [value]="assetProfile?.countries[0].name"
+              >Country</gf-value
+            >
+          </div>
+        </ng-container>
+        <ng-template #charts>
+          <div class="col-md-6 mb-3">
+            <div class="h5" i18n>Sectors</div>
+            <gf-portfolio-proportion-chart
+              [colorScheme]="data.colorScheme"
+              [isInPercent]="true"
+              [keys]="['name']"
+              [maxItems]="10"
+              [positions]="sectors"
+            ></gf-portfolio-proportion-chart>
+          </div>
+          <div class="col-md-6 mb-3">
+            <div class="h5" i18n>Countries</div>
+            <gf-portfolio-proportion-chart
+              [colorScheme]="data.colorScheme"
+              [isInPercent]="true"
+              [keys]="['name']"
+              [maxItems]="10"
+              [positions]="countries"
+            ></gf-portfolio-proportion-chart>
+          </div>
+        </ng-template>
       </ng-container>
-      <ng-template #charts>
+    </div>
-        <div class="col-md-6 mb-3">
+    <div class="mt-3">
-          <div class="h5" i18n>Sectors</div>
+      <mat-form-field appearance="outline" class="w-100">
-          <gf-portfolio-proportion-chart
+        <mat-label i18n>Symbol Mapping</mat-label>
-            [colorScheme]="data.colorScheme"
+        <textarea
-            [isInPercent]="true"
+          cdkTextareaAutosize
-            [keys]="['name']"
+          formControlName="symbolMapping"
-            [maxItems]="10"
+          matInput
-            [positions]="sectors"
+          type="text"
-          ></gf-portfolio-proportion-chart>
+        ></textarea>
-        </div>
+      </mat-form-field>
-        <div class="col-md-6 mb-3">
+    </div>
-          <div class="h5" i18n>Countries</div>
-          <gf-portfolio-proportion-chart
-            [colorScheme]="data.colorScheme"
-            [isInPercent]="true"
-            [keys]="['name']"
-            [maxItems]="10"
-            [positions]="countries"
-          ></gf-portfolio-proportion-chart>
-        </div>
-      </ng-template>
-    </ng-container>
   </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,