feat: amm-1830 infinite scroll for provisional diagnosis

pom.xml

@@ -5,7 +5,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>com.iemr.tm-ui</groupId>
   <artifactId>tm-ui</artifactId>
-  <version>3.4.0</version>
+  <version>3.5.0</version>
   <name>TM-UI</name>
   <description>Piramal - tm: Module ui</description>
   <packaging>war</packaging>

src/app/app-modules/core/components/beneficiary-details/beneficiary-details.component.html

@@ -19,34 +19,6 @@
       <tr style="color: #595959; font-size: 14px">
         <td>{{ beneficiary?.beneficiaryName }}</td>
       </tr>
-      <ng-container *ngIf="beneficiary?.fatherName">
-        <tr style="font-size: 14px; color: #000000">
-          <th id="fatherName">
-            {{ current_language_set?.bendetails?.fatherName }}:
-          </th>
-        </tr>
-        <tr style="color: #595959; font-size: 14px">
-          <td>{{ beneficiary?.fatherName }}</td>
-        </tr>
-      </ng-container>
-      <ng-container *ngIf="beneficiary?.lastName">
-        <tr style="font-size: 14px; color: #000000">
-          <th id="lastName">
-            {{ current_language_set?.bendetails?.lastName }}:
-          </th>
-        </tr>
-        <tr style="color: #595959; font-size: 14px">
-          <td>{{ beneficiary?.lastName }}</td>
-        </tr>
-      </ng-container>
-      <ng-container *ngIf="beneficiary?.preferredPhoneNum">
-        <tr style="font-size: 14px; color: #000000">
-          <th id="phoneNo">{{ current_language_set?.bendetails?.phoneNo }}:</th>
-        </tr>
-        <tr style="color: #595959; font-size: 14px">
-          <td>{{ beneficiary?.preferredPhoneNum }}</td>
-        </tr>
-      </ng-container>
       <tr style="font-size: 14px; color: #000000">
         <th id="gender">
           {{ current_language_set?.bendetails?.gender }} /

src/app/app-modules/nurse-doctor/case-record/general-case-record/diagnosis/general-opd-diagnosis/general-opd-diagnosis.component.html

@@ -22,12 +22,15 @@ <h4>{{ current_language_set?.casesheet?.provisionalDiag }}*</h4>
                   [matAutocomplete]="autoDiagnosis" (keyup)="onDiagnosisInputKeyup(diagnosisInput.value, i)" />
               </mat-form-field>
 
-              <mat-autocomplete #autoDiagnosis="matAutocomplete" autoActiveFirstOption [displayWith]="displayDiagnosis"
-                (optionSelected)="onDiagnosisSelected($event.option.value, i)">
-                <mat-option *ngFor="let diag of suggestedDiagnosisList[i]" [value]="diag">
-                  {{ diag.term }}
-                </mat-option>
-              </mat-autocomplete>
+              <mat-autocomplete #autoDiagnosis="matAutocomplete" appAutocompleteScroller [threshold]="0.6"
+              (nearEnd)="onAutoNearEnd(i)" (panelReady)="onPanelReady(i, $event)" autoActiveFirstOption
+              [displayWith]="displayDiagnosis" (optionSelected)="onDiagnosisSelected($event.option.value, i)">
+              <mat-option *ngFor="let diag of suggestedDiagnosisList[i]" [value]="diag">
+                {{ diag.term }}
+              </mat-option>
+              <mat-option *ngIf="loadingMore[i]" disabled>Loading…</mat-option>
+              <mat-option *ngIf="noMore[i]" disabled>End of results</mat-option>
+            </mat-autocomplete>
             </div>
 
             <div class="col-xs-12 col-sm-3 m-t-10">

src/app/app-modules/nurse-doctor/case-record/general-case-record/diagnosis/general-opd-diagnosis/general-opd-diagnosis.component.ts

@@ -48,6 +48,16 @@ export class GeneralOpdDiagnosisComponent
 {
   utils = new GeneralUtils(this.fb, this.sessionstorage);
   suggestedDiagnosisList: any = [];
+  private readonly PAGE_BASE = 0;
+  pageSize: number | undefined = undefined;
+
+  private readonly BOOTSTRAP_MAX_PAGES = 3; // when first page can't scroll, prefill up to this many extra pages
+
+  loadingMore: boolean[] = [];
+  noMore: boolean[] = [];
+  wantMore: boolean[] = [];
+  pageByIndex: number[] = [];
+  lastQueryByIndex: string[] = [];
 
   @Input()
   generalDiagnosisForm!: FormGroup;
@@ -254,13 +264,22 @@ export class GeneralOpdDiagnosisComponent
   }
 
   onDiagnosisInputKeyup(value: string, index: number) {
-    if (value.length >= 3) {
-      this.masterdataService
-        .searchDiagnosisBasedOnPageNo(value, index)
-        .subscribe((results: any) => {
-          this.suggestedDiagnosisList[index] = results?.data?.sctMaster;
-        });
+    const term = (value || '').trim();
+
+    if (term.length >= 3) {
+      if (this.lastQueryByIndex[index] !== term) {
+        this.lastQueryByIndex[index] = term;
+        this.pageByIndex[index] = 0; // logical 0th page
+        this.noMore[index] = false;
+        this.wantMore[index] = false;
+        this.suggestedDiagnosisList[index] = [];
+      }
+      this.fetchPage(index, false);
     } else {
+      this.lastQueryByIndex[index] = '';
+      this.pageByIndex[index] = 0;
+      this.noMore[index] = false;
+      this.wantMore[index] = false;
       this.suggestedDiagnosisList[index] = [];
     }
   }
@@ -272,7 +291,7 @@ export class GeneralOpdDiagnosisComponent
   onDiagnosisSelected(selected: any, index: number) {
     // this.patientQuickConsultForm.get(['provisionalDiagnosisList', index])?.setValue(selected);
     const diagnosisFormArray = this.generalDiagnosisForm.get(
-      'provisionalDiagnosisList'
+      'provisionalDiagnosisList',
     ) as FormArray;
     const diagnosisFormGroup = diagnosisFormArray.at(index) as FormGroup;
 
@@ -283,4 +302,99 @@ export class GeneralOpdDiagnosisComponent
       term: selected?.term || null,
     });
   }
