UI updates.

This commit is contained in:
Jason Kulatunga 2023-08-11 21:20:49 -06:00
parent f94f29da52
commit 83114f0067
17 changed files with 158 additions and 101 deletions

View File

@ -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",
}

View File

@ -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>

View File

@ -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',

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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 {
}
}

View File

@ -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',

View File

@ -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,

View File

@ -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,

View File

@ -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>

View File

@ -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({

View File

@ -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
},

View File

@ -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,
},

View File

@ -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 { }

View File

@ -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();
}
}

View File

@ -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');
};