fix: auto completion not working correctly #1571

Author: nevio18324

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

@@ -230,9 +230,9 @@ describe('KeyResultTypeComponent', () => {
     KeyResultMetricField.STRETCH_GOAL]])('Should call calculateValueForField with the correct enum', (values: MetricValue, changed: KeyResultMetricField, result: KeyResultMetricField) => {
       const spyInstance = jest.spyOn(component, 'calculateValueForField');
 
-      component.calculateValueAfterChanged(values, changed);
+      component.calculateValueAfterChanged(values, changed, component.keyResultForm);
       expect(spyInstance)
-        .toHaveBeenCalledWith(values, result);
+        .toHaveBeenCalledWith(values, result, component.keyResultForm);
     });
 
     it.each([
@@ -341,7 +341,7 @@ describe('KeyResultTypeComponent', () => {
       { stretchGoal: 5,
         commitValue: -2 }]
     ])('calculateValueForField should calculate correct', (values: MetricValue, targetField: KeyResultMetricField, result: any) => {
-      expect(component.calculateValueForField(values, targetField))
+      expect(component.calculateValueForField(values, targetField, component.keyResultForm))
         .toEqual(result);
     });
 

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 });
   }
 
@@ -96,14 +97,14 @@ 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_VALUE);
+        return this.calculateValueForField(values, KeyResultMetricField.TARGET_VALUE, formGroupMetric);
       }
       case KeyResultMetricField.TARGET_VALUE: {
-        return this.calculateValueForField(values, KeyResultMetricField.STRETCH_GOAL);
+        return this.calculateValueForField(values, KeyResultMetricField.STRETCH_GOAL, formGroupMetric);
       }
 
       case KeyResultMetricField.NONE: {
@@ -112,22 +113,25 @@ export class KeyResultTypeComponent implements AfterContentInit {
     }
   }
 
-  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');
         const baseline = roundToTwoDecimals((values.targetValue - values.stretchGoal * 0.7) / 0.3);
         return { baseline: baseline,
           commitValue: roundToTwoDecimals((values.stretchGoal - baseline) * 0.3 + baseline) };
       }
 
       case KeyResultMetricField.TARGET_VALUE: {
+        this.setFormControlValueToZero(formGroupMetric, 'targetGoal');
         return { targetValue: roundToTwoDecimals((values.stretchGoal - values.baseline) * 0.7 + values.baseline),
           commitValue: roundToTwoDecimals((values.stretchGoal - values.baseline) * 0.3 + values.baseline) };
       }
 
       case KeyResultMetricField.STRETCH_GOAL: {
+        this.setFormControlValueToZero(formGroupMetric, 'stretchGoal');
         const stretchGoal = roundToTwoDecimals((values.targetValue - values.baseline) / 0.7 + values.baseline);
         return { stretchGoal: stretchGoal,
           commitValue: roundToTwoDecimals((stretchGoal - values.baseline) * 0.3 + values.baseline) };
@@ -139,6 +143,13 @@ export class KeyResultTypeComponent implements AfterContentInit {
     }
   }
 
+  setFormControlValueToZero(formGroupMetric: any, formControl: string) {
+    if (formGroupMetric.get(formControl) && !formGroupMetric.get(formControl).value) {
+      formGroupMetric.get(formControl)
+        .setValue(0, { emitEvent: false });
+    }
+  }
+
   protected readonly getFullNameOfUser = getFullNameOfUser;