working pattern for displaying resource data.

frontend/angular.json

@@ -17,6 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "sourceMap": true,
             "outputPath": "dist/fastenhealth",
             "index": "src/index.html",
             "main": "src/main.ts",

frontend/src/app/components/list-care-plan/list-care-plan.component.html

@@ -0,0 +1 @@
+<p>list-care-plan works!</p>

frontend/src/app/components/list-care-plan/list-care-plan.component.spec.ts

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

frontend/src/app/components/list-care-plan/list-care-plan.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-list-care-plan',
+  templateUrl: './list-care-plan.component.html',
+  styleUrls: ['./list-care-plan.component.scss']
+})
+export class ListCarePlanComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/list-condition/list-condition.component.html

@@ -0,0 +1,26 @@
+<p class="mg-b-20">A clinical condition, problem, diagnosis, or other event, situation, issue, or clinical concept that has risen to a level of concern.</p>
+<div class="table-responsive">
+  <table class="table table-bordered mg-b-0">
+    <thead>
+    <tr>
+      <th>Condition</th>
+      <th>Clinical Status</th>
+      <th>Verification Status</th>
+      <th>Onset Date</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let condition of conditionList">
+      <td>
+        {{condition.name}}
+        <small class="text-muted pull-right">
+          {{ condition.nameCode}} {{ condition.nameCodeSystem }}
+        </small>
+      </td>
+      <td>{{condition.clinicalStatus}}</td>
+      <td>{{condition.verificationStatus}}</td>
+      <td>{{condition.onset}}</td>
+    </tr>
+    </tbody>
+  </table>
+</div>

frontend/src/app/components/list-condition/list-condition.component.spec.ts

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

frontend/src/app/components/list-condition/list-condition.component.ts

@@ -0,0 +1,75 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {getCodeOrConcept} from '../../fhir/utils';
+import {CODE_SYSTEMS} from '../../fhir/constants';
+import {ResourceFhir} from '../../models/fasten/resource_fhir';
+
+
+export class Condition {
+  name: string
+  nameCode: string
+  nameCodeSystem: string
+  clinicalStatus: string
+  verificationStatus: string
+  onset: string
+
+  constructor(resourcePayload: any) {
+    this.populateConditionName(resourcePayload)
+    this.clinicalStatus = getCodeOrConcept(resourcePayload.clinicalStatus)
+    this.verificationStatus = getCodeOrConcept(resourcePayload.verificationStatus)
+
+  }
+
+  populateConditionName(resourePayload: any){
+    if (resourePayload.code) {
+      if (resourePayload.code.text) {
+        this.name = resourePayload.code.text;
+      }
+      if (Array.isArray(resourePayload.code.coding) && resourePayload.code.coding.length) {
+        let c = resourePayload.code.coding[0]
+
+        this.nameCodeSystem = c.system
+        for (let key in CODE_SYSTEMS) {
+          if (CODE_SYSTEMS[key].url === c.system) {
+            this.nameCodeSystem = `(${key})`;
+            break;
+          }
+        }
+
+        if (c.display) {
+          this.name = c.display
+        }
+        if (c.code) {
+          this.nameCode = c.code
+        }
+      }
+    }
+  }
+
+}
+
+@Component({
+  selector: 'app-list-condition',
+  templateUrl: './list-condition.component.html',
+  styleUrls: ['./list-condition.component.scss']
+})
+export class ListConditionComponent implements OnInit {
+
+  @Input() resourceList: ResourceFhir[] = []
+
+  conditionList: Condition[] = []
+
+  constructor() { }
+
+  ngOnInit(): void {
+    console.log("INSIDE LIST CONDIDITION", this.resourceList)
+    let _conditions = this.conditionList
+    this.resourceList.forEach((resource) => {
+      let cond = new Condition(resource.payload)
+      _conditions.push(cond)
+      console.log("PARSED CONDITITION", cond)
+    })
+
+    console.log("COMPLETED", this.conditionList)
+  }
+
+}

frontend/src/app/components/list-encounter/list-encounter.component.html

@@ -0,0 +1 @@
+<p>list-encounter works!</p>

frontend/src/app/components/list-encounter/list-encounter.component.spec.ts

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

frontend/src/app/components/list-encounter/list-encounter.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-list-encounter',
+  templateUrl: './list-encounter.component.html',
+  styleUrls: ['./list-encounter.component.scss']
+})
+export class ListEncounterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/list-explanation-of-benefit/list-explanation-of-benefit.component.html

@@ -0,0 +1 @@
+<p>list-explanation-of-benefit works!</p>

frontend/src/app/components/list-explanation-of-benefit/list-explanation-of-benefit.component.spec.ts

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

frontend/src/app/components/list-explanation-of-benefit/list-explanation-of-benefit.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-list-explanation-of-benefit',
+  templateUrl: './list-explanation-of-benefit.component.html',
+  styleUrls: ['./list-explanation-of-benefit.component.scss']
+})
+export class ListExplanationOfBenefitComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/list-immunization/list-immunization.component.html

@@ -0,0 +1 @@
+<p>list-immunization works!</p>

frontend/src/app/components/list-immunization/list-immunization.component.spec.ts

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

