ui fixes for medical history page.

backend/pkg/constants.go

@@ -3,6 +3,8 @@ package pkg
 type ResourceGraphType string
 
 const (
+	ResourceListPageSize int = 20
+
 	ContextKeyTypeConfig   string = "CONFIG"
 	ContextKeyTypeDatabase string = "REPOSITORY"
 	ContextKeyTypeLogger   string = "LOGGER"

backend/pkg/database/sqlite_repository.go

@@ -400,13 +400,18 @@ func (sr *SqliteRepository) ListResources(ctx context.Context, queryOptions mode
 		if err != nil {
 			return nil, err
 		}
-		results := queryBuilder.
+		queryBuilder = queryBuilder.
 			Where(queryParam).
-			Table(tableName).
-			Find(&wrappedResourceModels)
+			Table(tableName)
 
-		return wrappedResourceModels, results.Error
+		if queryOptions.Limit > 0 {
+			queryBuilder = queryBuilder.Limit(queryOptions.Limit).Offset(queryOptions.Offset)
+		}
+		return wrappedResourceModels, queryBuilder.Find(&wrappedResourceModels).Error
 	} else {
+		if queryOptions.Limit > 0 {
+			queryBuilder = queryBuilder.Limit(queryOptions.Limit).Offset(queryOptions.Offset)
+		}
 		//there is no FHIR Resource name specified, so we're querying across all FHIR resources
 		return sr.getResourcesFromAllTables(queryBuilder, queryParam)
 	}

backend/pkg/models/list_resource_query_options.go

@@ -17,4 +17,8 @@ type ListResourceQueryOptions struct {
 	SourceID           string
 	SourceResourceType string
 	SourceResourceID   string
+
+	//pagination
+	Limit  int
+	Offset int
 }

backend/pkg/web/handler/resource_fhir.go

@@ -8,6 +8,7 @@ import (
 	"github.com/gin-gonic/gin"
 	"github.com/sirupsen/logrus"
 	"net/http"
+	"strconv"
 	"strings"
 )
 
@@ -48,7 +49,16 @@ func ListResourceFhir(c *gin.Context) {
 	if len(c.Query("sourceResourceID")) > 0 {
 		listResourceQueryOptions.SourceResourceID = c.Query("sourceResourceID")
 	}
-
+	if len(c.Query("page")) > 0 {
+		listResourceQueryOptions.Limit = pkg.ResourceListPageSize //hardcoded number of resources per page
+		pageNumb, err := strconv.Atoi(c.Query("page"))
+		if err != nil {
+			logger.Errorln("An error occurred while calculating page number", err)
+			c.JSON(http.StatusInternalServerError, gin.H{"success": false})
+			return
+		}
+		listResourceQueryOptions.Offset = pageNumb * listResourceQueryOptions.Limit
+	}
 	wrappedResourceModels, err := databaseRepo.ListResources(c, listResourceQueryOptions)
 
 	if c.Query("sortBy") == "title" {

frontend/src/app/components/fhir/common/table/table-row-item.ts

@@ -1,9 +1,10 @@
 import {ReferenceModel} from '../../../../../lib/models/datatypes/reference-model';
 import {CodingModel} from '../../../../../lib/models/datatypes/coding-model';
+import {CodableConceptModel} from '../../../../../lib/models/datatypes/codable-concept-model';
 
 export class TableRowItem {
   label?: string
-  data?: string | ReferenceModel | CodingModel | CodingModel[]
+  data?: string | ReferenceModel | CodingModel | CodingModel[] | CodableConceptModel
   data_type?: TableRowItemDataType
   enabled?: boolean //determine if this row should be displayed
 }
@@ -12,5 +13,6 @@ export enum TableRowItemDataType {
   String = "string",
   Reference = "reference",
   Coding = "coding",
-  CodingList = "codingList"
+  CodingList = "codingList",
+  CodableConcept = "codableConcept",
 }

frontend/src/app/components/fhir/common/table/table.component.html

@@ -10,8 +10,12 @@
         <ng-container [ngTemplateOutlet]="rowItem.data_type == 'reference' ? dataTypeReference :
          rowItem.data_type == 'coding'? dataTypeCoding :
          rowItem.data_type == 'codingList'? dataTypeCodingList :
+         rowItem.data_type == 'codableConcept'? dataTypeCodableConcept :
          dataTypeString"></ng-container>
 
+        <ng-template #dataTypeCodableConcept>
+          <fhir-codable-concept [codableConcept]="rowItem.data"></fhir-codable-concept>
+        </ng-template>
         <ng-template #dataTypeCoding>
           <fhir-coding [coding]="rowItem.data"></fhir-coding>
         </ng-template>

frontend/src/app/components/fhir/common/table/table.component.ts

@@ -4,10 +4,11 @@ import {FastenDisplayModel} from '../../../../../lib/models/fasten/fasten-displa
 import {CommonModule} from "@angular/common";
 import {CodingComponent} from "../../datatypes/coding/coding.component";
 import {Router, RouterModule} from "@angular/router";
+import {CodableConceptComponent} from '../../datatypes/codable-concept/codable-concept.component';
 
 @Component({
   standalone: true,
-  imports: [CommonModule, CodingComponent, RouterModule],
+  imports: [CommonModule, CodingComponent, RouterModule, CodableConceptComponent],
   providers: [RouterModule],
   selector: 'fhir-ui-table',
   templateUrl: './table.component.html',

frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.html

@@ -0,0 +1,7 @@
+
+<div>
+  <span>{{codableConcept?.text || codableConcept?.coding?.[0]?.display}}</span>
+  <span *ngIf="codableConcept?.coding?.[0]?.code" [title]="codableConcept?.coding?.[0]?.system">
+  ({{codableConcept?.coding?.[0]?.code || '?'}})
+  </span>
+</div>

frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.spec.ts

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

frontend/src/app/components/fhir/datatypes/codable-concept/codable-concept.component.ts

@@ -0,0 +1,22 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CodingComponent} from '../coding/coding.component';
+import {CodingModel} from '../../../../../lib/models/datatypes/coding-model';
+import {CodableConceptModel} from '../../../../../lib/models/datatypes/codable-concept-model';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule],
+  selector: 'fhir-codable-concept',
+  templateUrl: './codable-concept.component.html',
+  styleUrls: ['./codable-concept.component.scss']
+})
+export class CodableConceptComponent implements OnInit {
+  @Input() codableConcept: CodableConceptModel
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/fhir/datatypes/html/html.component.html

@@ -1,3 +1 @@
-<p>html works!</p>
-
 <div [innerHTML]="contentMarkup"></div>

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

@@ -1,7 +1,7 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {AllergyIntoleranceModel} from '../../../../../lib/models/resources/allergy-intolerance-model';
 import {NgbCollapseModule} from "@ng-bootstrap/ng-bootstrap";
 import {CommonModule} from "@angular/common";
@@ -10,7 +10,7 @@ import {TableComponent} from "../../common/table/table.component";
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent],
+  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule],
   selector: 'fhir-allergy-intolerance',
   templateUrl: './allergy-intolerance.component.html',
   styleUrls: ['./allergy-intolerance.component.scss']
