KPAs exclusion functional

src/app/maturity/maturity-main/maturity-main.component.html

@@ -2,7 +2,7 @@
     <input hidden (change)="uploadFile($event)" #fileInput type="file" id="file" />
     <button mat-flat-button color="accent" (click)="fileInput.click()">Load Maturity Spec</button>
 </div>
-<div class="question-flow-container" *ngIf="currentQuestionIndex === -1">
+<div class="question-flow-container" *ngIf="currentQuestionIndex === -2">
     <div class="question-container" [formGroup]="responseForm">
     <h2>Select Stakeholder</h2>
     <div class="flex flex-row gap-4 justify-end flex-wrap p-2">
@@ -42,7 +42,35 @@ <h2>Stakeholder Description</h2>
     </div>
   </div>
 </div>
-
+
+<div class="question-flow-container" *ngIf="currentQuestionIndex === -1">
+    <div class="question-container" [formGroup]="responseForm" *ngIf="currentQuestionIndex < allQuestions.length">
+        <h2>Stakeholder: {{ nameControl.value }} ({{ allQuestions[currentQuestionIndex + 1].stakeholderName }})</h2>
+
+        <section class="example-section mt-10">
+            <h4>Select Relevant Key Process Areas:</h4>
+            <div *ngFor="let kpa of currentKpas">
+              <mat-checkbox 
+                *ngIf="getKpaControl(kpa.id)" 
+                [formControl]="getKpaControl(kpa.id)">
+                {{ kpa.name }}
+              </mat-checkbox>
+            </div>
+          </section>
+
+        <div class="button-container">
+            <button mat-flat-button color="primary" (click)="filterKpasAndGoNext()" [disabled]="currentControl.invalid" *ngIf="currentQuestionIndex < allQuestions.length - 1">
+                Next
+            </button>
+        </div>
+        <div class="button-container">
+            <button mat-flat-button color="primary" (click)="startOver()">
+                Restart assessment
+            </button>
+        </div>
+    </div>
+</div>
+
 <div class="question-flow-container" *ngIf="currentQuestionIndex >= 0 && currentQuestionIndex < allQuestions.length">
     <div class="question-container" [formGroup]="responseForm" *ngIf="currentQuestionIndex < allQuestions.length">
         <h2>Stakeholder: {{ nameControl.value }} ({{ allQuestions[currentQuestionIndex].stakeholderName }})</h2>

src/app/maturity/maturity-main/maturity-main.component.ts

