From 83114f006766006022dc4c6483cece7c81a05c11 Mon Sep 17 00:00:00 2001 From: Jason Kulatunga Date: Fri, 11 Aug 2023 21:20:49 -0600 Subject: [PATCH] UI updates. --- .../fhir/common/table/table-row-item.ts | 6 +- .../fhir/common/table/table.component.html | 4 + .../fhir/common/table/table.component.ts | 3 +- .../codable-concept.component.html | 7 + .../codable-concept.component.scss | 0 .../codable-concept.component.spec.ts | 23 +++ .../codable-concept.component.ts | 22 +++ .../allergy-intolerance.component.ts | 6 +- .../document-reference.component.ts | 6 +- .../immunization/immunization.component.ts | 6 - .../practitioner/practitioner.component.html | 2 +- .../practitioner/practitioner.component.ts | 20 +-- ...ort-medical-history-condition.component.ts | 4 +- ...istory-explanation-of-benefit.component.ts | 4 +- frontend/src/app/components/shared.module.ts | 135 +++++++++--------- .../lib/models/datatypes/human-name-model.ts | 4 +- .../models/resources/practitioner-model.ts | 7 +- 17 files changed, 158 insertions(+), 101 deletions(-) create mode 100644 frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.html create mode 100644 frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.scss create mode 100644 frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.spec.ts create mode 100644 frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.ts diff --git a/frontend/src/app/components/fhir/common/table/table-row-item.ts b/frontend/src/app/components/fhir/common/table/table-row-item.ts index b1491d68..9d6267a3 100644 --- a/frontend/src/app/components/fhir/common/table/table-row-item.ts +++ b/frontend/src/app/components/fhir/common/table/table-row-item.ts @@ -1,9 +1,10 @@ import {ReferenceModel} from '../../../../../lib/models/datatypes/reference-model'; import {CodingModel} from '../../../../../lib/models/datatypes/coding-model'; +import {CodableConceptModel} from '../../../../../lib/models/datatypes/codable-concept-model'; export class TableRowItem { label?: string - data?: string | ReferenceModel | CodingModel | CodingModel[] + data?: string | ReferenceModel | CodingModel | CodingModel[] | CodableConceptModel data_type?: TableRowItemDataType enabled?: boolean //determine if this row should be displayed } @@ -12,5 +13,6 @@ export enum TableRowItemDataType { String = "string", Reference = "reference", Coding = "coding", - CodingList = "codingList" + CodingList = "codingList", + CodableConcept = "codableConcept", } diff --git a/frontend/src/app/components/fhir/common/table/table.component.html b/frontend/src/app/components/fhir/common/table/table.component.html index 6363e9bb..edd749d8 100644 --- a/frontend/src/app/components/fhir/common/table/table.component.html +++ b/frontend/src/app/components/fhir/common/table/table.component.html @@ -10,8 +10,12 @@ + + + diff --git a/frontend/src/app/components/fhir/common/table/table.component.ts b/frontend/src/app/components/fhir/common/table/table.component.ts index 0f6beadf..2dd56c82 100644 --- a/frontend/src/app/components/fhir/common/table/table.component.ts +++ b/frontend/src/app/components/fhir/common/table/table.component.ts @@ -4,10 +4,11 @@ import {FastenDisplayModel} from '../../../../../lib/models/fasten/fasten-displa import {CommonModule} from "@angular/common"; import {CodingComponent} from "../../datatypes/coding/coding.component"; import {Router, RouterModule} from "@angular/router"; +import {CodableConceptComponent} from '../../datatypes/codable-concept/codable-concept.component'; @Component({ standalone: true, - imports: [CommonModule, CodingComponent, RouterModule], + imports: [CommonModule, CodingComponent, RouterModule, CodableConceptComponent], providers: [RouterModule], selector: 'fhir-ui-table', templateUrl: './table.component.html', diff --git a/frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.html b/frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.html new file mode 100644 index 00000000..cc696b3a --- /dev/null +++ b/frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.html @@ -0,0 +1,7 @@ + +
+ {{codableConcept?.text || codableConcept?.coding?.[0]?.display}} + + ({{codableConcept?.coding?.[0]?.code || '?'}}) + +
diff --git a/frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.scss b/frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.spec.ts b/frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.spec.ts new file mode 100644 index 00000000..83a90b5f --- /dev/null +++ b/frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CodableConceptComponent } from './codable-concept.component'; + +describe('CodableConceptComponent', () => { + let component: CodableConceptComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CodableConceptComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CodableConceptComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.ts b/frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.ts new file mode 100644 index 00000000..7e00aa67 --- /dev/null +++ b/frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.ts @@ -0,0 +1,22 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {CodingComponent} from '../coding/coding.component'; +import {CodingModel} from '../../../../../lib/models/datatypes/coding-model'; +import {CodableConceptModel} from '../../../../../lib/models/datatypes/codable-concept-model'; + +@Component({ + standalone: true, + imports: [CommonModule], + selector: 'fhir-codable-concept', + templateUrl: './codable-concept.component.html', + styleUrls: ['./codable-concept.component.scss'] +}) +export class CodableConceptComponent implements OnInit { + @Input() codableConcept: CodableConceptModel + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/components/fhir/resources/allergy-intolerance/allergy-intolerance.component.ts b/frontend/src/app/components/fhir/resources/allergy-intolerance/allergy-intolerance.component.ts index 9db9d702..aaef1d78 100644 --- a/frontend/src/app/components/fhir/resources/allergy-intolerance/allergy-intolerance.component.ts +++ b/frontend/src/app/components/fhir/resources/allergy-intolerance/allergy-intolerance.component.ts @@ -29,9 +29,9 @@ export class AllergyIntoleranceComponent implements OnInit, FhirResourceComponen this.tableData = [ { label: 'Substance', - data: this.displayModel?.substance_coding, - data_type: TableRowItemDataType.CodingList, - enabled: !!this.displayModel?.substance_coding, + data: this.displayModel?.code, + data_type: TableRowItemDataType.CodableConcept, + enabled: !!this.displayModel?.code, }, { label: 'Type', diff --git a/frontend/src/app/components/fhir/resources/document-reference/document-reference.component.ts b/frontend/src/app/components/fhir/resources/document-reference/document-reference.component.ts index 49d42325..1965a75f 100644 --- a/frontend/src/app/components/fhir/resources/document-reference/document-reference.component.ts +++ b/frontend/src/app/components/fhir/resources/document-reference/document-reference.component.ts @@ -28,12 +28,12 @@ export class DocumentReferenceComponent implements OnInit, FhirResourceComponent }, { label: 'Category', - data: this.displayModel?.category?.coding, - data_type: TableRowItemDataType.CodingList, + data: this.displayModel?.category, + data_type: TableRowItemDataType.CodableConcept, enabled: !!this.displayModel?.category, }, // { - // label: 'Performer', + // label: 'Author', // data: this.displayModel?.performer, // data_type: TableRowItemDataType.Reference, // enabled: this.displayModel?.has_performer, diff --git a/frontend/src/app/components/fhir/resources/immunization/immunization.component.ts b/frontend/src/app/components/fhir/resources/immunization/immunization.component.ts index 88f3c523..18351c03 100644 --- a/frontend/src/app/components/fhir/resources/immunization/immunization.component.ts +++ b/frontend/src/app/components/fhir/resources/immunization/immunization.component.ts @@ -65,12 +65,6 @@ export class ImmunizationComponent implements OnInit, FhirResourceComponentInter data_type: TableRowItemDataType.Reference, enabled: !!this.displayModel?.performer, }, - // { - // label: 'Note', - // testId: 'note', - // data: note && , - // status: note, - // }, { label: 'Route', data: this.displayModel?.route, diff --git a/frontend/src/app/components/fhir/resources/practitioner/practitioner.component.html b/frontend/src/app/components/fhir/resources/practitioner/practitioner.component.html index e6bb86a5..1ff00e02 100644 --- a/frontend/src/app/components/fhir/resources/practitioner/practitioner.component.html +++ b/frontend/src/app/components/fhir/resources/practitioner/practitioner.component.html @@ -1,7 +1,7 @@
-
{{displayModel?.sort_title}}
+
{{displayModel?.sort_title || displayModel?.name?.[0]?.displayName}}

Date{{displayModel?.sort_date}}

{{displayModel?.status}} diff --git a/frontend/src/app/components/fhir/resources/practitioner/practitioner.component.ts b/frontend/src/app/components/fhir/resources/practitioner/practitioner.component.ts index 87039ab8..1d235980 100644 --- a/frontend/src/app/components/fhir/resources/practitioner/practitioner.component.ts +++ b/frontend/src/app/components/fhir/resources/practitioner/practitioner.component.ts @@ -48,16 +48,16 @@ export class PractitionerComponent implements OnInit, FhirResourceComponentInter // ), // status: isContactData, // }, - // { - // label: 'Address', - // data: this.displayModel?.address., - // status: !!this.displayModel?.address, - // }, - // { - // label: 'Telephone', - // data: this.displayModel.telecom, - // enabled: !!this.displayModel.telecom, - // }, + { + label: 'Address', + data: this.displayModel?.address, + enabled: !!this.displayModel?.address, + }, + { + label: 'Telephone', + data: this.displayModel.telecom, + enabled: !!this.displayModel.telecom, + }, ]; for(let idCoding of (this.displayModel?.identifier || [])){ this.tableData.push({ diff --git a/frontend/src/app/components/report-medical-history-condition/report-medical-history-condition.component.ts b/frontend/src/app/components/report-medical-history-condition/report-medical-history-condition.component.ts index 069e0f78..62c6b579 100644 --- a/frontend/src/app/components/report-medical-history-condition/report-medical-history-condition.component.ts +++ b/frontend/src/app/components/report-medical-history-condition/report-medical-history-condition.component.ts @@ -109,8 +109,8 @@ export class ReportMedicalHistoryConditionComponent implements OnInit { {}, involvedInCareMap[id], { - displayName: practitionerModel.name?.family && practitionerModel.name?.given ? `${practitionerModel.name?.family }, ${practitionerModel.name?.given}` : practitionerModel.name?.text, - role: qualification?.display || practitionerModel.name?.prefix || practitionerModel.name?.suffix, + displayName: practitionerModel.name?.[0]?.displayName, + role: qualification?.display || practitionerModel.name?.[0]?.suffix, email: email, displayModel: resource }, diff --git a/frontend/src/app/components/report-medical-history-explanation-of-benefit/report-medical-history-explanation-of-benefit.component.ts b/frontend/src/app/components/report-medical-history-explanation-of-benefit/report-medical-history-explanation-of-benefit.component.ts index cbc2e100..acd5f988 100644 --- a/frontend/src/app/components/report-medical-history-explanation-of-benefit/report-medical-history-explanation-of-benefit.component.ts +++ b/frontend/src/app/components/report-medical-history-explanation-of-benefit/report-medical-history-explanation-of-benefit.component.ts @@ -117,8 +117,8 @@ export class ReportMedicalHistoryExplanationOfBenefitComponent implements OnInit {}, involvedInCareMap[id], { - displayName: practitionerModel.name?.family && practitionerModel.name?.given ? `${practitionerModel.name?.family }, ${practitionerModel.name?.given}` : practitionerModel.name?.text, - role: qualification?.display || practitionerModel.name?.prefix || practitionerModel.name?.suffix, + displayName: practitionerModel.name?.[0]?.displayName, + role: qualification?.display || practitionerModel.name?.[0]?.suffix, email: email, displayModel: resource, }, diff --git a/frontend/src/app/components/shared.module.ts b/frontend/src/app/components/shared.module.ts index 711dd820..9afe60c6 100644 --- a/frontend/src/app/components/shared.module.ts +++ b/frontend/src/app/components/shared.module.ts @@ -75,6 +75,7 @@ import { MedicalSourcesFilterComponent } from './medical-sources-filter/medical- import { MedicalSourcesConnectedComponent } from './medical-sources-connected/medical-sources-connected.component'; import { MedicalSourcesCategoryLookupPipe } from './medical-sources-filter/medical-sources-category-lookup.pipe'; import { MedicalSourcesCardComponent } from './medical-sources-card/medical-sources-card.component'; +import { CodableConceptComponent } from './fhir/datatypes/codable-concept/codable-concept.component'; @NgModule({ imports: [ @@ -112,6 +113,7 @@ import { MedicalSourcesCardComponent } from './medical-sources-card/medical-sour BinaryComponent, GridstackComponent, GridstackItemComponent, + CodableConceptComponent ], declarations: [ @@ -163,74 +165,75 @@ import { MedicalSourcesCardComponent } from './medical-sources-card/medical-sour MedicalSourcesCategoryLookupPipe, MedicalSourcesCardComponent, ], - exports: [ - BinaryComponent, - ComponentsSidebarComponent, - DiagnosticReportComponent, - DocumentReferenceComponent, - FallbackComponent, - FhirResourceComponent, - FhirResourceOutletDirective, - ImmunizationComponent, - ListAdverseEventComponent, - ListAllergyIntoleranceComponent, - ListAppointmentComponent, - ListCarePlanComponent, - ListCommunicationComponent, - ListConditionComponent, - ListCoverageComponent, - ListDeviceComponent, - ListDeviceRequestComponent, - ListDiagnosticReportComponent, - ListDocumentReferenceComponent, - ListEncounterComponent, - ListGenericResourceComponent, - ListGoalComponent, - ListImmunizationComponent, - ListMedicationAdministrationComponent, - ListMedicationComponent, - ListMedicationDispenseComponent, - ListMedicationRequestComponent, - ListNutritionOrderComponent, - ListObservationComponent, - ListPatientComponent, - ListProcedureComponent, - ListServiceRequestComponent, - MedicalSourcesFilterComponent, - MedicationRequestComponent, - NlmTypeaheadComponent, - PractitionerComponent, - ProcedureComponent, - ReportHeaderComponent, - ReportLabsObservationComponent, - ReportMedicalHistoryConditionComponent, - ReportMedicalHistoryEditorComponent, - ReportMedicalHistoryExplanationOfBenefitComponent, - ResourceListComponent, - ResourceListOutletDirective, - ToastComponent, - UtilitiesSidebarComponent, - MedicalSourcesCardComponent, - MedicalSourcesConnectedComponent, + exports: [ + BinaryComponent, + ComponentsSidebarComponent, + DiagnosticReportComponent, + DocumentReferenceComponent, + FallbackComponent, + FhirResourceComponent, + FhirResourceOutletDirective, + ImmunizationComponent, + ListAdverseEventComponent, + ListAllergyIntoleranceComponent, + ListAppointmentComponent, + ListCarePlanComponent, + ListCommunicationComponent, + ListConditionComponent, + ListCoverageComponent, + ListDeviceComponent, + ListDeviceRequestComponent, + ListDiagnosticReportComponent, + ListDocumentReferenceComponent, + ListEncounterComponent, + ListGenericResourceComponent, + ListGoalComponent, + ListImmunizationComponent, + ListMedicationAdministrationComponent, + ListMedicationComponent, + ListMedicationDispenseComponent, + ListMedicationRequestComponent, + ListNutritionOrderComponent, + ListObservationComponent, + ListPatientComponent, + ListProcedureComponent, + ListServiceRequestComponent, + MedicalSourcesFilterComponent, + MedicationRequestComponent, + NlmTypeaheadComponent, + PractitionerComponent, + ProcedureComponent, + ReportHeaderComponent, + ReportLabsObservationComponent, + ReportMedicalHistoryConditionComponent, + ReportMedicalHistoryEditorComponent, + ReportMedicalHistoryExplanationOfBenefitComponent, + ResourceListComponent, + ResourceListOutletDirective, + ToastComponent, + UtilitiesSidebarComponent, + MedicalSourcesCardComponent, + MedicalSourcesConnectedComponent, - //standalone components - BadgeComponent, - TableComponent, - CodingComponent, - LoadingSpinnerComponent, - GlossaryLookupComponent, - AllergyIntoleranceComponent, - MedicationComponent, - MedicationRequestComponent, - PractitionerComponent, - ProcedureComponent, - ImmunizationComponent, - BinaryComponent, - GridstackComponent, - GridstackItemComponent, - MedicalSourcesCategoryLookupPipe, + //standalone components + BadgeComponent, + TableComponent, + CodingComponent, + LoadingSpinnerComponent, + GlossaryLookupComponent, + AllergyIntoleranceComponent, + MedicationComponent, + MedicationRequestComponent, + PractitionerComponent, + ProcedureComponent, + ImmunizationComponent, + BinaryComponent, + GridstackComponent, + GridstackItemComponent, + MedicalSourcesCategoryLookupPipe, + CodableConceptComponent, - ] + ] }) export class SharedModule { } diff --git a/frontend/src/lib/models/datatypes/human-name-model.ts b/frontend/src/lib/models/datatypes/human-name-model.ts index 6a8a5374..450e7de9 100644 --- a/frontend/src/lib/models/datatypes/human-name-model.ts +++ b/frontend/src/lib/models/datatypes/human-name-model.ts @@ -6,7 +6,7 @@ export class HumanNameModel { suffix: string textName: string use: string - header: string + displayName: string constructor(fhirData: any) { @@ -15,6 +15,6 @@ export class HumanNameModel { this.suffix = _.get(fhirData, 'suffix', []).join(' '); this.textName = _.get(fhirData, 'text'); this.use = _.get(fhirData, 'use'); - this.header = this.textName ? this.textName : `${this.givenName} ${this.familyName} ${this.suffix}`.trim(); + this.displayName = this.textName ? this.textName : `${this.givenName} ${this.familyName}`.trim(); } } diff --git a/frontend/src/lib/models/resources/practitioner-model.ts b/frontend/src/lib/models/resources/practitioner-model.ts index b09eee0f..769d6fdc 100644 --- a/frontend/src/lib/models/resources/practitioner-model.ts +++ b/frontend/src/lib/models/resources/practitioner-model.ts @@ -5,11 +5,12 @@ import {ReferenceModel} from '../datatypes/reference-model'; import {CodingModel} from '../datatypes/coding-model'; import {FastenDisplayModel} from '../fasten/fasten-display-model'; import {FastenOptions} from '../fasten/fasten-options'; +import {HumanNameModel} from '../datatypes/human-name-model'; export class PractitionerModel extends FastenDisplayModel { identifier: CodingModel[]|undefined - name: any|undefined + name: HumanNameModel[]|undefined gender: string|undefined status: string|undefined is_contact_data: boolean|undefined @@ -44,11 +45,11 @@ export class PractitionerModel extends FastenDisplayModel { }; dstu2DTO(fhirResource:any){ - this.name = _.get(fhirResource, 'name'); + this.name = [new HumanNameModel(_.get(fhirResource, 'name'))]; }; stu3DTO(fhirResource:any){ - this.name = _.get(fhirResource, 'name.0'); + this.name = _.get(fhirResource, 'name',[]).map((name:any): HumanNameModel => new HumanNameModel(name)); this.address = _.get(fhirResource, 'address.0'); this.telecom = _.get(fhirResource, 'telecom'); };