@@ -29,9 +29,9 @@ export class AllergyIntoleranceComponent implements OnInit, FhirResourceComponen
     this.tableData = [
       {
         label: 'Substance',
-        data: this.displayModel?.substance_coding,
-        data_type: TableRowItemDataType.CodingList,
-        enabled: !!this.displayModel?.substance_coding,
+        data: this.displayModel?.code,
+        data_type: TableRowItemDataType.CodableConcept,
+        enabled: !!this.displayModel?.code,
       },
       {
         label: 'Type',

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

@@ -1,7 +1,7 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {BinaryModel} from '../../../../../lib/models/resources/binary-model';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {AttachmentModel} from '../../../../../lib/models/datatypes/attachment-model';
 import {FastenApiService} from '../../../../services/fasten-api.service';
 import {NgbCollapseModule} from "@ng-bootstrap/ng-bootstrap";
@@ -30,6 +30,7 @@ import {AuthService} from "../../../../services/auth.service";
     BinaryTextComponent,
     DicomComponent,
     HighlightModule,
+    RouterModule
   ],
   providers: [FastenApiService, AuthService],
   selector: 'fhir-binary',

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

@@ -28,12 +28,12 @@ export class DocumentReferenceComponent implements OnInit, FhirResourceComponent
       },
       {
         label: 'Category',
-        data: this.displayModel?.category?.coding,
-        data_type: TableRowItemDataType.CodingList,
+        data: this.displayModel?.category,
+        data_type: TableRowItemDataType.CodableConcept,
         enabled: !!this.displayModel?.category,
       },
       // {
