Skip to main content
Version: 13.x (Current)

ck-threshold-modal

The ck-threshold-modal web component is a modal specialized in adding/modify a threshold to an already existingTherapy and Monitoring Manager therapy/monitoring.

ck-threshold-modal

Usage

The web component consists of a form inside a modal with dynamically generated fields based on a Therapy and Monitoring Manager prototype. The component listens to the therapy-config event emitted by ck-therapy-select component, which payload contains the prototypeId, the planId, and the planType.

To fetch the prototype that defines which fields are shown in the modal, the prototypeId is used. The fetching is done using the URL set in the prototypePath property. The prototypePath should be set to Therapy and Monitoring Manager GET /prototypes/ endpoint. Each therapy/monitoring contains the relative thresholds. To retrive the thresholds the planId and the planType received in the therapy-configevent payload are combined with the planBasePath property to generate the endpoint used to fetch the right plan. The planBasePath should be set to Therapy and Monitoring Manager base path.

In addition to the form, the ck-threshold-modal also includes a section where users can set notification preferences for new detections that do not comply with the set threshold. Notification settings are retrieved from the endpoint specified in the notificationPath property. If notificationEnabled is set to false, the notification section is not present.

Once the form is submitted, the threshold fields are used to patch the relative therapy/monitoring threshold sections.

In order to open the ck-threshold-modal in a Microfrontend Composer, a configuration is needed to configure a button to emit the custom event threshold-modal. An example configuration follows:

{
"$ref": {},
"content": {
"attributes": {
"style": "height: calc(100vh - 64px);"
},
"type": "row",
"content": [
{
"type": "element",
"tag": "bk-button",
"properties": {
"content": "New detection",
"clickConfig": {
"type": "event",
"actionConfig": {
"label": "threshold-modal",
"payload": {}
}
}
}
},
{
"type": "element",
"tag": "ck-threshold-modal",
"properties": {
"prototypePath": "tmm/prototypes/",
"planBasePath": "tmm",
"notificationPath": "tmm/notifications"
}
}
]
}
}

Properties & Attributes

propertytyperequireddefaultdescription
prototypePathstringtrue/Path to the Therapy and Monitoring Manager GET /prototypes/ endpoint.
planBasePathstringtrue/Base path to the Therapy and Monitoring Manager.
notificationPathstringtrue/Path used for fetch/update the notification settings.
notificationEnabledbooleanfalsetrueIf to show the notifications sections in modal
widthstringfalse800pxThe width of the modal. It must a valid CSS value.
heightstringfalse500pxThe minimum height of the modal. It must a valid CSS value.

Listens to

eventactionemitson error
threshold-modalTriggers the opening or the closing of the modal.--
therapy-configEvents that contains the information used by the modal to generate the forms' fields and post body--

Emits

eventdescription
threshold-modalCustom event, triggers the opening or the closing of the modal.