cleanup source detail page (#500)

- hide image if there is no brand
- show complete address
- use the source id instead of endpoint_id in breadcrumbs

Co-authored-by: Jason Kulatunga <jason@thesparktree.com>

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

@@ -4,10 +4,9 @@
       <div class="az-content-body">
         <div class="panel panel-default patient col-xs-12">
           <div class="row">
-            <div class="col-xs-2 col-sm-2 col-md-1">
+            <div *ngIf="isExternal()" class="col-xs-2 col-sm-2 col-md-1">
               <div class="">
                 <div class="patient-image-wrap embed-responsive-item">
-
                   <img [src]="'assets/sources/'+selectedSource?.brand_id+'.png'"
                        alt="{{selectedSource?.endpoint_id}}"
                        class="img-fluid">
@@ -30,12 +29,14 @@
                 <div class="col-xs-8 col-sm-5 col-lg-3 text-left p-0">{{getPatientDOB()}}</div>
                 <div class="col-xs-4 col-sm-2 col-lg-1 text-right text-muted">Age:</div>
                 <div class="col-xs-8 col-sm-3 col-lg-3 text-left p-0">{{getPatientAge()}} Years Old</div>
-                <div class="col-xs-4 col-sm-2 col-lg-1 text-right text-muted">Email</div>
+                <div class="col-xs-4 col-sm-2 col-lg-1 text-right text-muted">Email:</div>
                 <div class="col-xs-8 col-sm-5 col-lg-3 text-left p-0">{{getPatientEmail()}}</div>
                 <div class="col-xs-4 col-sm-2 col-lg-1 text-right text-muted">Phone:</div>
                 <div class="col-xs-8 col-sm-3 col-lg-3 text-left p-0">{{getPatientPhone()}}</div>
                 <div class="col-xs-4 col-sm-2 col-lg-1 text-right text-muted">Address:</div>
-                <div class="col-xs-8 col-sm-5 col-lg-3 text-left p-0">{{getPatientAddress()}}</div>
+                <div class="col-xs-8 col-sm-5 col-lg-3 text-left p-0">
+                  <div *ngFor="let line of getPatientAddress()">{{line}}</div>
+                </div>
                 <div class="col-xs-4 col-sm-2 col-lg-1 text-right text-muted">ID:</div>
                 <div class="col-xs-8 col-sm-3 col-lg-3 text-left p-0 text-overflow-ellipsis ">{{selectedPatient?.source_resource_id}}</div>
                 <div class="col-xs-4 col-sm-2 col-lg-1 text-right text-muted">MRN:</div>
@@ -51,7 +52,7 @@
     <div class="az-content-left">
       <div class="az-content-breadcrumb">
         <span>Sources</span>
-        <span>{{selectedSource?.endpoint_id}}</span>
+        <span class="text-nowrap">{{selectedSource?.id}}</span>
         <span>Details</span>
       </div>
 

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

@@ -47,6 +47,10 @@ export class SourceDetailComponent implements OnInit {
     this.selectedTotalElements = this.resourceTypeCounts[resourceType]
   }
 
+  isExternal(){
+    return this.selectedSource?.brand_id != '00000000-0000-0000-0000-000000000000';
+  }
+
   //functions to call on patient
   getPatientName(){
     // @ts-ignore
@@ -88,7 +92,8 @@ export class SourceDetailComponent implements OnInit {
     const line = getPath(this.selectedPatient?.resource_raw, 'address.0.line')
     const city = getPath(this.selectedPatient?.resource_raw, 'address.0.city')
     const state = getPath(this.selectedPatient?.resource_raw, 'address.0.state')
-    return `${line}, ${city}, ${state}`
+    const zip = getPath(this.selectedPatient?.resource_raw, 'address.0.postalCode')
+    return [`${line}`, `${city}, ${state} ${zip}`]
   }
 
 }