@@ -29,13 +29,14 @@ export class MaturityMainComponent implements OnInit {
   maturityQuestions: any = {};
   responseForm: FormGroup;
   allQuestions: any[] = [];
-  currentQuestionIndex = -1;
+  currentQuestionIndex = -2;
   currentControl!: FormControl;
   nameControl!: FormControl;
   authorControl!: FormControl;
   timestampControl!: FormControl;
   selectedStakeholder: any = null;
   animationState = 'enter';
+  currentKpas: any[] = [];
 
   constructor(private http: HttpClient, private fb: FormBuilder, private dialog: MatDialog) {
     this.responseForm = this.fb.group({
@@ -59,7 +60,7 @@ export class MaturityMainComponent implements OnInit {
       selectedStakeholder: new FormControl(null, Validators.required),
       name: this.nameControl,
       author: this.authorControl,
-      timestamp: this.timestampControl
+      timestamp: this.timestampControl,
     });
     this.currentControl = this.responseForm.controls['selectedStakeholder'] as FormControl;
     this.maturityQuestions.stakeHolders.forEach((stakeholder: any) => {
@@ -78,13 +79,28 @@ export class MaturityMainComponent implements OnInit {
     setTimeout(() => {
       const stakeholderId = this.responseForm.get('selectedStakeholder')?.value;
       this.selectedStakeholder = this.getStakeHolder(stakeholderId);
+
+      // Prepare form group for the selected stakeholder KPAs
+      const kpaGroup = this.fb.group({});
+      this.selectedStakeholder.kpas.forEach((kpa: any) => {
+        kpaGroup.addControl(kpa.id, this.fb.control(true));
+      });
+      this.responseForm.addControl('selectedKpas', kpaGroup);
+
+      this.currentKpas = this.selectedStakeholder.kpas; // Store KPAs for template rendering
+
       this.flattenQuestions(); // Refilter questions for the selected stakeholder
-      this.currentQuestionIndex = 0; // Start showing the first question
-      this.currentControl = this.responseForm.controls[this.allQuestions[this.currentQuestionIndex].questionFullPath] as FormControl;
+      this.currentQuestionIndex++; // Move to select KPAs
+      // this.currentControl = this.responseForm.controls[this.allQuestions[1].questionFullPath] as FormControl;
       this.animationState = 'enter';
     }, 200); // Match the duration of the animation
   }
 
+  getKpaControl(kpaId: string): FormControl {
+    const selectedKpas = this.responseForm.get('selectedKpas') as FormGroup | null;
+    return selectedKpas?.get(kpaId) as FormControl;
+  }
+
   getStakeHolder(stakeholderId: string): any {
     const stakeholder = this.maturityQuestions.stakeHolders.find(
       (stakeholder: any) => stakeholder.id === stakeholderId
@@ -101,6 +117,7 @@ export class MaturityMainComponent implements OnInit {
           this.allQuestions.push({
             stakeholderName: this.selectedStakeholder.name,
             kpaName: kpa.name,
+            kpaId: kpa.id,
             question: question,
             questionFullPath: questionPath,
           });
@@ -109,6 +126,35 @@ export class MaturityMainComponent implements OnInit {
     }
   }
 
+  filterKpasAndGoNext(): void {
+    this.animationState = 'leave';
+    // Get the selected KPAs
+    const selectedKpas = this.responseForm.get('selectedKpas') as FormGroup;
+    const selectedKpaIds = Object.keys(selectedKpas.controls).filter(kpaId => selectedKpas.get(kpaId)?.value);
+    // Remove questions related to unselected KPAs from the responseForm
+    this.selectedStakeholder.kpas.forEach((kpa: any) => {
+      if (!selectedKpaIds.includes(kpa.id)) {
+        kpa.questions.forEach((question: any) => {
+          const questionPath = [this.selectedStakeholder.id, kpa.id, question.id].join('.');
+          if (this.responseForm.contains(questionPath)) {
+            this.responseForm.removeControl(questionPath); // Remove unselected question controls
+          }
+        });
+      }
+    });
+    // Filter `allQuestions` to only include questions from selected KPAs
+    this.allQuestions = this.allQuestions.filter((question: any) => selectedKpaIds.includes(question.kpaId));
+    // Move to the next question or step
+    setTimeout(() => {
+      this.currentQuestionIndex++;
+      if (this.allQuestions.length > 0) {
+        this.currentControl = this.responseForm.controls[this.allQuestions[this.currentQuestionIndex].questionFullPath] as FormControl;
+      }
+      this.animationState = 'enter';
+    }, 200); // Match the animation duration
+  }
+
+
   goToNextQuestion() {
     this.animationState = 'leave';
     setTimeout(() => {
@@ -128,7 +174,7 @@ export class MaturityMainComponent implements OnInit {
   }
 
   startOver(): void {
-    this.currentQuestionIndex = -1;
+    this.currentQuestionIndex = -2;
     // reset all responses
     this.responseForm.reset();
     this.currentControl = this.responseForm.controls['selectedStakeholder'] as FormControl;
@@ -167,6 +213,12 @@ export class MaturityMainComponent implements OnInit {
     return this.responseForm.get(stakeholderName) as FormGroup;
   }
 
+  getKpas(stakeholderName: string): any[] {
+    // return an array of KPA objects for the given stakeholder
+    const stakeholder = this.getStakeHolder(stakeholderName);
+    return stakeholder.kpas;
+  }
+
   getUnansweredCount(stakeholderName: string): number {
     let count = 0;
     const stakeholderGroup = this.responseForm.get(stakeholderName) as FormGroup;

src/app/maturity/maturity-results/maturity-results.component.ts

@@ -150,7 +150,7 @@ export class MaturityResultsComponent implements OnChanges, AfterViewInit {
   calculateOverallAverage(data: Record<string, any>): number {
     // Object to group values by KPA
     const kpas: { [key: string]: number[] } = {};
-    const excludedKeys = ['selectedStakeholder', 'name', 'author', 'timestamp'];
+    const excludedKeys = ['selectedStakeholder', 'name', 'author', 'timestamp', 'selectedKpas'];
 
     // Process the data to group scores by KPA
     for (const key in data) {
@@ -163,15 +163,19 @@ export class MaturityResultsComponent implements OnChanges, AfterViewInit {
       }
     }
 
-    // Calculate the average for each KPA
-    const kpaAverages = Object.keys(kpas).map(kpa => {
-      const values = kpas[kpa];
-      return values.reduce((sum, value) => sum + value, 0) / values.length;
-    });
+    // Calculate the average for each KPA, ignoring empty groups
+    const kpaAverages = Object.keys(kpas)
+      .filter(kpa => kpas[kpa].length > 0) // Ignore empty KPA groups
+      .map(kpa => {
+        const values = kpas[kpa];
+        return values.reduce((sum, value) => sum + value, 0) / values.length;
+      });
 
     // Calculate the overall average of the KPA averages
     const overallAverage =
-      kpaAverages.reduce((sum, avg) => sum + avg, 0) / kpaAverages.length;
+      kpaAverages.length > 0
+        ? kpaAverages.reduce((sum, avg) => sum + avg, 0) / kpaAverages.length
+        : 0; // Return 0 if no KPA averages exist
 
     return overallAverage;
   }