@i4mi/mhealth-proto-components v0.4.7

mHealth Component Library

This library provides Vue/Quasar components and utils for using in demo apps for a mHealth / FHIR endpoint for the Swiss EPR.

For examples of using the components, check out https://github.com/mHealth-Prototyp/Basic-Prototyp.

Content Table

• 1 How to use
  • 1.1 Using components
  • 1.2 Using util classes
• 2 Utils
  • 2.1 epdPlaygroundUtils
  • 2.2 fhirUtils
  • 2.3 patientUtils
• 3 Components
  • 3.1 Document Search
  • 3.2 Document Upload
  • 3.3 Local Patients
  • 3.4 Allergy Upload
  • 3.5 Allergy View
  • 3.6 Patient Search
  • 3.7 Patient View
  • 3.8 Register Patient
• 4 Changelog

1 How to set up

These components are made for Quasar web applications. To include one or more components in your app, you first need to install the package, using npm install @i4mi/mhealth-proto-components.

1.1 Set up components

You can import the components directly in the <script> tag of your *.vue File as such: import { PatientSearch, PatientView } from '@i4mi/mhealth-proto-components'; and register them in the components property of your definceComponent() function and use them as normal components in your <template> (see below for each component's props).

1.2 Set up util classes

Before you can use the util classes, you need to initialize them and pass on the projects environment variables (see below for which util needs which variables). You could do this on every page you need the util, but the easiest way is to initialize them once for the whole project.

In Quasar, this is done in the src/boot directory. This file has also be referenced in quasar.conf.js under boot: [],.

import { boot } from 'quasar/wrappers';
import { FhirUtils } from '@i4mi/mhealth-proto-components';

const fhirUtils = new FhirUtils('https://my.base.url');
// ... more utils

// Type declaration
declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $fhirUtils: FhirUtils;
    // ... more utils
  }
}

export default boot(({ app }) => {
  // Set global variables
  app.config.globalProperties.$fhirUtils = fhirUtils;
});

export { fhirUtilss };

After initializing this way, the util can be referred to in the whole project with this.$fhirUtils.

2 Utils

To provide core functionalities in a reusable manner, several util classes have been created:

• epdPlaygroundUtils.ts: Implements query functions based on FHIR profiles PIXm, PDQm and MHD required for the profile "Mobile access to Health Documents (MHD) by using the Mobile Access Gateway.
• fhirUtils.ts: Provides necessary SNOMED codes in FHIR format, mapping functions and a functionality to create FHIR resources, e.g. Document Bundle.
• patientUtils: Provides methods for generating demo patient data.

2.1 EpdPlaygroundUtils

The constructor of the EpdPlaygroundUtils needs the follwing arguments:

• settings: A settings object, with following properties:
  • FHIR_4_CONTENT_TYPE: The content-type header, specifying the FHIR version (for FHIR R4 use 'application/fhir+json fhirVersion=4.0')
  • BASE_URL: The base-url for the FHIR server (when using EPD Playground and Mobile Access Gateway, this is 'https://test.ahdis.ch/mag-bfh/fhir/')
  • MESSAGE_ENDPOINT: The endpoint for processing FHIR messages on the FHIR server used (usually '$process-message')
  • DEFAULT_TIMEOUT: Number describing how long to wait until a operation times out (in milliseconds, e.g. '20000')
  • SOURCE_ENDPOINT: Source endpoint used for FHIR messaging (e.g. 'http://example.com/patientSource')
  • TARGET_ENDPOINT: Target endpoint used for FHIR messaging (e.g. 'http://example.com/patientEndpoint')
• oids: An object providing the urn:oid's used in the project, with following properties:
  • eprSpid: OID for the EPR SPID (is: 'urn:oid:2.16.756.5.30.1.127.3.10.3')
  • mpiId: OID for the Master Patient Index (on EPD Playground: 'urn:oid:1.1.1.99.1')
  • ahv: OID for the swiss AHV number code system (is: 'urn:oid:2.16.756.5.32')
  • local: OID for your local system, depends on your use case
  • app: OID for your application, depends on your use case

Following FHIR transactions are provided by the epdPlaygroundUtils class:

2.2 FhirUtils

The constructor for patientUtils does not need any arguments:

• baseUrl: The base URL of the FHIR endpoint you're using as a string.

2.3 PatientUtils

The constructor for patientUtils does not need any arguments:

• oids: An object providing the urn:oid's used in the project, with following properties:
  • eprSpid: OID for the EPR SPID (is: 'urn:oid:2.16.756.5.30.1.127.3.10.3')
  • mpiId: OID for the Master Patient Index (on EPD Playground: 'urn:oid:1.1.1.99.1')
  • ahv: OID for the swiss AHV number code system (is: 'urn:oid:2.16.756.5.32')
  • local: OID for your local system, depends on your use case
  • app: OID for your application, depends on your use case
• organization: An Organization FHIR resource representing the organization that uses the system (and manages the patients).

2.4 snomedCodes.ts

Following codes are listed in the snomedCodes.ts file:

