added infinite scroll to references

Author: Shayan1375

src/app/modules/feasibility-query/components/editor/reference-criteria-modal/reference/reference.component.html

@@ -1,13 +1,22 @@
 <div fxLayout="column" class="container">
   <div class="attribute-code-display">{{ attributeCode.getDisplay() }}</div>
   <num-searchbar icon="search" (searchTextChange)="startElasticSearch($event)"> </num-searchbar>
-  <num-table
-    *ngIf="listItems.length > 0 && adaptedData"
-    class="result-list-container"
-    [tableData]="adaptedData"
-    [searchTermResultList]="listItems"
-    (selectedRow)="setSelectedRowItem($event)"
-  ></num-table>
+  <div
+    class="infinite-scroll"
+    infiniteScroll
+    [infiniteScrollDistance]="0.5"
+    [infiniteScrollThrottle]="50"
+    [scrollWindow]="false"
+    (scrolled)="loadMoreCriteriaSetResults()"
+  >
+    <num-table
+      *ngIf="listItems.length > 0 && adaptedData"
+      class="result-list-container"
+      [tableData]="adaptedData"
+      [searchTermResultList]="listItems"
+      (selectedRow)="setSelectedRowItem($event)"
+    ></num-table>
+  </div>
   <num-placeholder-box class="no-results-text" *ngIf="!searchResultsFound"
     >{{ 'FEASIBILITY.SEARCH.EMPTY' | translate }} "<strong>{{ searchText$ | async }}</strong
     >"</num-placeholder-box

src/app/modules/feasibility-query/components/editor/reference-criteria-modal/reference/reference.component.scss

@@ -14,9 +14,11 @@
   width: fit-content;
   padding: 10px 18px;
 }
+
 .selectedFilterBox {
   height: 85%;
 }
+
 .selectedFilter {
   width: 100%;
   height: 40px;
@@ -29,7 +31,8 @@
   padding-left: 10px;
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 2; /* number of lines to show */
+  -webkit-line-clamp: 2;
+  /* number of lines to show */
   line-clamp: 2;
   -webkit-box-orient: vertical;
 }
@@ -55,6 +58,13 @@
   color: #6a7483;
   padding-bottom: 5px;
 }
+
 .filter-selection {
   height: 30%;
 }
+
+.infinite-scroll {
+  height: 70%;
+  overflow: scroll;
+  overflow-x: hidden;
+}

src/app/modules/feasibility-query/components/editor/reference-criteria-modal/reference/reference.component.ts

@@ -2,10 +2,11 @@ import { ActiveSearchTermService } from 'src/app/service/Search/ActiveSearchTerm
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { CriteriaSetSearchService } from 'src/app/service/Search/SearchTypes/CriteriaSet/CriteriaSetSearch.service';
 import { Display } from 'src/app/model/DataSelection/Profile/Display';
+import { filter, Observable, Subscription, tap } from 'rxjs';
 import { InterfaceTableDataRow } from 'src/app/shared/models/TableData/InterfaceTableDataRows';
-import { Observable, Subscription } from 'rxjs';
 import { ReferenceCriteriaListEntry } from 'src/app/model/Search/ListEntries/ReferenceCriteriaListEntry';
 import { ReferenceCriteriaListEntryAdapter } from 'src/app/shared/models/TableData/Adapter/ReferenceCriteriaListEntryAdapter';
+import { ReferenceCriteriaResultList } from 'src/app/model/Search/ResultList/ReferenceCriteriaResultList';
 import { SelectedTableItemsService } from 'src/app/service/SearchTermListItemService.service';
 import { TableData } from 'src/app/shared/models/TableData/InterfaceTableData';
 import { TerminologyCode } from 'src/app/model/Terminology/TerminologyCode';