-      //   label: 'Performer',
+      //   label: 'Author',
       //   data: this.displayModel?.performer,
       //   data_type: TableRowItemDataType.Reference,
       //   enabled: this.displayModel?.has_performer,

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

@@ -1,6 +1,6 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {ImmunizationModel} from '../../../../../lib/models/resources/immunization-model';
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
 import * as _ from "lodash";
@@ -11,7 +11,7 @@ import {TableComponent} from "../../common/table/table.component";
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent],
+  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule],
   selector: 'fhir-immunization',
   templateUrl: './immunization.component.html',
   styleUrls: ['./immunization.component.scss']
@@ -65,12 +65,6 @@ export class ImmunizationComponent implements OnInit, FhirResourceComponentInter
       data_type: TableRowItemDataType.Reference,
       enabled: !!this.displayModel?.performer,
     },
-    // {
-    //   label: 'Note',
-    //     testId: 'note',
-    //   data: note && <Annotation fhirData={note} />,
-    //   status: note,
-    // },
     {
       label: 'Route',
       data: this.displayModel?.route,

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

@@ -1,7 +1,7 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {MedicationRequestModel} from '../../../../../lib/models/resources/medication-request-model';
 import {NgbCollapseModule} from "@ng-bootstrap/ng-bootstrap";
 import {CommonModule} from "@angular/common";
@@ -11,7 +11,7 @@ import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, GlossaryLookupComponent],
+  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, GlossaryLookupComponent, RouterModule],
   selector: 'fhir-medication-request',
   templateUrl: './medication-request.component.html',
   styleUrls: ['./medication-request.component.scss']

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

@@ -1,7 +1,7 @@
 <div class="card card-fhir-resource" >
   <div class="card-header" (click)="isCollapsed = ! isCollapsed">
     <div>
-      <h6 class="card-title">{{displayModel?.title?.display}}</h6>
+      <h6 class="card-title">{{displayModel?.title}}</h6>
       <p class="card-text tx-gray-400" *ngIf="displayModel?.sort_date"><strong>Start date</strong> {{displayModel?.sort_date | date}}</p>
     </div>
     <fhir-ui-badge class="float-right" [status]="displayModel?.status">{{displayModel?.status}}</fhir-ui-badge>

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

@@ -1,17 +1,18 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
 import {TableRowItem, TableRowItemDataType} from '../../common/table/table-row-item';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {MedicationModel} from '../../../../../lib/models/resources/medication-model';
 import {NgbCollapseModule} from "@ng-bootstrap/ng-bootstrap";
 import {CommonModule} from "@angular/common";
 import {BadgeComponent} from "../../common/badge/badge.component";
 import {TableComponent} from "../../common/table/table.component";
 import {GlossaryLookupComponent} from '../../../glossary-lookup/glossary-lookup.component';
