Adding UI for manually creating conditions (and associated resources) (…

…fastenhealth#92)

frontend/package.json

@@ -31,6 +31,7 @@
  "@ng-bootstrap/ng-bootstrap": "10.0.0",
  "@panva/oauth4webapi": "1.2.0",
  "@swimlane/ngx-datatable": "^20.0.0",
+ "@types/fhir": "^0.0.35",
  "asmcrypto.js": "^2.3.2",
  "bootstrap": "^4.4.1",
  "chart.js": "2.9.4",

frontend/src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import {SourceDetailComponent} from './pages/source-detail/source-detail.compone
 import {PatientProfileComponent} from './pages/patient-profile/patient-profile.component';
 import {MedicalHistoryComponent} from './pages/medical-history/medical-history.component';
 import {ReportLabsComponent} from './pages/report-labs/report-labs.component';
+import {ResourceCreatorComponent} from './pages/resource-creator/resource-creator.component';
 
 const routes: Routes = [
 
@@ -27,6 +28,7 @@ const routes: Routes = [
  { path: 'source/:source_id/resource/:resource_type/:resource_id', component: ResourceDetailComponent, canActivate: [ IsAuthenticatedAuthGuard] },
  { path: 'sources', component: MedicalSourcesComponent, canActivate: [ IsAuthenticatedAuthGuard] },
  { path: 'sources/callback/:source_type', component: MedicalSourcesComponent, canActivate: [ IsAuthenticatedAuthGuard] },
+ { path: 'resource/create', component: ResourceCreatorComponent, canActivate: [ IsAuthenticatedAuthGuard] },
 
 
  { path: 'patient-profile', component: PatientProfileComponent, canActivate: [ IsAuthenticatedAuthGuard] },

frontend/src/app/app.module.ts

@@ -16,10 +16,9 @@ import { far } from '@fortawesome/free-regular-svg-icons';
 import { ResourceDetailComponent } from './pages/resource-detail/resource-detail.component';
 import { AuthSignupComponent } from './pages/auth-signup/auth-signup.component';
 import { AuthSigninComponent } from './pages/auth-signin/auth-signin.component';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgxDropzoneModule } from 'ngx-dropzone';
 import { IsAuthenticatedAuthGuard } from './auth-guards/is-authenticated-auth-guard';
-import {FastenApiService} from './services/fasten-api.service';
 import {Router} from '@angular/router';
 import { SourceDetailComponent } from './pages/source-detail/source-detail.component';
 import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
@@ -30,6 +29,7 @@ import { PatientProfileComponent } from './pages/patient-profile/patient-profile
 import { MedicalHistoryComponent } from './pages/medical-history/medical-history.component';
 import { ReportLabsComponent } from './pages/report-labs/report-labs.component';
 import {PipesModule} from './pipes/pipes.module';
+import { ResourceCreatorComponent } from './pages/resource-creator/resource-creator.component';
 
 
 @NgModule({
@@ -46,9 +46,11 @@ import {PipesModule} from './pipes/pipes.module';
  PatientProfileComponent,
  MedicalHistoryComponent,
  ReportLabsComponent,
+ ResourceCreatorComponent,
  ],
  imports: [
  FormsModule,
+ ReactiveFormsModule,
  BrowserModule,
  FontAwesomeModule,
  SharedModule,
@@ -59,7 +61,7 @@ import {PipesModule} from './pipes/pipes.module';
  NgxDropzoneModule,
  HighlightModule,
  MomentModule,
- PipesModule
+ PipesModule,
  ],
  providers: [
  {

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

@@ -84,6 +84,9 @@ export class FhirResourceComponent implements OnInit, OnChanges {
  // case "CarePlan": {
  // return ListCarePlanComponent;
  // }
+ // case "CareTeam": {
+ // return CareTeamComponent;
+ // }
  // case "Communication": {
  // return ListCommunicationComponent;
  // }
@@ -135,8 +138,11 @@ export class FhirResourceComponent implements OnInit, OnChanges {
  case "Procedure": {
  return ProcedureComponent;
  }
- // case "Practitioner": {
- // return PractitionerComponent;
+ case "Practitioner": {
+ return PractitionerComponent;
+ }
+ // case "PractitionerRole": {
+ // return PractitionerRoleComponent;
  // }
  // case "ServiceRequest": {
  // return ListServiceRequestComponent;

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

@@ -12,7 +12,7 @@ <h6 class="card-title">{{displayModel?.sort_title}}</h6>
  <!-- </div>-->
  </div>
  <div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed" class="card-body">
- <p class="az-content-text mg-b-20">Describes the event of a patient being administered a vaccine or a record of an immunization as reported by a patient, a clinician or another party.</p>
+ <p class="az-content-text mg-b-20">A person who is directly or indirectly involved in the provisioning of healthcare.</p>
  <fhir-ui-table [displayModel]="displayModel" [tableData]="tableData"></fhir-ui-table>
  </div>
  <div *ngIf="showDetails" class="card-footer">

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

@@ -21,14 +21,7 @@ export class PractitionerComponent implements OnInit, FhirResourceComponentInter
  constructor(public changeRef: ChangeDetectorRef, public router: Router) {}
 
  ngOnInit(): void {
-
  this.tableData = [
- // {
- // label: 'Identifiers',
- // testId: 'identifier',
- // data: identifier && <Identifier fhirData={identifier} />,
- // status: identifier,
- // },
  {
  label: 'Gender',
  data: this.displayModel?.gender,
@@ -51,18 +44,29 @@ export class PractitionerComponent implements OnInit, FhirResourceComponentInter
  // },
  // {
  // label: 'Address',
- // testId: 'address',
- // data: address && <Address fhirData={address} />,
- // status: address,
+ // data: this.displayModel?.address.,
+ // status: !!this.displayModel?.address,
  // },
  // {
  // label: 'Telephone',
- // testId: 'telecom',
- // data: telecom && <Telecom fhirData={telecom} />,
- // status: telecom,
+ // data: this.displayModel.telecom,
+ // enabled: !!this.displayModel.telecom,
  // },
  ];
-
+ for(let idCoding of this.displayModel.identifier){
+ this.tableData.push({
+ label: `Identifier (${idCoding.system})`,
+ data: idCoding.display || idCoding.value,
+ enabled: true,
+ })
+ }
+ for(let telecom of this.displayModel.telecom){
+ this.tableData.push({
+ label: telecom.system,
+ data: telecom.value,
+ enabled: !!telecom.value,
+ })
+ }
  }
  markForCheck(){
  this.changeRef.markForCheck()

frontend/src/app/components/nlm-typeahead/nlm-typeahead.component.html

@@ -0,0 +1,24 @@
+<ng-template #rt let-r="result" let-t="term">
+ <span>{{r.text}}</span> <span *ngIf="r.subtext">&nbsp;({{r.subtext}})</span>
+</ng-template>
+
+<input
+ type="text"
+ class="form-control"
+ [class.is-invalid]="showError"
+ [(ngModel)]="searchResult"
+ [ngbTypeahead]="search"
+ [inputFormatter]="formatter"
+ [resultTemplate]="rt"
+ (ngModelChange)="typeAheadChangeEvent($event)"
+ (click)="typeAheadClickEvent($event)"
+ (focus)="typeAheadFocusEvent($event)"
+ placeholder="Search"
+ #instance="ngbTypeahead"
+/>
+<small *ngIf="searching" class="form-text text-muted">searching...</small>
+<div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
+
+<div *ngIf="debugMode" class="alert alert-warning">
+ <pre><code [highlight]="searchResult | json"></code></pre>
+</div>

frontend/src/app/components/nlm-typeahead/nlm-typeahead.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NlmTypeaheadComponent } from './nlm-typeahead.component';
+
+describe('NlmTypeaheadComponent', () => {
+ let component: NlmTypeaheadComponent;
+ let fixture: ComponentFixture<NlmTypeaheadComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ NlmTypeaheadComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(NlmTypeaheadComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});