adding explore functionality to header.

make sure explore resource list has a pointer cursor.
when report header doesnt return a patient, handle gracefully.
when explore page has no connected sources, correctly display empty page.

CONTRIBUTING.md

@@ -66,6 +66,8 @@ web:
       path: ./dist
 database:
   location: 'fasten.db'
+cache:
+  location: ''
 log:
   file: '' #absolute or relative paths allowed, eg. web.log
   level: INFO

frontend/src/app/components/header/header.component.html

@@ -20,6 +20,9 @@
         <li class="nav-item" ngbDropdown [ngClass]="{ 'active': labs?.isActive }">
           <a routerLink="/labs" routerLinkActive="active" #labs="routerLinkActive" class="nav-link"><fa-icon [icon]="['fas', 'heart-pulse']"></fa-icon>&nbsp; Labs</a>
         </li>
+        <li class="nav-item" ngbDropdown [ngClass]="{ 'active': explore?.isActive }">
+          <a routerLink="/explore" routerLinkActive="active" #explore="routerLinkActive" class="nav-link"><fa-icon [icon]="['fas', 'folder-tree']"></fa-icon>&nbsp; Explore</a>
+        </li>
         <li class="nav-item" ngbDropdown [ngClass]="{ 'active': sources?.isActive }">
           <a routerLink="/sources" routerLinkActive="active" #sources="routerLinkActive" class="nav-link"><fa-icon [icon]="['fas', 'hospital']"></fa-icon>&nbsp; Sources</a>
         </li>

frontend/src/app/components/report-header/report-header.component.ts

@@ -23,15 +23,16 @@ export class ReportHeaderComponent implements OnInit {
     this.fastenApi.getResources("Patient").subscribe(results => {
       console.log(results)
       this.patient = results[0]
+      if(!this.patient) return
 
-      let primaryCareId = fhirpath.evaluate(this.patient.resource_raw, "Patient.generalPractitioner.reference.first()")
+      let primaryCareId = fhirpath.evaluate(this.patient?.resource_raw, "Patient.generalPractitioner.reference.first()")
       console.log("GP:", primaryCareId)
       if(primaryCareId){
         let primaryCareIdStr = primaryCareId.join("")
         let primaryCareIdParts = primaryCareIdStr.split("/")
         if(primaryCareIdParts.length == 2) {
           console.log(primaryCareIdParts)
-          this.fastenApi.getResources(primaryCareIdParts[0], this.patient.source_id,  primaryCareIdParts[1]).subscribe(primaryResults => {
+          this.fastenApi.getResources(primaryCareIdParts[0], this.patient?.source_id,  primaryCareIdParts[1]).subscribe(primaryResults => {
             if (primaryResults.length > 0){
               this.primaryCare = new PractitionerModel(primaryResults[0].resource_raw)
             }

frontend/src/app/pages/explore/explore.component.html

@@ -6,8 +6,7 @@
       <report-header [reportHeaderTitle]="'Explore'" [reportHeaderSubTitle]="'Explore your Medical Records'"></report-header>
 
       <ng-container [ngTemplateOutlet]="loading ? isLoadingTemplate :
-      (connectedSources.length == 0) ? emptyReport :
-      report"></ng-container>
+      (connectedSources.length == 0) ? emptyReport : report"></ng-container>
 
       <ng-template #report>
         <div class="row">

frontend/src/app/pages/explore/explore.component.ts

@@ -33,6 +33,8 @@ export class ExploreComponent implements OnInit {
         }
         this.loading = false
       })
+      if(connectedSources.length == 0) this.loading = false
+
     }, error => {
       this.loading = false
     })

frontend/src/app/pages/source-detail/source-detail.component.html

@@ -56,7 +56,7 @@
       </div>
 
       <ul class="list-group">
-        <li *ngFor="let resourceGroup of resourceTypeCounts | keyvalue" (click)="selectResourceType(resourceGroup.key)" class="list-group-item d-flex justify-content-between align-items-center">
+        <li *ngFor="let resourceGroup of resourceTypeCounts | keyvalue" (click)="selectResourceType(resourceGroup.key)" class="list-group-item d-flex justify-content-between align-items-center cursor-pointer">
           {{resourceGroup.key}} <span class="badge badge-primary badge-pill">{{resourceGroup.value}}</span>
         </li>
       </ul>