@smals-belgium-shared/vitalink-webcomponents

v0.0.16

Published

a month ago

Vitalink FHIR web components

0High
0Medium
0Low

jdsssmals

Vitalink FHIR webcomponent javascript

Vitalink Web Components

Introduction

This package provides several web components that are made available by the SMALS Vitalink FHIR team for displaying data stored on a FHIR resources server. Those components are made to work with any FHIR R4 server with FHIR+JSON.

Web Components

VitalinkAuditTrailTable : A web component for displaying patients audit trails in a table with sorting and filtering.
VitalinkCarePlanTable : A web component for displaying patients survey DataTransfer in a table with sorting and filtering.
VitalinkVaccinationTable : A web component for displaying patients Immunizations in a table with sorting and filtering.

How to install

npm install @smals-belgium-shared/vitalink-webcomponents

How to use the web components

Once installed by NPM, the package contains several folders and files that allows you to integrate the web components to your applications.

Structure of the package

node_modules/
- WEBCOMPONENT_NAME/
  - VERSION_NUMBER/
    - main.js
    - styles.css
    - compat.js
    - polyfills.js
    - README.md
- README.md

| file | Desc | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | main.js | The main file to import into your application to allow the instantiation of the web component (this must be imported) | | styles.css | The file containing the styles for the web component (this must be imported) | | compat.js | If your application targets some older browsers or platforms that does not support >ES2022 javascript features you can use this import which contains the main.js and the required polyfills to make the web component available. | | polyfills.js | This file contains the polyfills only. We recommend importing this file along with the main.js file only IF you need to support older browsers or platforms that does not support >ES2022 javascript features AND IF you want to use multiple web components from this repository. This allows to import the polyfills only once and results in less files transfers. | | README.md | The file containing the documentation for the web component |

How to integrate the web components to your pages

As any universal web component, once the packages installed from the NPM public repository you can use the web component in your application using one of the following methods :

WHERE :

$WEBCOMPONENT_NAME = The name of the web component you want to use. (ex: VitalinkCarePlanTable)
$WEBCOMPONENT_VERSION = The version number of the web component you $want to use. (ex: 0.0.1)
$WEBCOMPONENT_HTML_TAG = The html tag of the component you want to display. (ex: vitalink-care-plan-table)

HTML tag

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <$WEBCOMPONENT_HTML_TAG>
      server="http://localhost:3031"
      patient-identifier="123"
      language="fr"
    ></$WEBCOMPONENT_HTML_TAG>
    <script src="node_modules/@smals-belgium-shared/vitalink-webcomponents/$WEBCOMPONENT_NAME/$WEBCOMPONENT_VERSION/main.js"></script>
  </body>
</html>

Javascript instantiation

Alternatively, you can also instantiate it from your controller or your framework using javascript :

<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="node_modules/@smals-belgium-shared/vitalink-webcomponents/$WEBCOMPONENT_NAME/$WEBCOMPONENT_VERSION/main.js"></script>
    <script>
      function appendWebComponent(config) {
        const wc = document.createElement("$WEBCOMPONENT_HTML_TAG");

        wc.setAttribute("server", config.server);
        wc.setAttribute("patient-identifier", config.patientIdentifier);
        wc.setAttribute("language", "nl");

        if (!!config.accessToken) {
          wc.setAttribute("auth-token", config.accessToken);
        }

        document.body.appendChild(wc);
      }

      appendWebComponent({
        server: "http://localhost:3031",
        accessToken: "ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1",
        patientIdentifier: "123",
      });
    </script>
  </body>
</html>

For more information about the usage of each component, please refer to the web component's own documentation below.

VitalinkAuditTrailTable

Description

A web component for displaying patients audit trails in a table with sorting and filtering.

Every citizen can request an overview of who, under what role, and when has requested, processed, created or deleted which Vitalink data. We call this overview the audit trail. The data comes from the Vitalink database and is offered to the citizen in a readable format.

Component name : VitalinkAuditTrailTable
HTML tag : vitalink-audit-trail-table
Latest version : 0.0.6

API

How to set the parameters

HTML tag

<vitalink-audit-trail-table server="http://localhost:3031" auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1" patient-identifier="123" patient-ssin="00000000000"></vitalink-audit-trail-table>

Javascript instantiation