• DocumentEntry.classCode (is mapped to DocumentReference.category) as CLASS_CODES
• DocumentEntry.typeCode (is mapped to DocumentReference.type) as TYPE_CODES
• DocumentEntry.healthcareFacilityTypeCode (is mapped to DocumentReference.facilityType) as FACILITY_CLASS_CODES
• DocumentEntry.practiceSettingCode (is mapped to DocumentReference.practiceSetting) as PRACTICE_SETTING_CODES

2.5 allergyCodes.ts

Codes specifically used for the allergy use case are separated because there are a lot (1000+).

Following codes are listed in the allergyCodes.ts file:

• CHAllergyIntoleranceValueSet is mapped to AllergyIntolerance.code as ALLERGY_IDENTIFICATION_CODES (in the select form we only used type 'finding', 'medicinal product', 'organism' and 'physical object', without 'substance' to avoid redundant codes)
• AllergyIntoleranceType is mapped to AllergyIntolerance.type as ALLERGY_TYPE
• AllergyIntoleranceCategory is mapped to AllergyIntolerance.category as CATEGORY_CODES
• AllergyIntoleranceClinicalStatusCodes is mapped to AllergyIntolerance.clinicalStatus as CLINICAL_STATUS_CODES
• AllergyIntoleranceVerificationStatusCodes is mapped to AllergyIntolerance.verificationStatus as VERIFICATION_STATUS_CODES
• AllergyIntoleranceCriticality is mapped to AllergyIntolerance.criticality as CRITICALITY_CODES
• CHAllergyIntoleranceReactionManifestationValueSet is mapped to AllergyIntolerance.reaction.manifestation as REACTION_MANIFESTATION_CODES
• CHAllergyIntoleranceReactionSubstanceValueSet is mapped to AllergyIntolerance.reaction.substance as REACTION_SUBSTANCE_CODES
• AllergyIntoleranceSeverity is mapped to AllergyIntolerance.reaction.severity as REACTION_SEVERITY_CODES
• Extension: certainty is mapped to AllergyIntolerance.reaction.allergyintoleranceCertainty (extension according to CH specification)
• Extension: location is mapped to AllergyIntolerance.reaction.openEHRLocation (extension according to CH specification)
• SNOMEDCTRouteCodes is mapped to AllergyIntolerance.reaction.exposureRoute

3 Components

The mHealth prototype app consists of encapsulated components for typically needed functions, which can be easily reused in other apps based on the same technology stack. All components take use of a utils class epdPlaygroundUtils.ts which implements the core functions to access the EPD Playground / Mobile Access Gateway using mHealth profiles.

Following components are currently available:

3.1 Document Search

DocumentSearch.vue

Description

Loads & displays documents that belong to a patient.

mHealth transactions used

• ITI-67 Find Document References
• ITI-68 Retrieve Document
• ITI-83 Mobile Patient Identifier Cross-Reference Query

Props

Events emitted

• found-document: Make available selected document to parent component e.g. for download or display. Emitted when the user selects a document from the search result list.

3.2 Document Upload

DocumentUpload.vue

Description

Provides UI to describe a document with meta data and uploads it.

mHealth transactions used

• ITI-65 Provide Document Bundle

Props

Events emitted

• upload-result: Notify parent component about upload result. Emitted after successful upload of document bundle.

3.3 Local Patients

LocalPatients.Vue

Description

Generates & displays random local patients for use in app and upload to EPD Playground.

mHealth transactions used

• ITI-83 Mobile Patient Identifier Cross-Reference Query

Props

Events emitted

• select-patient: Notify parent component about selected patient. Emitted when the user selects a patient from the list.

3.4 Allergy Upload

AllergyUpload.vue

Description

Provides UI to create an allergy data entry and upload it in fhir format as json file.

mHealth transactions used

• ITI-65 Provide Document Bundle

Props

Events emitted

• upload-result: Notify parent component about upload result. Emitted after successful upload of CHAllergyIntolerance bundle.

3.5 Allergy View

AllergyView.vue

Description

Displays data of an AllergyIntolerance resource.

mHealth transactions used

• none

Props

Events emitted

• none

3.6 Patient Search

PatientSearch.vue

Description

Searches & displays patients on the EPD Playground.

mHealth transactions used

• ITI-78 Mobile Patient Demographics Query

Props

Events emitted

• found-patient: Notify parent component about found patient data. Emitted when user selects a patient from the search result list.

3.7 Patient View

PatientView.vue

Description

Shows patient details including documents. Also provides functionality to edit patient & upload documents (uses DocumentUpload.vue & DocumentSearch.vue).

mHealth transactions used

• CH:PIXm ITI-93 Mobile Patient Identity Feed

Props

Events emitted

• edited-patient: Notifies parent components about updated patient. Emitted after successful upload of patient data.

3.8 Register Patient

RegisterPatient.vue

Description

Registers a patient in the EPD Playground.

mHealth transactions used

• CH:PIXm ITI-93 Mobile Patient Identity Feed

Props

Events emitted

• uploaded-patient: Notifies parent component about registered patient. Emitted after successful upload of patient data.

4 Changelog