# 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

---