+
+  onPanelReady(index: number, panelEl: HTMLElement) {
+    if (panelEl.scrollHeight <= panelEl.clientHeight && !this.noMore[index]) {
+    }
+  }
+
+  onAutoNearEnd(index: number) {
+    if (!this.loadingMore[index] && !this.noMore[index]) {
+      this.fetchPage(index, true);
+    } else if (this.loadingMore[index]) {
+      this.wantMore[index] = true;
+    }
+  }
+
+  private bootstrapUntilScrollable(rowIndex: number, panelEl: HTMLElement) {
+    let fetched = 0;
+
+    const tryFill = () => {
+      const scrollable = panelEl.scrollHeight > panelEl.clientHeight;
+      if (
+        scrollable ||
+        this.noMore[rowIndex] ||
+        fetched >= this.BOOTSTRAP_MAX_PAGES
+      )
+        return;
+
+      if (this.loadingMore[rowIndex]) {
+        requestAnimationFrame(tryFill);
+        return;
+      }
+
+      fetched++;
+      this.fetchPage(rowIndex, true);
+
+      requestAnimationFrame(tryFill);
+    };
+
+    if (this.lastQueryByIndex[rowIndex]?.length >= 3) {
+      tryFill();
+    }
+  }
+
+  private fetchPage(index: number, append = false) {
+    const term = this.lastQueryByIndex[index];
+    if (!term) return;
+
+    const nextLogical = (this.pageByIndex[index] ?? 0) + (append ? 1 : 0);
+    const pageAtReq = nextLogical + this.PAGE_BASE;
+
+    if (this.loadingMore[index]) return;
+    this.loadingMore[index] = true;
+
+    const termAtReq = term;
+
+    this.masterdataService
+      .searchDiagnosisBasedOnPageNo(termAtReq, pageAtReq)
+      .subscribe({
+        next: (results: any) => {
+          if (this.lastQueryByIndex[index] !== termAtReq) return;
+
+          const list = results?.data?.sctMaster ?? [];
+
+          if (append) {
+            const existing = new Set(
+              (this.suggestedDiagnosisList[index] ?? []).map(
+                (d: any) => d.id ?? d.code ?? d.term,
+              ),
+            );
+            this.suggestedDiagnosisList[index] = [
+              ...(this.suggestedDiagnosisList[index] ?? []),
+              ...list.filter(
+                (d: any) => !existing.has(d.id ?? d.code ?? d.term),
+              ),
+            ];
+          } else {
+            this.suggestedDiagnosisList[index] = list;
+          }
+
+          this.pageByIndex[index] = nextLogical;
+          if (!list.length) {
+            this.noMore[index] = true;
+          }
+        },
+        error: () => {
+          console.error('Error fetching diagnosis data');
+        },
+        complete: () => {
+          const wantChain = this.wantMore[index] && !this.noMore[index];
+          this.loadingMore[index] = false;
+          this.wantMore[index] = false;
+
+          if (wantChain) this.fetchPage(index, true);
+        },
+      });
+  }
 }

src/app/app-modules/nurse-doctor/case-record/general-case-record/diagnosis/ncd-care-diagnosis/ncd-care-diagnosis.component.html

@@ -133,12 +133,15 @@ <h4>{{ current_language_set?.casesheet?.provisionalDiag }}</h4>
                   [matAutocomplete]="autoDiagnosis" (keyup)="onDiagnosisInputKeyup(diagnosisInput.value, i)" />
               </mat-form-field>
 
-              <mat-autocomplete #autoDiagnosis="matAutocomplete" autoActiveFirstOption [displayWith]="displayDiagnosis"
-                (optionSelected)="onDiagnosisSelected($event.option.value, i)">
-                <mat-option *ngFor="let diag of suggestedDiagnosisList[i]" [value]="diag">
-                  {{ diag.term }}
-                </mat-option>
-              </mat-autocomplete>
+              <mat-autocomplete #autoDiagnosis="matAutocomplete" appAutocompleteScroller [threshold]="0.6"
+              (nearEnd)="onAutoNearEnd(i)" (panelReady)="onPanelReady(i, $event)" autoActiveFirstOption
+              [displayWith]="displayDiagnosis" (optionSelected)="onDiagnosisSelected($event.option.value, i)">
+              <mat-option *ngFor="let diag of suggestedDiagnosisList[i]" [value]="diag">
+                {{ diag.term }}
+              </mat-option>
+              <mat-option *ngIf="loadingMore[i]" disabled>Loading…</mat-option>
+              <mat-option *ngIf="noMore[i]" disabled>End of results</mat-option>
+            </mat-autocomplete>
                </div>
 
               <div class="col-xs-12 col-sm-3 m-t-10">