@i4mi/mhealth-proto-components v0.5.0

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 Document View
  • 3.7 Vaccination Document Card
  • 3.8 Patient Search
  • 3.9 Patient View
  • 3.10 Register Patient
• 4 License
• 5 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', { mpiId: 'urn:oid:1.1.1.99.1', /*more oids ...*/ });
// ... 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.

1.3 Component translations

The components contain default translations for German (de-CH) and French (fr-CH) stored in JSON files. The translation keys are visible in the TranslationInterface. To overwrite default translations individual properties can be passed to the translations-Prop of a component.

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

If your endpoints requires authorization, you can provide an access token to the EpdPlaygroundUtils that will be used for the requests. | Function | Description | Params | Returns | |----------|-------------|--------|----------| | setAccessToken(_token: string) | Sets the optional access token for servers that need authorization. Any existing access token will be replaced by the given token. | _token: The access token thats needed for authorization. | - | | deleteAccessToken() | Removes the currently set access token, if there is one. | - | - |

Following FHIR transactions are provided by the epdPlaygroundUtils class:

2.2 FhirUtils

The constructor for patientUtils needs only one argument:

• baseUrl: The base URL of the FHIR endpoint you're using as a string.
• 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

2.3 PatientUtils

The constructor for patientUtils needs the following 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

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

3.5 Allergy View

AllergyView.vue

Description

Displays data of an AllergyIntolerance resource.

mHealth transactions used

• none

Props

Events emitted

• none

3.6 Document View

DocumentView.vue

Description

This component displays a FHIR Document. The component render the different Narratives from the document as described here.

mHealth transactions used

• none

Props

Events emitted

• none

3.7 Vaccination Document Card

VaccinationDocumentView.vue

Description

Displays a CH VACD Vaccination Record Document as a table.

mHealth transactions used

• none

Props

Events emitted

• none

3.8 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.9 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.10 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 License

This software is published under the MIT License.

5 Changelog