@@ -36,6 +37,8 @@ export class ReferenceComponent implements OnInit, OnDestroy {
 
   private subscription: Subscription;
 
+  private loadNextPageSubscription: Subscription;
+
   adaptedData: TableData;
 
   isTableItemsSelected = false;
@@ -46,25 +49,30 @@ export class ReferenceComponent implements OnInit, OnDestroy {
 
   searchResultsFound = false;
 
+  searchtText: string;
+
   constructor(
     private activeSearchTermService: ActiveSearchTermService,
-    private searchService: CriteriaSetSearchService,
+    private criteriaSetSearchService: CriteriaSetSearchService,
     private selectedTableItemsService: SelectedTableItemsService<ReferenceCriteriaListEntry>
   ) {}
 
   ngOnInit() {
     this.startElasticSearch('');
-    this.subscription = this.searchService
+    this.subscription = this.criteriaSetSearchService
       .getSearchResults([this.referenceFilterUri])
-      .subscribe((searchTermResults) => {
-        if (searchTermResults) {
-          this.listItems = searchTermResults.getResults();
-          this.adaptedData = ReferenceCriteriaListEntryAdapter.adapt(this.listItems);
-          if (this.adaptedData.body.rows.length > 0) {
-            this.searchResultsFound = true;
-          } else {
-            this.searchResultsFound = false;
-          }
+      .pipe(
+        filter(
+          (searchResult: ReferenceCriteriaResultList) => searchResult?.getResults()?.length > 0
+        )
+      )
+      .subscribe((searchTermResults: ReferenceCriteriaResultList) => {
+        this.listItems = searchTermResults.getResults();
+        this.adaptedData = ReferenceCriteriaListEntryAdapter.adapt(this.listItems);
+        if (this.adaptedData.body.rows.length > 0) {
+          this.searchResultsFound = true;
+        } else {
+          this.searchResultsFound = false;
         }
       });
     this.searchText$ = this.activeSearchTermService.getActiveSearchTerm();
@@ -73,6 +81,7 @@ export class ReferenceComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.subscription?.unsubscribe();
+    this.loadNextPageSubscription?.unsubscribe();
   }
 
   private handleSelectedItemsSubscription(): void {
@@ -105,16 +114,16 @@ export class ReferenceComponent implements OnInit, OnDestroy {
 
   public startElasticSearch(searchtext: string) {
     if (this.referenceFilterUri?.length > 0) {
-      this.searchService.search(searchtext, [this.referenceFilterUri]).subscribe((test) => {
-        this.listItems = test.getResults();
-      });
+      this.searchtText = searchtext;
+      this.subscription = this.criteriaSetSearchService
+        .search(searchtext, [this.referenceFilterUri])
+        .subscribe();
     } else {
       console.warn('No referenceCriteriaUrl was provided');
     }
   }
 
   setSelectedReferenceCriteria() {
-    const ids = this.selectedTableItemsService.getSelectedIds();
     this.selectedTableItemsService
       .getSelectedTableItems()
       .subscribe((items) => {
@@ -129,7 +138,7 @@ export class ReferenceComponent implements OnInit, OnDestroy {
       })
       .unsubscribe();
 
-    this.emitIDs();
+    this.emitIds();
     this.selectedTableItemsService.clearSelection();
   }
 
@@ -149,10 +158,17 @@ export class ReferenceComponent implements OnInit, OnDestroy {
 
   public removeSelectedReference(index: number): void {
     this.arrayOfSelectedReferences.splice(index, 1);
-    this.emitIDs();
+    this.emitIds();
   }
 
-  private emitIDs(): void {
+  private emitIds(): void {
     this.selectedReferenceIds.emit(this.arrayOfSelectedReferences.map((items) => items.id));
   }
+
+  public loadMoreCriteriaSetResults(): void {
+    this.loadNextPageSubscription?.unsubscribe();
+    this.loadNextPageSubscription = this.criteriaSetSearchService
+      .loadNextPage(this.searchtText, [this.referenceFilterUri])
+      .subscribe();
+  }
 }