const wc = document.createElement("vitalink-audit-trail-table");
wc.setAttribute("server", config.server);
wc.setAttribute("patient-identifier", config.patientIdentifier);
wc.setAttribute("patient-ssin", config.patientSsin);
wc.setAttribute("auth-token", config.accessToken);
document.body.appendChild(wc);

How to integrate the web component

Here is a simple example of the integration of this web component in a basic html page :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <vitalink-audit-trail-table server="http://localhost:3031" auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1" patient-identifier="123" patient-ssin="00000000000"></vitalink-audit-trail-table>
    <script src="node_modules/@smals-belgium-shared/vitalink-webcomponents/VitalinkAuditTrailTable/0.0.1/main.js"></script>
  </body>
</html>

Styling the webcomponent

You can target some parts of the web component using the standard CSS parts approach. To change the font family, it is advised to use the css variable provided below.

General styling

:root {
  --vitalink-wc-font-family: "Comic Sans MS";
}

vitalink-audit-trail-table {
  border: 2px solid orange;
}

vitalink-audit-trail-table::part(header) {
  border: 2px solid violet;
}

vitalink-audit-trail-table::part(table) {
  border: 2px solid green;
}

vitalink-audit-trail-table::part(header_row) {
  border: 2px solid yellow;
}

vitalink-audit-trail-table::part(content_row) {
  border: 2px solid blue;
}

vitalink-audit-trail-table::part(content_cell) {
  border: 2px solid red;
}

vitalink-audit-trail-table-filtering-and-sorting-dialog {
  border: 2px solid pink;
}

For more information or alternative ways to import and use this component please refer to the "How to integrate the web components to your pages" section of this package README.md

Change log

0.0.6

Upgrade Angular / Material to latest versions
Fixup styling
Fixup display of resource(s) name

0.0.5

Fetching results by slices following "next" links
Local sorting and local filtering
Updated default styling
Adapted some elements to comply with WCAG 2
Add a message for narrowing the search when too many results are to display
Support displaying resource name for search query entities

VitalinkCarePlanTable

Description

A web component for displaying patients survey DataTransfer in a table with sorting and filtering.

Component name : VitalinkCarePlanTable
HTML tag : vitalink-care-plan-table
Latest version : 0.0.9

API

How to set the parameters

HTML tag

<vitalink-care-plan-table server="http://localhost:3031" auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1" patient-identifier="123" language="nl"></vitalink-care-plan-table>

Javascript instantiation

const wc = document.createElement("vitalink-care-plan-table");
wc.setAttribute("server", config.server);
wc.setAttribute("patient-identifier", config.patientIdentifier);
wc.setAttribute("language", "nl");
wc.setAttribute("auth-token", config.accessToken);
document.body.appendChild(wc);

How to integrate the web component

Here is a simple example of the integration of this web component in a basic html page :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <vitalink-care-plan-table server="http://localhost:3031" auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1" patient-identifier="123" language="nl"></vitalink-care-plan-table>
    <script src="node_modules/@smals-belgium-shared/vitalink-webcomponents/VitalinkCarePlanTable/0.0.1/main.js"></script>
  </body>
</html>

Styling the webcomponent

You can target some parts of the web component using the standard CSS parts approach. To change the font family, it is advised to use the css variable provided below.

General styling

:root {
  --vitalink-wc-font-family: "Comic Sans MS";
}

vitalink-care-plan-table {
  border: 2px solid orange;
}

vitalink-care-plan-table::part(header) {
  border: 2px solid violet;
}

vitalink-care-plan-table::part(table) {
  border: 2px solid green;
}

vitalink-care-plan-table::part(header_row) {
  border: 2px solid yellow;
}

vitalink-care-plan-table::part(content_row) {
  border: 2px solid blue;
}

vitalink-care-plan-table::part(content_cell) {
  border: 2px solid red;
}

vitalink-care-plan-table-filtering-and-sorting-dialog {
  border: 2px solid pink;
}

For more information or alternative ways to import and use this component please refer to the "How to integrate the web components to your pages" section of this package README.md

VitalinkVaccinationTable

Description

A web component for displaying patients vaccinations in a table with sorting and filtering.

Component name : VitalinkVaccinationTable
HTML tag : vitalink-vaccination-table
Latest version : 0.0.8

API

