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

ck-book-slot-modal

The ck-book-slot-modal web component is a modal specialized in adding/modify Appointments in am-calendar.

ck-book-slot-modal

Usage

The web component consists of a form inside a modal with dynamically generated fields based on a Appointment.

Submitting the form will trigger the post of the appointment.

The web-component also listens to the selected-data event. Upon receiving a select-data event, the ck-book-slot-modal opens in edit mode. For the modal to open correctly, the payload of the event must contain a valid _id of the availability that has to be edited. If the modal was opened in edit mode, the submitting of the form will trigger the patch of the selected appointment.

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

{
"$ref": {},
"content": {
"attributes": {
"style": "height: calc(100vh - 64px);"
},
"type": "row",
"content": [
{
"type": "element",
"tag": "bk-button",
"properties": {
"type": "default",
"iconId": "PlusOutlined",
"content": {
"it": "Aggiungi piano",
"en": "Add plan"
},
"clickConfig": {
"type": "event",
"actionConfig": {
"label": "book-slot-modal",
"payload": {
slot:{}
}
}
}
}
},

{
"type": "element",
"tag": "ck-book-slot-modal",
"properties": {
"appointmentManagerEndpoint": "/v2/appointment-manager/appointments/",
"usersEndpoint": "/v2/mdc-users/?_p=authUserId
"dataSchema": {
"type": "object",
"properties": {
"address": {
"type": "string",
"label": "Site"
},
"performance": {
"type": "string",
"format": "lookup",
"label": {
"it": "Prestazione",
"en": "Performance"
},
"lookupOptions": {
"lookupDataSource": "performances",
"lookupValue": "_id",
"lookupFields": ["name"]
},
"unique": false,
"formOptions": {
"readOnly": false
},
"visualizationOptions": {
"hidden": true
}
}
}
}
}
}
]
}
}

Properties & Attributes

propertytyperequireddefaultdescription
appointmentManagerEndpointstringtrue/Base path to the Therapy and Monitoring Manager.
usersEndpointstringtrue/v2/mdc-users/Base path to for the users collection .
dataSchemaDataSchemafalse-Defines a dataSchema for additional fields

Listens to

eventactionemitson error
book-slot-modalTriggers the opening or the closing of the modal.--
selected-dataTriggers the opening of the modal in edit modbook-slot-modal-
LookupLiveFoundListens to the lookup data--

Emits

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