From 860a4305bf86f774f7df074adb54364573b576b4 Mon Sep 17 00:00:00 2001
From: Julien Schneider <julien.schneider.1991@gmail.com>
Date: Mon, 4 Mar 2024 14:39:18 +0100
Subject: [PATCH] refactor: type common input (#1500)

---
 .../action/login-form/login-form.component.ts    | 11 +++++------
 .../common-input/common-input.component.ts       | 15 ++++-----------
 .../resource-class-form.component.ts             |  3 +--
 .../reusable-project-form.component.ts           | 16 ++++++++--------
 4 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/apps/dsp-app/src/app/main/action/login-form/login-form.component.ts b/apps/dsp-app/src/app/main/action/login-form/login-form.component.ts
index 0211a4a385..f71db8f507 100644
--- a/apps/dsp-app/src/app/main/action/login-form/login-form.component.ts
+++ b/apps/dsp-app/src/app/main/action/login-form/login-form.component.ts
@@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
 import { AuthService } from '@dasch-swiss/vre/shared/app-session';
@@ -12,8 +12,7 @@ import { finalize, takeLast, tap } from 'rxjs/operators';
   template: `
     <form [formGroup]="form" (ngSubmit)="login()" class="login-form">
       <app-common-input
-        [formGroup]="form"
-        controlName="username"
+        [control]="form.controls.username"
         placeholder="Username"
         data-cy="username-input"></app-common-input>
 
@@ -21,10 +20,10 @@ import { finalize, takeLast, tap } from 'rxjs/operators';
         <input
           placeholder="Password"
           autocomplete="current-password"
-          formControlName="password"
+          [formControl]="form.controls.password"
           matInput
           type="password" />
-        <mat-error *ngIf="form.get('password').errors as errors">
+        <mat-error *ngIf="form.controls.password.errors as errors">
           {{ errors | humanReadableError }}
         </mat-error>
       </mat-form-field>
@@ -63,7 +62,7 @@ export class LoginFormComponent implements OnInit, OnDestroy {
   private subscription: Subscription;
 
   constructor(
-    private _fb: UntypedFormBuilder,
+    private _fb: FormBuilder,
     private router: Router,
     private _authService: AuthService,
     private route: ActivatedRoute,
diff --git a/apps/dsp-app/src/app/project/common-input/common-input.component.ts b/apps/dsp-app/src/app/project/common-input/common-input.component.ts
index 4fd8f1d8f9..7fd60a20fe 100644
--- a/apps/dsp-app/src/app/project/common-input/common-input.component.ts
+++ b/apps/dsp-app/src/app/project/common-input/common-input.component.ts
@@ -1,13 +1,13 @@
 import { Component, Input } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'app-common-input',
   template: `
     <mat-form-field style="width: 100%">
       <mat-icon matIconPrefix *ngIf="prefixIcon">{{ prefixIcon }}</mat-icon>
-      <input matInput [placeholder]="placeholder" [formControl]="formControl" />
-      <mat-error *ngIf="formControl.errors as errors">
+      <input matInput [placeholder]="placeholder" [formControl]="control" />
+      <mat-error *ngIf="control.errors as errors">
         {{ errors | humanReadableError: validatorErrors }}
       </mat-error>
     </mat-form-field>
@@ -15,15 +15,8 @@ import { FormControl, FormGroup } from '@angular/forms';
   styles: [':host { display: block;}'],
 })
 export class CommonInputComponent {
-  @Input() formGroup: FormGroup;
-  @Input() controlName: string;
+  @Input() control: FormControl<string>;
   @Input() placeholder: string;
   @Input() prefixIcon: string | null = null;
   @Input() validatorErrors: { errorKey: string; message: string }[] | null = null;
-
-  get formControl() {
-    return this.formGroup.controls[this.controlName] as FormControl;
-  }
-
-  protected readonly FormGroup = FormGroup;
 }
diff --git a/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.ts b/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.ts
index e69d31b30a..cf4c8ef6b7 100644
--- a/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.ts
+++ b/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.ts
@@ -18,8 +18,7 @@ import { ResourceClassForm } from './resource-class-form.type';
       <app-common-input
         class="name-input"
         data-cy="name-input"
-        [formGroup]="form"
-        controlName="name"
+        [control]="form.controls.name"
         placeholder="Class name *"
         prefixIcon="fingerprint"></app-common-input>
 
diff --git a/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts b/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts
index 4c4ae48960..697576cfa4 100644
--- a/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts
+++ b/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts
@@ -14,16 +14,14 @@ import { shortcodeExistsValidator } from './shortcode-exists.validator';
     <form *ngIf="form" [formGroup]="form">
       <div style="display: flex">
         <app-common-input
-          [formGroup]="form"
-          controlName="shortcode"
+          [control]="form.controls.shortcode"
           [placeholder]="'appLabels.form.project.general.shortcode' | translate"
           [validatorErrors]="[shortcodePatternError, shortCodeExistsError]"
           data-cy="shortcode-input"
           style="flex: 1; margin-right: 16px"></app-common-input>
 
         <app-common-input
-          [formGroup]="form"
-          controlName="shortname"
+          [control]="form.controls.shortname"
           [placeholder]="'appLabels.form.project.general.shortname' | translate"
           data-cy="shortname-input"
           style="flex: 1"></app-common-input>
@@ -31,9 +29,8 @@ import { shortcodeExistsValidator } from './shortcode-exists.validator';
 
       <app-common-input
         [placeholder]="'appLabels.form.project.general.longname' | translate"
-        controlName="longname"
-        data-cy="longname-input"
-        [formGroup]="form"></app-common-input>
+        [control]="form.controls.longname"
+        data-cy="longname-input"></app-common-input>
 
       <dasch-swiss-multi-language-textarea
         [placeholder]="('appLabels.form.project.general.description' | translate) + '*'"
@@ -42,7 +39,10 @@ import { shortcodeExistsValidator } from './shortcode-exists.validator';
         data-cy="description-input">
       </dasch-swiss-multi-language-textarea>
 
-      <app-chip-list-input [formGroup]="form" controlName="keywords" data-cy="keywords-input" editable="true">
+      <app-chip-list-input
+        [formGroup]="form"
+        controlName="keywords"
+        data-cy="keywords-input"
         [validators]="keywordsValidators">
       </app-chip-list-input>
     </form>