Add new directive for metric checkin form

frontend/src/app/app.module.ts

@@ -68,6 +68,7 @@ import { CheckInFormComponent } from './components/checkin/check-in-form/check-i
 import { ApplicationTopBarComponent } from './components/application-top-bar/application-top-bar.component';
 import { A11yModule } from '@angular/cdk/a11y';
 import { CustomizationService } from './services/customization.service';
+import { MetricCheckInDirective } from './components/checkin/check-in-form-metric/MetricCheckInDirective';
 
 function initOauthFactory(configService: ConfigService, oauthService: OAuthService) {
   return async () => {
@@ -123,6 +124,7 @@ export const MY_FORMATS = {
     CheckInFormMetricComponent,
     CheckInFormOrdinalComponent,
     CheckInFormComponent,
+    MetricCheckInDirective,
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

frontend/src/app/components/checkin/check-in-form-metric/MetricCheckInDirective.ts

@@ -0,0 +1,38 @@
+import { Directive, HostListener, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Directive({
+  selector: '[metricCheckIn]',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MetricCheckInDirective),
+      multi: true,
+    },
+  ],
+})
+export class MetricCheckInDirective implements ControlValueAccessor {
+  private onChange: (value: number | null) => void = () => {};
+  protected readonly CHAR_REGEX = /[^0-9.]/g;
+
+  writeValue(value: any): void {
+    // does not need to be implemented because the display value does not need to be modified
+  }
+
+  registerOnChange(fn: (value: number | null) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    // does not need to be implemented
+  }
+
+  @HostListener('input', ['$event.target.value'])
+  handleInput(param: string): void {
+    const value: string = param || '0';
+    if (value.toString().at(0) == '-') {
+      this.onChange(+('-' + value.toString().replace(this.CHAR_REGEX, '')));
+    }
+    this.onChange(Number(value.toString().replace(this.CHAR_REGEX, '')));
+  }
+}

frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html

@@ -11,6 +11,7 @@
               [ngClass]="formInputCheck(dialogForm, 'value')"
               formControlName="value"
               id="value"
+              metricCheckIn
             />
           </div>
 

frontend/src/app/components/checkin/check-in-form/check-in-form.component.ts

@@ -85,16 +85,7 @@ export class CheckInFormComponent implements OnInit {
       version: this.checkIn.version,
       keyResultId: this.keyResult.id,
     };
-    if (this.keyResult.keyResultType === 'metric') {
-      checkIn = {
-        ...this.dialogForm.value,
-        value: this.parseUnitValue(this.dialogForm.controls['value'].value),
-        keyResultId: this.keyResult.id,
-        id: this.checkIn.id,
-        version: this.checkIn.version,
-      };
-    }
-
+    console.log(checkIn);
     this.checkInService.saveCheckIn(checkIn).subscribe(() => {
       this.actionService.updateActions(this.dialogForm.value.actionList!).subscribe(() => {
         this.dialogRef.close();