metric checkin error handling should work properly now

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

@@ -8,16 +8,16 @@
             <input
               class="dialog-form-field pe-0"
               [attr.data-testId]="'check-in-metric-value'"
-              [ngClass]="formInputCheck(dialogForm, 'value')"
-              formControlName="value"
+              [ngClass]="formInputCheck(dialogForm, 'metricValue')"
+              formControlName="metricValue"
               id="value"
             />
           </div>
 
           <span class="okr-form-label col-auto h-fit ps-0">{{ generateUnitLabel() }}</span>
         </form>
       </div>
-      <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'value')">
+      <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'metricValue')">
         <span>{{ getErrorMessage("MUST_BE_NUMBER", "Neuer Wert") }}</span>
       </mat-error>
     </div>

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

@@ -29,7 +29,7 @@ export class CheckInFormMetricComponent implements OnInit {
   constructor(private translate: TranslateService) {}
 
   ngOnInit() {
-    this.dialogForm.controls['value'].setValidators([Validators.required,
+    this.dialogForm.controls['metricValue'].setValidators([Validators.required,
       Validators.pattern('^\\s*-?\\d+\\.?\\d*\\s*$')]);
   }
 

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

@@ -2,7 +2,7 @@
   <div class="okr-form-row okr-form-label-input-container">
     <label class="okr-form-label okr-form-col" for="ordinal-radio-group">Erreichte Zone wählen:</label>
     <mat-radio-group
-      formControlName="value"
+      formControlName="ordinalZone"
       class="d-flex flex-column gap-2"
       id="ordinal-radio-group"
     >

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

@@ -14,6 +14,7 @@ import { CheckIn } from '../../../shared/types/model/check-in';
 import { CheckInMetricMin } from '../../../shared/types/model/check-in-metric-min';
 import { CheckInOrdinalMin } from '../../../shared/types/model/check-in-ordinal-min';
 import { BehaviorSubject } from 'rxjs';
+import { Zone } from '../../../shared/types/enums/zone';
 
 @Component({
   selector: 'app-check-in-form',
@@ -34,7 +35,8 @@ export class CheckInFormComponent implements OnInit {
   isAddingAction = false;
 
   dialogForm = new FormGroup({
-    value: new FormControl<string>('', [Validators.required]),
+    metricValue: new FormControl<number | undefined>(undefined, [Validators.required]),
+    ordinalZone: new FormControl<Zone>(Zone.COMMIT, [Validators.required]),
     confidence: new FormControl<number>(5, [Validators.required,
       Validators.min(0),
       Validators.max(10)]),
@@ -43,6 +45,9 @@ export class CheckInFormComponent implements OnInit {
     actionList: new FormControl<Action[]>([])
   });
 
+  checkInTypes: string[] = ['metricValue',
+    'ordinalZone'];
+
   protected readonly formInputCheck = formInputCheck;
 
   protected readonly hasFormFieldErrors = hasFormFieldErrors;
@@ -57,6 +62,7 @@ export class CheckInFormComponent implements OnInit {
     this.currentDate = new Date();
     this.keyResult = data.keyResult;
     this.setDefaultValues();
+    this.setValidators(this.keyResult.keyResultType);
   }
 
   ngOnInit() {
@@ -74,7 +80,9 @@ export class CheckInFormComponent implements OnInit {
     this.dialogForm.controls.actionList.setValue(this.keyResult.actionList);
     if (this.data.checkIn != null) {
       this.checkIn = this.data.checkIn;
-      this.dialogForm.controls.value.setValue(this.getCheckInValue());
+      this.keyResult.keyResultType === 'metric'
+        ? this.dialogForm.controls.metricValue.setValue(Number.parseFloat(this.getCheckInValue()))
+        : this.dialogForm.controls.ordinalZone.setValue(this.valueToZone(this.getCheckInValue())!);
       this.dialogForm.controls.confidence.setValue(this.checkIn.confidence);
       this.dialogForm.controls.changeInfo.setValue(this.checkIn.changeInfo);
       this.dialogForm.controls.initiatives.setValue(this.checkIn.initiatives);
@@ -115,7 +123,8 @@ export class CheckInFormComponent implements OnInit {
     };
     const checkIn: CheckIn = {
       ...baseCheckIn,
-      [this.keyResult.keyResultType === 'ordinal' ? 'zone' : 'value']: this.dialogForm.controls.value.value
+      [this.keyResult.keyResultType === 'ordinal' ? 'zone' : 'value']:
+      this.dialogForm.controls[this.keyResult.keyResultType === 'ordinal' ? 'ordinalZone' : 'metricValue'].value
     };
 
     this.checkInService.saveCheckIn(checkIn)
@@ -178,4 +187,20 @@ export class CheckInFormComponent implements OnInit {
     this.dialogForm.patchValue({ actionList: actionList });
     this.isAddingAction = false;
   }
+
+  setValidators(type: string) {
+    this.checkInTypes.map((e) => this.dialogForm.get(e))
+      .forEach((e) => e?.disable({ emitEvent: false }));
+    this.dialogForm.get(this.checkInTypes.filter((formName) => formName.includes(type)))
+      ?.enable({ emitEvent: false });
+  }
+
+  valueToZone(value: string) {
+    for (const zone in Zone) {
+      if (zone === value) {
+        return zone as Zone;
+      }
+    }
+    return;
+  }
 }

frontend/src/app/components/key-result-dialog/key-result-dialog.component.ts

@@ -98,20 +98,6 @@ export class KeyResultDialogComponent implements OnInit {
       .forEach((e) => e?.disable({ emitEvent: false }));
     this.keyResultForm.get(type)
       ?.enable({ emitEvent: false });
-    /*
-     * if (type == 'metric') {
-     *   this.keyResultForm.get('metric')
-     *     ?.enable({ emitEvent: false });
-     *   this.keyResultForm.get('ordinal')
-     *     ?.disable({ emitEvent: false });
-     * }
-     * if (type == 'ordinal') {
-     *   this.keyResultForm.get('metric')
-     *     ?.disable({ emitEvent: false });
-     *   this.keyResultForm.get('ordinal')
-     *     ?.enable({ emitEvent: false });
-     * }
-     */
   }
 
   ngOnInit(): void {