budibase/packages/bootstrap-components/src/generators/formsGenerator.js

import {buttons} from "./buttonGenerators";

export const forms = ({records, indexes, helpers}) => 
    [
        ...records.map(root),
        ...buttons({records, indexes, helpers})
    ];

export const formName = record =>  `${record.name}/${record.name} Form`;

const root = record => ({
    name: formName(record),
    description: `Control for creating/updating '${record.nodeKey()}' `,
    inherits: "@budibase/standard-components/div",
    props: {
        className:"p-1",
        children: [
            {
                component: {
                    _component: "@budibase/standard-components/h3",
                    text: `Edit ${record.name}`,
                }
            },
            form(record),
            saveCancelButtons(record)
        ]
    }
}) 

const form = record => ({
    component: {
        _component: "@budibase/standard-components/form",
        formControls: 
            record.fields.map(f => formControl(record, f))
    }
})

const formControl = (record, field) => {
    if(field.type === "string" && field.typeOptions.values && field.typeOptions.values.length > 0) {
        return ({
            control: {
                _component: "@budibase/standard-components/select",
                options: field.typeOptions.values.map(v => ({id:v, value:v})),
                value: {
                    "##bbstate":`${record.name}.${field.name}`,
                    "##bbsource":"store"
                },
                className: "form-control"
            },
            label: field.label
        });
    } else {
        return ({
            control: {
                _component: "@budibase/standard-components/input",
                value: {
                    "##bbstate":`${record.name}.${field.name}`,
                    "##bbsource":"store"
                },
                className: "form-control",
                type: field.type === "string" ? "text"
                    : field.type === "datetime" ? "date"
                    : field.type === "number" ? "number"
                    : "text"
            },
            label: field.label
        });
    }
}

const saveCancelButtons = (record) => ({
    component: {
        _component: "@budibase/standard-components/stackpanel",
        direction: "horizontal",
        children: [
            paddedPanelForButton({
                _component: "common/Primary Button",
                contentText: `Save ${record.name}`,
                onClick: [                
                    {
                        "##eventHandlerType": "Save Record",
                        parameters: {
                            statePath: `${record.name}`,
                        }
                    },
                    {
                        "##eventHandlerType": "Set State",
                        parameters: {
                            path: `isEditing${record.name}`,
                            value: ""
                        }
                    }
                ]
            }),
            paddedPanelForButton({
                _component: "common/Default Button",
                contentText: `Cancel`,
                onClick: [
                    {
                        "##eventHandlerType": "Set State",
                        parameters: {
                            path: `isEditing${record.name}`,
                            value: ""
                        }
                    }
                ]
            })
        ]
    }
})

const paddedPanelForButton = (button) => ({
    control: {
        _component: "@budibase/standard-components/div",
        className: "btn-group",
        children: [
            {
                component: button
            }
        ]
    }
});