+import * as _ from "lodash";
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, GlossaryLookupComponent],
+  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, GlossaryLookupComponent, RouterModule],
   selector: 'fhir-medication',
   templateUrl: './medication.component.html',
   styleUrls: ['./medication.component.scss']
@@ -31,8 +32,8 @@ export class MedicationComponent implements OnInit, FhirResourceComponentInterfa
   constructor(public changeRef: ChangeDetectorRef, public router: Router) {}
 
   ngOnInit(): void {
-    this.resourceCode = this.displayModel?.title?.code
-    this.resourceCodeSystem = this.displayModel?.title?.system
+    this.resourceCode = _.get(this.displayModel?.code, 'coding[0].code')
+    this.resourceCodeSystem = _.get(this.displayModel?.code, 'coding[0].system')
 
     this.tableData = [
       {

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

@@ -1,7 +1,7 @@
 <div class="card card-fhir-resource" >
   <div class="card-header" (click)="isCollapsed = ! isCollapsed">
     <div>
-      <h6 class="card-title">{{displayModel?.sort_title}}</h6>
+      <h6 class="card-title">{{displayModel?.sort_title || displayModel?.name?.[0]?.displayName}}</h6>
       <p class="card-text tx-gray-400" *ngIf="displayModel?.sort_date"><strong>Date</strong>{{displayModel?.sort_date}}</p>
     </div>
     <fhir-ui-badge class="float-right" [status]="displayModel?.status">{{displayModel?.status}}</fhir-ui-badge>

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

@@ -2,7 +2,7 @@ import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {FhirResourceComponentInterface} from '../../fhir-resource/fhir-resource-component-interface';
 import {ImmunizationModel} from '../../../../../lib/models/resources/immunization-model';
 import {TableRowItem} from '../../common/table/table-row-item';
-import {Router} from '@angular/router';
+import {Router, RouterModule} from '@angular/router';
 import {PractitionerModel} from '../../../../../lib/models/resources/practitioner-model';
 import {NgbCollapseModule} from "@ng-bootstrap/ng-bootstrap";
 import {CommonModule} from "@angular/common";
@@ -11,7 +11,7 @@ import {TableComponent} from "../../common/table/table.component";
 
 @Component({
   standalone: true,
-  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent],
+  imports: [NgbCollapseModule, CommonModule, BadgeComponent, TableComponent, RouterModule],
   selector: 'app-practitioner',
   templateUrl: './practitioner.component.html',
   styleUrls: ['./practitioner.component.scss']
@@ -48,16 +48,6 @@ export class PractitionerComponent implements OnInit, FhirResourceComponentInter
     // ),
     //   status: isContactData,
     // },
-    // {
-    //   label: 'Address',
-    //   data: this.displayModel?.address.,
-    //   status: !!this.displayModel?.address,
-    // },
-    // {
-    //   label: 'Telephone',
-    //   data: this.displayModel.telecom,
-    //   enabled: !!this.displayModel.telecom,
-    // },
   ];
     for(let idCoding of (this.displayModel?.identifier || [])){
       this.tableData.push({
@@ -66,6 +56,28 @@ export class PractitionerComponent implements OnInit, FhirResourceComponentInter
         enabled: true,
       })
     }
+    if(this.displayModel?.address){
+      let address = this.displayModel?.address
+      let addressParts = []
+      if(address.line){
+        addressParts.push(address.line.join(' '))
+      }
+      if(address.city){
+        addressParts.push(address.city)
+      }
+      if(address.state){
+        addressParts.push(address.state)
+      }
+      if(address.postalCode){
+        addressParts.push(address.postalCode)
+      }
+
+      this.tableData.push({
+        label: 'Address',
+        data: addressParts.join(", "),
+        enabled: !!addressParts,
+      })
+    }
     for(let telecom of (this.displayModel?.telecom || [])){
       this.tableData.push({
         label: telecom.system,