@smals-belgium-shared/vidis-delivered-medication-detail 1.0.2

package/README.md

@@ -0,0 +1,132 @@
+# Vidis delivered medications detail web component
+## Context
+
+VIDIS (Virtual Integrated Drug Information System) integrates several sources and systems:
+- [Recip-e][Recip-e] prescriptions
+- [Vitalink][Vitalink] / [RSW][RSW] / [RSB][RSB] medication scheme
+- [Vitalink][Vitalink] / [RSW][RSW] / [RSB][RSB] diary notes
+- [Farmaflux][Farmaflux] delivered medications
+
+In order to be reused by other software vendors, the VIDIS front-end is now split into [web components][Web component explanations].
+The container application will have to provide the input parameters to provision the web component with a working context.
+
+## Prerequisites
+
+- A supported browser [by our Web Components](https://angular.dev/reference/versions#browser-support) AND [by eHealth][Supported browsers]
+- A valid VIDIS token. It could be obtained from [eHealth Token eXchange][eHealth IAM] service. This token must be refreshed periodically in order to be used by VIDIS
+
+⚠️ IE (internet explorer) is not supported. You can include [polyfill scripts ("polyfills")](https://www.webcomponents.org/polyfills) for the browsers that you must support.
+
+
+## Features
+
+This web component provides users with a comprehensive prescription details. The component displays important information about a given delivered medication, such as:
+- **Medication Name:** The name of the medication delivered to the patient.
+- **Posology:** The prescribed dosage regimen, including the frequency, amount to be taken, and any other special instructions that might be relevant.
+- **Delivery Date:** The exact date when the medication was delivered, making it easier to track when the medication was received.
+- **Quantity:** The number of units or dosage forms delivered (e.g., tablets, bottles), allowing users to verify they have received the correct amount.
+- **Patient Name:** In cases where the medication is delivered to someone on behalf of another individual, the patient's name is clearly highlighted to make this distinction clear. This is crucial to avoid confusion, especially for family members or caregivers picking up medications on behalf of the patient. The clear highlight of patient names for those receiving medications on behalf of others reduces the risk of medication mix-ups or confusion, ensuring that each medication reaches the correct recipient.
+- **Leaflet:** The patient information leaflet or any other documentation that accompanies the medication. This is useful for patients who need more detailed guidance on how to take the medication, potential side effects, and other important safety information.
+- ...
+
+## Inputs
+
+| Name         | Mandatory | Possible values        | Description                                                                                                                                                                                                                                                                     |
+|--------------|-----------|------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `language`   | true      | `en`, `de`, `fr`, `nl` | The language holds the current language as a value, which means it can change over time if the user changes his/her preferred language. The web component adapts the translations based on the value set. The values of the language property are defined in the Language enum. |
+| `configName` | true      | `acc`, `prod`          | Name of the configuration the application and the components are being deployed to.                                                                                                                                                                                             |
+| `services`   | true      | N/A                    | Set of services to be consumed by the component. see [USAGE](#Usage).                                                                                                                                                                                                           |
+| `dguid`      | true      | N/A                    | Delivered medication dguid to display.                                                                                                                                                                                                                                          |
+
+
+
+
+
+## Usage
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Vidis delivered medications detail web component</title>
+	    <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script type="module" src="delivered-medication-detail/delivered-medication-detail.js"></script>
+        <link rel="stylesheet" href="delivered-medication-detail/delivered-medication-detail.css">
+    </head>
+    <body>
+        <script> 
+            const wc = document.createElement("vidis-delivered-medication-detail");
+
+            // Common inputs for all VIDIS web components
+            // Refer to https://www.npmjs.com/package/@smals-belgium/myhealth-wc-integration for more details
+            wc.language = 'en'
+            wc.configName = 'acc';
+            wc.services = {
+                cache: {
+                    get: (key) => (undefined),
+                    set: (key, value) => {}
+                } ,
+                getAccessToken: async (audience) => "TODO : the eHealth OAuth2 JWT token.",
+                registerRefreshCallback: () => { }
+            }
+
+            // Example on how to provide extra input parameter(s), if needed / requested by the component
+            // wc["attributeName"] = "myValue" 
+
+            // Example on how to listen to output parameter(s)
+            wc.addEventListener("eventName", (event) => {
+                console.log(`event:`, event)
+                const params = event.detail;
+                console.log('param:', params);
+            })
+
+            document.body.append(wc);
+        </script>
+    </body>
+</html>
+```
+
+
+## Versioning
+
+This project follows [Semantic Versioning][Semver]. Each release is categorized by major, minor, and patch updates. Significant changes that may break existing integrations will be introduced with major versions. Please check [CHANGELOG.md](CHANGELOG.md) file for more info.
+
+## Accessibility
+
+We are committed to making our web components accessible to all users. Our components are:
+- Screen reader friendly : Designed to work well with popular screen readers (Talkback / VoiceOver / ...)
+- Responsive : Adapt to various screen sizes (desktop / mobile).
+- Compliant: Meet [accessibility criteria][OFAC], including ARIA labels and keyboard navigation
+
+## Customizations
+
+The web components are build with [Angular Material][Angular Material]. The styling of it is overwritten by the “My Health” portal, by there [design kit][MHDK].
+
+## Troubleshoots
+
+If you encounter issues while using the web components :
+
+- Ensure that your token is valid and hasn't expired. For assistance, contact [eHealth][eHealth IAM].
+- Ensure you are using the latest version of the web components
+- Ensure you are using a supported browser and that you have cleared your cache if issues persist.
+- If none of the above, please contact mijngeneesmiddelen@riziv-inami.fgov.be / mesmedicaments@riziv-inami.fgov.be
+
+## License
+
+[GNU Lesser General Public License v3.0 or later](https://spdx.org/licenses/LGPL-3.0-or-later.html)
+
+[Recip-e]: https://recip-e.be/
+[Vitalink]: https://www.vitalink.be/
+[RSW]: https://www.reseausantewallon.be/
+[RSB]: https://brusselshealthnetwork.be/
+[Farmaflux]: https://www.farmaflux.be/
+[Web component explanations]: https://www.webcomponents.org/introduction
+[eHealth IAM]:https://www.ehealth.fgov.be/ehealthplatform/nl/service-i.am-identity-access-management 
+[MHDK]: https://www.npmjs.com/package/@myhealth-belgium/design-kit
+[Angular Material]: https://material.angular.io/
+[OFAC]: https://openfed.github.io/AccessibilityCheck/
+[Semver]: https://docs.npmjs.com/about-semantic-versioning
+[MHWCI]: https://www.npmjs.com/package/@myhealth-belgium/webcomponent-integration
+[Supported browsers]: https://www.ehealth.fgov.be/nl/page/hoe-toegang-krijgen-tot-applicaties
+