# 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

---