frontend/src/app/components/list-immunization/list-immunization.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-list-immunization',
+  templateUrl: './list-immunization.component.html',
+  styleUrls: ['./list-immunization.component.scss']
+})
+export class ListImmunizationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/list-observation/list-observation.component.html

@@ -0,0 +1 @@
+<p>list-observation works!</p>

frontend/src/app/components/list-observation/list-observation.component.spec.ts

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

frontend/src/app/components/list-observation/list-observation.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-list-observation',
+  templateUrl: './list-observation.component.html',
+  styleUrls: ['./list-observation.component.scss']
+})
+export class ListObservationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/list-patient/list-patient.component.html

@@ -0,0 +1 @@
+<p>list-patient works!</p>

frontend/src/app/components/list-patient/list-patient.component.spec.ts

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

frontend/src/app/components/list-patient/list-patient.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-list-patient',
+  templateUrl: './list-patient.component.html',
+  styleUrls: ['./list-patient.component.scss']
+})
+export class ListPatientComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/shared.module.ts

@@ -2,19 +2,36 @@ import { NgModule } from '@angular/core';
 import { ComponentsSidebarComponent } from './components-sidebar/components-sidebar.component';
 import { RouterModule } from '@angular/router';
 import { UtilitiesSidebarComponent } from './utilities-sidebar/utilities-sidebar.component';
+import { ListPatientComponent } from './list-patient/list-patient.component';
+import { ListObservationComponent } from './list-observation/list-observation.component';
+import { ListExplanationOfBenefitComponent } from './list-explanation-of-benefit/list-explanation-of-benefit.component';
+import { ListImmunizationComponent } from './list-immunization/list-immunization.component';
+import { ListEncounterComponent } from './list-encounter/list-encounter.component';
+import { ListConditionComponent } from './list-condition/list-condition.component';
+import { ListCarePlanComponent } from './list-care-plan/list-care-plan.component';
+import {BrowserModule} from '@angular/platform-browser';
 
 @NgModule({
   imports: [
-    RouterModule
+    RouterModule,
+    BrowserModule,
   ],
   declarations: [
     ComponentsSidebarComponent,
-    UtilitiesSidebarComponent
+    UtilitiesSidebarComponent,
+    ListPatientComponent,
+    ListObservationComponent,
+    ListExplanationOfBenefitComponent,
+    ListImmunizationComponent,
+    ListEncounterComponent,
+    ListConditionComponent,
+    ListCarePlanComponent
   ],
-  exports: [
+    exports: [
-    ComponentsSidebarComponent,
+        ComponentsSidebarComponent,
-    UtilitiesSidebarComponent
+        UtilitiesSidebarComponent,
-  ]
+        ListConditionComponent
+    ]
 })
 
 export class SharedModule { }

frontend/src/app/models/display/patient.ts

@@ -1,42 +0,0 @@
-import {
-  getPatientAge,
-  getPatientEmail,
-  getPatientHomeAddress,
-  getPatientImageUri,
-  getPatientMRN,
-  getPatientName,
-  getPatientPhone
-} from '../../fhir/utils';
-
-export class Patient {
-  //fields
-  source_type: string
-  patient_id: string
-
-  age: string
-  name: string
-  phone: string
-  email: string
-  homeAddress: string
-  deceasedBoolean: boolean
-  deceasedDateTime: Date
-  gender: string
-  birthDate: Date
-  patientImageUri: string
-  mrn: string
-
-  //this is a fhir patient resource
-  constructor(fhirPatientResource: any) {
-    this.age = getPatientAge(fhirPatientResource)
-    this.name = getPatientName(fhirPatientResource)
-    this.phone = getPatientPhone(fhirPatientResource)
-    this.email = getPatientEmail(fhirPatientResource)
-    this.homeAddress = getPatientHomeAddress(fhirPatientResource)
-    this.deceasedBoolean = fhirPatientResource.deceasedBoolean
-    this.deceasedDateTime = fhirPatientResource.deceasedDateTime
-    this.gender = fhirPatientResource.gender
-    this.birthDate = fhirPatientResource.birthDate
-    this.patientImageUri = getPatientImageUri(fhirPatientResource)
-    this.mrn = getPatientMRN(fhirPatientResource)
-  }
-}

frontend/src/app/pages/dashboard/dashboard.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {FastenApiService} from '../../services/fasten-api.service';
 import {LighthouseSource} from '../../models/lighthouse/lighthouse-source';
-import {Patient} from '../../models/display/patient';
 import {Source} from '../../models/fasten/source';
 import {Router} from '@angular/router';
 

frontend/src/app/pages/source-detail/source-detail.component.html

@@ -16,9 +16,7 @@
 
       <h2 class="az-content-title mg-t-40">{{selectedResourceType}}</h2>
 
-      <div class="az-content-label mg-b-5">Insurance Companies</div>
+      <app-list-condition *ngIf="selectedResourceType == 'Condition'" [resourceList]="selectedResources"></app-list-condition>
-      <p class="mg-b-20">The following medical insurance companies have API's which Fasten can use to retrieve your medical history.
-        Please click the logos below to initiate the connection.</p>
 
       <div class="table-responsive">
         <table class="table table-bordered mg-b-0">