From b7b627d9ce3fa5b6732543e93029415e3d6e9474 Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Mon, 27 Jan 2025 10:30:47 +0100
Subject: [PATCH] refactor action plan

---
 .../action-plan/action-plan.component.html    |  38 ++--
 .../action-plan/action-plan.component.spec.ts |   2 +-
 .../action-plan/action-plan.component.ts      | 176 ++++++++----------
 .../check-in-form.component.html              |   4 +-
 .../check-in-form/check-in-form.component.ts  |  47 +++--
 .../key-result-dialog.component.ts            |  31 ++-
 .../key-result-form.component.html            |   5 +-
 .../key-result-form.component.ts              |  52 ++----
 .../objective/objective-menu-actions.ts       |  36 ++--
 .../objective-menu-actions.service.ts         |   8 +-
 frontend/src/app/shared/common.ts             |  23 +++
 frontend/src/app/shared/constant-library.ts   |  13 +-
 frontend/src/app/shared/test-data.ts          |   2 +-
 .../src/app/shared/types/model/key-result.ts  |   2 +-
 14 files changed, 218 insertions(+), 221 deletions(-)

diff --git a/frontend/src/app/components/action-plan/action-plan.component.html b/frontend/src/app/components/action-plan/action-plan.component.html
index 55c2b3579b..698a0081e3 100644
--- a/frontend/src/app/components/action-plan/action-plan.component.html
+++ b/frontend/src/app/components/action-plan/action-plan.component.html
@@ -2,8 +2,7 @@
   <label for="action-list" class="okr-form-label">Action Plan (optional)</label>
   <div
     cdkDropList
-    *ngIf="control?.getValue()"
-    [cdkDropListData]="control | async"
+    *ngIf="this.form"
     (keydown.enter)="preventAddingNewItems($event)"
     class="okr-form-col d-flex flex-column gap-2"
     (cdkDropListDropped)="drop($event)"
@@ -11,37 +10,38 @@
   >
     <div
       class="action-point-item"
-      *ngFor="let action of (control | async)!; index as i; trackBy: trackByFn"
+      *ngFor="let item of getFormControlArray().controls!; index as i; trackBy: trackByFn"
+      [formGroupName]="i"
       cdkDrag
     >
       <div class="drag-drop-dots">
         <img
           cdkDragHandle
           class="icons"
-          src="../../../assets/icons/drag_indicator.svg"
+          src="assets/icons/drag_indicator.svg"
           alt="Drag indicator"
         />
       </div>
       <input
         #listItem
-        (keydown.arrowDown)="handleKeyDown($event, i)"
-        (keydown.arrowUp)="handleKeyDown($event, i)"
-        (focusin)="activeItem = i"
-        (input)="updateActionTexts(control.value!)"
+        (keydown.arrowUp)="changeItemPosition(i, i - 1)"
+        (keydown.arrowDown)="changeItemPosition(i, i + 1)"
         class="action-input"
-        [value]="action.action"
+        formControlName="item"
         [attr.data-testId]="'action-input'"
       />
-      <img
-        tabindex="0"
-        (keydown.tab)="increaseActiveItemWithTab()"
-        (keydown.shift.tab)="decreaseActiveItemWithShiftTab()"
+      <button
         (keydown.enter)="removeAction(i)"
-        class="icons bin-icon cursor-pointer focus-outline"
-        src="../../../assets/icons/delete-icon.svg"
-        alt="Delete bin"
         (click)="removeAction(i)"
-      />
+        class="btn btn-link"
+
+      ><img
+
+          class="icons bin-icon cursor-pointer focus-outline"
+          src="assets/icons/delete-icon.svg"
+          alt="Delete bin"
+        />
+      </button>
     </div>
   </div>
 
@@ -52,11 +52,11 @@
       class="fw-bold col-auto"
       id="add-action-button"
       [attr.data-testId]="'add-action-plan-line'"
-      (click)="addNewAction()"
+      (click)="addNewItem()"
     >
       <span class="d-flex align-items-center add-text">
         <img
-          src="../../../assets/icons/new-icon.svg"
+          src="assets/icons/new-icon.svg"
           alt="Add action icon"
           class="add-cross-button"
           id="add-action-icon"
