add autopreset feature

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

@@ -7,7 +7,6 @@
     class="okr-form-col d-flex flex-column gap-2"
     (cdkDropListDropped)="drop($event)"
     id="action-list"
-    formArrayName="{{ formArrayName }}"
   >
     <div
       class="action-point-item"

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

@@ -4,7 +4,15 @@ import { Action } from '../../shared/types/model/action';
 import { ActionService } from '../../services/action.service';
 import { trackByFn } from '../../shared/common';
 import { DialogService } from '../../services/dialog.service';
-import { AbstractControl, ControlContainer, FormArray, FormControl, FormGroup, FormGroupDirective } from '@angular/forms';
+import {
+  AbstractControl,
+  ControlContainer,
+  FormArray,
+  FormArrayName,
+  FormControl,
+  FormGroup,
+  FormGroupDirective
+} from '@angular/forms';
 
 export type FormControlsOf<T> = {
   [P in keyof T]: AbstractControl<T[P]>;
@@ -22,18 +30,20 @@ export interface Item {
   styleUrls: ['./action-plan.component.scss'],
   standalone: false,
   viewProviders: [{ provide: ControlContainer,
-    useExisting: FormGroupDirective }]
+    useExisting: FormArrayName }]
 })
 export class ActionPlanComponent implements AfterContentInit {
   form?: FormGroup;
 
-  @Input() formArrayName = '';
+  @Input() onDelete: (index: number) => void = () => {};
 
   @ViewChildren('listItem')
   listItems!: QueryList<ElementRef>;
 
-  constructor(private actionService: ActionService,
-    public dialogService: DialogService, private parentF: FormGroupDirective) {
+  constructor(
+    private actionService: ActionService,
+    public dialogService: DialogService, private parentF: FormGroupDirective, private formArrayNameF: FormArrayName
+  ) {
   }
 
   changeItemPosition(currentIndex: number, newIndex: number) {
@@ -67,6 +77,8 @@ export class ActionPlanComponent implements AfterContentInit {
           if (result) {
             this.getFormControlArray()
               .removeAt(index);
+
+            this.onDelete(index);
           }
         });
     } else {
@@ -96,12 +108,13 @@ export class ActionPlanComponent implements AfterContentInit {
   protected readonly trackByFn = trackByFn;
 
   getFormControlArray() {
-    return this.parentF.form?.get(this.formArrayName) as FormArray<FormGroup<FormControlsOf<Item>>>;
+    return this.form?.get(`${this.formArrayNameF.name}`) as FormArray<FormGroup<FormControlsOf<Item>>>;
   }
 
   ngAfterContentInit(): void {
     this.form = this.parentF.form;
-    if (this.getFormControlArray()?.length === 0) {
+    if (this.getFormControlArray()
+      ?.getRawValue().length === 0) {
       this.addNewItem();
       this.addNewItem();
       this.addNewItem();

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

@@ -48,7 +48,9 @@
       </div>
 
       <ng-template #actionPlanComponent>
-        <app-action-plan [formArrayName]="'actionList'"></app-action-plan>
+        <div formArrayName="arrayList">
+          <app-action-plan></app-action-plan>
+        </div>
         <button
           mat-flat-button
           color="primary"

frontend/src/app/components/key-result-form/key-result-form.component.html

@@ -34,5 +34,9 @@
     </div>
   </div>
 
-  <app-action-plan [formArrayName]="'actionList'"></app-action-plan>
+
+  <div formArrayName="actionList">
+    <app-action-plan [onDelete]="actionService.deleteAction"></app-action-plan>
+  </div>
+
 </form>

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

@@ -1,13 +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 { filter, map, Observable, of, startWith, switchMap } from 'rxjs';
 import { UserService } from '../../services/user.service';
-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',
@@ -33,7 +35,7 @@ export class KeyResultFormComponent implements OnInit {
   keyResult?: KeyResult;
 
   constructor(public userService: UserService,
-    private translate: TranslateService) {
+    private translate: TranslateService, public actionService: ActionService) {
   }
 
   ngOnInit(): void {
@@ -45,6 +47,10 @@ export class KeyResultFormComponent implements OnInit {
       this.isMetricKeyResult()
         ? this.setMetricValuesInForm(this.keyResult as KeyResultMetric)
         : this.setOrdinalValuesInForm(this.keyResult as KeyResultOrdinal);
+      actionListToItemList(this.keyResult.actionList)
+        .forEach((e) => {
+          this.addNewItem(e);
+        });
     }
   }
 
@@ -72,4 +78,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>(undefined),
+      isChecked: new FormControl<boolean>(false)
+    } as FormControlsOf<Item>);
+    (this.keyResultForm.get('actionList') as FormArray)?.push(newFormGroup);
+  }
 }

frontend/src/app/shared/common.ts

@@ -149,7 +149,8 @@ export function getValueOfForm(form: FormGroup, keys: string[]) {
 export function actionListToItemList(actionList: Action[]): Item[] {
   return actionList.map((action) => {
     return { id: action.id,
-      item: action.action } as Item;
+      item: action.action,
+      isChecked: action.isChecked } as Item;
   });
 }
 

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
 };