providing a mechanism to display newly created organizations and prac…

…itioners as fhir-cards.

frontend/package.json

@@ -51,6 +51,7 @@
     "ngx-highlightjs": "^7.0.1",
     "ngx-infinite-scroll": "^14.0.0",
     "ngx-moment": "^6.0.2",
+    "parse-full-name": "^1.2.6",
     "rxjs": "~6.5.4",
     "tslib": "^2.0.0",
     "uuid": "^9.0.0",

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

@@ -13,7 +13,7 @@ import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.
 @Component({
   standalone: true,
   imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule, BinaryComponent, GlossaryLookupComponent],
-  selector: 'app-diagnostic-report',
+  selector: 'fhir-diagnostic-report',
   templateUrl: './diagnostic-report.component.html',
   styleUrls: ['./diagnostic-report.component.scss']
 })

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

@@ -14,7 +14,7 @@ import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.
 @Component({
   standalone: true,
   imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule, BinaryComponent],
-  selector: 'app-document-reference',
+  selector: 'fhir-document-reference',
   templateUrl: './document-reference.component.html',
   styleUrls: ['./document-reference.component.scss']
 })

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

@@ -3,11 +3,7 @@
     <div>
       <h6 class="card-title">{{displayModel?.name}}</h6>
     </div>
-    <!--    <div class="btn-group">-->
-    <!--      <button class="btn active">Day</button>-->
-    <!--      <button class="btn">Week</button>-->
-    <!--      <button class="btn">Month</button>-->
-    <!--    </div>-->
+    <ng-content select="[header]"></ng-content>
   </div>
   <div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed" class="card-body">
     <p class="az-content-text mg-b-20">A formally or informally recognized grouping of people or organizations formed for the purpose of achieving some form of collective action. Includes companies, institutions, corporations, departments, community groups, healthcare practice groups, payer/insurer, etc.</p>

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

@@ -4,12 +4,10 @@
       <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>
-    <!--    <div class="btn-group">-->
-    <!--      <button class="btn active">Day</button>-->
-    <!--      <button class="btn">Week</button>-->
-    <!--      <button class="btn">Month</button>-->
-    <!--    </div>-->
+    <div>
+      <fhir-ui-badge [status]="displayModel?.status">{{displayModel?.status}}</fhir-ui-badge>
+      <ng-content select="[header]"></ng-content>
+    </div>
   </div>
   <div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed" class="card-body">
     <p class="az-content-text mg-b-20">A person who is directly or indirectly involved in the provisioning of healthcare.</p>

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

@@ -12,7 +12,7 @@ import {TableComponent} from "../../common/table/table.component";
 @Component({
   standalone: true,
   imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule],
-  selector: 'app-practitioner',
+  selector: 'fhir-practitioner',
   templateUrl: './practitioner.component.html',
   styleUrls: ['./practitioner.component.scss']
 })

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

@@ -95,5 +95,13 @@ <h4 class="modal-title" id="modal-location">Add Location</h4>
   <div [ngbNavOutlet]="nav" class="ms-4"></div>
 </div>
 <div class="modal-footer">
+  <button [ngClass]="{
+    'btn-outline-dark': !debugMode,
+    'text-dark': !debugMode,
+    'btn-dark':debugMode,
+    'text-white':debugMode
+     }" type="button" class="btn float-left" (click)="debugMode = !debugMode">
+    <i class="fas fa-bug"></i>
+  </button>
   <button type="button" [class.disabled]="!submitEnabled" class="btn btn-az-primary" (click)="submit()">Add Location</button>
 </div>

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

@@ -97,5 +97,13 @@ <h4 class="modal-title" id="modal-practitioner">New Practitioner</h4>
 
 </div>
 <div class="modal-footer">
+  <button [ngClass]="{
+    'btn-outline-dark': !debugMode,
+    'text-dark': !debugMode,
+    'btn-dark':debugMode,
+    'text-white':debugMode
+     }" type="button" class="btn float-left" (click)="debugMode = !debugMode">
+    <i class="fas fa-bug"></i>
+  </button>
   <button type="button" [class.disabled]="!submitEnabled" class="btn btn-az-primary" (click)="submit()">Add Practitioner</button>
 </div>

frontend/src/app/components/medical-record-wizard-add-practitioner/medical-record-wizard-add-practitioner.component.ts

@@ -15,6 +15,7 @@ import {AddressModel} from '../../../lib/models/datatypes/address-model';
 import {CodableConceptModel} from '../../../lib/models/datatypes/codable-concept-model';
 import {uuidV4} from '../../../lib/utils/uuid';
 import {PractitionerModel} from '../../../lib/models/resources/practitioner-model';
