Mirrors
/
fasten-onprem
mirror of https://github.com/fastenhealth/fasten-onprem.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adding UI for manually creating conditions (and associated resources) (#92)

This commit is contained in:
Jason Kulatunga 2023-03-05 21:46:55 -08:00 committed by GitHub
parent 3692fd462f
commit 5afb6ef659
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 3151 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

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

2
frontend/src/app/app-routing.module.ts
View File

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

8
frontend/src/app/app.module.ts
View File

@ -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: [
{

10
frontend/src/app/components/fhir/fhir-resource/fhir-resource.component.ts
View File

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

2
frontend/src/app/components/fhir/resources/practitioner/practitioner.component.html
View File

@ -12,7 +12,7 @@
<!-- </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">

32
frontend/src/app/components/fhir/resources/practitioner/practitioner.component.ts
View File

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

24
frontend/src/app/components/nlm-typeahead/nlm-typeahead.component.html Normal file
View File

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

0
frontend/src/app/components/nlm-typeahead/nlm-typeahead.component.scss Normal file
View File

23
frontend/src/app/components/nlm-typeahead/nlm-typeahead.component.spec.ts Normal file
View File

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

218
frontend/src/app/components/nlm-typeahead/nlm-typeahead.component.ts Normal file
View File

@ -0,0 +1,218 @@
import {Component, EventEmitter, Input, OnInit, Optional, Output, Self, ViewChild} from '@angular/core';
import {merge, Observable, ObservableInput, of, Subject} from 'rxjs';
import {catchError, debounceTime, distinctUntilChanged, filter, switchMap, tap} from 'rxjs/operators';
import {NlmClinicalTableSearchService, NlmSearchResults} from '../../services/nlm-clinical-table-search.service';
import {
ControlValueAccessor,
NgControl,
} from '@angular/forms';
import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
export enum NlmSearchType {
Allergy = 'Allergy',
AllergyReaction = 'AllergyReaction',
Condition = 'Condition',
MedicalContactIndividualProfession = 'MedicalContactIndividualProfession',
MedicalContactIndividual = 'MedicalContactIndividual',
MedicalContactOrganization = 'MedicalContactOrganization',
MedicalContactOrganizationType = 'MedicalContactOrganizationType',
Medication = 'Medication',
MedicationWhyStopped = 'MedicationWhyStopped',
Procedure = 'Procedure',
Vaccine = 'Vaccine',
PrePopulated = 'PrePopulated'
}
@Component({
selector: 'app-nlm-typeahead',
templateUrl: './nlm-typeahead.component.html',
styleUrls: ['./nlm-typeahead.component.scss'],
providers: [
// {
// provide: NG_VALUE_ACCESSOR,
// multi:true,
// useExisting: NlmTypeaheadComponent
// },
// {
// provide: NG_VALIDATORS,
// multi:true,
// useExisting: NlmTypeaheadComponent
// }
]
})
export class NlmTypeaheadComponent implements ControlValueAccessor {
@Input() searchType: NlmSearchType = NlmSearchType.Condition;
@Input() debugMode: Boolean = false;
@Input() openOnFocus: Boolean = false;
@Input() prePopulatedOptions: NlmSearchResults[] = []
@ViewChild('instance', { static: true }) instance: NgbTypeahead;
focus$ = new Subject<string>();
click$ = new Subject<string>();
searching = false;
searchFailed = false;
searchResult: any = {};
onChange = (searchResult) => {};
onTouched = () => {};
touched = false;
disabled = false;
constructor(@Self() @Optional() public control: NgControl, private nlmClinicalTableSearchService: NlmClinicalTableSearchService) {
this.control && (this.control.valueAccessor = this);
}
formatter = (x: { text: string }) => x.text;
search = (text$: Observable<string>) => {
let searchOpFn
switch (this.searchType) {
case NlmSearchType.Allergy:
searchOpFn = this.nlmClinicalTableSearchService.searchAllergy
this.openOnFocus = true
break
case NlmSearchType.AllergyReaction:
searchOpFn = this.nlmClinicalTableSearchService.searchAllergyReaction
this.openOnFocus = true
break
case NlmSearchType.Condition:
searchOpFn = this.nlmClinicalTableSearchService.searchCondition
break
case NlmSearchType.MedicalContactIndividualProfession:
searchOpFn = this.nlmClinicalTableSearchService.searchMedicalContactIndividualProfession
this.openOnFocus = true
break
case NlmSearchType.MedicalContactIndividual:
searchOpFn = this.nlmClinicalTableSearchService.searchMedicalContactIndividual
break
case NlmSearchType.MedicalContactOrganization:
searchOpFn = this.nlmClinicalTableSearchService.searchMedicalContactOrganization
break
case NlmSearchType.MedicalContactOrganizationType:
searchOpFn = this.nlmClinicalTableSearchService.searchMedicalContactOrganizationType
this.openOnFocus = true
break
case NlmSearchType.Medication:
searchOpFn = this.nlmClinicalTableSearchService.searchMedication
break
case NlmSearchType.MedicationWhyStopped:
searchOpFn = this.nlmClinicalTableSearchService.searchMedicationWhyStopped
this.openOnFocus = true
break
case NlmSearchType.Procedure:
searchOpFn = this.nlmClinicalTableSearchService.searchProcedure
break
case NlmSearchType.Vaccine:
searchOpFn = this.nlmClinicalTableSearchService.searchVaccine
this.openOnFocus = true
break
case NlmSearchType.PrePopulated:
// searchOpFn = this.nlmClinicalTableSearchService.searchVaccine
console.log("PREPOPUlATED", this.prePopulatedOptions)
break
default:
console.error(`unknown search type: ${this.searchType}`)
return of([]);
}
// https://github.com/ng-bootstrap/ng-bootstrap/issues/917
// Note that the this argument is undefined so you need to explicitly bind it to a desired "this" target.
// https://ng-bootstrap.github.io/#/components/typeahead/api
searchOpFn = searchOpFn.bind(this.nlmClinicalTableSearchService)
const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
const inputFocus$ = this.focus$;
return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
tap(() => { this.searching = true }),
switchMap((term): ObservableInput<any> => {
console.log("searching for", term)
//must use bind
return searchOpFn(term).pipe(
tap(() => {this.searchFailed = false}),
catchError(() => {
this.searchFailed = true;
return of([]);
}),
)
}),
tap(() => {this.searching = false}),
);
}
typeAheadChangeEvent(event){
this.markAsTouched()
console.log("bubbling modelChange event", event)
if(typeof event === 'string'){
if (event.length === 0) {
this.onChange(null);
} else {
this.onChange({text: event});
}
} else{
this.onChange(event);
}
}
// If `openOnFocus` is true, we want to show dropdown/typeahead when the field is clicked or in focus, even if there is no text entered.
//See:https://ng-bootstrap.github.io/#/components/typeahead/examples#focus
typeAheadClickEvent($event){
if(this.openOnFocus){
this.click$.next($event.target.value)
}
}
typeAheadFocusEvent($event){
if(this.openOnFocus){
this.focus$.next($event.target.value)
}
}
/*
Methods related to ControlValueAccessor
See: https://blog.angular-university.io/angular-custom-form-controls/
See: http://prideparrot.com/blog/archive/2019/2/applying_validation_custom_form_component
This is what allows ngModel and formControlName to be used with this component
*/
writeValue(searchResult: any) {
this.searchResult = searchResult;
}
registerOnChange(onChange: any) {
this.onChange = onChange;
}
registerOnTouched(onTouched: any) {
this.onTouched = onTouched;
}
markAsTouched() {
if (!this.touched) {
this.onTouched();
this.touched = true;
}
}
setDisabledState(disabled: boolean) {
this.disabled = disabled;
}
public get invalid(): boolean {
return this.control ? this.control.invalid : false;
}
public get showError(): boolean {
if (!this.control) {
return false;
}
const { dirty, touched } = this.control;
return this.invalid ? (dirty || touched) : false;
}
}

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

@ -6,7 +6,7 @@
{{conditionDisplayModel?.sort_title ? conditionDisplayModel?.sort_title : (conditionGroup | fhirPath: "Condition.code.text.first()":"Condition.code.coding.display.first()")}}
</div>
<div class="col-6">
{{conditionDisplayModel?.sort_date ? (conditionDisplayModel?.sort_date | date) : (conditionGroup | fhirPath: "Condition.onsetPeriod.start":"Condition.onsetDateTime" | date) }} - {{conditionGroup | fhirPath: "Condition.onsetPeriod.end" | date}}
{{conditionDisplayModel?.onset_datetime | date }} <span *ngIf="conditionDisplayModel.abatement_datetime">- {{conditionDisplayModel.abatement_datetime | date}}</span>
</div>
</div>
</div><!-- card-header -->
@ -32,12 +32,13 @@
</ng-container>
<!-- <div class="col-12 mt-3 mb-2 tx-indigo">-->
<!-- <h5>Initial Presentation</h5>-->
<!-- </div>-->
<!-- <div class="col-12">-->
<!-- Acute right knee pain and tenderness around the joint line - this was likely caused by acute renal failure.-->
<!-- </div>-->
<div *ngIf="conditionDisplayModel" class="col-12 mt-3 mb-2">
<p class="tx-indigo">Initial Presentation</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
<div class="row pt-2" *ngIf="conditionGroup?.related_resources?.length > 0">
@ -58,7 +59,6 @@
<div class="row">
<ng-container *ngFor="let encounter of encounters">
<div routerLink="/source/{{encounter?.source_id}}/resource/{{encounter?.source_resource_id}}" class="col-6 mt-3 mb-2 tx-indigo">
<strong>{{encounter.period_start | date}}</strong>
</div>

7
frontend/src/app/components/report-medical-history-condition/report-medical-history-condition.component.ts
View File

@ -11,6 +11,7 @@ import {DeviceModel} from '../../../lib/models/resources/device-model';
import {DiagnosticReportModel} from '../../../lib/models/resources/diagnostic-report-model';
import {FastenDisplayModel} from '../../../lib/models/fasten/fasten-display-model';
import * as _ from "lodash";
import {ConditionModel} from '../../../lib/models/resources/condition-model';
@Component({
selector: 'app-report-medical-history-condition',
@ -50,7 +51,7 @@ export class ReportMedicalHistoryConditionComponent implements OnInit {
* */
@Input() conditionGroup: ResourceFhir
conditionDisplayModel: FastenDisplayModel
conditionDisplayModel: Partial<ConditionModel>
//lookup table for all resources
resourcesLookup: {[name:string]: FastenDisplayModel} = {}
@ -94,12 +95,14 @@ export class ReportMedicalHistoryConditionComponent implements OnInit {
let telecomEmails =_.find(practitionerModel.telecom, {"system": "email"})
let email = _.get(telecomEmails, '[0].value')
let qualification = _.find(practitionerModel.qualification, {"system": "http://nucc.org/provider-taxonomy"})
involvedInCareMap[id] = _.mergeWith(
{},
involvedInCareMap[id],
{
displayName: practitionerModel.name?.family && practitionerModel.name?.given ? `${practitionerModel.name?.family }, ${practitionerModel.name?.given}` : practitionerModel.name?.text,
role: practitionerModel.name?.prefix || practitionerModel.name?.suffix,
role: qualification?.display || practitionerModel.name?.prefix || practitionerModel.name?.suffix,
email: email,
},
)

32
frontend/src/app/components/shared.module.ts
View File

@ -41,7 +41,7 @@ import { ReportMedicalHistoryConditionComponent } from './report-medical-history
import { ReportLabsObservationComponent } from './report-labs-observation/report-labs-observation.component';
import { ChartsModule } from 'ng2-charts';
import { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';
import {FormsModule} from '@angular/forms';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { BinaryComponent } from './fhir/resources/binary/binary.component';
import { PdfComponent } from './fhir/datatypes/pdf/pdf.component';
import { ImgComponent } from './fhir/datatypes/img/img.component';
@ -62,9 +62,8 @@ import { MedicationRequestComponent } from './fhir/resources/medication-request/
import { ProcedureComponent } from './fhir/resources/procedure/procedure.component';
import { DiagnosticReportComponent } from './fhir/resources/diagnostic-report/diagnostic-report.component';
import { PractitionerComponent } from './fhir/resources/practitioner/practitioner.component';
import {FhirPathPipe} from '../pipes/fhir-path.pipe';
import {FilterPipe} from '../pipes/filter.pipe';
import {PipesModule} from '../pipes/pipes.module';
import { NlmTypeaheadComponent } from './nlm-typeahead/nlm-typeahead.component';
@NgModule({
imports: [
@ -74,11 +73,12 @@ import {PipesModule} from '../pipes/pipes.module';
NgbModule,
NgbCollapseModule,
FormsModule,
ReactiveFormsModule,
MomentModule,
TreeModule,
ChartsModule,
HighlightModule,
PipesModule
PipesModule,
],
declarations: [
ComponentsSidebarComponent,
@ -135,6 +135,7 @@ import {PipesModule} from '../pipes/pipes.module';
ProcedureComponent,
DiagnosticReportComponent,
PractitionerComponent,
NlmTypeaheadComponent,
],
exports: [
ComponentsSidebarComponent,
@ -174,17 +175,18 @@ import {PipesModule} from '../pipes/pipes.module';
BinaryComponent,
FhirResourceComponent,
FhirResourceOutletDirective,
FallbackComponent,
ImmunizationComponent,
BadgeComponent,
TableComponent,
CodingComponent,
AllergyIntoleranceComponent,
MedicationComponent,
MedicationRequestComponent,
ProcedureComponent,
DiagnosticReportComponent,
PractitionerComponent
FallbackComponent,
ImmunizationComponent,
BadgeComponent,
TableComponent,
CodingComponent,
AllergyIntoleranceComponent,
MedicationComponent,
MedicationRequestComponent,
ProcedureComponent,
DiagnosticReportComponent,
PractitionerComponent,
NlmTypeaheadComponent
]
})

197
frontend/src/app/models/fasten/resource_create.ts Normal file
View File

@ -0,0 +1,197 @@
import {IResourceRaw} from './resource_fhir';
import {CodingModel} from '../../../lib/models/datatypes/coding-model';
import {NlmSearchResults} from '../../services/nlm-clinical-table-search.service';
//
// {
// "condition": {
// "data": {
// "id": "14673",
// "text": "Hepatitis C",
// "link": "http://www.nlm.nih.gov/medlineplus/hepatitisc.html",
// "identifier": {
// "icd10": "R19.7"
// }
// },
// "status": "active",
// "started": {
// "year": 2023,
// "month": 2,
// "day": 23
// },
// "stopped": {
// "year": 2023,
// "month": 2,
// "day": 24
// },
// "description": "hello world"
// },
// "medications": [
// {
// "data": {
// "id": "1171721",
// "text": "DIOVAN (Oral Pill)"
// },
// "status": "active",
// "dosage": {},
// "started": {
// "year": 2023,
// "month": 2,
// "day": 15
// },
// "stopped": {
// "year": 2023,
// "month": 2,
// "day": 16
// },
// "whystopped": {
// "id": "STP-4",
// "text": "Replaced by better drug"
// },
// "resupply": {
// "year": 2023,
// "month": 2,
// "day": 9
// },
// "instructions": "dfdsf"
// }
// ],
// "procedures": [
// {
// "data": {
// "id": "5592",
// "text": "Abscess drainage",
// "link": "http://www.nlm.nih.gov/medlineplus/abscesses.html",
// "identifier": { "icd9": "" }
// },
// "whendone": {
// "year": 2023,
// "month": 2,
// "day": 16
// },
// "comment": "dfsdf"
// }
// ],
// "practitioners": [
// {
// "contactType": "search",
// "name": "",
// "data": {
// "id": "1689675621",
// "text": "HAZEN, F.",
// "provider_type": "Pharmacist",
// "provider_address": "2562 MONROE BLVD, OGDEN, UT 84740",
// "provider_fax": "(801) 399-1154",
// "provider_phone": "(801) 399-1151"
// },
// "profession": {
// "id": "CLIN",
// "text": "Clinical psychologist"
// },
// "phone": "",
// "fax": "",
// "email": "",
// "comment": "df"
// }
// ],
// "locations": [
// {
// "name": "",
// "contactType": "search",
// "data": {
// "id": "1689935025",
// "text": "D & D SPECIAL CARE",
// "provider_type": "Assisted Living Facility",
// "provider_address": "5760 NW 40TH TER, COCONUT CREEK, FL 33073",
// "provider_fax": "",
// "provider_phone": "(954) 675-3395"
// },
// "phone": "",
// "fax": "",
// "email": "",
// "comment": "sfds"
// },
// {
// "name": "sdfsdf",
// "contactType": "manual",
// "data": {},
// "phone": "sdfsdf",
// "fax": "sdfsdf",
// "email": "sdfsdf",
// "comment": "sdfsdf"
// }
// ]
// }
export interface ResourceCreate {
condition: ResourceCreateCondition,
"medications": ResourceCreateMedication[],
"procedures": ResourceCreateProcedure[],
"practitioners": ResourceCreatePractitioner[],
"organizations": ResourceCreateOrganization[]
}
export interface ResourceCreateCondition {
"data": NlmSearchResults,
"status": "active" | "inactive",
"started": ResourceCreateDate,
"stopped": ResourceCreateDate,
"description": string
}
export interface ResourceCreateDate {
year: number
month: number
day: number
}
export interface ResourceCreateMedication {
"data": NlmSearchResults,
"status": "active" | "inactive",
"dosage": {},
"started": ResourceCreateDate,
"stopped": ResourceCreateDate,
"whystopped": NlmSearchResults
"requester": string,
"instructions": string
}
export interface ResourceCreateProcedure {
"data": NlmSearchResults,
"whendone": ResourceCreateDate,
"comment": string,
"performer": string,
"location": string
}
export interface ResourceCreatePractitioner {
"id"?: string,
"identifier": CodingModel[]
"name": string,
"profession": NlmSearchResults,
"phone": string,
"fax": string,
"email": string,
"address": Address,
}
export interface ResourceCreateOrganization {
"id"?: string,
"identifier": CodingModel[]
"type": NlmSearchResults,
"name": string,
"phone": string,
"fax": string,
"email": string,
"address": Address,
}
export interface Address {
line1?: string
line2?: string
city?: string
state?: string
zip?: string
country?: string
}

3
frontend/src/app/pages/medical-history/medical-history.component.html
View File

@ -26,6 +26,9 @@
<div class="col-6">
<h1 class="az-dashboard-title">Condition</h1>
</div>
<div class="col-6">
<a class="float-right btn btn-outline-indigo" routerLink="/resource/create">Add Condition</a>
</div>
</div>
<!-- Condition List -->

543
frontend/src/app/pages/resource-creator/resource-creator.component.html Normal file
View File

@ -0,0 +1,543 @@
<div class="az-content">
<div class="container">
<div class="az-content-body pd-lg-l-40 d-flex flex-column">
<div class="az-content-breadcrumb">
<span>Components</span>
<span>Forms</span>
<span>Form Elements</span>
</div>
<h2 class="az-content-title">Create a Record</h2>
<!-- Editor Button -->
<div class="row mt-5 mb-3">
<div class="col-12">
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> This form is in early-alpha and is not ready for general use. You will encounter bugs and missing features.
Please open a <a href="https://github.com/fastenhealth/fasten-onprem/issues/new?title=Resource+Create+-+Your+Feature+Or+Bug+Here">Github Issue</a> if you find any bugs or have any suggestions.
<br/>
<br/>
Enable Debug mode: <input type="checkbox" [(ngModel)]="debugMode"/>
</div>
<div *ngIf="debugMode" class="alert alert-warning">
<pre><code [highlight]="form.getRawValue() | json"></code></pre>
<strong>Form Status: {{ form.status }}</strong>
</div>
</div>
</div>
<div class="az-content-label mg-b-5">Condition</div>
<p class="mg-b-20">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngIf="debugMode" class="alert alert-warning">
<strong>Condition Status: {{form.get('condition').status}}</strong>
</div>
<ng-container formGroupName="condition">
<div class="row row-sm">
<div class="col-lg-4">
<p class="mg-b-10">Medical condition<span ngbTooltip="required" class="text-danger">*</span></p>
<app-nlm-typeahead formControlName="data" [debugMode]="debugMode"></app-nlm-typeahead>
</div><!-- col -->
<div class="col-lg mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Status<span ngbTooltip="required" class="text-danger">*</span></p>
<select formControlName="status" class="form-control">
<option value="" hidden selected>Select Status</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
</div><!-- col -->
<div class="col-lg mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Started<span ngbTooltip="required" class="text-danger">*</span></p>
<input formControlName="started" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #cds="ngbDatepicker" (click)="cds.toggle()">
</div><!-- col -->
<div class="col-lg mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Stopped</p>
<input formControlName="stopped" [minDate]="form.get('condition').get('started').value" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #cde="ngbDatepicker" (click)="cde.toggle()">
</div><!-- col -->
</div><!-- row -->
<div class="row row-sm mg-t-20">
<div class="col-lg">
<p class="mg-b-10">Description/Comment</p>
<textarea formControlName="description" rows="3" class="form-control" placeholder="Textarea"></textarea>
</div><!-- col -->
</div><!-- row -->
</ng-container>
<hr class="mg-y-30">
<div class="row">
<div class="col-lg">
<div class="card card-fhir-resource" >
<div class="card-header" (click)="collapsePanel['medication'] = !collapsePanel['medication']">
<div>
<h6 class="card-title">Medications</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
</div>
</div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="collapsePanel['medication']" class="card-body">
<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">
<strong>Medication Status: {{medicationGroup.status}}</strong>
</div>
<div class="tx-right">
<span class="cursor-pointer" (click)="deleteMedication(i)" aria-hidden="true"><i class="fas fa-trash"></i></span>
</div>
<div class="row row-sm">
<div class="col-lg-6">
<p class="mg-b-10">Medication name<span ngbTooltip="required" class="text-danger">*</span></p>
<app-nlm-typeahead formControlName="data" searchType="Medication" [debugMode]="debugMode"></app-nlm-typeahead>
</div><!-- col -->
<div class="col-lg-3 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Status<span ngbTooltip="required" class="text-danger">*</span></p>
<select formControlName="status" class="form-control">
<option value="" hidden selected>Select Status</option>
<option value="active">Active</option>
<option value="stopped">Stopped</option>
</select> </div><!-- col -->
<div class="col-lg-3 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Dosage</p>
<input formControlName="dosage" class="form-control" placeholder="Input box" type="text">
</div><!-- col -->
<div class="col-lg-3 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Started<span ngbTooltip="required" class="text-danger">*</span></p>
<input formControlName="started" class="form-control" placeholder="yyyy-mm-dd" ngbDatepicker #ds="ngbDatepicker" (click)="ds.toggle()">
</div><!-- col -->
<div class="col-lg-3 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Stopped</p>
<input [minDate]="medicationGroup.get('started').value" formControlName="stopped" class="form-control" placeholder="yyyy-mm-dd" ngbDatepicker #dstop="ngbDatepicker" (click)="dstop.toggle()">
</div><!-- col -->
<div class="col-lg-3 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Why Stopped</p>
<app-nlm-typeahead formControlName="whystopped" searchType="MedicationWhyStopped" [debugMode]="debugMode"></app-nlm-typeahead>
</div><!-- col -->
<div class="col-lg-3 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Prescribing Practitioner<span ngbTooltip="required" class="text-danger">*</span></p>
<select class="form-control" formControlName="requester">
<option value="" hidden selected>Select Practitioner</option>
<option value="" (click)="openPractitionerModal(practitionerCreateModal, medicationGroup, 'requester')">New Practitioner</option>
<optgroup *ngIf="practitioners.controls.length" class="divider"></optgroup>
<option *ngFor="let practitioner of practitioners.controls; let i = index" [value]="practitioner.value.id">
{{practitioner.value.name}} ({{practitioner.value.profession.text}})
</option>
</select>
</div><!-- col -->
</div><!-- row -->
<div class="row row-sm mg-t-20">
<div class="col-lg">
<p class="mg-b-10">Instructions</p>
<textarea formControlName="instructions" rows="3" class="form-control" placeholder="Textarea"></textarea>
</div><!-- col -->
</div><!-- row -->
</div>
</ng-container>
<div class="row pt-2">
<div class="col-lg-4 col-md-3">
<button type="button" (click)="addMedication()" class="btn btn-outline-indigo btn-block">Add Medication</button>
</div>
</div>
</div>
<div class="card-footer">
<a class="float-right" (click)="collapsePanel['medication'] = !collapsePanel['medication']">{{collapsePanel['medication'] ? 'expand' : 'collapse'}}</a>
</div>
</div>
</div>
</div>
<hr class="mg-y-30">
<div class="row">
<div class="col-lg">
<div class="card card-fhir-resource" >
<div class="card-header" (click)="collapsePanel['procedure'] = !collapsePanel['procedure']">
<div>
<h6 class="card-title">Major Surgeries and Implants</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
</div>
</div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="collapsePanel['procedure']" class="card-body">
<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">
<strong>Procedure Status: {{procedureGroup.status}}</strong>
</div>
<div class="tx-right">
<span class="cursor-pointer" (click)="deleteProcedure(i)" aria-hidden="true"><i class="fas fa-trash"></i></span>
</div>
<div class="row row-sm">
<div class="col-lg-8">
<p class="mg-b-10">Surgery or Implant<span ngbTooltip="required" class="text-danger">*</span></p>
<app-nlm-typeahead formControlName="data" searchType="Procedure" [debugMode]="debugMode"></app-nlm-typeahead>
</div><!-- col -->
<div class="col-lg-4 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">When done<span ngbTooltip="required" class="text-danger">*</span></p>
<input formControlName="whendone" class="form-control" placeholder="yyyy-mm-dd" ngbDatepicker #dwd="ngbDatepicker" (click)="dwd.toggle()">
</div><!-- col -->
<div class="col-lg-6 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Performed By</p>
<select class="form-control" formControlName="performer">
<option value="" hidden selected>Select Practitioner</option>
<option value="" (click)="openPractitionerModal(practitionerCreateModal, procedureGroup, 'performer')">New Practitioner</option>
<optgroup *ngIf="practitioners.controls.length" class="divider"></optgroup>
<option *ngFor="let practitioner of practitioners.controls; let i = index" [value]="practitioner.value.id">
{{practitioner.value.name}} ({{practitioner.value.profession.text}})
</option>
</select>
</div><!-- col -->
<div class="col-lg-6 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Location</p>
<select class="form-control" formControlName="location">
<option value="" hidden selected>Select Location</option>
<option value="" (click)="openOrganizationModal(organizationCreateModal, procedureGroup, 'location')">New Organization</option>
<optgroup *ngIf="organizations.controls.length" class="divider"></optgroup>
<option *ngFor="let organization of organizations.controls; let i = index" [value]="organization.value.id">
{{organization.value.name}} ({{organization.value.address}})
</option>
</select>
</div><!-- col -->
<div class="col-lg-12 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Comments</p>
<textarea formControlName="comment" class="form-control" placeholder="Input box" rows="3"></textarea>
</div><!-- col -->
</div><!-- row -->
</div>
</ng-container>
<div class="row pt-2">
<div class="col-lg-4 col-md-3">
<button type="button" (click)="addProcedure()" class="btn btn-outline-indigo btn-block">Add Surgery or Implant</button>
</div>
</div>
</div>
<div class="card-footer">
<a class="float-right" (click)="collapsePanel['procedure'] = !collapsePanel['procedure']">{{collapsePanel['procedure'] ? 'expand' : 'collapse'}}</a>
</div>
</div>
</div>
</div>
<hr class="mg-y-30">
<div class="row">
<div class="col-lg">
<div class="card card-fhir-resource" >
<div class="card-header" (click)="collapsePanel['practitioner'] = !collapsePanel['practitioner']">
<div>
<h6 class="card-title">Medical Practitioners</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
</div>
</div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="collapsePanel['practitioner']" class="card-body">
<ng-container formArrayName="practitioners">
<div class="card mg-t-10 pd-20" [formGroup]="practitionerGroup" *ngFor="let practitionerGroup of practitioners.controls; let i = index">
<div class="tx-right">
<span class="cursor-pointer" (click)="deletePractitioner(i)" aria-hidden="true"><i class="fas fa-trash"></i></span>
</div>
<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">
<button type="button" (click)="openPractitionerModal(practitionerCreateModal)" class="btn btn-outline-indigo btn-block">Add Practitioner</button>
</div>
</div>
</div>
<div class="card-footer">
<a class="float-right" (click)="collapsePanel['practitioner'] = !collapsePanel['practitioner']">{{collapsePanel['practitioner'] ? 'expand' : 'collapse'}}</a>
</div>
</div>
</div>
</div>
<hr class="mg-y-30">
<div class="row">
<div class="col-lg">
<div class="card card-fhir-resource" >
<div class="card-header" (click)="collapsePanel['organization'] = !collapsePanel['organization']">
<div>
<h6 class="card-title">Medical Location/Organizations</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
</div>
</div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="collapsePanel['organization']" class="card-body">
<ng-container formArrayName="locations">
<div class="card mg-t-10 pd-20" [formGroup]="organizationGroup" *ngFor="let organizationGroup of organizations.controls; let i = index">
<div class="tx-right">
<span class="cursor-pointer" (click)="deleteOrganization(i)" aria-hidden="true"><i class="fas fa-trash"></i></span>
</div>
<div class="row row-sm">
<input formControlName="id" class="form-control" type="hidden">
<div class="col-lg mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Name<span ngbTooltip="required" class="text-danger">*</span></p>
<input formControlName="name" readonly class="form-control" placeholder="Input box" type="text">
</div><!-- col -->
<div class="col-lg mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Type</p>
<app-nlm-typeahead formControlName="type" searchType="MedicalContactOrganizationType" [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><!-- row -->
</div>
</ng-container>
<div class="row pt-2">
<div class="col-lg-4 col-md-4">
<button type="button" (click)="openOrganizationModal(organizationCreateModal)" class="btn btn-outline-indigo btn-block">Add Organization</button>
</div>
</div>
</div>
<div class="card-footer">
<a class="float-right" (click)="collapsePanel['organization'] = !collapsePanel['organization']">{{collapsePanel['organization'] ? 'expand' : 'collapse'}}</a>
</div>
</div>
</div>
</div>
<hr class="mg-y-30">
<div class="row">
<div class="col-lg">
<div class="card card-fhir-resource" >
<div class="card-header" (click)="collapsePanel['attachments'] = !collapsePanel['attachments']">
<div>
<h6 class="card-title">Notes & Attachments</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
</div>
</div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="collapsePanel['attachments']" class="card-body">
<div class="row row-sm">
<div class="col-lg">
<p class="mg-b-10">Name</p>
<input disabled class="form-control" placeholder="Input box" type="text">
</div><!-- col -->
<div class="col-lg mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Type</p>
<input disabled class="form-control" placeholder="Input box" type="text">
</div><!-- col -->
</div><!-- row -->
<div class="row pt-2">
<div class="col-lg-4 col-md-3">
<button disabled type="button" class="btn btn-outline-indigo btn-block">Add Note or Attachment</button>
</div>
</div>
</div>
<div class="card-footer">
<a class="float-right" (click)="collapsePanel['attachments'] = !collapsePanel['attachments']">{{collapsePanel['attachments'] ? 'expand' : 'collapse'}}</a>
</div>
</div>
</div>
</div>
<button class="mg-t-20 mg-b-20 btn btn-az-primary btn-rounded btn-block " type="submit">Submit</button>
</form>
</div><!-- az-content-body -->
</div><!-- container -->
</div><!-- az-content -->
<ng-template #practitionerCreateModal let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-practitioner">New Practitioner</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.close()"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div *ngIf="debugMode" class="alert alert-warning">
<pre><code [highlight]="newPractitionerForm.getRawValue() | json"></code></pre>
<strong>New Practitioner Form Status: {{ newPractitionerForm.status }}</strong>
</div>
<div class="row row-sm">
<div class="col-12">
<p class="mg-b-10">Name<span ngbTooltip="required" class="text-danger">*</span></p>
<form [formGroup]="newPractitionerTypeaheadForm">
<app-nlm-typeahead formControlName="data" searchType="MedicalContactIndividual" [debugMode]="debugMode"></app-nlm-typeahead>
</form>
<span *ngFor="let extId of newPractitionerForm.get('identifier').getRawValue()" class="badge badge-pill badge-primary">{{extId.type?.coding[0].code}}: {{extId.value}}</span>
</div><!-- col -->
<ng-container [formGroup]="newPractitionerForm">
<div class="col-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-6 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-6 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-6 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" email>
</div><!-- col -->
<ng-container formGroupName="address">
<div class="col-12 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Address</p>
<input formControlName="line1" class="form-control" placeholder="Line 1" type="text">
</div><!-- col -->
<div class="col-12 pd-t-10 mg-t-10 mg-lg-t-0">
<input formControlName="line2" class="form-control" placeholder="Line 2" type="text">
</div><!-- col -->
<div class="col-6 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">City</p>
<input formControlName="city" class="form-control" placeholder="City" type="text">
</div><!-- col -->
<div class="col-6 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">State</p>
<input formControlName="state" class="form-control" placeholder="State" type="text">
</div><!-- col -->
<div class="col-6 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Zip/Postal</p>
<input formControlName="zip" class="form-control" placeholder="Zip" type="text">
</div><!-- col -->
<div class="col-6 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Country</p>
<input formControlName="country" class="form-control" placeholder="Country" type="text">
</div><!-- col -->
</ng-container>
</ng-container>
</div><!-- row -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-az-primary" (click)="modal.dismiss()">Add Practitioner</button>
</div>
</ng-template>
<ng-template #organizationCreateModal let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-location">New Location</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.close()"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div *ngIf="debugMode" class="alert alert-warning">
<pre><code [highlight]="newOrganizationForm.getRawValue() | json"></code></pre>
<strong>New Organization Form Status: {{ newOrganizationForm.status }}</strong>
</div>
<div class="row row-sm">
<div class="col-12">
<p class="mg-b-10">Name<span ngbTooltip="required" class="text-danger">*</span></p>
<form [formGroup]="newOrganizationTypeaheadForm">
<app-nlm-typeahead formControlName="data" searchType="MedicalContactOrganization" [debugMode]="debugMode"></app-nlm-typeahead>
</form>
<span *ngFor="let extId of newOrganizationForm.get('identifier').getRawValue()" class="badge badge-pill badge-primary">{{extId.type?.coding[0].code}}: {{extId.value}}</span>
</div><!-- col -->
<ng-container [formGroup]="newOrganizationForm">
<div class="col-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="type" searchType="MedicalContactOrganizationType" [debugMode]="debugMode"></app-nlm-typeahead>
</div><!-- col -->
<div class="col-6 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-6 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-6 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" email>
</div><!-- col -->
<ng-container formGroupName="address">
<div class="col-12 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Address</p>
<input formControlName="line1" class="form-control" placeholder="Line 1" type="text">
</div><!-- col -->
<div class="col-12 pd-t-10 mg-t-10 mg-lg-t-0">
<input formControlName="line2" class="form-control" placeholder="Line 2" type="text">
</div><!-- col -->
<div class="col-6 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">City</p>
<input formControlName="city" class="form-control" placeholder="City" type="text">
</div><!-- col -->
<div class="col-6 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">State</p>
<input formControlName="state" class="form-control" placeholder="State" type="text">
</div><!-- col -->
<div class="col-6 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Zip/Postal</p>
<input formControlName="zip" class="form-control" placeholder="Zip" type="text">
</div><!-- col -->
<div class="col-6 mg-t-10 mg-lg-t-0">
<p class="mg-b-10">Country</p>
<input formControlName="country" class="form-control" placeholder="Country" type="text">
</div><!-- col -->
</ng-container>
</ng-container>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-az-primary" (click)="modal.dismiss()">Add Location</button>
</div>
</ng-template>

0
frontend/src/app/pages/resource-creator/resource-creator.component.scss Normal file
View File

23
frontend/src/app/pages/resource-creator/resource-creator.component.spec.ts Normal file
View File

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

379
frontend/src/app/pages/resource-creator/resource-creator.component.ts Normal file
View File

@ -0,0 +1,379 @@
import {Component, Input, OnInit} from '@angular/core';
import {AbstractControl, FormArray, FormControl, FormGroup, Validators} from '@angular/forms';
import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import {
ResourceCreateOrganization,
ResourceCreatePractitioner,
} from '../../models/fasten/resource_create';
import {uuidV4} from '../../../lib/utils/uuid';
import {NlmSearchResults} from '../../services/nlm-clinical-table-search.service';
import {GenerateR4Bundle} from './resource-creator.utilities';
import {FastenApiService} from '../../services/fasten-api.service';
import {Router} from '@angular/router';
export interface MedicationModel {
data: {},
status: string,
dosage: string,
started: null,
stopped: null,
whystopped: string,
resupply: string
}
export enum ContactType {
ContactTypeSearch = 'search',
ContactTypeManual = 'manual',
}
@Component({
selector: 'app-resource-creator',
templateUrl: './resource-creator.component.html',
styleUrls: ['./resource-creator.component.scss']
})
export class ResourceCreatorComponent implements OnInit {
debugMode = false;
collapsePanel: {[name: string]: boolean} = {}
@Input() form!: FormGroup;
get isValid() { return true; }
// model: any = {
// condition: {
// data: {},
// status: null,
// started: null,
// stopped: null,
// description: null,
// },
// medication: []
// }
constructor(private router: Router, private modalService: NgbModal, private fastenApi: FastenApiService) { }
ngOnInit(): void {
//https://stackoverflow.com/questions/52038071/creating-nested-form-groups-using-angular-reactive-forms
//https://www.danywalls.com/creating-dynamic-forms-in-angular-a-step-by-step-guide
//https://www.telerik.com/blogs/angular-basics-creating-dynamic-forms-using-formarray-angular
//https://angular.io/guide/reactive-forms#creating-dynamic-forms
//https://angular.io/guide/dynamic-form
this.form = new FormGroup({
condition: new FormGroup({
data: new FormControl<NlmSearchResults>(null, Validators.required),
status: new FormControl(null, Validators.required),
started: new FormControl(null, Validators.required),
stopped: new FormControl(null),
description: new FormControl(null),
}),
medications: new FormArray([]),
procedures: new FormArray([]),
practitioners: new FormArray([]),
organizations: new FormArray([]),
});
this.resetOrganizationForm()
// this.resetPractitionerForm()
}
get medications(): FormArray {
return this.form.controls["medications"] as FormArray;
}
addMedication(){
const medicationGroup = new FormGroup({
data: new FormControl<NlmSearchResults>(null, Validators.required),
status: new FormControl(null, Validators.required),
dosage: new FormControl({
value: '', disabled: true
}),
started: new FormControl(null, Validators.required),
stopped: new FormControl(null),
whystopped: new FormControl(null),
requester: new FormControl(null, Validators.required),
instructions: new FormControl(null),
});
medicationGroup.get("data").valueChanges.subscribe(val => {
medicationGroup.get("dosage").enable();
//TODO: find a way to create dependant dosage information based on medication data.
});
this.medications.push(medicationGroup);
}
deleteMedication(index: number) {
this.medications.removeAt(index);
}
get procedures(): FormArray {
return this.form.controls["procedures"] as FormArray;
}
addProcedure(){
const procedureGroup = new FormGroup({
data: new FormControl<NlmSearchResults>(null, Validators.required),
whendone: new FormControl(null, Validators.required),
performer: new FormControl(null),
location: new FormControl(null),
comment: new FormControl('')
});
this.procedures.push(procedureGroup);
}
deleteProcedure(index: number) {
this.procedures.removeAt(index);
}
get practitioners(): FormArray {
return this.form.controls["practitioners"] as FormArray;
}
addPractitioner(practitioner: ResourceCreatePractitioner){
const practitionerGroup = new FormGroup({
id: new FormControl(practitioner.id, Validators.required),
identifier: new FormControl(practitioner.identifier),
profession: new FormControl(practitioner.profession, Validators.required),
name: new FormControl(practitioner.name, Validators.required),
phone: new FormControl(practitioner.phone, Validators.pattern('[- +()0-9]+')),
fax: new FormControl(practitioner.fax, Validators.pattern('[- +()0-9]+')),
email: new FormControl(practitioner.email, Validators.email),
address: new FormGroup({
line1: new FormControl(practitioner.address.line1),
line2: new FormControl(practitioner.address.line2),
city: new FormControl(practitioner.address.city),
state: new FormControl(practitioner.address.state),
zip: new FormControl(practitioner.address.zip),
country: new FormControl(practitioner.address.country),
}),
});
this.practitioners.push(practitionerGroup);
}
deletePractitioner(index: number) {
this.practitioners.removeAt(index);
}
get organizations(): FormArray {
return this.form.controls["organizations"] as FormArray;
}
addOrganization(organization: ResourceCreateOrganization){
const organizationGroup = new FormGroup({
id: new FormControl(organization.id, Validators.required),
identifier: new FormControl(organization.identifier),
name: new FormControl(organization.name, Validators.required),
type: new FormControl(organization.type),
phone: new FormControl(organization.phone, Validators.pattern('[- +()0-9]+')),
fax: new FormControl(organization.fax, Validators.pattern('[- +()0-9]+')),
email: new FormControl(organization.email, Validators.email),
address: new FormControl(organization.address),
});
this.organizations.push(organizationGroup);
}
deleteOrganization(index: number) {
this.organizations.removeAt(index);
}
onSubmit() {
console.log(this.form.getRawValue())
this.form.markAllAsTouched()
if (this.form.valid) {
console.log('form submitted');
let bundle = GenerateR4Bundle(this.form.getRawValue());
let bundleJsonStr = JSON.stringify(bundle);
let bundleBlob = new Blob([bundleJsonStr], { type: 'application/json' });
let bundleFile = new File([ bundleBlob ], 'bundle.json');
this.fastenApi.createManualSource(bundleFile).subscribe((resp) => {
console.log(resp)
this.router.navigate(['/medical-history'])
})
}
}
//Modal Helpers
newPractitionerTypeaheadForm: FormGroup
newPractitionerForm: FormGroup //ResourceCreatePractitioner
newOrganizationTypeaheadForm: FormGroup
newOrganizationForm: FormGroup //ResourceCreateOrganization
openPractitionerModal(content, formGroup?: AbstractControl, controlName?: string) {
this.resetPractitionerForm()
this.modalService.open(content, {
ariaLabelledBy: 'modal-practitioner',
beforeDismiss: () => {
console.log("validate Practitioner form")
this.newPractitionerForm.markAllAsTouched()
this.newPractitionerTypeaheadForm.markAllAsTouched()
return this.newPractitionerForm.valid
},
}).result.then(
() => {
console.log('Closed without saving');
},
() => {
console.log('Closing, saving form');
//add this to the list of organization
let result = this.newPractitionerForm.getRawValue()
result.id = uuidV4();
this.addPractitioner(result);
if(formGroup && controlName){
//set this practitioner to the current select box
formGroup.get(controlName).setValue(result.id);
}
},
);
}
openOrganizationModal(content, formGroup?: AbstractControl, controlName?: string) {
this.resetOrganizationForm()
this.modalService.open(content, {
ariaLabelledBy: 'modal-organization',
beforeDismiss: () => {
console.log("validate Organization form")
this.newOrganizationForm.markAllAsTouched()
this.newOrganizationTypeaheadForm.markAllAsTouched()
return this.newOrganizationForm.valid
},
}).result.then(
() => {
console.log('Closed without saving');
},
() => {
console.log('Closing, saving form');
//add this to the list of organization
let result = this.newOrganizationForm.getRawValue()
result.id = uuidV4();
this.addOrganization(result);
if(formGroup && controlName){
//set this practitioner to the current select box
formGroup.get(controlName).setValue(result.id);
}
},
);
}
private resetPractitionerForm(){
this.newPractitionerTypeaheadForm = new FormGroup({
data: new FormControl(null, Validators.required),
})
this.newPractitionerTypeaheadForm.valueChanges.subscribe(form => {
console.log("CHANGE INDIVIDUAL IN MODAL", form)
let val = form.data
if(val.provider_type){
this.newPractitionerForm.get('profession').setValue(val.provider_type)
}
if(val.identifier){
this.newPractitionerForm.get('identifier').setValue( val.identifier);
}
if(form.data.provider_phone){
this.newPractitionerForm.get('phone').setValue( val.provider_phone);
}
if(val.provider_fax){
this.newPractitionerForm.get('fax').setValue(val.provider_fax);
}
if(val.provider_address){
let addressGroup = this.newPractitionerForm.get('address')
addressGroup.get('line1').setValue(val.provider_address.line1)
addressGroup.get('line2').setValue(val.provider_address.line2)
addressGroup.get('city').setValue(val.provider_address.city)
addressGroup.get('state').setValue(val.provider_address.state)
addressGroup.get('zip').setValue(val.provider_address.zip)
addressGroup.get('country').setValue(val.provider_address.country)
}
if(val.text) {
this.newPractitionerForm.get('name').setValue( val.text);
}
});
this.newPractitionerForm = new FormGroup({
identifier: new FormControl([]),
name: new FormControl(null, Validators.required),
profession: new FormControl(null, Validators.required),
phone: new FormControl(null, Validators.pattern('[- +()0-9]+')),
fax: new FormControl(null, Validators.pattern('[- +()0-9]+')),
email: new FormControl(null, Validators.email),
address: new FormGroup({
line1: new FormControl(null),
line2: new FormControl(null),
city: new FormControl(null),
state: new FormControl(null),
zip: new FormControl(null),
country: new FormControl(null),
})
})
}
private resetOrganizationForm(){
this.newOrganizationTypeaheadForm = new FormGroup({
data: new FormControl(null, Validators.required),
})
this.newOrganizationTypeaheadForm.valueChanges.subscribe(form => {
console.log("CHANGE Organization IN MODAL", form)
let val = form.data
if(val.provider_type) {
this.newOrganizationForm.get('type').setValue(val.provider_type)
}
if(val.identifier){
this.newOrganizationForm.get('identifier').setValue(val.identifier)
}
if(val.provider_phone){
this.newOrganizationForm.get('phone').setValue(val.provider_phone)
}
if(val.provider_fax){
this.newOrganizationForm.get('fax').setValue(val.provider_fax)
}
if(val.provider_address){
let addressGroup = this.newOrganizationForm.get('address')
addressGroup.get('line1').setValue(val.provider_address.line1)
addressGroup.get('line2').setValue(val.provider_address.line2)
addressGroup.get('city').setValue(val.provider_address.city)
addressGroup.get('state').setValue(val.provider_address.state)
addressGroup.get('zip').setValue(val.provider_address.zip)
addressGroup.get('country').setValue(val.provider_address.country)
}
if(val.text) {
this.newOrganizationForm.get('name').setValue(val.text)
}
});
this.newOrganizationForm = new FormGroup({
identifier: new FormControl([]),
name: new FormControl(null, Validators.required),
type: new FormControl(null, Validators.required),
phone: new FormControl(null, Validators.pattern('[- +()0-9]+')),
fax: new FormControl(null, Validators.pattern('[- +()0-9]+')),
email: new FormControl(null, Validators.email),
address: new FormGroup({
line1: new FormControl(null),
line2: new FormControl(null),
city: new FormControl(null),
state: new FormControl(null),
zip: new FormControl(null),
country: new FormControl(null),
})
})
}
}

395
frontend/src/app/pages/resource-creator/resource-creator.utilities.ts Normal file
View File

@ -0,0 +1,395 @@
import {
ResourceCreate,
ResourceCreateCondition, ResourceCreateMedication,
ResourceCreateOrganization, ResourceCreatePractitioner,
ResourceCreateProcedure
} from '../../models/fasten/resource_create';
import {
Condition,
Medication,
Procedure,
Location as FhirLocation,
BundleEntry,
Bundle,
Organization,
Practitioner, MedicationRequest, Patient, Encounter
} from 'fhir/r4';
import {uuidV4} from '../../../lib/utils/uuid';
interface ResourceStorage {
[resourceType: string]: {
[resourceId: string]: Condition | Patient | MedicationRequest | Organization | FhirLocation | Practitioner | Procedure | Encounter
}
}
export function GenerateR4Bundle(resourceCreate: ResourceCreate): Bundle {
let resourceStorage: ResourceStorage = {} //{"resourceType": {"resourceId": resourceData}}
resourceStorage = placeholderR4Patient(resourceStorage)
resourceStorage = resourceCreateConditionToR4Condition(resourceStorage, resourceCreate.condition)
for(let organization of resourceCreate.organizations) {
resourceStorage = resourceCreateOrganizationToR4Organization(resourceStorage, organization)
}
for(let practitioner of resourceCreate.practitioners) {
resourceStorage = resourceCreatePractitionerToR4Practitioner(resourceStorage, practitioner)
}
for(let medication of resourceCreate.medications) {
resourceStorage = resourceCreateMedicationToR4MedicationRequest(resourceStorage, medication)
}
for(let procedure of resourceCreate.procedures) {
resourceStorage = resourceCreateProcedureToR4Procedure(resourceStorage, procedure)
}
console.log("POPULATED RESOURCE STORAGE", resourceStorage)
let bundle = {
resourceType: 'Bundle',
type: 'transaction',
entry: [],
} as Bundle
for(let resourceType in resourceStorage) {
for(let resourceId in resourceStorage[resourceType]) {
let resource = resourceStorage[resourceType][resourceId]
bundle.entry.push({
fullUrl: `urn:uuid:${resource.id}`,
resource: resource,
})
}
}
return bundle
}
//Private methods
function placeholderR4Patient(resourceStorage: ResourceStorage): ResourceStorage {
resourceStorage['Patient'] = resourceStorage['Patient'] || {}
let patientResource = {
resourceType: 'Patient',
id: uuidV4(),
name: [
{
family: 'Placeholder',
given: ['Patient'],
}
],
} as Patient
resourceStorage['Patient'][patientResource.id] = patientResource
return resourceStorage
}
// this model is based on FHIR401 Resource Condition - http://hl7.org/fhir/R4/condition.html
function resourceCreateConditionToR4Condition(resourceStorage: ResourceStorage, resourceCreateCondition: ResourceCreateCondition): ResourceStorage {
resourceStorage['Condition'] = resourceStorage['Condition'] || {}
resourceStorage['Encounter'] = resourceStorage['Encounter'] || {}
let note = []
if (resourceCreateCondition.description) {
note.push({
text: resourceCreateCondition.description,
})
}
let conditionResource = {
subject: {
reference: `urn:uuid:${findPatient(resourceStorage).id}` //Patient
},
resourceType: 'Condition',
id: uuidV4(),
code: {
coding: resourceCreateCondition.data.identifier || [],
text: resourceCreateCondition.data.identifier[0].display,
},
clinicalStatus: {
"coding": [
{
"system": "http://terminology.hl7.org/CodeSystem/condition-clinical",
"code": resourceCreateCondition.status,
}
]
},
onsetDateTime: `${new Date(resourceCreateCondition.started.year, resourceCreateCondition.started.month-1,resourceCreateCondition.started.day).toISOString()}`,
abatementDateTime: resourceCreateCondition.stopped ? `${new Date(resourceCreateCondition.stopped.year,resourceCreateCondition.stopped.month-1, resourceCreateCondition.stopped.day).toISOString()}` : null,
recordedDate: new Date().toISOString(),
note: note
} as Condition
resourceStorage['Condition'][conditionResource.id] = conditionResource
return resourceStorage
}
// this model is based on FHIR401 Resource Procedure - http://hl7.org/fhir/R4/procedure.html
function resourceCreateProcedureToR4Procedure(resourceStorage: ResourceStorage, resourceCreateProcedure: ResourceCreateProcedure): ResourceStorage {
resourceStorage['Procedure'] = resourceStorage['Procedure'] || {}
let note = []
if (resourceCreateProcedure.comment) {
note.push({
text: resourceCreateProcedure.comment,
})
}
let encounterResource = {
resourceType: 'Encounter',
id: uuidV4(),
status: "finished",
subject: {
reference: `urn:uuid:${findPatient(resourceStorage).id}` //Patient
},
participant: [
{
individual: {
reference: `urn:uuid:${resourceCreateProcedure.performer}` //Practitioner
}
}
],
period: {
start: `${new Date(resourceCreateProcedure.whendone.year, resourceCreateProcedure.whendone.month-1,resourceCreateProcedure.whendone.day).toISOString()}`,
end: `${new Date(resourceCreateProcedure.whendone.year, resourceCreateProcedure.whendone.month-1,resourceCreateProcedure.whendone.day).toISOString()}`,
},
reasonReference: [
{
reference: `urn:uuid:${findCondition(resourceStorage).id}` //Condition
}
],
serviceProvider: {
reference: `urn:uuid:${resourceCreateProcedure.location}` //Organization
}
} as Encounter
resourceStorage['Encounter'][encounterResource.id] = encounterResource
let procedureResource = {
subject: {
reference: `urn:uuid:${findPatient(resourceStorage).id}` //Patient
},
status: "completed",
resourceType: 'Procedure',
id: uuidV4(),
code: {
coding: resourceCreateProcedure.data.identifier || [],
text: resourceCreateProcedure.data.identifier[0].display,
},
performedDateTime: `${new Date(resourceCreateProcedure.whendone.year, resourceCreateProcedure.whendone.month-1,resourceCreateProcedure.whendone.day).toISOString()}`,
encounter: {
reference: `urn:uuid:${encounterResource.id}` //Encounter
},
reasonReference: [
{
reference: `urn:uuid:${findCondition(resourceStorage).id}` //Condition
}
],
performer: [
{
actor: {
reference: `urn:uuid:${resourceCreateProcedure.performer}` //Practitioner
},
onBehalfOf: {
reference: `urn:uuid:${resourceCreateProcedure.location}` //Organization
}
}
],
note: note,
} as Procedure
resourceStorage['Procedure'][procedureResource.id] = procedureResource
return resourceStorage
}
// this model is based on FHIR401 Resource Organization - http://hl7.org/fhir/R4/organization.html
function resourceCreateOrganizationToR4Organization(resourceStorage: ResourceStorage, resourceCreateOrganization: ResourceCreateOrganization): ResourceStorage {
resourceStorage['Organization'] = resourceStorage['Organization'] || {}
let telecom = []
if (resourceCreateOrganization.phone) {
telecom.push({
system: 'phone',
value: resourceCreateOrganization.phone,
})
}
if (resourceCreateOrganization.fax) {
telecom.push({
system: 'fax',
value: resourceCreateOrganization.fax,
})
}
if (resourceCreateOrganization.email) {
telecom.push({
system: 'email',
value: resourceCreateOrganization.email,
})
}
let organizationResource = {
resourceType: 'Organization',
id: resourceCreateOrganization.id,
name: resourceCreateOrganization.name,
identifier: resourceCreateOrganization.identifier || [],
type: [
{
coding: resourceCreateOrganization.type.identifier || [],
}
],
address: [
{
line: [resourceCreateOrganization.address.line1, resourceCreateOrganization.address.line2],
city: resourceCreateOrganization.address.city,
state: resourceCreateOrganization.address.state,
postalCode: resourceCreateOrganization.address.zip,
country: resourceCreateOrganization.address.country,
}
],
telecom: telecom,
active: true,
} as Organization
resourceStorage['Organization'][organizationResource.id] = organizationResource
return resourceStorage
}
// this model is based on FHIR401 Resource Practitioner - http://hl7.org/fhir/R4/practitioner.html
function resourceCreatePractitionerToR4Practitioner(resourceStorage: ResourceStorage, resourceCreatePractitioner: ResourceCreatePractitioner): ResourceStorage {
resourceStorage['Practitioner'] = resourceStorage['Practitioner'] || {}
let telecom = []
if (resourceCreatePractitioner.phone) {
telecom.push({
system: 'phone',
value: resourceCreatePractitioner.phone,
})
}
if (resourceCreatePractitioner.fax) {
telecom.push({
system: 'fax',
value: resourceCreatePractitioner.fax,
})
}
if (resourceCreatePractitioner.email) {
telecom.push({
system: 'email',
value: resourceCreatePractitioner.email,
})
}
let qualification = []
if(resourceCreatePractitioner.profession){
qualification.push({
code: {
coding: resourceCreatePractitioner.profession.identifier || [],
}
})
}
resourceCreatePractitioner.name.split(" ")
let practitionerResource = {
resourceType: 'Practitioner',
id: resourceCreatePractitioner.id,
name: [
{
text: resourceCreatePractitioner.name,
},
],
identifier: resourceCreatePractitioner.identifier || [],
address: [
{
line: [resourceCreatePractitioner.address.line1, resourceCreatePractitioner.address.line2],
city: resourceCreatePractitioner.address.city,
state: resourceCreatePractitioner.address.state,
postalCode: resourceCreatePractitioner.address.zip,
country: resourceCreatePractitioner.address.country,
}
],
telecom: telecom,
active: true,
qualification: qualification
} as Practitioner
resourceStorage['Practitioner'][practitionerResource.id] = practitionerResource
return resourceStorage
}
// this model is based on FHIR401 Resource Medication - http://hl7.org/fhir/R4/medication.html
function resourceCreateMedicationToR4MedicationRequest(resourceStorage: ResourceStorage, resourceCreateMedication: ResourceCreateMedication): ResourceStorage {
resourceStorage['MedicationRequest'] = resourceStorage['MedicationRequest'] || {}
let encounterResource = {
resourceType: 'Encounter',
id: uuidV4(),
status: "finished",
subject: {
reference: `urn:uuid:${findPatient(resourceStorage).id}` //Patient
},
participant: [
{
individual: {
reference: `urn:uuid:${resourceCreateMedication.requester}` //Practitioner
}
}
],
period: {
start: `${new Date(resourceCreateMedication.started.year, resourceCreateMedication.started.month-1,resourceCreateMedication.started.day).toISOString()}`,
end: resourceCreateMedication.stopped ? `${new Date(resourceCreateMedication.stopped.year, resourceCreateMedication.stopped.month-1,resourceCreateMedication.stopped.day).toISOString()}` : null,
},
reasonReference: [
{
reference: `urn:uuid:${findCondition(resourceStorage).id}` //Condition
}
],
} as Encounter
resourceStorage['Encounter'][encounterResource.id] = encounterResource
let medicationRequestResource = {
id: uuidV4(),
resourceType: 'MedicationRequest',
status: resourceCreateMedication.status,
statusReason: {
coding: resourceCreateMedication.whystopped.identifier || [],
},
intent: 'order',
medicationCodeableConcept: {
coding: resourceCreateMedication.data.identifier || [],
},
subject: {
reference: `urn:uuid:${findPatient(resourceStorage).id}` //Patient
},
encounter: {
reference: `urn:uuid:${encounterResource.id}` //Encounter
},
authoredOn: `${new Date(resourceCreateMedication.started.year,resourceCreateMedication.started.month-1,resourceCreateMedication.started.day).toISOString()}`,
requester: {
reference: `urn:uuid:${resourceCreateMedication.requester}` // Practitioner
},
reasonReference: [
{
reference: `urn:uuid:${findCondition(resourceStorage).id}` //Condition
},
],
note: [
{
text: resourceCreateMedication.instructions,
}
],
dispenseRequest: {
validityPeriod: {
start: `${new Date(resourceCreateMedication.started.year,resourceCreateMedication.started.month-1,resourceCreateMedication.started.day).toISOString()}`,
end: resourceCreateMedication.stopped ? `${new Date(resourceCreateMedication.stopped.year,resourceCreateMedication.stopped.month-1,resourceCreateMedication.stopped.day).toISOString()}` : null,
},
},
} as MedicationRequest
resourceStorage['MedicationRequest'][medicationRequestResource.id] = medicationRequestResource
return resourceStorage
}
function findCondition(resourceStorage: ResourceStorage): Condition {
let [conditionId] = Object.keys(resourceStorage['Condition'])
return resourceStorage['Condition'][conditionId] as Condition
}
function findPatient(resourceStorage: ResourceStorage): Patient {
let [patientId] = Object.keys(resourceStorage['Patient'])
return resourceStorage['Patient'][patientId] as Patient
}

10
frontend/src/app/services/auth.service.ts
View File

@ -8,6 +8,7 @@ import * as Oauth from '@panva/oauth4webapi';
import {SourceState} from '../models/fasten/source-state';
import * as jose from 'jose';
import {UserRegisteredClaims} from '../models/fasten/user-registered-claims';
import {uuidV4} from '../../lib/utils/uuid';
@Injectable({
providedIn: 'root'
@ -22,7 +23,7 @@ export class AuthService {
//Third-party JWT auth, used by Fasten Cloud
public async IdpConnect(idp_type: string) {
const state = this.uuidV4()
const state = uuidV4()
let sourceStateInfo = new SourceState()
sourceStateInfo.state = state
sourceStateInfo.source_type = idp_type
@ -192,11 +193,4 @@ export class AuthService {
private setAuthToken(token: string) {
localStorage.setItem(this.FASTEN_JWT_LOCALSTORAGE_KEY, token)
}
private uuidV4(){
// @ts-ignore
return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
);
}
}

9
frontend/src/app/services/lighthouse.service.ts
View File

@ -8,6 +8,7 @@ import {LighthouseSourceMetadata} from '../models/lighthouse/lighthouse-source-m
import * as Oauth from '@panva/oauth4webapi';
import {SourceState} from '../models/fasten/source-state';
import {MetadataSource} from '../models/fasten/metadata-source';
import {uuidV4} from '../../lib/utils/uuid';
@Injectable({
providedIn: 'root'
@ -43,7 +44,7 @@ export class LighthouseService {
async generateSourceAuthorizeUrl(sourceType: string, lighthouseSource: LighthouseSourceMetadata): Promise<URL> {
const state = this.uuidV4()
const state = uuidV4()
let sourceStateInfo = new SourceState()
sourceStateInfo.state = state
sourceStateInfo.source_type = sourceType
@ -182,10 +183,4 @@ export class LighthouseService {
return parts.join(separator);
}
private uuidV4(){
// @ts-ignore
return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
);
}
}

16
frontend/src/app/services/nlm-clinical-table-search.service.spec.ts Normal file
View File

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { NlmClinicalTableSearchService } from './nlm-clinical-table-search.service';
describe('NlmClinicalTableSearchService', () => {
let service: NlmClinicalTableSearchService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(NlmClinicalTableSearchService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

1219
frontend/src/app/services/nlm-clinical-table-search.service.ts Normal file
View File

File diff suppressed because it is too large Load Diff

17
frontend/src/custom.scss
View File

@ -4,6 +4,11 @@
cursor: pointer;
}
// adds a divider between select options
select > optgroup > .divider {
font-size: 1px;
background: rgba(0, 0, 0, 0.5);
}
//disable card
@ -31,6 +36,18 @@
z-index: 1000;
}
// Form Validation
.form-control.ng-invalid.ng-touched {
border-color: #dc3545;
padding-right: calc(1.5em + .75rem) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
// Fhir Resource Cards
.card-fhir-resource-popover {

1
frontend/src/lib/models/datatypes/coding-model.ts
View File

@ -4,4 +4,5 @@ export interface CodingModel {
system?: string
value?: any
unit?: string
type?: any
}

9
frontend/src/lib/models/resources/condition-model.ts
View File

@ -16,6 +16,8 @@ export class ConditionModel extends FastenDisplayModel {
clinical_status: string | undefined
date_recorded: string | undefined
onset_datetime: string | undefined
abatement_datetime: string | undefined
note: string | undefined
constructor(fhirResource: any, fhirVersion?: fhirVersions, fastenOptions?: FastenOptions) {
super(fastenOptions)
@ -32,7 +34,11 @@ export class ConditionModel extends FastenDisplayModel {
this.severity_text =
_.get(fhirResource, 'severity.coding.0.display') ||
_.get(fhirResource, 'severity.text');
this.onset_datetime = _.get(fhirResource, 'onsetDateTime');
this.onset_datetime = _.get(fhirResource, 'onsetDateTime') ||
_.get(fhirResource, 'onsetPeriod.start') ||
_.get(fhirResource, 'assertedDate');
this.abatement_datetime = _.get(fhirResource, 'abatementDateTime') ||
_.get(fhirResource, 'abatementPeriod.end');
this.has_asserter = _.has(fhirResource, 'asserter');
this.asserter = _.get(fhirResource, 'asserter');
this.has_body_site = !!_.get(fhirResource, 'bodySite.0.coding.0.display');
@ -54,6 +60,7 @@ export class ConditionModel extends FastenDisplayModel {
r4DTO(fhirResource:any){
this.clinical_status = _.get(fhirResource, 'clinicalStatus.coding.0.code');
this.date_recorded = _.get(fhirResource, 'recordedDate');
this.note = _.get(fhirResource, 'note.0.text');
};
resourceDTO(fhirResource:any, fhirVersion:fhirVersions){

6
frontend/src/lib/models/resources/practitioner-model.ts
View File

@ -8,7 +8,7 @@ import {FastenOptions} from '../fasten/fasten-options';
export class PractitionerModel extends FastenDisplayModel {
identifier: string|undefined
identifier: CodingModel[]|undefined
name: any|undefined
gender: string|undefined
status: string|undefined
@ -20,6 +20,7 @@ export class PractitionerModel extends FastenDisplayModel {
telecom: { system?: string, value?: string, use?: string }[]|undefined
address: string|undefined
birthdate: string|undefined
qualification: { code: string, system: string }[]|undefined
constructor(fhirResource: any, fhirVersion?: fhirVersions, fastenOptions?: FastenOptions) {
super(fastenOptions)
@ -30,7 +31,7 @@ export class PractitionerModel extends FastenDisplayModel {
commonDTO(fhirResource:any){
const id = _.get(fhirResource, 'id', '');
this.identifier = _.get(fhirResource, 'identifier', '');
this.identifier = _.get(fhirResource, 'identifier');
this.gender = _.get(fhirResource, 'gender', '');
this.status = _.get(fhirResource, 'active') === true ? 'active' : '';
this.is_contact_data = _.has(fhirResource, 'contact[0]');
@ -39,6 +40,7 @@ export class PractitionerModel extends FastenDisplayModel {
name: _.get(fhirResource, 'contact[0].name'),
relationship: _.get(fhirResource, 'contact[0].relationship[0].text'),
};
this.qualification = _.get(fhirResource, 'qualification[0].code.coding');
};
dstu2DTO(fhirResource:any){

7
frontend/src/lib/utils/uuid.ts Normal file
View File

@ -0,0 +1,7 @@
export function uuidV4(){
// @ts-ignore
return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
);
}

5
frontend/yarn.lock
View File

@ -1760,6 +1760,11 @@
"@types/qs" "*"
"@types/serve-static" "*"
"@types/fhir@^0.0.35":
version "0.0.35"
resolved "https://registry.npmjs.org/@types/fhir/-/fhir-0.0.35.tgz#e598b99e6468fee556f0e78d398c13ad2571b1eb"
integrity sha512-y+VI3Y48xzZBM8AjXPq67EWbiY9VN4Cx5KzN8EplS0Zju8D2KahLXoK6P/PWlKyNTKvJBwemkHzJIocczLRkhQ==
"@types/http-proxy@^1.17.8":
version "1.17.9"
resolved "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.9.tgz#7f0e7931343761efde1e2bf48c40f02f3f75705a"