Add focus building blocks in bm phase process edit

src/app/development-processes/bm-phase-process-board-column/bm-phase-process-board-column.component.ts

@@ -72,6 +72,16 @@ export class BmPhaseProcessBoardColumnComponent implements OnChanges {
     }
   }
 
+  focusElement(nodeId: string): void {
+    const index = this.phaseMethodDecisions.findIndex(
+      (phaseMethodDecision) => phaseMethodDecision.id === nodeId
+    );
+    if (index === -1) {
+      return;
+    }
+    this.page = Math.floor(index / this.pageSize) + 1;
+  }
+
   trackBy(index: number, item: PhaseMethodDecision): string {
     return item.id;
   }

src/app/development-processes/bm-phase-process-board/bm-phase-process-board.component.ts

-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  ViewChildren,
+} from '@angular/core';
 import { PhaseDecision } from '../../development-process-registry/bm-process/phase-decision';
+import { BmPhaseProcessBoardColumnComponent } from '../bm-phase-process-board-column/bm-phase-process-board-column.component';
 
 @Component({
   selector: 'app-bm-phase-process-board',
@@ -30,6 +38,15 @@ export class BmPhaseProcessBoardComponent {
    */
   @Output() removeDecision = new EventEmitter<string>();
 
+  @ViewChildren(BmPhaseProcessBoardColumnComponent)
+  bmPhaseProcessBoardColumnComponents?: QueryList<BmPhaseProcessBoardColumnComponent>;
+
+  focusElement(nodeId: string): void {
+    this.bmPhaseProcessBoardColumnComponents?.forEach((component) =>
+      component.focusElement(nodeId)
+    );
+  }
+
   trackBy(index: number, item: PhaseDecision): string {
     return item.phase.id;
   }

src/app/development-processes/bm-phase-process-edit/bm-phase-process-edit.component.html

@@ -79,7 +79,7 @@
   </div>
 </ng-template>
 
-<div class="container-fluid">
+<div #processBoard class="container-fluid">
   <div class="my-3 p-3 bg-white rounded shadow-sm">
     <div class="d-flex align-items-baseline border-bottom border-gray mb-2">
       <h6 class="pb-2 mb-0">Phases</h6>
@@ -153,7 +153,10 @@
           <ul *ngIf="lowWarnings.length > 0">
             <li *ngFor="let warning of lowWarnings">
               Method
-              {{ warning.name }} in phase {{ warning.phase }}
+              <a [routerLink]="[]" (click)="focus(warning.id)">{{
+                warning.name
+              }}</a>
+              in phase {{ warning.phase }}
               has a too low value for the following factors
               <ul>
                 <li *ngFor="let factor of warning.situationalFactors">
@@ -176,7 +179,10 @@
           <ul *ngIf="incorrectWarnings.length > 0">
             <li *ngFor="let warning of incorrectWarnings">
               Method
-              {{ warning.name }} in phase {{ warning.phase }}
+              <a [routerLink]="[]" (click)="focus(warning.id)">{{
+                warning.name
+              }}</a>
+              in phase {{ warning.phase }}
               has an incorrect value for the following factors
               <ul>
                 <li *ngFor="let factor of warning.situationalFactors">
@@ -198,7 +204,10 @@
           <ul *ngIf="missingArtifacts.length > 0">
             <li *ngFor="let warning of missingArtifacts">
               Method
-              {{ warning.name }} in phase {{ warning.phase }}
+              <a [routerLink]="[]" (click)="focus(warning.id)">{{
+                warning.name
+              }}</a>
+              in phase {{ warning.phase }}
               is missing the following Artifacts
               <ul>
                 <li *ngFor="let artifact of warning.artifacts">

src/app/development-processes/bm-phase-process-edit/bm-phase-process-edit.component.ts

 import {
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnChanges,
@@ -19,6 +20,7 @@ import { MethodDecisionUpdate } from '../../development-process-registry/bm-proc
 import { SituationalFactor } from '../../development-process-registry/method-elements/situational-factor/situational-factor';
 import { DevelopmentMethodSummaryModal } from '../development-method-summary-modal/development-method-summary-modal';
 import { DevelopmentMethodSummaryModalComponent } from '../development-method-summary-modal/development-method-summary-modal.component';
+import { BmPhaseProcessBoardComponent } from '../bm-phase-process-board/bm-phase-process-board.component';
 
 @Component({
   selector: 'app-bm-phase-process-edit',
@@ -50,16 +52,19 @@ export class BmPhaseProcessEditComponent implements OnChanges {
   executionOrder?: PhaseMethodDecision[];
 
   lowWarnings: {
+    id: string;
     phase: string;
     name: string;
     situationalFactors: string[];
   }[] = [];
   incorrectWarnings: {
+    id: string;
     phase: string;
     name: string;
     situationalFactors: string[];
   }[] = [];
   missingArtifacts: {
+    id: string;
     phase: string;
     name: string;
     artifacts: Artifact[];
@@ -70,8 +75,12 @@ export class BmPhaseProcessEditComponent implements OnChanges {
   modalPhaseMethodDecision?: PhaseMethodDecision;
   private modalReference?: NgbModalRef;
 
+  @ViewChild(BmPhaseProcessBoardComponent)
+  bmPhaseProcessBoardComponent?: BmPhaseProcessBoardComponent;
   @ViewChild('methodEditModal', { static: true }) methodEditModal: unknown;
   @ViewChild('phasesEditModal') phaseEditModal: unknown;
+  @ViewChild('processBoard')
+  processBoard?: ElementRef<HTMLDivElement>;
   @ViewChild('selectDevelopmentMethodModal')
   selectDevelopmentMethodModal: unknown;
 
@@ -108,6 +117,11 @@ export class BmPhaseProcessEditComponent implements OnChanges {
     }
   }
 
+  focus(nodeId: string): void {
+    this.bmPhaseProcessBoardComponent?.focusElement(nodeId);
+    this.processBoard?.nativeElement.scrollIntoView({ behavior: 'smooth' });
+  }
+
   openEditPhasesModal(): void {
     this.modalService.open(this.phaseEditModal, {
       size: 'lg',
@@ -194,17 +208,20 @@ export class BmPhaseProcessEditComponent implements OnChanges {
 
   checkWarnings(): void {
     const lowWarnings: {
+      id: string;
       phase: string;
       name: string;
       situationalFactors: string[];
     }[] = [];
     const incorrectWarnings: {
+      id: string;
       phase: string;
       name: string;
       situationalFactors: string[];
     }[] = [];
 
     const generateWarnings = (
+      id: string,
       phase: string,
       name: string,
       factors: SituationalFactor[]
@@ -215,6 +232,7 @@ export class BmPhaseProcessEditComponent implements OnChanges {
       );
       if (low.length > 0) {
         lowWarnings.push({
+          id,
           phase,
           name,
           situationalFactors: low.map((factor) => factor.factor.name),
@@ -222,6 +240,7 @@ export class BmPhaseProcessEditComponent implements OnChanges {
       }
       if (incorrect.length > 0) {
         incorrectWarnings.push({
+          id,
           phase,
           name,
           situationalFactors: incorrect.map((factor) => factor.factor.name),
@@ -231,6 +250,7 @@ export class BmPhaseProcessEditComponent implements OnChanges {
 
     this.bmProcess.getAllPhaseMethodDecisions().forEach((phaseMethodDecision) =>
       generateWarnings(
+        phaseMethodDecision.id,
         phaseMethodDecision.phaseDecision.phase.name,
         phaseMethodDecision.decision.method.name,
         phaseMethodDecision.decision.method.situationalFactors.map(
@@ -250,6 +270,7 @@ export class BmPhaseProcessEditComponent implements OnChanges {
     );
     this.missingArtifacts = missingArtifacts.map((missingArtifact) => {
       return {
+        id: missingArtifact.phaseMethodDecision.id,
         phase: missingArtifact.phaseMethodDecision.phaseDecision.phase.name,
         name: missingArtifact.phaseMethodDecision.decision.method.name,
         artifacts: missingArtifact.missingArtifacts,