+import {parseFullName}  from 'parse-full-name'
 
 @Component({
   standalone: true,
@@ -113,7 +114,7 @@ export class MedicalRecordWizardAddPractitionerComponent implements OnInit {
     let model = new PractitionerModel({})
     model.source_resource_id = form.get('id').value
     model.identifier = form.get('identifier').value
-    model.name = form.get('name').value
+    model.name = []
     model.address = address
     model.telecom = []
     model.qualification = []
@@ -141,6 +142,17 @@ export class MedicalRecordWizardAddPractitionerComponent implements OnInit {
     if(form.get('profession').value) {
       model.qualification =  [form.get('profession').value.identifier]
     }
+    if(form.get('name').value) {
+      let nameParts = parseFullName(form.get('name').value)
+      model.name.push({
+        givenName: nameParts.first,
+        familyName: nameParts.last,
+        suffix: nameParts.suffix,
+        textName: form.get('name').value,
+        use: 'work',
+        displayName: form.get('name').value,
+      })
+    }
 
     if(!model.source_resource_id){
       console.warn("No source_resource_id set for Organization, generating one")

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

@@ -22,7 +22,7 @@ <h4 class="modal-title"> Medical Record Wizard</h4>
 
     <div>
       <div class="d-flex">
-        <div ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills flex-column col-lg-2 col-md-4 bg-gray-200 pd-20" orientation="vertical">
+        <div ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills flex-column col-xl-2 col-lg-3 col-md-4 bg-gray-200 pd-20" orientation="vertical">
         <ng-container ngbNavItem="encounter">
           <a class="nav-link" ngbNavLink>Encounter</a>
           <ng-template ngbNavContent>
@@ -224,46 +224,20 @@ <h6 class="card-title">Medical Practitioners</h6>
             <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">
+              <ng-container *ngFor="let practitionerGroup of practitioners.controls; let i = index">
                 <div *ngIf="debugMode" class="alert alert-warning">
                   <strong>Practitioner Status: {{practitionerGroup.status}}</strong>
                 </div>
-                <div class="tx-right">
-                  <span class="cursor-pointer" (click)="deletePractitioner(i)" aria-hidden="true"><i class="fas fa-trash"></i></span>
-                </div>
+                <fhir-practitioner class="fhir-card-callout-warning" [formGroup]="practitionerGroup"  [showDetails]="false" [displayModel]="practitionerGroup.controls.data.value" [isCollapsed]="true">
+                  <div header>
+                    <span class="cursor-pointer float-right" (click)="deletePractitioner(i)" aria-hidden="true"><i class="fas fa-trash"></i></span>
+                  </div>
+                </fhir-practitioner>
+              </ng-container>
+            </ng-container>
 
-                <div class="row row-sm">
-                  <input formControlName="id" class="form-control" type="hidden">
 
-                  <div class="col-lg-6 mg-t-10 mg-lg-t-0">
-                    <p class="mg-b-10">Name<span ngbTooltip="required" class="text-danger">*</span></p>
-                    <input formControlName="name" class="form-control" readonly placeholder="Input box" type="text">
-                  </div><!-- col -->
-                  <div class="col-lg-6 mg-t-10 mg-lg-t-0">
-                    <p class="mg-b-10">Type<span ngbTooltip="required" class="text-danger">*</span></p>
-                    <app-nlm-typeahead formControlName="profession"  searchType="MedicalContactIndividualProfession" [debugMode]="debugMode"></app-nlm-typeahead>
-                  </div><!-- col -->
-                  <div class="col-lg mg-t-10 mg-lg-t-0">
-                    <p class="mg-b-10">Telephone</p>
-                    <input formControlName="phone" class="form-control" placeholder="(123) 456-7890" type="text">
-                  </div><!-- col -->
-                  <div class="col-lg mg-t-10 mg-lg-t-0">
-                    <p class="mg-b-10">Fax</p>
-                    <input formControlName="fax" class="form-control" placeholder="(123) 456-7890" type="text">
-                  </div><!-- col -->
-                  <div class="col-lg mg-t-10 mg-lg-t-0">
-                    <p class="mg-b-10">Email</p>
-                    <input formControlName="email" class="form-control" placeholder="email@example.com" type="text">
-                  </div><!-- col -->
-                  <div class="col-lg mg-t-10 mg-lg-t-0">
-                    <p class="mg-b-10">Address</p>
-                    <input formControlName="address" class="form-control" placeholder="Input box" type="text">
-                  </div><!-- col -->
 
-                </div><!-- row -->
-
-              </div>
-            </ng-container>
 
             <div class="row pt-2">
               <div class="col-lg-4 col-md-4">
@@ -285,17 +259,16 @@ <h6 class="card-title">Medical Location/Organizations</h6>
             <fhir-card *ngFor="let organization of existingEncounter?.related_resources?.['Organization']" [showDetails]="false" [displayModel]="organization" [isCollapsed]="true"></fhir-card>
 
             <ng-container formArrayName="organizations">
-              <div class="bd-callout-warning card card-fhir-resource" [formGroup]="organizationGroup" *ngFor="let organizationGroup of organizations.controls; let i = index">
+              <ng-container *ngFor="let organizationGroup of organizations.controls; let i = index">
                 <div *ngIf="debugMode" class="alert alert-warning">
                   <strong>Organization Status: {{organizationGroup.status}}</strong>
                 </div>
-                <div class="card-header">
-                  <div>
-                    <h6 class="card-title">{{organizationGroup.controls.name.value}}</h6>
+                <fhir-organization class="fhir-card-callout-warning" [formGroup]="organizationGroup"  [showDetails]="false" [displayModel]="organizationGroup.controls.data.value" [isCollapsed]="true">
+                  <div header>
+                    <span class="cursor-pointer float-right" (click)="deleteOrganization(i)" aria-hidden="true"><i class="fas fa-trash"></i></span>
                   </div>
-                  <span class="cursor-pointer float-right" (click)="deleteOrganization(i)" aria-hidden="true"><i class="fas fa-trash"></i></span>
-                </div>
-              </div>
+                </fhir-organization>
+              </ng-container>
             </ng-container>
 
             <div class="row pt-2">
@@ -375,7 +348,7 @@ <h6 class="card-title">Notes & Attachments</h6>
           </ng-template>
         </ng-container>
       </div>
-        <div [ngbNavOutlet]="nav" class="col-lg-10 col-md-8"></div>
+        <div [ngbNavOutlet]="nav" class="col-xl-10 col-lg-9 col-md-8"></div>
       </div>
     </div>
 

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

@@ -162,29 +162,15 @@ export class MedicalRecordWizardComponent implements OnInit {
   addPractitioner(openPractitionerResult: { data:PractitionerModel, action: 'find'|'create' }){
     let practitioner = openPractitionerResult.data;
     const practitionerGroup = new FormGroup({
-      source_id: new FormControl(practitioner.source_id),
-      id: new FormControl(practitioner.source_resource_id, Validators.required),
-      identifier: new FormControl(practitioner.identifier || []),
-      telecom: new FormControl(practitioner.telecom || []),
-      name: new FormControl(practitioner.name, Validators.required),
-      profession: new FormControl(practitioner.qualification, Validators.required),
-      address: new FormControl(practitioner.address),
+      data: new FormControl(practitioner),
     });
-
     this.practitioners.push(practitionerGroup);
   }
   addOrganization(openOrganizationResult: { data:OrganizationModel, action: 'find'|'create' }) {
     let organization = openOrganizationResult.data;
     const organizationGroup = new FormGroup({
-      source_id: new FormControl(organization.source_id),
-      id: new FormControl(organization.source_resource_id, Validators.required),
-      identifier: new FormControl(organization.identifier || []),
-      telecom: new FormControl(organization.telecom || []),
-      name: new FormControl(organization.name, Validators.required),
-      type: new FormControl(organization.type),
-      address: new FormControl(organization.addresses?.[0]),
+      data: new FormControl(organization),
     });
-
     this.organizations.push(organizationGroup);
   }
   addAttachment(attachment: ResourceCreateAttachment){

frontend/src/custom.scss

@@ -295,7 +295,8 @@ app-medical-sources-filter > .az-content-left-components:hover{
   h4 { color: $color; }
 }
 
-.bd-callout-success { @include bs-callout-variant($green); }
-.bd-callout-info { @include bs-callout-variant($cyan); }
-.bd-callout-warning { @include bs-callout-variant($yellow); }
-.bd-callout-danger { @include bs-callout-variant($red); }
+.fhir-card-callout-success .card, .bd-callout-success { @include bs-callout-variant($green); }
+.fhir-card-callout-info .card, .bd-callout-info { @include bs-callout-variant($cyan); }
+.fhir-card-callout-warning .card, .bd-callout-warning { @include bs-callout-variant($yellow); }
+.fhir-card-callout-danger .card, .bd-callout-danger { @include bs-callout-variant($red); }
+

frontend/yarn.lock

@@ -9574,6 +9574,11 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-full-name@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.npmjs.org/parse-full-name/-/parse-full-name-1.2.6.tgz#97e2643c0167b79ca404dab254ea79e89b025704"
+  integrity sha512-uIaENXJFmZfzulBndhHJayi7ZEifJ1bXKaWYmySa04EmMX7eIcsufiAgWTYiJqWRa/Sq7JWPGtCIXFAoUfF7gw==
+
 parse-json@^5.0.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"