UI updates.

fastenhealth · Aug 12, 2023 · 83114f0 · 83114f0
1 parent f94f29d
commit 83114f0
Show file tree

Hide file tree

Showing 17 changed files with 158 additions and 101 deletions.
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
@@ -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
@@ -10,8 +10,12 @@
         <ng-container [ngTemplateOutlet]="rowItem.data_type == 'reference' ? dataTypeReference :
          rowItem.data_type == 'coding'? dataTypeCoding :
          rowItem.data_type == 'codingList'? dataTypeCodingList :
+         rowItem.data_type == 'codableConcept'? dataTypeCodableConcept :
          dataTypeString"></ng-container>
 
+        <ng-template #dataTypeCodableConcept>
+          <fhir-codable-concept [codableConcept]="rowItem.data"></fhir-codable-concept>
+        </ng-template>
         <ng-template #dataTypeCoding>
           <fhir-coding [coding]="rowItem.data"></fhir-coding>
         </ng-template>

diff --git 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
@@ -0,0 +1,7 @@
+
+<div>
+  <span>{{codableConcept?.text || codableConcept?.coding?.[0]?.display}}</span>
+  <span *ngIf="codableConcept?.coding?.[0]?.code" [title]="codableConcept?.coding?.[0]?.system">
+  ({{codableConcept?.coding?.[0]?.code || '?'}})
+  </span>
+</div>
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
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
@@ -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<CodableConceptComponent>;
+
+  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
@@ -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/...nd/src/app/components/fhir/resources/allergy-intolerance/allergy-intolerance.component.ts b/...nd/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/...tend/src/app/components/fhir/resources/document-reference/document-reference.component.ts b/...tend/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
@@ -65,12 +65,6 @@ export class ImmunizationComponent implements OnInit, FhirResourceComponentInter
       data_type: TableRowItemDataType.Reference,
       enabled: !!this.displayModel?.performer,
     },
-    // {
-    //   label: 'Note',
-    //     testId: 'note',
-    //   data: note && <Annotation fhirData={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
@@ -1,7 +1,7 @@
 <div class="card card-fhir-resource" >
   <div class="card-header" (click)="isCollapsed = ! isCollapsed">
     <div>
-      <h6 class="card-title">{{displayModel?.sort_title}}</h6>
+      <h6 class="card-title">{{displayModel?.sort_title || displayModel?.name?.[0]?.displayName}}</h6>
       <p class="card-text tx-gray-400" *ngIf="displayModel?.sort_date"><strong>Date</strong>{{displayModel?.sort_date}}</p>
     </div>
     <fhir-ui-badge class="float-right" [status]="displayModel?.status">{{displayModel?.status}}</fhir-ui-badge>

diff --git 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/...components/report-medical-history-condition/report-medical-history-condition.component.ts b/...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/...history-explanation-of-benefit/report-medical-history-explanation-of-benefit.component.ts b/...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
@@ -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
@@ -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();
   }
 }