fix: auto completion not working when either stretchgoal or targetgoal is undefined #1571

Author: nevio18324

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

@@ -75,15 +75,16 @@ export class KeyResultTypeComponent implements AfterContentInit {
   updateMetricValue(changed: KeyResultMetricField, value: any) {
     const formGroupMetric = this.keyResultForm.get('metric');
     formGroupMetric?.updateValueAndValidity();
+    const formGroupValue = this.getMetricValue(formGroupMetric?.value, value);
+    const newMetricValue = this.calculateValueAfterChanged(formGroupValue, changed, formGroupMetric);
 
     const hasUndefinedValue = Object.values(value)
       .some((v) => v === undefined);
     if (hasUndefinedValue || formGroupMetric?.invalid) {
       return;
     }
 
-    const formGroupValue = this.getMetricValue(formGroupMetric?.value, value);
-    const newMetricValue = this.calculateValueAfterChanged(formGroupValue, changed);
+
     formGroupMetric?.patchValue(newMetricValue, { emitEvent: false });
   }
 
@@ -95,34 +96,37 @@ export class KeyResultTypeComponent implements AfterContentInit {
       stretchGoal: +formGroupValue.stretchGoal } as MetricValue;
   }
 
-  calculateValueAfterChanged(values: MetricValue, changed: KeyResultMetricField) {
+  calculateValueAfterChanged(values: MetricValue, changed: KeyResultMetricField, formGroupMetric: any) {
     switch (changed) {
       case KeyResultMetricField.STRETCH_GOAL:
       case KeyResultMetricField.BASELINE: {
-        return this.calculateValueForField(values, KeyResultMetricField.TARGET_GOAL);
+        return this.calculateValueForField(values, KeyResultMetricField.TARGET_GOAL, formGroupMetric);
       }
       case KeyResultMetricField.TARGET_GOAL: {
-        return this.calculateValueForField(values, KeyResultMetricField.STRETCH_GOAL);
+        return this.calculateValueForField(values, KeyResultMetricField.STRETCH_GOAL, formGroupMetric);
       }
       case KeyResultMetricField.NONE: {
         return {};
       }
     }
   }
 
-  calculateValueForField(values: MetricValue, field: KeyResultMetricField) {
+  calculateValueForField(values: MetricValue, field: KeyResultMetricField, formGroupMetric: any) {
     const roundToTwoDecimals = (num: number) => parseFloat(num.toFixed(2));
 
     switch (field) {
       case KeyResultMetricField.BASELINE: {
+        this.setFormControlValueToZero(formGroupMetric, 'baseline');
         return { baseline: roundToTwoDecimals((values.targetGoal - values.stretchGoal * 0.7) / 0.3) };
       }
 
       case KeyResultMetricField.TARGET_GOAL: {
+        this.setFormControlValueToZero(formGroupMetric, 'targetGoal');
         return { targetGoal: roundToTwoDecimals((values.stretchGoal - values.baseline) * 0.7 + values.baseline) };
       }
 
       case KeyResultMetricField.STRETCH_GOAL: {
+        this.setFormControlValueToZero(formGroupMetric, 'stretchGoal');
         return { stretchGoal: roundToTwoDecimals((values.targetGoal - values.baseline) / 0.7 + values.baseline) };
       }
 
@@ -132,6 +136,13 @@ export class KeyResultTypeComponent implements AfterContentInit {
     }
   }
 
+  setFormControlValueToZero(formGroupMetric: any, form_control: string) {
+    if (!formGroupMetric.get(form_control).value) {
+      formGroupMetric.get(form_control)
+        .setValue(0, { emitEvent: false });
+    }
+  }
+
   protected readonly getFullNameOfUser = getFullNameOfUser;