making sure the fhir-card can be collapsed at init.

frontend/src/app/components/fhir-card/fhir-card/fhir-card-component-interface.ts

@@ -4,6 +4,7 @@ import {FastenDisplayModel} from '../../../../lib/models/fasten/fasten-display-m
 export interface FhirCardComponentInterface {
   displayModel: FastenDisplayModel;
   showDetails: boolean;
+  isCollapsed: boolean;
 
   //these are used to populate the description of the resource. May not be available for all resources
   resourceCode?: string;

frontend/src/app/components/fhir-card/fhir-card/fhir-card.component.ts

@@ -41,6 +41,7 @@ export class FhirCardComponent implements OnInit, OnChanges {
 
   @Input() displayModel: FastenDisplayModel
   @Input() showDetails: boolean = true
+  @Input() isCollapsed: boolean = false
 
   //location to dynamically load the displayModel
   @ViewChild(FhirCardOutletDirective, {static: true}) fhirCardOutlet!: FhirCardOutletDirective;
@@ -65,6 +66,7 @@ export class FhirCardComponent implements OnInit, OnChanges {
       const componentRef = viewContainerRef.createComponent<FhirCardComponentInterface>(componentType);
       componentRef.instance.displayModel = this.displayModel;
       componentRef.instance.showDetails = this.showDetails;
+      componentRef.instance.isCollapsed = this.isCollapsed;
       componentRef.instance.markForCheck()
 
     }

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

@@ -18,8 +18,7 @@ import {TableComponent} from "../../common/table/table.component";
 export class AllergyIntoleranceComponent implements OnInit, FhirCardComponentInterface {
   @Input() displayModel: AllergyIntoleranceModel
   @Input() showDetails: boolean = true
-
-  isCollapsed: boolean = false
+  @Input() isCollapsed: boolean = false
 
   tableData: TableRowItem[] = []
 

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

@@ -42,6 +42,7 @@ export class BinaryComponent implements OnInit, FhirCardComponentInterface {
   @Input() showDetails: boolean = true
   @Input() attachmentSourceId: string
   @Input() attachmentModel: AttachmentModel //can only have attachmentModel or binaryModel, not both.
+  @Input() isCollapsed: boolean = false
 
   loading: boolean = false
   constructor(public changeRef: ChangeDetectorRef, public router: Router, public fastenApi: FastenApiService) {}

frontend/src/app/components/fhir-card/resources/diagnostic-report/diagnostic-report.component.ts

@@ -20,11 +20,12 @@ import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.
 export class DiagnosticReportComponent implements OnInit, FhirCardComponentInterface {
   @Input() displayModel: DiagnosticReportModel
   @Input() showDetails: boolean = true
+  @Input() isCollapsed: boolean = false
+
   //these are used to populate the description of the resource. May not be available for all resources
   resourceCode?: string;
   resourceCodeSystem?: string;
 
-  isCollapsed: boolean = false
   tableData: TableRowItem[] = []
 
   constructor(public changeRef: ChangeDetectorRef, public router: Router) {}

frontend/src/app/components/fhir-card/resources/document-reference/document-reference.component.ts

@@ -21,7 +21,7 @@ import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.
 export class DocumentReferenceComponent implements OnInit, FhirCardComponentInterface {
   @Input() displayModel: DocumentReferenceModel
   @Input() showDetails: boolean = true
-  isCollapsed: boolean = false
+  @Input() isCollapsed: boolean = false
   tableData: TableRowItem[] = []
 
   constructor(public changeRef: ChangeDetectorRef, public router: Router) {}

frontend/src/app/components/fhir-card/resources/encounter/encounter.component.ts

@@ -19,13 +19,12 @@ import {EncounterModel} from '../../../../../lib/models/resources/encounter-mode
 export class EncounterComponent implements OnInit, FhirCardComponentInterface {
   @Input() displayModel: EncounterModel | null
   @Input() showDetails: boolean = true
+  @Input() isCollapsed: boolean = false
 
   //these are used to populate the description of the resource. May not be available for all resources
   resourceCode?: string;
   resourceCodeSystem?: string;
 
-  isCollapsed: boolean = false
-
   tableData: TableRowItem[] = []
 
   constructor(public changeRef: ChangeDetectorRef, public router: Router) { }

frontend/src/app/components/fhir-card/resources/fallback/fallback.component.ts

@@ -16,6 +16,7 @@ import {HighlightModule} from 'ngx-highlightjs';
 export class FallbackComponent implements OnInit, FhirCardComponentInterface {
   @Input() displayModel: BinaryModel
   @Input() showDetails: boolean = true
+  @Input() isCollapsed: boolean = false
 
   constructor(public changeRef: ChangeDetectorRef, public router: Router) {}
 

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

@@ -19,8 +19,7 @@ import {TableComponent} from "../../common/table/table.component";
 export class ImmunizationComponent implements OnInit, FhirCardComponentInterface {
   @Input() displayModel: ImmunizationModel
   @Input() showDetails: boolean = true
-
-  isCollapsed: boolean = false
+  @Input() isCollapsed: boolean = false
 
   tableData: TableRowItem[] = []
 

frontend/src/app/components/fhir-card/resources/location/location.component.ts

@@ -20,8 +20,8 @@ import {LocationModel} from '../../../../../lib/models/resources/location-model'
 export class LocationComponent implements OnInit, FhirCardComponentInterface {
   @Input() displayModel: LocationModel
   @Input() showDetails: boolean = true
+  @Input() isCollapsed: boolean = false
 
-  isCollapsed: boolean = false
   tableData: TableRowItem[] = []
 
   constructor(public changeRef: ChangeDetectorRef, public router: Router) { }

frontend/src/app/components/fhir-card/resources/media/media.component.ts

@@ -20,7 +20,7 @@ import {BinaryComponent} from '../binary/binary.component';
 export class MediaComponent implements OnInit, FhirCardComponentInterface{
   @Input() displayModel: MediaModel
   @Input() showDetails: boolean = true
-  isCollapsed: boolean = false
+  @Input() isCollapsed: boolean = false
   tableData: TableRowItem[] = []
 
   constructor(public changeRef: ChangeDetectorRef, public router: Router) {}

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

@@ -19,12 +19,12 @@ import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.
 export class MedicationRequestComponent implements OnInit, FhirCardComponentInterface {
   @Input() displayModel: MedicationRequestModel | null
   @Input() showDetails: boolean = true
+  @Input() isCollapsed: boolean = false
+
   //these are used to populate the description of the resource. May not be available for all resources
   resourceCode?: string;
   resourceCodeSystem?: string;
 
-  isCollapsed: boolean = false
-
   tableData: TableRowItem[] = []
 
   constructor(public changeRef: ChangeDetectorRef, public router: Router) {}

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

@@ -20,13 +20,12 @@ import * as _ from "lodash";
 export class MedicationComponent implements OnInit, FhirCardComponentInterface {
   @Input() displayModel: MedicationModel
   @Input() showDetails: boolean = true
+  @Input() isCollapsed: boolean = false
 
   //these are used to populate the description of the resource. May not be available for all resources
   resourceCode?: string;
   resourceCodeSystem?: string;
 
-  isCollapsed: boolean = false
-
   tableData: TableRowItem[] = []
 
   constructor(public changeRef: ChangeDetectorRef, public router: Router) {}

frontend/src/app/components/fhir-card/resources/observation/observation.component.ts

@@ -21,8 +21,8 @@ import {NgChartsModule} from 'ng2-charts';
 export class ObservationComponent implements OnInit {
   @Input() displayModel: ObservationModel
   @Input() showDetails: boolean = true
+  @Input() isCollapsed: boolean = false
 
-  isCollapsed: boolean = false
   tableData: TableRowItem[] = []
 
   //observation chart data

frontend/src/app/components/fhir-card/resources/organization/organization.component.ts

@@ -18,8 +18,8 @@ import {OrganizationModel} from '../../../../../lib/models/resources/organizatio
 export class OrganizationComponent implements OnInit {
   @Input() displayModel: OrganizationModel
   @Input() showDetails: boolean = true
+  @Input() isCollapsed: boolean = false
 
-  isCollapsed: boolean = false
   tableData: TableRowItem[] = []
 
   constructor(public changeRef: ChangeDetectorRef, public router: Router) { }

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

@@ -19,8 +19,7 @@ import {TableComponent} from "../../common/table/table.component";
 export class PractitionerComponent implements OnInit, FhirCardComponentInterface {
   @Input() displayModel: PractitionerModel | null
   @Input() showDetails: boolean = true
-
-  isCollapsed: boolean = false
+  @Input() isCollapsed: boolean = false
 
   tableData: TableRowItem[] = []
 

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

@@ -19,13 +19,12 @@ import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.
 export class ProcedureComponent implements OnInit, FhirCardComponentInterface {
   @Input() displayModel: ProcedureModel | null
   @Input() showDetails: boolean = true
+  @Input() isCollapsed: boolean = false
 
   //these are used to populate the description of the resource. May not be available for all resources
   resourceCode?: string;
   resourceCodeSystem?: string;
 
-  isCollapsed: boolean = false
-
   tableData: TableRowItem[] = []
 
   constructor(public changeRef: ChangeDetectorRef, public router: Router) {}

frontend/src/app/components/medical-record-wizard/medical-record-wizard.component.html

@@ -28,25 +28,26 @@ <h4 class="modal-title"> Medical Record Wizard</h4>
           <ng-template ngbNavContent>
             <div>
               <h6 class="card-title">Encounter</h6>
-              <p class="card-text">
+              <p class="card-text mg-b-10">
                 An Encounter refers to a meeting or interaction with a healthcare provider, such as a doctor's appointment, surgery or a visit to discuss and address your health concerns
               </p>
             </div>
-            <fhir-card [showDetails]="false" [displayModel]="existingEncounter"></fhir-card>
+            <fhir-card [showDetails]="false" [displayModel]="existingEncounter" [isCollapsed]="true"></fhir-card>
 
           </ng-template>
         </ng-container>
         <ng-container ngbNavItem="medications">
           <a class="nav-link" ngbNavLink>Medications</a>
           <ng-template ngbNavContent>
-
             <div>
               <h6 class="card-title">Medications</h6>
-              <p class="card-text">
+              <p class="card-text mg-b-10">
                 Medications are a type of treatment, usually in the form of pills, liquids, or injections, prescribed by doctors to help your body fight off illnesses, manage symptoms, or improve overall health.
               </p>
             </div>
 
+            <fhir-card *ngFor="let medication of existingEncounter?.related_resources?.['Medication']" [showDetails]="false" [displayModel]="medication" [isCollapsed]="true"></fhir-card>
+
             <ng-container formArrayName="medications">
               <div class="card mg-t-10 pd-20" [formGroup]="medicationGroup" *ngFor="let medicationGroup of medications.controls; let i = index">
                 <div *ngIf="debugMode" class="alert alert-warning">
@@ -131,11 +132,14 @@ <h6 class="card-title">Medications</h6>
           <ng-template ngbNavContent>
             <div>
               <h6 class="card-title">Major Surgeries and Implants</h6>
-              <p class="card-text">
+              <p class="card-text mg-b-10">
                 Surgery is a medical procedure where doctors use special tools to fix, remove, or improve something inside your body to help you feel better or get healthier.
               </p>
             </div>
 
+            <fhir-card *ngFor="let procedure of existingEncounter?.related_resources?.['Procedure']" [showDetails]="false" [displayModel]="procedure" [isCollapsed]="true"></fhir-card>
+
+
             <ng-container formArrayName="procedures">
               <div class="card mg-t-10 pd-20" [formGroup]="procedureGroup" *ngFor="let procedureGroup of procedures.controls; let i = index">
                 <div *ngIf="debugMode" class="alert alert-warning">
@@ -214,9 +218,11 @@ <h6 class="card-title">Major Surgeries and Implants</h6>
           <ng-template ngbNavContent>
             <div>
               <h6 class="card-title">Medical Practitioners</h6>
-              <p class="card-text">A practitioner is a healthcare professional, such as a doctor or nurse, who is trained and qualified to provide medical care and support to help you stay healthy or manage any health concerns you may have.</p>
+              <p class="card-text mg-b-10">A practitioner is a healthcare professional, such as a doctor or nurse, who is trained and qualified to provide medical care and support to help you stay healthy or manage any health concerns you may have.</p>
             </div>
 
+            <fhir-card *ngFor="let practitioner of existingEncounter?.related_resources?.['Practitioner']" [showDetails]="false" [displayModel]="practitioner" [isCollapsed]="true"></fhir-card>
+
             <ng-container formArrayName="practitioners">
               <div class="card mg-t-10 pd-20" [formGroup]="practitionerGroup" *ngFor="let practitionerGroup of practitioners.controls; let i = index">
                 <div *ngIf="debugMode" class="alert alert-warning">
@@ -272,10 +278,12 @@ <h6 class="card-title">Medical Practitioners</h6>
           <ng-template ngbNavContent>
             <div>
               <h6 class="card-title">Medical Location/Organizations</h6>
-              <p class="card-text">A group of healthcare professionals and staff working together, like a hospital or clinic, to provide coordinated and effective care for patients
+              <p class="card-text mg-b-10">A group of healthcare professionals and staff working together, like a hospital or clinic, to provide coordinated and effective care for patients
               </p>
             </div>
 
+            <fhir-card *ngFor="let organization of existingEncounter?.related_resources?.['Organization']" [showDetails]="false" [displayModel]="organization" [isCollapsed]="true"></fhir-card>
+
             <ng-container formArrayName="organizations">
               <div class="card mg-t-10 pd-20" [formGroup]="organizationGroup" *ngFor="let organizationGroup of organizations.controls; let i = index">
                 <div *ngIf="debugMode" class="alert alert-warning">