ui fixes for medical history page. (broken details links and [Object object])

frontend/src/app/components/fhir/resources/allergy-intolerance/allergy-intolerance.component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {AllergyIntoleranceModel} from '../../../../../lib/models/resources/allergy-intolerance-model';
 import {NgbCollapseModule} from "@ng-bootstrap/ng-bootstrap";
 import {CommonModule} from "@angular/common";
@@ -10,7 +10,7 @@ import {TableComponent} from "../../common/table/table.component";
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent],
+  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule],
   selector: 'fhir-allergy-intolerance',
   templateUrl: './allergy-intolerance.component.html',
   styleUrls: ['./allergy-intolerance.component.scss']

frontend/src/app/components/fhir/resources/binary/binary.component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {BinaryModel} from '../../../../../lib/models/resources/binary-model';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {AttachmentModel} from '../../../../../lib/models/datatypes/attachment-model';
 import {FastenApiService} from '../../../../services/fasten-api.service';
 import {NgbCollapseModule} from "@ng-bootstrap/ng-bootstrap";
@@ -30,6 +30,7 @@ import {AuthService} from "../../../../services/auth.service";
     BinaryTextComponent,
     DicomComponent,
     HighlightModule,
+    RouterModule
   ],
   providers: [FastenApiService, AuthService],
   selector: 'fhir-binary',

frontend/src/app/components/fhir/resources/immunization/immunization.component.ts

@@ -1,6 +1,6 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {ImmunizationModel} from '../../../../../lib/models/resources/immunization-model';
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
 import * as _ from "lodash";
@@ -11,7 +11,7 @@ import {TableComponent} from "../../common/table/table.component";
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent],
+  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule],
   selector: 'fhir-immunization',
   templateUrl: './immunization.component.html',
   styleUrls: ['./immunization.component.scss']

frontend/src/app/components/fhir/resources/medication-request/medication-request.component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {MedicationRequestModel} from '../../../../../lib/models/resources/medication-request-model';
 import {NgbCollapseModule} from "@ng-bootstrap/ng-bootstrap";
 import {CommonModule} from "@angular/common";
@@ -11,7 +11,7 @@ import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, GlossaryLookupComponent],
+  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, GlossaryLookupComponent, RouterModule],
   selector: 'fhir-medication-request',
   templateUrl: './medication-request.component.html',
   styleUrls: ['./medication-request.component.scss']

frontend/src/app/components/fhir/resources/medication/medication.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?.title?.display}}</h6>
+      <h6 class="card-title">{{displayModel?.title}}</h6>
       <p class="card-text tx-gray-400" *ngIf="displayModel?.sort_date"><strong>Start date</strong> {{displayModel?.sort_date | date}}</p>
     </div>
     <fhir-ui-badge class="float-right" [status]="displayModel?.status">{{displayModel?.status}}</fhir-ui-badge>

frontend/src/app/components/fhir/resources/medication/medication.component.ts

@@ -1,17 +1,18 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {MedicationModel} from '../../../../../lib/models/resources/medication-model';
 import {NgbCollapseModule} from "@ng-bootstrap/ng-bootstrap";
 import {CommonModule} from "@angular/common";
 import {BadgeComponent} from "../../common/badge/badge.component";
 import {TableComponent} from "../../common/table/table.component";
 import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.component';
+import * as _ from "lodash";
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, GlossaryLookupComponent],
+  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, GlossaryLookupComponent, RouterModule],
   selector: 'fhir-medication',
   templateUrl: './medication.component.html',
   styleUrls: ['./medication.component.scss']
@@ -31,8 +32,8 @@ export class MedicationComponent implements OnInit, FhirResourceComponentInterfa
   constructor(public changeRef: ChangeDetectorRef, public router: Router) {}
 
   ngOnInit(): void {
-    this.resourceCode = this.displayModel?.title?.code
-    this.resourceCodeSystem = this.displayModel?.title?.system
+    this.resourceCode = _.get(this.displayModel?.code, 'coding[0].code')
+    this.resourceCodeSystem = _.get(this.displayModel?.code, 'coding[0].system')
 
     this.tableData = [
       {

frontend/src/app/components/fhir/resources/practitioner/practitioner.component.ts

@@ -2,7 +2,7 @@ import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
 import {ImmunizationModel} from '../../../../../lib/models/resources/immunization-model';
 import {TableRowItem} from '../../common/table/table-row-item';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {PractitionerModel} from '../../../../../lib/models/resources/practitioner-model';
 import {NgbCollapseModule} from "@ng-bootstrap/ng-bootstrap";
 import {CommonModule} from "@angular/common";
@@ -11,7 +11,7 @@ import {TableComponent} from "../../common/table/table.component";
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent],
+  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule],
   selector: 'app-practitioner',
   templateUrl: './practitioner.component.html',
   styleUrls: ['./practitioner.component.scss']

frontend/src/app/components/fhir/resources/procedure/procedure.component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {ProcedureModel} from '../../../../../lib/models/resources/procedure-model';
 import {NgbCollapseModule} from "@ng-bootstrap/ng-bootstrap";
 import {CommonModule} from "@angular/common";
@@ -11,7 +11,7 @@ import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, GlossaryLookupComponent],
+  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, GlossaryLookupComponent, RouterModule],
   selector: 'fhir-procedure',
   templateUrl: './procedure.component.html',
   styleUrls: ['./procedure.component.scss']