diff --git a/frontend/src/app/components/action-plan/action-plan.component.spec.ts b/frontend/src/app/components/action-plan/action-plan.component.spec.ts
index 9997c5df08..b078aafc1e 100644
--- a/frontend/src/app/components/action-plan/action-plan.component.spec.ts
+++ b/frontend/src/app/components/action-plan/action-plan.component.spec.ts
@@ -95,7 +95,7 @@ describe('ActionPlanComponent', () => {
   it('should add new action with empty text into array', () => {
     component.control = new BehaviorSubject<Action[] | null>([]);
     component.keyResultId = addedAction.keyResultId;
-    component.addNewAction();
+    component.addNewItem();
     expect(component.control.getValue())
       .toHaveLength(1);
     expect(component.control.getValue()![0])
diff --git a/frontend/src/app/components/action-plan/action-plan.component.ts b/frontend/src/app/components/action-plan/action-plan.component.ts
index ea2e0d0e3c..43f12524ee 100644
--- a/frontend/src/app/components/action-plan/action-plan.component.ts
+++ b/frontend/src/app/components/action-plan/action-plan.component.ts
@@ -1,138 +1,102 @@
-import { Component, ElementRef, Input, QueryList, ViewChildren } from '@angular/core';
-import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { AfterContentInit, Component, ElementRef, Input, QueryList, ViewChildren } from '@angular/core';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Action } from '../../shared/types/model/action';
 import { ActionService } from '../../services/action.service';
-import { BehaviorSubject } from 'rxjs';
 import { trackByFn } from '../../shared/common';
 import { DialogService } from '../../services/dialog.service';
+import {
+  AbstractControl,
+  ControlContainer,
+  FormArray,
+  FormArrayName,
+  FormControl,
+  FormGroup,
+  FormGroupDirective
+} from '@angular/forms';
+import { Observable } from 'rxjs';
+
+export type FormControlsOf<T> = {
+  [P in keyof T]: AbstractControl<T[P]>;
+};
+
+export interface Item {
+  id: number | undefined;
+  item: string;
+  isChecked: boolean;
+}
 
 @Component({
   selector: 'app-action-plan',
   templateUrl: './action-plan.component.html',
   styleUrls: ['./action-plan.component.scss'],
-  standalone: false
+  standalone: false,
+  viewProviders: [{ provide: ControlContainer,
+    useExisting: FormArrayName }]
 })
-export class ActionPlanComponent {
-  @Input() control: BehaviorSubject<Action[] | null> = new BehaviorSubject<Action[] | null>([]);
-
-  @Input() keyResultId?: number;
+export class ActionPlanComponent implements AfterContentInit {
+  form?: FormGroup;
 
-  activeItem = 0;
+  @Input() onDelete: (index: number) => Observable<any> = () => new Observable();
 
   @ViewChildren('listItem')
   listItems!: QueryList<ElementRef>;
 
-  constructor(private actionService: ActionService,
-    public dialogService: DialogService) {
-  }
-
-  handleKeyDown(event: Event, currentIndex: number) {
-    let newIndex = currentIndex;
-    if ((event as KeyboardEvent).key === 'ArrowDown') {
-      if (newIndex + 1 <= this.control.getValue()!.length - 1) {
-        newIndex += 1;
-      }
-    } else if ((event as KeyboardEvent).key === 'ArrowUp') {
-      if (newIndex - 1 >= 0) {
-        newIndex -= 1;
-      }
-    }
-    this.changeItemPosition(newIndex, currentIndex);
-    this.listItems.get(this.activeItem)?.nativeElement.focus();
-  }
-
-  changeItemPosition(newIndex: number, currentIndex: number) {
-    this.activeItem = newIndex;
-    const currentActionPlan: Action[] = this.control.getValue()!;
-    this.updateActionTexts(currentActionPlan);
-    moveItemInArray(currentActionPlan, currentIndex, newIndex);
-    currentActionPlan.forEach((action: Action, index: number) => action.priority = index);
-    this.control.next(currentActionPlan);
-  }
-
-  updateActionTexts(currentActionPlan: Action[]) {
-    const texts = Array.from(this.listItems)
-      .map((input: any) => input.nativeElement.value);
-    currentActionPlan.forEach((action: Action, index: number) => action.action = texts[index]);
-  }
-
-  increaseActiveItemWithTab() {
-    if (this.activeItem <= this.control.getValue()!.length - 2) {
-      this.activeItem++;
-    }
+  constructor(
+    private actionService: ActionService,
+    public dialogService: DialogService, private parentF: FormGroupDirective, private formArrayNameF: FormArrayName
+  ) {
   }
 
-  decreaseActiveItemWithShiftTab() {
-    if (this.activeItem > 0) {
-      this.activeItem--;
-    }
+  changeItemPosition(currentIndex: number, newIndex: number) {
+    const value = this.getFormControlArray().value as Item[];
+    moveItemInArray(value, currentIndex, newIndex);
+    this.getFormControlArray()
+      .setValue(value);
+    this.focusItem(newIndex);
   }
 
   drop(event: CdkDragDrop<Action[] | null>) {
-    const value: string = (event.container.element.nativeElement.children[event.previousIndex].children[1] as HTMLInputElement).value;
-    const actions: Action[] = this.control.getValue()!;
-    if (actions[event.previousIndex].action == '' && value != '') {
-      actions[event.previousIndex] = {
-        ...actions[event.previousIndex],
-        action: value
-      };
-      this.control.next(actions);
-    }
-    if (event.previousContainer === event.container) {
-      moveItemInArray(event.container.data!, event.previousIndex, event.currentIndex);
-    } else {
-      transferArrayItem(
-        event.previousContainer.data!, event.container.data!, event.previousIndex, event.currentIndex
-      );
-    }
-    this.adjustPriorities();
-    this.activeItem = event.currentIndex;
+    this.changeItemPosition(event.previousIndex, event.currentIndex);
   }
 
-  adjustPriorities() {
-    const actions: Action[] = this.control.getValue()!;
-    actions.forEach(function(action: Action, index: number) {
-      action.priority = index;
-    });
-    this.control.next(actions);
+  focusItem(index: number) {
+    this.listItems.get(index)?.nativeElement.focus();
+    this.listItems.get(index)?.nativeElement.scrollIntoView();
   }
 
   removeAction(index: number) {
-    const actions: Action[] = this.control.getValue()!;
-    if (this.activeItem == index && this.activeItem > 0) {
-      this.activeItem--;
-    }
-    if (actions[index].action !== '' || actions[index].id) {
+    const itemGroup = this.getFormControlArray()
+      .at(index) as FormGroup;
+    const itemValue = itemGroup.get('item')?.value;
+    const itemId = itemGroup.get('id')?.value;
+
+    if (itemValue !== '' || itemId) {
       this.dialogService
         .openConfirmDialog('CONFIRMATION.DELETE.ACTION')
         .afterClosed()
         .subscribe((result) => {
           if (result) {
-            if (actions[index].id) {
-              this.actionService.deleteAction(actions[index].id)
-                .subscribe();
-            }
-            actions.splice(index, 1);
-            this.control.next(actions);
-            this.adjustPriorities();
+            this.getFormControlArray()
+              .removeAt(index);
+
+            this.onDelete(itemId)
+              .subscribe();
           }
         });
     } else {
-      actions.splice(index, 1);
-      this.control.next(actions);
-      this.adjustPriorities();
+      this.getFormControlArray()
+        .removeAt(index);
     }
   }
 
-  addNewAction() {
-    const actions: Action[] = this.control.getValue()!;
-    actions.push({
-      action: '',
-      priority: actions.length,
-      keyResultId: this.keyResultId
-    } as Action);
-    this.control.next(actions);
-    this.activeItem = actions.length - 1;
+  addNewItem() {
+    const newFormGroup = new FormGroup({
+      item: new FormControl<string>(''),
+      id: new FormControl<number | undefined>(undefined),
+      isChecked: new FormControl<boolean>(false)
+    } as FormControlsOf<Item>);
+    this.getFormControlArray()
+      ?.push(newFormGroup);
   }
 
   /*
@@ -144,4 +108,18 @@ export class ActionPlanComponent {
   }
 
   protected readonly trackByFn = trackByFn;
+
+  getFormControlArray() {
+    return this.form?.get(`${this.formArrayNameF.name}`) as FormArray<FormGroup<FormControlsOf<Item>>>;
+  }
+
+  ngAfterContentInit(): void {
+    this.form = this.parentF.form;
+    if (this.getFormControlArray()
+      ?.getRawValue().length === 0) {
+      this.addNewItem();
+      this.addNewItem();
+      this.addNewItem();
+    }
+  }
 }
diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
index 01f91d9e59..e485f4f412 100644
--- a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
+++ b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
@@ -48,7 +48,9 @@
       </div>
 
       <ng-template #actionPlanComponent>
-        <app-action-plan [control]="actionList$" [keyResultId]="keyResult.id"></app-action-plan>
+        <div formArrayName="arrayList">
+          <app-action-plan></app-action-plan>
+        </div>
         <button
           mat-flat-button
           color="primary"
diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.ts b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.ts
index ccdb6db3cf..f2bdb43e24 100644
--- a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.ts
+++ b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
 import { KeyResultMetric } from '../../../shared/types/model/key-result-metric';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { KeyResult } from '../../../shared/types/model/key-result';
 import { KeyResultOrdinal } from '../../../shared/types/model/key-result-ordinal';
@@ -8,13 +8,12 @@ import { CheckInMin } from '../../../shared/types/model/check-in-min';
 import { CheckInService } from '../../../services/check-in.service';
 import { Action } from '../../../shared/types/model/action';
 import { ActionService } from '../../../services/action.service';
-import { formInputCheck, hasFormFieldErrors } from '../../../shared/common';
+import { actionListToItemList, formInputCheck, hasFormFieldErrors, itemListToActionList } from '../../../shared/common';
 import { TranslateService } from '@ngx-translate/core';
 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 { FormControlsOf, Item } from '../../action-plan/action-plan.component';
 @Component({
   selector: 'app-check-in-form',
   templateUrl: './check-in-form.component.html',
@@ -29,8 +28,6 @@ export class CheckInFormComponent implements OnInit {
 
   currentDate: Date;
 
-  actionList$: BehaviorSubject<Action[] | null> = new BehaviorSubject<Action[] | null>([] as Action[]);
-
   isAddingAction = false;
 
   dialogForm = new FormGroup({
@@ -40,7 +37,7 @@ export class CheckInFormComponent implements OnInit {
       Validators.max(10)]),
     changeInfo: new FormControl<string>('', [Validators.maxLength(4096)]),
     initiatives: new FormControl<string>('', [Validators.maxLength(4096)]),
-    actionList: new FormControl<Action[]>([])
+    actionList: new FormArray<FormGroup<FormControlsOf<Item>>>([])
   });
 
   protected readonly formInputCheck = formInputCheck;
@@ -61,8 +58,8 @@ export class CheckInFormComponent implements OnInit {
 
   ngOnInit() {
     const actionList = this.keyResult.actionList;
-    this.actionList$.next(actionList);
-    this.dialogForm.patchValue({ actionList: actionList });
+    const items = actionListToItemList(actionList);
+    this.dialogForm.patchValue({ actionList: items });
   }
 
   getErrorMessage(error: string, field: string, maxLength: number): string {
@@ -71,7 +68,10 @@ export class CheckInFormComponent implements OnInit {
   }
 
   setDefaultValues() {
-    this.dialogForm.controls.actionList.setValue(this.keyResult.actionList);
+    actionListToItemList(this.keyResult.actionList)
+      .forEach((e) => {
+        this.addNewItem(e);
+      });
     if (this.data.checkIn != null) {
       this.checkIn = this.data.checkIn;
       this.dialogForm.controls.value.setValue(this.getCheckInValue());
@@ -102,8 +102,7 @@ export class CheckInFormComponent implements OnInit {
   saveCheckIn() {
     this.dialogForm.controls.confidence.setValue(this.checkIn.confidence);
 
-    const actionList: Action[] = this.actionList$.value as Action[];
-    this.dialogForm.patchValue({ actionList: actionList });
+    const actionList: Action[] = this.getActions();
 
     const baseCheckIn: any = {
       id: this.checkIn.id,
@@ -120,7 +119,7 @@ export class CheckInFormComponent implements OnInit {
 
     this.checkInService.saveCheckIn(checkIn)
       .subscribe(() => {
-        this.actionService.updateActions(this.dialogForm.value.actionList!)
+        this.actionService.updateActions(actionList)
           .subscribe(() => {
             this.dialogRef.close();
           });
@@ -144,7 +143,7 @@ export class CheckInFormComponent implements OnInit {
   }
 
   getActions(): Action[] {
-    return this.dialogForm.controls['actionList'].value || [];
+    return itemListToActionList(this.dialogForm.getRawValue().actionList, this.keyResult.id);
   }
 
   changeIsChecked(event: any, index: number) {
@@ -161,21 +160,19 @@ export class CheckInFormComponent implements OnInit {
   }
 
   openActionEdit() {
-    const actionList: Action[] = this.actionList$.value as Action[];
-    actionList.push({
-      action: '',
-      priority: actionList.length,
-      keyResultId: this.keyResult.id
-    } as Action);
-    this.actionList$.next(actionList);
     this.isAddingAction = true;
   }
 
   closeActionEdit() {
-    let actionList: Action[] = this.actionList$.value as Action[];
-    actionList = actionList.filter((action) => action.action.trim() != '');
-    this.actionList$.next(actionList);
-    this.dialogForm.patchValue({ actionList: actionList });
     this.isAddingAction = false;
   }
+
+  addNewItem(item: Item) {
+    const newFormGroup = new FormGroup({
+      item: new FormControl<string>(item.item),
+      id: new FormControl<number | undefined>(item.id),
+      isChecked: new FormControl<boolean>(item.isChecked)
+    } as FormControlsOf<Item>);
+    (this.dialogForm.get('actionList') as FormArray)?.push(newFormGroup);
+  }
 }
diff --git a/frontend/src/app/components/key-result-dialog/key-result-dialog.component.ts b/frontend/src/app/components/key-result-dialog/key-result-dialog.component.ts
index 508ed16135..12ab9624eb 100644
--- a/frontend/src/app/components/key-result-dialog/key-result-dialog.component.ts
+++ b/frontend/src/app/components/key-result-dialog/key-result-dialog.component.ts
@@ -10,6 +10,7 @@ import { KeyResultService } from '../../services/key-result.service';
 import { DialogService } from '../../services/dialog.service';
 import { getKeyResultForm } from '../../shared/constant-library';
 import { UserService } from '../../services/user.service';
+import { KeyResultDto } from '../../shared/types/DTOs/key-result-dto';
 
 
 @Component({
@@ -36,28 +37,24 @@ export class KeyResultDialogComponent implements OnInit {
     return this.keyResultForm.controls['keyResultType'].value === 'metric';
   }
 
+  saveActionPoints() {
+
+  }
+
   saveKeyResult(openNewDialog = false) {
-    const valueWithType = this.keyResultForm.value;
-    // Disable to get Value without Type
-    this.keyResultForm.controls['metric'].disable();
-    this.keyResultForm.controls['ordinal'].disable();
-    const valueWithoutType = this.keyResultForm.value;
-    // reEnable
     this.keyResultForm.controls['metric'].enable();
     this.keyResultForm.controls['ordinal'].enable();
-    const keyResult = this.isMetricKeyResult()
-      ? ({
-        ...valueWithoutType,
-        ...valueWithType.metric,
-        objective: this.data.objective
-      } as KeyResultMetricDto)
-      : ({
-        ...valueWithoutType,
-        ...valueWithType.ordinal,
-        objective: this.data.objective
-      } as KeyResultOrdinalDto);
+    let keyResult: KeyResultDto = this.keyResultForm.value;
+
+    if (this.isMetricKeyResult()) {
+      keyResult = keyResult as KeyResultMetricDto;
+    } else {
+      keyResult = keyResult as KeyResultOrdinalDto;
+    }
+    keyResult.objective = this.data.objective;
     keyResult.id = this.data.keyResult?.id;
     keyResult.version = this.data.keyResult?.version;
+
     this.keyResultService.saveKeyResult(keyResult)
       .subscribe((returnValue) => {
         this.dialogRef.close({
diff --git a/frontend/src/app/components/key-result-form/key-result-form.component.html b/frontend/src/app/components/key-result-form/key-result-form.component.html
index f3052b5240..2294ceae3e 100644
--- a/frontend/src/app/components/key-result-form/key-result-form.component.html
+++ b/frontend/src/app/components/key-result-form/key-result-form.component.html
@@ -34,5 +34,8 @@
     </div>
   </div>
 
-  <app-action-plan [control]="actionList$" [keyResultId]="keyResult?.id"></app-action-plan>
+
+  <div formArrayName="actionList">
+    <app-action-plan [onDelete]="actionPlanOnDelete"></app-action-plan>
+  </div>
 </form>
diff --git a/frontend/src/app/components/key-result-form/key-result-form.component.ts b/frontend/src/app/components/key-result-form/key-result-form.component.ts
index 642d97e33b..bb1e2d9090 100644
--- a/frontend/src/app/components/key-result-form/key-result-form.component.ts
+++ b/frontend/src/app/components/key-result-form/key-result-form.component.ts
@@ -1,14 +1,15 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { getFullNameOfUser, User } from '../../shared/types/model/user';
 import { KeyResult } from '../../shared/types/model/key-result';
 import { KeyResultMetric } from '../../shared/types/model/key-result-metric';
 import { KeyResultOrdinal } from '../../shared/types/model/key-result-ordinal';
-import { BehaviorSubject, filter, map, Observable, of, startWith, switchMap } from 'rxjs';
+import { filter, map, Observable, of, startWith, switchMap } from 'rxjs';
 import { UserService } from '../../services/user.service';
-import { Action } from '../../shared/types/model/action';
-import { formInputCheck, hasFormFieldErrors } from '../../shared/common';
+import { actionListToItemList, formInputCheck, hasFormFieldErrors } from '../../shared/common';
 import { TranslateService } from '@ngx-translate/core';
+import { ActionService } from '../../services/action.service';
+import { FormControlsOf, Item } from '../action-plan/action-plan.component';
 
 @Component({
   selector: 'app-key-result-form',
@@ -21,7 +22,7 @@ export class KeyResultFormComponent implements OnInit {
 
   filteredUsers$: Observable<User[]> = of([]);
 
-  actionList$: BehaviorSubject<Action[] | null> = new BehaviorSubject<Action[] | null>([] as Action[]);
+  actionPlanOnDelete = (index: number): Observable<any> => this.actionService.deleteAction(index);
 
   protected readonly formInputCheck = formInputCheck;
 
@@ -35,7 +36,7 @@ export class KeyResultFormComponent implements OnInit {
   keyResult?: KeyResult;
 
   constructor(public userService: UserService,
-    private translate: TranslateService) {
+    private translate: TranslateService, public actionService: ActionService) {
   }
 
   ngOnInit(): void {
@@ -47,33 +48,11 @@ export class KeyResultFormComponent implements OnInit {
       this.isMetricKeyResult()
         ? this.setMetricValuesInForm(this.keyResult as KeyResultMetric)
         : this.setOrdinalValuesInForm(this.keyResult as KeyResultOrdinal);
-
-      this.actionList$ = new BehaviorSubject<Action[] | null>(this.keyResult.actionList);
-    }
-    if (!this.keyResult) {
-      this.actionList$ = new BehaviorSubject<Action[] | null>([{ id: null,
-        version: 1,
-        action: '',
-        priority: 0,
-        keyResultId: undefined,
-        isChecked: false },
-      { id: null,
-        version: 1,
-        action: '',
-        priority: 1,
-        keyResultId: undefined,
-        isChecked: false },
-      { id: null,
-        version: 1,
-        action: '',
-        priority: 2,
-        keyResultId: undefined,
-        isChecked: false }]);
+      actionListToItemList(this.keyResult.actionList)
+        .forEach((e) => {
+          this.addNewItem(e);
+        });
     }
-
-    this.actionList$.subscribe((value) => {
-      this.keyResultForm.patchValue({ actionList: value });
-    });
   }
 
   isMetricKeyResult() {
@@ -100,4 +79,13 @@ export class KeyResultFormComponent implements OnInit {
   getFullNameOfLoggedInUser() {
     return getFullNameOfUser(this.userService.getCurrentUser());
   }
+
+  addNewItem(item: Item) {
+    const newFormGroup = new FormGroup({
+      item: new FormControl<string>(item.item),
+      id: new FormControl<number | undefined>(item.id),
+      isChecked: new FormControl<boolean>(item.isChecked)
+    } as FormControlsOf<Item>);
+    (this.keyResultForm.get('actionList') as FormArray)?.push(newFormGroup);
+  }
 }
diff --git a/frontend/src/app/components/objective/objective-menu-actions.ts b/frontend/src/app/components/objective/objective-menu-actions.ts
index db1088cc7e..b287d32d2a 100644
--- a/frontend/src/app/components/objective/objective-menu-actions.ts
+++ b/frontend/src/app/components/objective/objective-menu-actions.ts
@@ -4,8 +4,8 @@ import { ObjectiveMin } from '../../shared/types/model/objective-min';
 import { ObjectiveFormComponent } from '../../shared/dialog/objective-dialog/objective-form.component';
 import { CompleteDialogComponent } from '../../shared/dialog/complete-dialog/complete-dialog.component';
 import {
-  ObjectiveMenuAction,
-  ObjectiveMenuAfterAction,
+  MenuAction,
+  MenuAfterAction,
   ObjectiveMenuEntry
 } from '../../services/objective-menu-actions.service';
 import { ObjectiveMenuAfterActions } from './objective-menu-after-actions';
@@ -16,8 +16,8 @@ export class ObjectiveMenuActions {
     private readonly afterActions: ObjectiveMenuAfterActions) {}
 
   releaseFromQuarterAction(): ObjectiveMenuEntry {
-    const action: ObjectiveMenuAction = () => this.dialogService.openConfirmDialog('CONFIRMATION.RELEASE');
-    const afterAction: ObjectiveMenuAfterAction = (objective: ObjectiveMin) => this.afterActions.releaseFromQuarter(objective);
+    const action: MenuAction = () => this.dialogService.openConfirmDialog('CONFIRMATION.RELEASE');
+    const afterAction: MenuAfterAction<ObjectiveMin> = (objective: ObjectiveMin) => this.afterActions.releaseFromQuarter(objective);
     return { displayName: 'Objective veröffentlichen',
       action: action,
       afterAction: afterAction };
@@ -26,8 +26,8 @@ export class ObjectiveMenuActions {
   releaseFromBacklogAction(objective: ObjectiveMin): ObjectiveMenuEntry {
     const config = { data: { objective: { objectiveId: objective.id },
       action: 'releaseBacklog' } };
-    const action: ObjectiveMenuAction = () => this.dialogService.open(ObjectiveFormComponent, config);
-    const afterAction: ObjectiveMenuAfterAction = () => this.refreshDataService.markDataRefresh();
+    const action: MenuAction = () => this.dialogService.open(ObjectiveFormComponent, config);
+    const afterAction: MenuAfterAction<ObjectiveMin> = () => this.refreshDataService.markDataRefresh();
     return { displayName: 'Objective veröffentlichen',
       action: action,
       afterAction };
@@ -35,8 +35,8 @@ export class ObjectiveMenuActions {
 
   editObjectiveAction(objective: ObjectiveMin): ObjectiveMenuEntry {
     const config = { data: { objective: { objectiveId: objective.id } } };
-    const action: ObjectiveMenuAction = () => this.dialogService.open(ObjectiveFormComponent, config);
-    const afterAction: ObjectiveMenuAfterAction = () => {
+    const action: MenuAction = () => this.dialogService.open(ObjectiveFormComponent, config);
+    const afterAction: MenuAfterAction<ObjectiveMin> = () => {
       this.refreshDataService.markDataRefresh();
     };
     return { displayName: 'Objective bearbeiten',
@@ -47,16 +47,16 @@ export class ObjectiveMenuActions {
   duplicateObjectiveAction(objective: ObjectiveMin): ObjectiveMenuEntry {
     const config = { data: { objective: { objectiveId: objective.id },
       action: 'duplicate' } };
-    const action: ObjectiveMenuAction = () => this.dialogService.open(ObjectiveFormComponent, config);
-    const afterAction: ObjectiveMenuAfterAction = () => this.refreshDataService.markDataRefresh();
+    const action: MenuAction = () => this.dialogService.open(ObjectiveFormComponent, config);
+    const afterAction: MenuAfterAction<ObjectiveMin> = () => this.refreshDataService.markDataRefresh();
     return { displayName: 'Objective duplizieren',
       action: action,
       afterAction: afterAction };
   }
 
   deleteObjectiveAction(): ObjectiveMenuEntry {
-    const action: ObjectiveMenuAction = () => this.dialogService.openConfirmDialog('CONFIRMATION.DELETE.OBJECTIVE');
-    const afterAction: ObjectiveMenuAfterAction = (objective, dialogResult) => this.afterActions.deleteObjective(objective);
+    const action: MenuAction = () => this.dialogService.openConfirmDialog('CONFIRMATION.DELETE.OBJECTIVE');
+    const afterAction: MenuAfterAction<ObjectiveMin> = (objective, dialogResult) => this.afterActions.deleteObjective(objective);
     return { displayName: 'Objective löschen',
       action: action,
       afterAction: afterAction };
@@ -66,8 +66,8 @@ export class ObjectiveMenuActions {
     const config = {
       data: { objectiveTitle: objective.title }
     };
-    const action: ObjectiveMenuAction = () => this.dialogService.open(CompleteDialogComponent, config);
-    const afterAction: ObjectiveMenuAfterAction = (obj: ObjectiveMin, result: any) => this.afterActions.completeObjective(obj, result);
+    const action: MenuAction = () => this.dialogService.open(CompleteDialogComponent, config);
+    const afterAction: MenuAfterAction<ObjectiveMin> = (obj: ObjectiveMin, result: any) => this.afterActions.completeObjective(obj, result);
 
     return { displayName: 'Objective abschliessen',
       action: action,
@@ -75,8 +75,8 @@ export class ObjectiveMenuActions {
   }
 
   objectiveBackToDraft(): ObjectiveMenuEntry {
-    const action: ObjectiveMenuAction = () => this.dialogService.openConfirmDialog('CONFIRMATION.TO_DRAFT');
-    const afterAction: ObjectiveMenuAfterAction = (obj: ObjectiveMin) => this.afterActions.objectiveBackToDraft(obj);
+    const action: MenuAction = () => this.dialogService.openConfirmDialog('CONFIRMATION.TO_DRAFT');
+    const afterAction: MenuAfterAction<ObjectiveMin> = (obj: ObjectiveMin) => this.afterActions.objectiveBackToDraft(obj);
 
     return { displayName: 'Objective als Draft speichern',
       action: action,
@@ -84,8 +84,8 @@ export class ObjectiveMenuActions {
   }
 
   objectiveReopen(): ObjectiveMenuEntry {
-    const action: ObjectiveMenuAction = () => this.dialogService.openConfirmDialog('CONFIRMATION.REOPEN');
-    const afterAction: ObjectiveMenuAfterAction = (obj: ObjectiveMin) => this.afterActions.objectiveReopen(obj);
+    const action: MenuAction = () => this.dialogService.openConfirmDialog('CONFIRMATION.REOPEN');
+    const afterAction: MenuAfterAction<ObjectiveMin> = (obj: ObjectiveMin) => this.afterActions.objectiveReopen(obj);
 
     return { displayName: 'Objective wiedereröffnen',
       action: action,
diff --git a/frontend/src/app/services/objective-menu-actions.service.ts b/frontend/src/app/services/objective-menu-actions.service.ts
index a86eb9651f..7012ec9cfa 100644
--- a/frontend/src/app/services/objective-menu-actions.service.ts
+++ b/frontend/src/app/services/objective-menu-actions.service.ts
@@ -10,13 +10,13 @@ import { ObjectiveMenuActions } from '../components/objective/objective-menu-act
 import { GJ_REGEX_PATTERN } from '../shared/constant-library';
 import { CompletedService } from './completed.service';
 
-export type ObjectiveMenuAction = () => MatDialogRef<any>;
-export type ObjectiveMenuAfterAction = (objective: ObjectiveMin, dialogResult: any) => any;
+export type MenuAction = () => MatDialogRef<any>;
+export type MenuAfterAction<T> = (objective: T, dialogResult: any) => any;
 
 export interface ObjectiveMenuEntry {
   displayName: string;
-  action: ObjectiveMenuAction;
-  afterAction: ObjectiveMenuAfterAction;
+  action: MenuAction;
+  afterAction: MenuAfterAction<ObjectiveMin>;
 }
 
 @Injectable({
diff --git a/frontend/src/app/shared/common.ts b/frontend/src/app/shared/common.ts
index e409a18ad3..ebb207a2ac 100644
--- a/frontend/src/app/shared/common.ts
+++ b/frontend/src/app/shared/common.ts
@@ -1,6 +1,8 @@
 import { FormGroup } from '@angular/forms';
 import { KeyResultMetricMin } from './types/model/key-result-metric-min';
 import { State } from './types/enums/state';
+import { Action } from './types/model/action';
+import { Item } from '../components/action-plan/action-plan.component';
 
 export function getNumberOrNull(str: string | null | undefined): number | null {
   if (str === null || str === undefined || str.toString()
@@ -143,3 +145,24 @@ export function getValueOfForm(form: FormGroup, keys: string[]) {
   }
   return currentControl.value;
 }
+
+export function actionListToItemList(actionList: Action[]): Item[] {
+  return actionList.map((action) => {
+    return { id: action.id,
+      item: action.action,
+      isChecked: action.isChecked } as Item;
+  });
+}
+
+export function itemListToActionList(itemList: Item[], keyResultId: number): Action[] {
+  return itemList.map((item: Item, index) => {
+    return {
+      id: item.id,
+      action: item.item,
+      priority: index,
+      keyResultId: keyResultId,
+      isChecked: false
+    } as Action;
+  });
+}
+
diff --git a/frontend/src/app/shared/constant-library.ts b/frontend/src/app/shared/constant-library.ts
index a5c002d38a..31bd9c1742 100644
--- a/frontend/src/app/shared/constant-library.ts
+++ b/frontend/src/app/shared/constant-library.ts
@@ -1,9 +1,18 @@
 import { HttpType } from './types/enums/http-type';
 import { ToasterType } from './types/enums/toaster-type';
 import { HttpStatusCode } from '@angular/common/http';
-import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import {
+  AbstractControl,
+  FormArray,
+  FormControl,
+  FormGroup,
+  ValidationErrors,
+  ValidatorFn,
+  Validators
+} from '@angular/forms';
 import { Unit } from './types/enums/unit';
 import { getFullNameOfUser, User } from './types/model/user';
+import { FormControlsOf, Item } from '../components/action-plan/action-plan.component';
 
 type MessageKeyMap = Record<string, MessageEntry>;
 
@@ -89,7 +98,7 @@ export function getKeyResultForm(): FormGroup {
     owner: new FormControl<User>({} as User, [Validators.required,
       Validators.nullValidator,
       ownerValidator()]),
-    actionList: new FormControl([]),
+    actionList: new FormArray<FormGroup<FormControlsOf<Item>>>([]),
     keyResultType: new FormControl('metric'),
     metric: new FormGroup({
       unit: new FormControl<Unit>(Unit.NUMBER, [Validators.required]),
diff --git a/frontend/src/app/shared/test-data.ts b/frontend/src/app/shared/test-data.ts
index f84147dd56..ebc93047f6 100644
--- a/frontend/src/app/shared/test-data.ts
+++ b/frontend/src/app/shared/test-data.ts
@@ -475,7 +475,7 @@ export const keyResult: KeyResultOrdinal = {
   } as CheckInOrdinal,
   createdOn: new Date(),
   modifiedOn: new Date(),
-  actionList: null,
+  actionList: [],
   isWriteable: true
 };
 
diff --git a/frontend/src/app/shared/types/model/key-result.ts b/frontend/src/app/shared/types/model/key-result.ts
index a8bb613b29..a1ccf88318 100644
--- a/frontend/src/app/shared/types/model/key-result.ts
+++ b/frontend/src/app/shared/types/model/key-result.ts
@@ -14,7 +14,7 @@ export interface KeyResult {
   objective: KeyResultObjective;
   createdOn: Date;
   modifiedOn: Date;
-  actionList: Action[] | null;
+  actionList: Action[];
   lastCheckIn: CheckIn | null;
   isWriteable: boolean;
 }