fix bug that did not let you delete action plans with set value

frontend/cypress/e2e/check-in.cy.ts

@@ -431,7 +431,7 @@ describe('okr check-in', () => {
       .click();
   });
 
-  it.skip('should be able to check actions of the action plan when creating a check-in', () => {
+  it('should be able to check actions of the action plan when creating a check-in', () => {
     keyResultDetailPage.visit('This key-result will be used for testing the action plan while creating check-ins');
 
     keyResultDetailPage.createCheckIn()
@@ -449,7 +449,7 @@ describe('okr check-in', () => {
       .should('exist');
   });
 
-  it.skip('should not save action plan changes when check-in is not saved', () => {
+  it('should not save action plan changes when check-in is not saved', () => {
     keyResultDetailPage.visit('This key-result will be used for testing the action plan while creating check-ins');
 
     keyResultDetailPage.createCheckIn()

frontend/src/app/components/action-plan/action-plan.component.html

@@ -12,7 +12,7 @@
   >
     <div
       class="container-fluid"
-      *ngFor="let item of getFormControlArray().controls!; index as i; trackBy: trackByFn"
+      *ngFor="let item of getFormControlArray().controls!; index as i; trackBy: identity"
       [formGroupName]="i"
       cdkDrag
       [cdkDragDisabled]="!movable"

frontend/src/app/components/action-plan/action-plan.component.ts

@@ -1,6 +1,12 @@
-import { AfterContentInit, Component, ElementRef, Input, QueryList, ViewChildren } from '@angular/core';
+import {
+  AfterContentInit, ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { trackByFn } from '../../shared/common';
 import { DialogService } from '../../services/dialog.service';
 import {
   AbstractControl,
@@ -10,7 +16,7 @@ import {
   FormControl,
   FormGroup
 } from '@angular/forms';
-import { Observable, ReplaySubject } from 'rxjs';
+import { identity, Observable, ReplaySubject } from 'rxjs';
 
 export type FormControlsOf<T> = {
   [P in keyof T]: AbstractControl<T[P]>;
@@ -40,7 +46,7 @@ export class ActionPlanComponent implements AfterContentInit {
 
   @Input() addItemSubject: ReplaySubject<Item | undefined> = new ReplaySubject<Item | undefined>();
 
-  constructor(public dialogService: DialogService, private formArrayNameF: FormArrayName) {
+  constructor(public dialogService: DialogService, private formArrayNameF: FormArrayName, private cdRef: ChangeDetectorRef) {
   }
 
   changeItemPosition(currentIndex: number, newIndex: number) {
@@ -76,6 +82,13 @@ export class ActionPlanComponent implements AfterContentInit {
           if (result) {
             this.getFormControlArray()
               .removeAt(index);
+            const rawValue = this.getFormControlArray()
+              .getRawValue() as Item[];
+            this.getFormControlArray()
+              .clear();
+            this.cdRef.detectChanges();
+            rawValue.forEach((t) => this.addNewItem(t));
+            this.cdRef.detectChanges();
             if (item.id && this.onDelete) {
               this.onDelete(item.id)
                 .subscribe();
@@ -106,13 +119,13 @@ export class ActionPlanComponent implements AfterContentInit {
     event.preventDefault();
   }
 
-  protected readonly trackByFn = trackByFn;
-
   getFormControlArray() {
     return this.formArrayNameF.control as FormArray<FormGroup<FormControlsOf<Item>>>;
   }
 
   ngAfterContentInit(): void {
     this.addItemSubject.subscribe((item) => this.addNewItem(item));
   }
+
+  protected readonly identity = identity;
 }