| Parameters | Description | Mandatory | Accepted values | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | | server | The server's url where the component will fetch the data to display from. | true | Any valid URL as string | | patient-identifier | The patient identifier URI. | true | Any patient identifier as string | | patient-ssin | The non pseudonomized patient ssin. | true (not providing it will not block the web component but if so the ssin will be undefined in the exported data sheet) | Any non pseudonomized patient ssin as string | | patient-full-name | The full name of the patient ssin. | true (not providing it will not block the web component but if so the patient name will be undefined in the exported data sheet) | Any patient full name as string | | auth-token | An access token the server may require to allow access to the data. This will be added to the 'Authorization' header when the component will fetch the data from the configured server. | false | Any auth acces token (Bearer) as string | | view | The view to display. Available views are 'citizen' or 'caregiver' | false (defaults to 'citizen' if not provided) | 'citizen' or 'caregiver' as string | | security-label | The security label to append to the FHIR queries | false | Any security label as string |

How to set the parameters

HTML tag

<vitalink-vaccination-table server="http://localhost:3031" auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1" patient-identifier="123" patient-ssin="00000000000" patient-full-name="Patient Full Name" view="caregiver"></vitalink-vaccination-table>

Javascript instantiation

const wc = document.createElement("vitalink-vaccination-table");
wc.setAttribute("server", config.server);
wc.setAttribute("patient-identifier", config.patientIdentifier);
wc.setAttribute("patient-ssin", config.patientSsin);
wc.setAttribute("patient-full-name", config.patientFullName);
wc.setAttribute("auth-token", config.accessToken);
wc.setAttribute("view", config.view);
document.body.appendChild(wc);

How to integrate the web component

Here is a simple example of the integration of this web component in a basic html page :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <vitalink-vaccination-table server="http://localhost:3031" auth-token="ey1531eaz2131eaz1a1e32za1e5za1e35za1ez53a1" patient-identifier="123" patient-ssin="00000000000" patient-full-name="Patient Full Name"></vitalink-vaccination-table>
    <script src="node_modules/@smals-belgium-shared/vitalink-webcomponents/VitalinkVaccinationTable/0.0.1/main.js"></script>
  </body>
</html>

For more information or alternative ways to import and use this component please refer to the "How to integrate the web components to your pages" section of this package README.md

Styling the webcomponent

You can target some parts of the web component using the standard CSS parts approach. To change the font family, it is advised to use the css variable provided below.

General styling

:root {
  --vitalink-wc-font-family: "Comic Sans MS";
}

vitalink-vaccination-table {
  border: 2px solid orange;
}

vitalink-vaccination-table::part(header) {
  border: 2px solid violet;
}

vitalink-vaccination-table::part(alert) {
  border: 2px solid black;
}

vitalink-vaccination-table::part(table) {
  border: 2px solid green;
}

vitalink-vaccination-table::part(header_row) {
  border: 2px solid yellow;
}

vitalink-vaccination-table::part(content_row) {
  border: 2px solid blue;
}

vitalink-vaccination-table::part(content_cell) {
  border: 2px solid red;
}

vitalink-vaccination-table-filtering-and-sorting-dialog {
  border: 2px solid pink;
}

Change log

0.0.8

Upgrade Angular / Material to latest versions
Apply requirements changes from most recent citizen BA

0.0.7

Adapted some elements to comply with WCAG 2
Ensure web component styles are contained to the webcomponent

0.0.6

Fetching results by slices following "next" links
Local sorting and local filtering
Fixed up fhir ressource mapping for some displayed fields

0.0.5

Added a "citizen" view available via the webcomponent parameters
Updated default styling
Fixed initial data fetch sorting
Updated some translations
Reverting from/to date order
Embedded the countries list to display the full name of the countries
Added security-label input

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Vitalink Web Components

Introduction

Web Components

How to install

How to use the web components

Structure of the package

How to integrate the web components to your pages

HTML tag

Javascript instantiation

VitalinkAuditTrailTable

Description

API

How to set the parameters

HTML tag

Javascript instantiation

How to integrate the web component

Styling the webcomponent

General styling

Change log

0.0.6

0.0.5

VitalinkCarePlanTable

Description

API

How to set the parameters

HTML tag

Javascript instantiation

How to integrate the web component

Styling the webcomponent

General styling

VitalinkVaccinationTable

Description

API

How to set the parameters

HTML tag

Javascript instantiation

How to integrate the web component

Styling the webcomponent

General styling

Change log

0.0.8

0.0.7

0.0.6

0.0.5