# 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](#vitalinkaudittrailtable) : A web component for displaying patients audit trails in a table with sorting and filtering.
- [VitalinkCarePlanTable](#vitalinkcareplantable) : A web component for displaying patients survey DataTransfer in a table with sorting and filtering.
- [VitalinkVaccinationTable](#vitalinkvaccinationtable) : A web component for displaying patients Immunizations in a table with sorting and filtering.

## How to install

```bash
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

```html
<!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 :

```html
<!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.

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

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

### How to set the parameters

#### HTML tag

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

#### Javascript instantiation

```typescript
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 :

```html
<!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

```css
: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.

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

## 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        |
| 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 |
| lang               | Sets the language of the webcomponent's content.                                                                                                                                        | false     | 'nl', 'fr', 'de', 'en'                  |

### How to set the parameters

#### HTML tag

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

#### Javascript instantiation

```typescript
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 :

```html
<!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

```css
: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.

```md
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

```html
<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

```typescript
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 :

```html
<!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

```css
: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

---
