enable pagination on medical history page.

frontend/src/app/pages/medical-history/medical-history.component.html

@@ -8,6 +8,7 @@
       <ng-container [ngTemplateOutlet]="loading ? isLoadingTemplate : (encounters.length == 0) ? emptyReport : report"></ng-container>
 
       <ng-template #report>
+
         <!-- Editor Button -->
         <div class="row mt-5 mb-3">
           <div class="col-12">
@@ -43,7 +44,7 @@
         <div class="row">
           <div class="col-12 d-flex justify-content-center flex-nowrap">
             <ngb-pagination
-              [collectionSize]="allEncounterGroups.length"
+              [collectionSize]="allEncountersIds.length"
               [(page)]="currentPage"
               [pageSize]="pageSize"
               (pageChange)="pageChange()"

frontend/src/app/pages/medical-history/medical-history.component.ts

@@ -17,7 +17,7 @@ export class MedicalHistoryComponent implements OnInit {
 
   currentPage: number = 1 //1-based index due to the way the pagination component works
   pageSize: number = 10
-  allEncounterGroups: string[] = []
+  allEncountersIds: any[] = []
 
   closeResult = '';
   // conditions: ResourceFhir[] = []
@@ -39,16 +39,11 @@ export class MedicalHistoryComponent implements OnInit {
     //load the first page
     this.loading = true
 
-    this.pageChange(1)
-  }
-
-  pageChange(page: number){
-    this.loading = true
 
     this.fastenApi.getResources('Encounter').subscribe(
       (response: ResourceFhir[]) => {
 
-        let selectedResourceIds = response.map((resource: ResourceFhir): Partial<ResourceFhir> => {
+        this.allEncountersIds = response.map((resource: ResourceFhir): Partial<ResourceFhir> => {
           return {
             source_id: resource.source_id,
             source_resource_type: resource.source_resource_type,
@@ -56,7 +51,20 @@ export class MedicalHistoryComponent implements OnInit {
           }
         })
 
-        this.fastenApi.getResourceGraph(null, selectedResourceIds).subscribe((graphResponse: ResourceGraphResponse) => {
+        this.pageChange()
+
+
+
+      })
+
+  }
+
+  pageChange(){
+    this.loading = true
+
+    let encounterIds = this.allEncountersIds.slice((this.currentPage-1) * this.pageSize, this.currentPage * this.pageSize)
+
+    this.fastenApi.getResourceGraph(null, encounterIds).subscribe((graphResponse: ResourceGraphResponse) => {
         this.loading = false
 
         console.log("FLATTENED RESOURCES RESPONSE", graphResponse)
@@ -67,13 +75,6 @@ export class MedicalHistoryComponent implements OnInit {
         this.loading = false
       })
 
-
-      },
-      error => {
-        this.loading = false
-      }
-    )
-
     // this.fastenApi.getResourceGraph(null, page).subscribe((response: ResourceGraphResponse) => {
     //   this.loading = false
     //   this.resourceGraphMetadata = response.metadata