[Task Editor] Improve rendering performance

web/src/app/components/shared/task-editor/task-condition-form/task-condition-form.component.ts

@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
-import { Component, Input, Pipe, PipeTransform } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Pipe,
+  PipeTransform,
+} from '@angular/core';
 import { AbstractControl, FormArray, FormGroup } from '@angular/forms';
 import { List } from 'immutable';
 
@@ -23,7 +29,6 @@ import { Task } from 'app/models/task/task.model';
 
 @Pipe({
   name: 'getTaskOptions',
-  pure: false,
   standalone: false,
 })
 export class TaskOptionsPipe implements PipeTransform {
@@ -40,6 +45,7 @@ export class TaskOptionsPipe implements PipeTransform {
   templateUrl: './task-condition-form.component.html',
   styleUrls: ['./task-condition-form.component.scss'],
   standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TaskConditionFormComponent {
   @Input() formGroup!: FormGroup;

web/src/app/components/shared/task-editor/task-editor.component.html

@@ -19,8 +19,9 @@
 
   <div
     class="task-container"
-    *ngFor="let formGroup of formArray.controls; let i = index;"
+    *ngFor="let formGroup of formArray.controls; let i = index; trackBy: trackByTaskId"
     [ngClass]="{'loi-task-container': formGroup.get('addLoiTask').value || formGroup.get('condition')}"
+    (click)="onTaskContainerClick(i, $event)"
   >
     <div *ngIf="formGroup.get('addLoiTask').value" class="loi-task-label">
       <ng-container i18n="@@app.texts.whenAdding"
@@ -40,6 +41,8 @@
       [formGroup]="formGroup"
       [formGroupIndex]="i"
       [isCreationMode]="isCreationMode()"
+      [expanded]="expandedIndex() === i"
+      (expand)="expandedIndex.set(i)"
       (delete)="onTaskDelete(i)"
       (duplicate)="onTaskDuplicate(i)"
       (toggleCondition)="onTaskConditionToggle(i)"

web/src/app/components/shared/task-editor/task-editor.component.ts

@@ -15,7 +15,15 @@
  */
 
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { Component, EventEmitter, Input, Output, input } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Output,
+  effect,
+  input,
+  signal,
+} from '@angular/core';
 import {
   AbstractControl,
   FormArray,
@@ -92,7 +100,7 @@ export const taskTypeToGroup = new Map([
 export class TaskEditorComponent {
   formGroup!: FormGroup;
 
-  @Input() tasks?: List<Task>;
+  tasks = input<List<Task>>();
   isCreationMode = input<boolean>(false);
 
   @Output() onValidationChanges: EventEmitter<boolean> =
@@ -106,36 +114,47 @@ export class TaskEditorComponent {
     TaskGroup.CAPTURE_LOCATION,
   ];
 
+  multipleChoiceTasks = List<Task>();
+
+  expandedIndex = signal<number | null>(null);
+
   constructor(
     private dataStoreService: DataStoreService,
     private dialogService: DialogService,
     private taskService: TaskService,
     private formBuilder: FormBuilder
-  ) {}
-
-  multipleChoiceTasks = List<Task>();
+  ) {
+    effect(() => {
+      this.formGroup = this.formBuilder.group({
+        tasks: this.formBuilder.array(
+          this.tasks()?.toArray().map((task: Task) => this.toControl(task)) ||
+            [],
+          Validators.required
+        ),
+      }) as FormGroup;
+
+      this.formGroup.statusChanges.subscribe(_ => {
+        this.onValidationChanges.emit(this.formGroup?.valid);
+      });
 
-  ngOnChanges(): void {
-    this.formGroup = this.formBuilder.group({
-      tasks: this.formBuilder.array(
-        this.tasks?.toArray().map((task: Task) => this.toControl(task)) || [],
-        Validators.required
-      ),
-    }) as FormGroup;
+      this.formGroup.valueChanges.subscribe(_ => {
+        this.multipleChoiceTasks = this.toTasks();
+        this.onValueChanges.emit(this.formGroup?.valid);
+      });
 
-    this.formGroup.statusChanges.subscribe(_ => {
       this.onValidationChanges.emit(this.formGroup?.valid);
-    });
-
-    this.formGroup.valueChanges.subscribe(_ => {
       this.multipleChoiceTasks = this.toTasks();
-
-      this.onValueChanges.emit(this.formGroup?.valid);
     });
+  }
 
-    this.onValidationChanges.emit(this.formGroup?.valid);
+  @HostListener('document:click')
+  onDocumentClick(): void {
+    this.expandedIndex.set(null);
+  }
 
-    this.multipleChoiceTasks = this.toTasks();
+  onTaskContainerClick(index: number, event: MouseEvent): void {
+    event.stopPropagation();
+    this.expandedIndex.set(index);
   }
 
   get formArray() {
@@ -306,4 +325,8 @@ export class TaskEditorComponent {
   toTasks(): List<Task> {
     return List(this.formArray.controls.map((_, i: number) => this.toTask(i)));
   }
+
+  trackByTaskId(_index: number, control: AbstractControl): string {
+    return control.get('id')?.value;
+  }
 }

web/src/app/components/shared/task-editor/task-form/task-form.component.html

@@ -14,7 +14,7 @@
   limitations under the License.
 -->
 
-<form [formGroup]="formGroup" class="task-input" [ngClass]="{'selected': expanded}" cdkDrag>
+<form [formGroup]="formGroup" class="task-input" [ngClass]="{'selected': expanded()}" cdkDrag>
   <mat-icon class="drag-icon" cdkDragHandle>drag_handle</mat-icon>
 
   <div class="task-toolbar">

web/src/app/components/shared/task-editor/task-form/task-form.component.ts

@@ -18,9 +18,9 @@ import '@angular/localize/init';
 
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import {
+  ChangeDetectionStrategy,
   Component,
   EventEmitter,
-  HostListener,
   Input,
   Output,
   input,
@@ -156,21 +156,19 @@ const AddLoiTaskGroups = List([TaskGroup.DROP_PIN, TaskGroup.DRAW_AREA]);
   templateUrl: './task-form.component.html',
   styleUrls: ['./task-form.component.scss'],
   standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TaskFormComponent {
   @Input() formGroup!: FormGroup;
   @Input() formGroupIndex!: number;
   isCreationMode = input<boolean>(false);
 
+  expanded = input<boolean>(false);
+
   @Output() delete = new EventEmitter();
   @Output() duplicate = new EventEmitter();
   @Output() toggleCondition = new EventEmitter();
-
-  /** When expanded, options and actions below the fold are visible to the user. */
-  expanded: boolean;
-
-  /** Set to true when question gets focus, false when it loses focus. */
-  selected: boolean;
+  @Output() expand = new EventEmitter<void>();
 
   addLoiTask?: boolean;
 
@@ -200,21 +198,10 @@ export class TaskFormComponent {
     public dialog: MatDialog,
     private dataStoreService: DataStoreService,
     private formBuilder: FormBuilder
-  ) {
-    this.expanded = false;
-    this.selected = false;
-  }
+  ) {}
 
-  @HostListener('click')
   onTaskFocus() {
-    this.expanded = true;
-    this.selected = true;
-  }
-
-  @HostListener('document:click')
-  onTaskBlur() {
-    if (!this.selected) this.expanded = false;
-    this.selected = false;
+    this.expand.emit();
   }
 
   ngOnInit(): void {