Add pre-populated questionnaire matches

Author: alopezo

skills/lforms-fhir-questionnaire.md

@@ -95,6 +95,7 @@ <h3>Submitting ICSR Report...</h3>
                   <app-questionnaire-form
                     [questionnaire]="getQuestionnaire(selectedForm)"
                     [questionnaireId]="selectedForm"
+                    [patientId]="patient?.id ?? null"
                     (formSubmitted)="onQuestionnaireSubmitted($event)"
                     (formCancelled)="onFormCancelled()">
                   </app-questionnaire-form>

src/app/benefits-demo/clinical-forms/clinical-forms.component.html

@@ -450,7 +450,6 @@ export class ClinicalRecordComponent implements OnInit, OnDestroy, AfterViewInit
   }
 
   async loadClinicalData(patientId: string): Promise<void> {
-    console.trace(`[loadClinicalData] called for patient ${patientId}`);
     if (this.patientService.getCurrentPersistenceMode() === 'fhir') {
       this.isLoadingClinicalData = true;
 

src/app/benefits-demo/clinical-record/clinical-record.component.ts

@@ -60,6 +60,26 @@
   font-weight: 500;
 }
 
+.pre-populated-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  background-color: #e8f5e9;
+  color: #2e7d32;
+  border: 1px solid #a5d6a7;
+}
+
+.pre-populated-badge mat-icon {
+  font-size: 15px;
+  width: 15px;
+  height: 15px;
+  line-height: 15px;
+}
+
 .lforms-container {
   margin: 24px 0;
   min-height: 200px;

src/app/benefits-demo/questionnaire-form/questionnaire-form.component.css

@@ -12,6 +12,12 @@ <h3>{{ questionnaire.title }}</h3>
         @if (questionnaire.version) {
           <span class="version-info">v{{ questionnaire.version }}</span>
         }
+        @if (isPrePopulated) {
+          <span class="pre-populated-badge">
+            <mat-icon>auto_fix_high</mat-icon>
+            Pre-populated from patient record
+          </span>
+        }
       </div>
     </div>
   }

src/app/benefits-demo/questionnaire-form/questionnaire-form.component.html

@@ -1,4 +1,6 @@
 import { Component, Input, OnChanges, SimpleChanges, EventEmitter, Output, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { SdcPopulationService } from '../../services/sdc-population.service';
+import { FhirService } from '../../services/fhir.service';
 
 declare var LForms: any;
 
@@ -11,14 +13,20 @@ declare var LForms: any;
 export class QuestionnaireFormComponent implements OnChanges, AfterViewInit {
   @Input() questionnaire: any = null;
   @Input() questionnaireId: string = '';
+  @Input() patientId: string | null = null;
   @Output() formSubmitted = new EventEmitter<any>();
   @Output() formCancelled = new EventEmitter<void>();
 
   formRendered = false;
+  isPrePopulated = false;
   formContainerId = '';
   private lformsLoaded = false;
 
-  constructor(private cdr: ChangeDetectorRef) {
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private sdcPopulationService: SdcPopulationService,
+    private fhirService: FhirService
+  ) {
     // Generate unique container ID for this component instance
     this.formContainerId = `questionnaire-form-${Math.random().toString(36).substr(2, 9)}`;
     // Load LForms library if not already loaded
@@ -63,7 +71,7 @@ export class QuestionnaireFormComponent implements OnChanges, AfterViewInit {
     document.head.appendChild(script);
   }
 
-  renderForm(): void {
+  async renderForm(): Promise<void> {
     if (!this.questionnaire) {
       this.formRendered = false;
       return;
@@ -75,26 +83,50 @@ export class QuestionnaireFormComponent implements OnChanges, AfterViewInit {
     }
 
     try {
-      // Check if container exists
       const container = document.getElementById(this.formContainerId);
       if (!container) {
         this.formRendered = false;
         return;
       }
-      
-      // Clear any existing form first
+
       container.innerHTML = '';
-      
-      // Render the questionnaire using LForms
-      // Use setTimeout to ensure the container is fully cleared
+
+      let populatedQR: any = null;
+      if (this.patientId) {
+        try {
+          populatedQR = this.sdcPopulationService.populate(this.questionnaire, this.patientId);
+        } catch {
+          // Pre-population failure must never block form rendering
+        }
+      }
+
       setTimeout(() => {
         try {
-          LForms.Util.addFormToPage(this.questionnaire, this.formContainerId);
+          if (populatedQR) {
+            // Merge approach: convert questionnaire to LForms internal format first,
+            // then merge the QR into it before rendering. This is the correct LForms
+            // API for pre-population — addFormToPage options do not apply QR answers.
+            if (typeof LForms.Util.setFHIRContext === 'function') {
+              LForms.Util.setFHIRContext({ baseUrl: this.fhirService.getBaseUrl() });
+            }
+            const lfData = LForms.Util.convertFHIRQuestionnaireToLForms(this.questionnaire, 'R4');
+            const merged = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', populatedQR, lfData, 'R4');
+            LForms.Util.addFormToPage(merged, this.formContainerId);
+          } else {
+            LForms.Util.addFormToPage(this.questionnaire, this.formContainerId);
+          }
           this.formRendered = true;
-          // Trigger change detection to update the view
+          this.isPrePopulated = !!populatedQR;
           this.cdr.detectChanges();
         } catch (innerError) {
-          this.formRendered = false;
+          // If merge/render fails, fall back to plain render without pre-population
+          try {
+            LForms.Util.addFormToPage(this.questionnaire, this.formContainerId);
+            this.formRendered = true;
+          } catch {
+            this.formRendered = false;
+          }
+          this.isPrePopulated = false;
           this.cdr.detectChanges();
         }
       }, 100);