Development: UI API

Overview

The bootstrap-helper.js contains classes providing utility functions to create and interact with UI components such as modal or toast.

• The UIFactory class: Exposes quick and easy to use functions for frequently used operations such as opening a toast or loading a modal from an URL
• The Toaster class: Let you create bootstrap toasts and manipulate them
• The ModalFactory class: Let you create bootstrap modals and manipulate them. It supports callback functions for various events and pre-build template
• The OverlayFactory class: Let you create overlays providing a loading feedback or simply to tell users that an operation is in progress
• The FormHelper class: Let you interact with a form validation state

UIFactory usage

Create and open a toast

UI.toast({
    title: 'Title',
    body: 'Body',
    muted: 'Muted',
    variant: 'danger',
    delay: 20000
})

Create and open a modal from a URL. Additionally a reload URL can be passed to reload the table after a successful operation

// openModalFromURL(url, reloadUrl=false, tableId=false)
UI.openModalFromURL('/users/add', '/users/index', 'table-id-to-reload')

Create and open a modal from a URL where the modal's content is fetched from the provided URL. The callbacks functions will be fired upon modal submission

// modalFromURL(url, POSTSuccessCallback=function(){}, POSTFailCallback=function(){})
UI.modalFromURL(
    '/users/add',
    () => {console.log('success')},
    () => {console.log('error')}
)

Fetch the content at the provided url and override the $container's content. $statusNode allows to specify another HTML node to display the loading animation

// reload(url, $container, $statusNode=null)
UI.reload('/users/index', $('#userIndexTableContainer'), $('#userIndexTable')).then(() => {
    console.log('reload complete')
})

Toaster usage

ModalFactory usage

OverlayFactory usage

FormHelper usage