From 7a730ec32b52c27c196e409d27d8578626c7b44b Mon Sep 17 00:00:00 2001
From: Jason Kulatunga <jason@thesparktree.com>
Date: Wed, 8 Mar 2023 23:01:20 -0800
Subject: [PATCH] when changing search term, we should change the results
 panel. make sure we debounch search box.

---
 .../medical-sources.component.html            | 13 +++--
 .../medical-sources.component.ts              | 50 +++++++++++--------
 .../src/app/services/lighthouse.service.ts    |  3 ++
 3 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/pages/medical-sources/medical-sources.component.html b/frontend/src/app/pages/medical-sources/medical-sources.component.html
index d056c679..28e2e921 100644
--- a/frontend/src/app/pages/medical-sources/medical-sources.component.html
+++ b/frontend/src/app/pages/medical-sources/medical-sources.component.html
@@ -71,19 +71,18 @@
 
       <!-- Search -->
       <div class="row row-sm sticky-top pt-2" style="position:sticky;">
-        <div class="col-lg-4">
+        <div class="col-lg-8">
           <div class="input-group mb-3">
             <div class="input-group-prepend">
               <span class="input-group-text" id="search-prefix">Search</span>
             </div>
-            <input (keyup)="searchTermChanged($event)" type="text" class="form-control" placeholder="Search Term">
+            <input (keyup)="searchTermUpdate.next($event.target.value)" type="text" class="form-control" placeholder="Search Term">
+            <div class="input-group-append">
+              <span class="input-group-text">{{this.availableSourceList.length}} of {{this.totalAvailableSourceList}} results</span>
+            </div>
+
           </div><!-- input-group -->
         </div><!-- col -->
-<!--        <div class="col-lg-4">-->
-<!--          <div class="d-flex text-center">-->
-<!--            <small>{{this.availableSourceList.length}} of {{this.totalAvailableSourceList}} sources</small>-->
-<!--          </div>-->
-<!--        </div>-->
       </div>
 
 
diff --git a/frontend/src/app/pages/medical-sources/medical-sources.component.ts b/frontend/src/app/pages/medical-sources/medical-sources.component.ts
index 91acc574..25aec72b 100644
--- a/frontend/src/app/pages/medical-sources/medical-sources.component.ts
+++ b/frontend/src/app/pages/medical-sources/medical-sources.component.ts
@@ -10,8 +10,9 @@ import {Location} from '@angular/common';
 import {ToastService} from '../../services/toast.service';
 import {ToastNotification, ToastType} from '../../models/fasten/toast';
 import {environment} from '../../../environments/environment';
-import {forkJoin} from 'rxjs';
+import {BehaviorSubject, forkJoin, Subject} from 'rxjs';
 import {LighthouseSourceSearch} from '../../models/lighthouse/lighthouse-source-search';
+import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
 // If you dont import this angular will import the wrong "Location"
 
 export const sourceConnectWindowTimeout = 24*5000 //wait 2 minutes (5 * 24 = 120)
@@ -42,8 +43,9 @@ export class MedicalSourcesComponent implements OnInit {
 
   scrollId: string = ""
   scrollComplete: boolean = false
-  searchTerm: string = ""
+  searchTermUpdate = new BehaviorSubject<string>("");
   showHidden: boolean = false
+
   constructor(
     private lighthouseApi: LighthouseService,
     private fastenApi: FastenApiService,
@@ -91,6 +93,29 @@ export class MedicalSourcesComponent implements OnInit {
     }, err => {
       this.loading = false
     })
+
+
+    //register a callback for when the search term changes
+    this.searchTermUpdate
+      .pipe(
+        debounceTime(200),
+        distinctUntilChanged(),
+      )
+      .subscribe(value => {
+        console.log("search term changed:", value)
+
+        //reset available sources
+        this.availableSourceList = []
+        this.scrollId = ""
+        this.scrollComplete = false
+        this.totalAvailableSourceList = 0
+
+        this.lighthouseApi.findLighthouseSources(value, this.scrollId, this.showHidden)
+          .subscribe((results) => {
+            this.populateAvailableSourceList(results)
+          })
+      });
+
   }
 
   private populateAvailableSourceList(results: LighthouseSourceSearch): void {
@@ -113,31 +138,12 @@ export class MedicalSourcesComponent implements OnInit {
       return
     }
 
-    this.lighthouseApi.findLighthouseSources(this.searchTerm, this.scrollId, this.showHidden)
+    this.lighthouseApi.findLighthouseSources(this.searchTermUpdate.getValue(), this.scrollId, this.showHidden)
       .subscribe((results) => {
         this.populateAvailableSourceList(results)
       })
   }
 
-  public searchTermChanged($event):void {
-    this.searchTerm = $event.target.value
-    console.log("search term changed:", )
-
-    // let searchResults
-    // if(this.searchTerm){
-    //   searchResults = this.searchIndex.search(this.searchTerm).map((result) => {
-    //     return result.item
-    //   })
-    // }
-    // else {
-    //   //emtpy search term, show all (original) values.
-    //   searchResults = this.searchIndex.getIndex().docs
-    // }
-    //
-    // this.availableSourceList = searchResults
-    // console.log(this.availableSourceList)
-  }
-
   /**
    * after pressing the logo (connectHandler button), this function will generate an authorize url for this source, and redirec the user.
    * @param $event
diff --git a/frontend/src/app/services/lighthouse.service.ts b/frontend/src/app/services/lighthouse.service.ts
index 01527f1d..55f8f7e3 100644
--- a/frontend/src/app/services/lighthouse.service.ts
+++ b/frontend/src/app/services/lighthouse.service.ts
@@ -27,6 +27,9 @@ export class LighthouseService {
     if(scrollId){
       endpointUrl.searchParams.set('scroll_id', scrollId);
     }
+    if(searchTerm){
+      endpointUrl.searchParams.set('query', searchTerm);
+    }
 
     return this._httpClient.get<ResponseWrapper>(endpointUrl.toString())
       .pipe(