From 9e7f6b5819159f604f1bf15b410af412fa78de8a Mon Sep 17 00:00:00 2001 From: Jason Kulatunga Date: Sun, 25 Sep 2022 21:02:12 -0700 Subject: [PATCH] adding list fallback for unknown components (so users can still see the raw data). Make sure patient information is included in the header for the source detail page. --- .../list-fallback-resource.component.html | 14 ++++++ .../list-fallback-resource.component.scss | 0 .../list-fallback-resource.component.spec.ts | 23 +++++++++ .../list-fallback-resource.component.ts | 24 ++++++++++ .../list-generic-resource.component.html | 2 - .../resource-list/resource-list.component.ts | 9 +++- frontend/src/app/components/shared.module.ts | 2 + .../src/app/models/fasten/source-summary.ts | 2 + .../pages/dashboard/dashboard.component.html | 2 +- .../source-detail.component.html | 47 +++++++++++++++++++ .../source-detail/source-detail.component.ts | 42 +++++++++++++++++ frontend/src/styles.scss | 6 +++ 12 files changed, 168 insertions(+), 5 deletions(-) create mode 100644 frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.html create mode 100644 frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.scss create mode 100644 frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.spec.ts create mode 100644 frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.ts diff --git a/frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.html b/frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.html new file mode 100644 index 00000000..ae48ac22 --- /dev/null +++ b/frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.html @@ -0,0 +1,14 @@ + + + + + diff --git a/frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.scss b/frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.spec.ts b/frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.spec.ts new file mode 100644 index 00000000..fa5fd0b4 --- /dev/null +++ b/frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ListFallbackResourceComponent } from './list-fallback-resource.component'; + +describe('ListFallbackResourceComponent', () => { + let component: ListFallbackResourceComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ListFallbackResourceComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ListFallbackResourceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.ts b/frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.ts new file mode 100644 index 00000000..39d34e55 --- /dev/null +++ b/frontend/src/app/components/list-fallback-resource/list-fallback-resource.component.ts @@ -0,0 +1,24 @@ +import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core'; +import {ResourceFhir} from '../../models/fasten/resource_fhir'; +import {ResourceListComponentInterface} from '../list-generic-resource/list-generic-resource.component'; +import {Router} from '@angular/router'; + +@Component({ + selector: 'app-list-fallback-resource', + templateUrl: './list-fallback-resource.component.html', + styleUrls: ['./list-fallback-resource.component.scss'] +}) +export class ListFallbackResourceComponent implements OnInit, ResourceListComponentInterface { + + @Input() resourceList: ResourceFhir[] = [] + + constructor(public changeRef: ChangeDetectorRef, public router: Router) {} + + ngOnInit(): void { + console.log("RESOURCE LIST INSIDE FALLBACK", this.resourceList) + } + + markForCheck(){ + this.changeRef.markForCheck() + } +} diff --git a/frontend/src/app/components/list-generic-resource/list-generic-resource.component.html b/frontend/src/app/components/list-generic-resource/list-generic-resource.component.html index c9d5160e..3cbaf26d 100644 --- a/frontend/src/app/components/list-generic-resource/list-generic-resource.component.html +++ b/frontend/src/app/components/list-generic-resource/list-generic-resource.component.html @@ -1,6 +1,4 @@
-

INSIDE THE GERNERIC COMPONENT

- { + if(!resourceType){ + //dont try to render anything if the resourceType isnt set. + return null + } switch(resourceType) { case "Appointment": { return ListAppointmentComponent; @@ -158,8 +163,8 @@ export class ResourceListComponent implements OnInit, OnChanges { return ListServiceRequestComponent; } default: { - console.error("UNKNOWN COMPONENT TYPE", resourceType) - return null + console.warn("Unknown component type, using fallback", resourceType) + return ListFallbackResourceComponent; } } diff --git a/frontend/src/app/components/shared.module.ts b/frontend/src/app/components/shared.module.ts index 659090cf..d8a1d8f4 100644 --- a/frontend/src/app/components/shared.module.ts +++ b/frontend/src/app/components/shared.module.ts @@ -30,6 +30,7 @@ import {ListAppointmentComponent} from './list-generic-resource/list-appointment import {ListDeviceComponent} from './list-generic-resource/list-device.component'; import {ListDiagnosticReportComponent} from './list-generic-resource/list-diagnostic-report.component'; import {ListGoalComponent} from './list-generic-resource/list-goal.component'; +import { ListFallbackResourceComponent } from './list-fallback-resource/list-fallback-resource.component'; @NgModule({ imports: [ @@ -66,6 +67,7 @@ import {ListGoalComponent} from './list-generic-resource/list-goal.component'; ListGoalComponent, ResourceListComponent, ResourceListOutletDirective, + ListFallbackResourceComponent, ], exports: [ ComponentsSidebarComponent, diff --git a/frontend/src/app/models/fasten/source-summary.ts b/frontend/src/app/models/fasten/source-summary.ts index 6510013e..06a5e315 100644 --- a/frontend/src/app/models/fasten/source-summary.ts +++ b/frontend/src/app/models/fasten/source-summary.ts @@ -1,4 +1,5 @@ import {Source} from './source'; +import {ResourceFhir} from './resource_fhir'; export class ResourceTypeCounts { count: number @@ -9,4 +10,5 @@ export class ResourceTypeCounts { export class SourceSummary { source: Source resource_type_counts: ResourceTypeCounts[] + patient?: ResourceFhir } diff --git a/frontend/src/app/pages/dashboard/dashboard.component.html b/frontend/src/app/pages/dashboard/dashboard.component.html index 155f3d16..2a3a58bf 100644 --- a/frontend/src/app/pages/dashboard/dashboard.component.html +++ b/frontend/src/app/pages/dashboard/dashboard.component.html @@ -144,7 +144,7 @@
Geeks
diff --git a/frontend/src/app/pages/source-detail/source-detail.component.html b/frontend/src/app/pages/source-detail/source-detail.component.html index f8240c27..68b92241 100644 --- a/frontend/src/app/pages/source-detail/source-detail.component.html +++ b/frontend/src/app/pages/source-detail/source-detail.component.html @@ -1,5 +1,52 @@
+
+
+
+
+
+
+
+ + {{selectedSource.source_type}} +
+
+
+
+
+

{{getPatientName()}}

+
+ + + +
+
+
+
Gender:
+
{{getPatientGender()}}
+
DOB:
+
{{getPatientDOB()}}
+
Age:
+
58 year
+
Email
+
{{getPatientEmail()}}
+
Phone:
+
{{getPatientPhone()}}
+
Address:
+
{{getPatientAddress()}}
+
ID:
+
{{selectedPatient?.source_resource_id}}
+
MRN:
+
{{getPatientMRN()}}
+
+
+
+
+
+
+
diff --git a/frontend/src/app/pages/source-detail/source-detail.component.ts b/frontend/src/app/pages/source-detail/source-detail.component.ts index 569a26f2..f9f61613 100644 --- a/frontend/src/app/pages/source-detail/source-detail.component.ts +++ b/frontend/src/app/pages/source-detail/source-detail.component.ts @@ -2,6 +2,8 @@ import {Component, OnInit, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Source} from '../../models/fasten/source'; import {FastenApiService} from '../../services/fasten-api.service'; +import {ResourceFhir} from '../../models/fasten/resource_fhir'; +import {getPath} from '../../components/list-generic-resource/utils'; @Component({ @@ -12,6 +14,7 @@ import {FastenApiService} from '../../services/fasten-api.service'; export class SourceDetailComponent implements OnInit { selectedSource: Source = null + selectedPatient: ResourceFhir = null selectedResourceType: string = null resourceTypeCounts: { [name: string]: number } = {} @@ -27,6 +30,7 @@ export class SourceDetailComponent implements OnInit { //always request the source summary this.fastenApi.getSourceSummary(this.route.snapshot.paramMap.get('source_id')).subscribe((sourceSummary) => { this.selectedSource = sourceSummary.source; + this.selectedPatient = sourceSummary.patient; for(let resourceTypeCount of sourceSummary.resource_type_counts){ this.resourceTypeCounts[resourceTypeCount.resource_type] = resourceTypeCount.count } @@ -36,4 +40,42 @@ export class SourceDetailComponent implements OnInit { selectResourceType(resourceType: string) { this.selectedResourceType = resourceType } + + //functions to call on patient + getPatientName(){ + // @ts-ignore + return `${getPath(this.selectedPatient?.payload, 'name.0.family')}, ${getPath(this.selectedPatient?.payload, 'name.0.given').join(' ')}` + } + getPatientGender(){ + return getPath(this.selectedPatient?.payload, 'gender') + } + getPatientMRN(){ + return getPath(this.selectedPatient?.payload, 'identifier.0.value') + } + getPatientEmail(){ + // @ts-ignore + return (this.selectedPatient?.payload?.telecom || []).filter( + telecom => telecom.system === 'email', + )[0]?.value + } + getPatientDOB(){ + return getPath(this.selectedPatient?.payload, 'birthDate') + + } + getPatientPhone(){ + // @ts-ignore + return (this.selectedPatient?.payload?.telecom || []).filter( + telecom => telecom.system === 'phone', + )[0]?.value + } + getPatientAge(){ + return '' + } + getPatientAddress(){ + const line = getPath(this.selectedPatient?.payload, 'address.0.line') + const city = getPath(this.selectedPatient?.payload, 'address.0.city') + const state = getPath(this.selectedPatient?.payload, 'address.0.state') + return `${line}, ${city}, ${state}` + } + } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index e4d120b2..e01d960c 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -15,6 +15,12 @@ cursor: auto !important; } +// if text is too long, we can truncate +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} /* You can add global styles to this file, and also import other style files */ /*