CRUD Modal

Dialog boxes for CRUD operations

npm run add CRUDModal

Use the CRUDModal component in admin dashboards, CMS, CRM or ERP systems, or in inventory, booking or project management apps to simplify data management using a unified, form-friendly solution for creating, viewing, updating, and deleting records. The component can help you speed up development and create a more streamlined user experience.

<CRUDModal
    name="crud-modal-preview"
    title="CRUD Modal (create)"
    subTitle="You are about to create a new user"
    className="modal"
    type="create"
>
    <Form fields={[
        {
            type: 'text',
            placeholder: 'Username',
            name: 'name'
        },
        {
            type: 'email',
            placeholder: 'Email',
            name: 'email'
        }
    ]} />
</CRUDModal>

To create the modal, import the CRUDModal component and add the following props:

• name: A unique identifier for the modal. Required.
• type: The type of the modal. Optional. Can be one of create, read, update, or delete.

The CRUDModal component is using a Modal component internally, so it supports all the props of the Modal component, such as title or subTitle in the example above.

Modal Types

CRUD Modals can also be created with four predefined types: create, read, update, and delete. To change the theme of your modal, set the theme prop:

<CRUDModal
    name="create-modal"
    className="create-modal"
    title="Create new item"
    subTitle="Before continuing, please read carefully"
    type="create"
>
    <p>This modal was created with <code>type</code> set to <code>create</code>.</p>
</CRUDModal>

<CRUDModal
    name="read-modal"
    className="read-modal"
    title="Updated successfully"
    subTitle="Before continuing, please read carefully"
    type="read"
>
    <p>This modal was created with <code>type</code> set to <code>read</code>.</p>
</CRUDModal>

<CRUDModal
    name="update-modal"
    className="update-modal"
    title="Are you sure you want to update?"
    subTitle="Before continuing, please read carefully"
    type="update"
>
    <p>This modal was created with <code>type</code> set to <code>update</code>.</p>
</CRUDModal>

<CRUDModal
    name="delete-modal"
    className="delete-modal"
    title="This action is irreversible"
    subTitle="Before continuing, please read carefully"
    type="delete"
>
    <p>This modal was created with <code>type</code> set to <code>delete</code>.</p>
</CRUDModal>

Modal Events

When the modal is closed via the “Cancel” or “Confirm” buttons, the following events are triggered that you can listen to using the listen method:

import { listen } from 'webcoreui'

// Triggered when the modal is closed via the "Cancel" button
listen('crudOnCancel', data => console.log('Cancel:', data))

// Triggered when the modal is closed via the "Confirm" button
listen('crudOnConfirm', data => console.log('Confirm:', data))

In the Svelte/React variants, the onCancel and onConfirm props can be used to listen to the above events.

Forms in Modals

The Modal component also supports forms. To use a form, simply pass a Form block as the children to the component:

---
const formFields: FormField[] = [
    {
        type: 'text',
        placeholder: 'Type the ID to confirm delete',
        name: 'id'
    }
]
---

<CRUDModal
    title="Confirm delete"
    type="delete"
    name="delete"
>
    <Form fields={formFields} />
</CRUDModal>

Form values will be available in data when the onConfirm or onCancel event is triggered. Forms are also cleaned up when the modal is closed.

API

type CRUDEvent = {
    name: string
    type: 'create' | 'read' | 'update' | 'delete' | undefined
    form: Record<string, string> | undefined
}

type CRUDModalProps = {
    name: string
    type?: CRUDEvent['type']
    cancelText?: string
    confirmText?: string
} & Omit<ModalProps, 'theme'>

type SvelteCRUDModalProps = {
    onCancel?: (event: CRUDEvent) => void
    onConfirm?: (event: CRUDEvent) => void
} & CRUDModalProps

type ReactCRUDModalProps = {
    onCancel?: (event: CRUDEvent) => void
    onConfirm?: (event: CRUDEvent) => void
} & CRUDModalProps