# 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