frontend/src/app/components/report-medical-history-condition/report-medical-history-condition.component.html

@@ -80,7 +80,7 @@
                   </ng-template>
                 </li>
                 <li class="cursor-pointer" [ngbPopover]="medicationPopoverContent" placement="top-left" popoverClass="card-fhir-resource-popover" *ngFor="let medication of encounter?.related_resources?.Medication">
-                  {{medication.title}}
+                  {{medication.title }}
 
                   <ng-template #medicationPopoverContent>
                     <fhir-resource [displayModel]="medication"></fhir-resource>

frontend/src/lib/models/resources/adverse-event-model.ts

@@ -6,6 +6,8 @@ import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
 
 export class AdverseEventModel extends FastenDisplayModel {
+  code: CodableConceptModel | undefined
+
   subject: ReferenceModel | undefined
   description: string | undefined
   event_type: string | undefined
@@ -25,6 +27,7 @@ export class AdverseEventModel extends FastenDisplayModel {
 
 
   commonDTO(fhirResource:any ){
+    this.code = _.get(fhirResource, 'event');
     this.subject = _.get(fhirResource, 'subject');
     this.date = _.get(fhirResource, 'date');
     let seriousness = _.get(fhirResource, 'seriousness', [])

frontend/src/lib/models/resources/allergy-intolerance-model.ts

@@ -4,8 +4,10 @@ import {fhirVersions, ResourceType} from '../constants'
 import {ReferenceModel} from '../datatypes/reference-model';
 import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
+import {CodableConceptModel} from '../datatypes/codable-concept-model';
 
 export class AllergyIntoleranceModel extends FastenDisplayModel {
+  code: CodableConceptModel | undefined
 
   title: string | undefined
   status: string | undefined
@@ -26,6 +28,7 @@ export class AllergyIntoleranceModel extends FastenDisplayModel {
 
 
   commonDTO(fhirResource: any) {
+    this.code = _.get(fhirResource, 'code');
     // this.reaction = _.get(fhirResource, 'reaction', []);
     this.asserter = _.get(fhirResource, 'asserter');
     this.type = _.get(fhirResource, 'type');

frontend/src/lib/models/resources/appointment-model.ts

@@ -7,7 +7,7 @@ import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
 
 export class AppointmentModel extends FastenDisplayModel {
-
+  code: CodableConceptModel | undefined
   description: string|undefined
   status: string|undefined
   start: string|undefined
@@ -30,6 +30,7 @@ export class AppointmentModel extends FastenDisplayModel {
 
 
   commonDTO(fhirResource:any) {
+    this.code = _.get(fhirResource, 'serviceType.0') || _.get(fhirResource, 'reasonCode.0');
     this.description = _.get(fhirResource, 'description');
     this.status = _.get(fhirResource, 'status');
     this.start = _.get(fhirResource, 'start');

frontend/src/lib/models/resources/care-plan-model.ts

@@ -3,9 +3,10 @@ import * as _ from "lodash";
 import {ReferenceModel} from '../datatypes/reference-model';
 import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
+import {CodableConceptModel} from '../datatypes/codable-concept-model';
 
 export class CarePlanModel extends FastenDisplayModel {
-
+  code: CodableConceptModel | undefined
   status: string | undefined
   expiry: string | undefined
   category: any[] | undefined
@@ -32,6 +33,8 @@ export class CarePlanModel extends FastenDisplayModel {
   }
 
   commonDTO(fhirResource: any) {
+    this.code = _.get(fhirResource, 'category');
+
     this.status = _.get(fhirResource, 'status', '');
     this.expiry = _.get(fhirResource, 'expiry');
     this.category = _.get(fhirResource, 'category');

frontend/src/lib/models/resources/care-team-model.ts

@@ -6,7 +6,7 @@ import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
 
 export class CareTeamModel extends FastenDisplayModel {
-
+  code: CodableConceptModel | undefined
   name: string | undefined
   status: string | undefined
   period_start: string | undefined

frontend/src/lib/models/resources/condition-model.ts

@@ -6,7 +6,7 @@ import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
 
 export class ConditionModel extends FastenDisplayModel {
-
+  code: CodableConceptModel | undefined
   code_text: string | undefined
   code_id: string | undefined
   code_system: string | undefined
@@ -30,6 +30,7 @@ export class ConditionModel extends FastenDisplayModel {
 
 
   commonDTO(fhirResource:any){
+    this.code = _.get(fhirResource, 'code')
     this.code_text =
       _.get(fhirResource, 'code.coding.0.display') ||
       _.get(fhirResource, 'code.text') ||

frontend/src/lib/models/resources/device-model.ts

@@ -6,6 +6,7 @@ import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
 
 export class DeviceModel extends FastenDisplayModel {
+  code: CodableConceptModel | undefined
 
   model: string | undefined
   status: string | undefined
@@ -27,6 +28,7 @@ export class DeviceModel extends FastenDisplayModel {
 
 
   commonDTO(fhirResource:any){
+    this.code = _.get(fhirResource, 'type');
     this.model = _.get(fhirResource, 'model') || _.get(fhirResource,"code.text", 'Device');
     this.status = _.get(fhirResource, 'status', '');
     this.get_type_coding = _.get(fhirResource, 'type.coding');

frontend/src/lib/models/resources/diagnostic-report-model.ts

@@ -7,6 +7,7 @@ import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
 
 export class DiagnosticReportModel extends FastenDisplayModel {
+  code: CodableConceptModel | undefined
 
   title: string | undefined
   status: string | undefined
@@ -26,6 +27,7 @@ export class DiagnosticReportModel extends FastenDisplayModel {
   }
 
   commonDTO(fhirResource:any){
+    this.code = _.get(fhirResource, 'code');
     this.title =
       _.get(fhirResource, 'code.text') ||
       _.get(fhirResource, 'code.display') ||

frontend/src/lib/models/resources/document-reference-model.ts

@@ -10,7 +10,7 @@ import {BinaryModel} from './binary-model';
 import {AttachmentModel} from '../datatypes/attachment-model';
 
 export class DocumentReferenceModel extends FastenDisplayModel {
-
+  code: CodableConceptModel | undefined
   description: string | undefined
   status: string | undefined
   category: CodableConceptModel | undefined
@@ -36,6 +36,7 @@ export class DocumentReferenceModel extends FastenDisplayModel {
 
 
   commonDTO(fhirResource:any){
+    this.code = _.get(fhirResource, 'type');
     this.description = _.get(fhirResource, 'description');
     this.status = _.get(fhirResource, 'status');
     this.type_coding = _.get(fhirResource, 'type.coding[0]');

frontend/src/lib/models/resources/encounter-model.ts

@@ -7,7 +7,7 @@ import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
 
 export class EncounterModel extends FastenDisplayModel {
-
+  code: CodableConceptModel | undefined
   period_end: string | undefined
   period_start: string | undefined
   has_participant: boolean | undefined
@@ -30,6 +30,7 @@ export class EncounterModel extends FastenDisplayModel {
   }
 
   commonDTO(fhirResource:any){
+    this.code = _.get(fhirResource, 'serviceType') || _.get(fhirResource, 'type.0');
     this.resource_status = _.get(fhirResource, 'status');
     this.location_display = _.get(
       fhirResource,

frontend/src/lib/models/resources/medication-dispense-model.ts

@@ -7,7 +7,7 @@ import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
 
 export class MedicationDispenseModel extends FastenDisplayModel {
-
+  code: CodableConceptModel | undefined
   medication_title: string|undefined
   medication_coding: string|undefined
   type_coding: string|undefined
@@ -24,6 +24,7 @@ export class MedicationDispenseModel extends FastenDisplayModel {
 
 
   commonDTO(fhirResource:any){
+    this.code = _.get(fhirResource, 'medicationCodeableConcept');
     this.type_coding = _.get(fhirResource, 'type.coding.0');
     this.when_prepared = _.get(fhirResource, 'whenPrepared');
   };

frontend/src/lib/models/resources/medication-model.ts

@@ -7,8 +7,8 @@ import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
 
 export class MedicationModel extends FastenDisplayModel {
-
-  title: CodingModel|undefined
+  code: CodableConceptModel|undefined
+  title: string|undefined
   is_brand: string|undefined
   manufacturer: string|undefined
   has_product_form:boolean|undefined
@@ -29,10 +29,8 @@ export class MedicationModel extends FastenDisplayModel {
   }
 
   commonDTO(fhirResource:any){
-    this.title = _.get(fhirResource, 'code.coding.0');
-    if (!this.title) {
-      this.title = { display: _.get(fhirResource, 'code.text', '') };
-    }
+    this.code = _.get(fhirResource, 'code')
+    this.title =  _.get(fhirResource, 'code.text') || _.get(fhirResource, 'code.coding.0.display');
     this.manufacturer = _.get(fhirResource, 'manufacturer');
   };
 

frontend/src/lib/models/resources/medication-request-model.ts

@@ -4,9 +4,10 @@ import {fhirVersions, ResourceType} from '../constants';
 import {FastenOptions} from '../fasten/fasten-options';
 import * as _ from "lodash";
 import {ReferenceModel} from '../datatypes/reference-model';
+import {CodableConceptModel} from '../datatypes/codable-concept-model';
 
 export class MedicationRequestModel extends FastenDisplayModel {
-
+  code: CodableConceptModel|undefined
   display: string|undefined
   medication_reference: ReferenceModel|undefined
   medication_codeable_concept: CodingModel|undefined
@@ -27,6 +28,7 @@ export class MedicationRequestModel extends FastenDisplayModel {
       fhirResource,
       'medicationCodeableConcept.coding.0',
     );
+    this.code = _.get(fhirResource, 'medicationCodeableConcept');
     this.reason_code = _.get(fhirResource, 'reasonCode');
     this.status = _.get(fhirResource, 'status');
     this.dosage_instruction = _.get(fhirResource, 'dosageInstruction');
@@ -37,6 +39,6 @@ export class MedicationRequestModel extends FastenDisplayModel {
     this.created = _.get(fhirResource, 'authoredOn');
     this.intent = _.get(fhirResource, 'intent');
 
-    this.display = _.get(fhirResource, 'medicationCodeableConcept.text') || this.medication_codeable_concept?.display || _.get(fhirResource, 'medicationCodeableConcept.text') || this.medication_reference?.display
+    this.display = _.get(fhirResource, 'medicationCodeableConcept.text') || _.get(fhirResource, 'medicationCodeableConcept.0.display') || _.get(fhirResource, 'dosageInstruction.0.text') || 'unknown'
   }
 }

frontend/src/lib/models/resources/observation-model.ts

@@ -8,7 +8,7 @@ import {FastenOptions} from '../fasten/fasten-options';
 
 
 export class ObservationModel extends FastenDisplayModel {
-
+  code: CodableConceptModel | undefined
   effective_date: string
   code_coding_display: string
   code_text: string
@@ -25,6 +25,7 @@ export class ObservationModel extends FastenDisplayModel {
     super(fastenOptions)
     this.source_resource_type = ResourceType.Observation
     this.effective_date = _.get(fhirResource, 'effectiveDateTime');
+    this.code = _.get(fhirResource, 'code');
     this.code_coding_display = _.get(fhirResource, 'code.coding.0.display');
     this.code_text = _.get(fhirResource, 'code.text', '');
     this.value_quantity_value = _.get(fhirResource, 'valueQuantity.value', '');

frontend/src/lib/models/resources/procedure-model.ts

@@ -7,7 +7,7 @@ import {FastenDisplayModel} from '../fasten/fasten-display-model';
 import {FastenOptions} from '../fasten/fasten-options';
 
 export class ProcedureModel extends FastenDisplayModel {
-
+  code: CodableConceptModel| undefined
   display: string|undefined;
   status: string|undefined;
   has_performed_datetime: boolean|undefined;
@@ -42,6 +42,7 @@ export class ProcedureModel extends FastenDisplayModel {
     this.has_performed_period = !!(this.performed_period_start || this.performed_period_end);
     this.has_coding = _.has(fhirResource, 'code.coding');
     this.coding = _.get(fhirResource, 'code.coding', []);
+    this.code = _.get(fhirResource, 'code');
     this.category = _.get(fhirResource, 'category.coding[0]');
     this.location_reference = _.get(fhirResource, 'location');
     this.has_performer_data = _.has(fhirResource, 'performer.0.actor.display');