res_levis_frontend/jsonic/plugins/jsonic.daisyui.js

var jsDaisyUI = {
    // Function to generate a DaisyUI 5-based form as a JSON structure from a JSON schema
    schemaToForm: function (params) {
        if (!params.schema || !params.schema.properties) {
            return {
                html: [
                    {
                        tag: 'p',
                        attr: {},
                        text: 'schemaToForm Error: Invalid JSON schema provided.'
                    }
                ]
            };
        }

        const formElements = [];

        // Iterate through schema properties
        for (const [key, prop] of Object.entries(params.schema.properties)) {
            const label = prop.title || key;
            const required = params.schema.required && params.schema.required.includes(key) ? 'required' : '';
            const inputId = `input-${key}`; // Unique ID for accessibility

            const hiddenId = (key == 'id' && jsonApp && jsonApp.json.data.settings && !jsonApp.json.data.settings.debug) ? ' hidden' : '';

            // Create fieldset for each field
            const fieldsetChildren = [
                {
                    tag: 'label',
                    attr: {
                        class: 'label text-primary capitalize' + hiddenId,
                        for: inputId
                    },
                    html: [
                        {
                            tag: 'span',
                            attr: {},
                            text: label
                        }
                    ]
                }
            ];

            // Handle different input types
            let inputElement;
            switch (prop.type) {
                case 'string':
                    inputElement = {
                        tag: 'input',
                        attr: {
                            id: inputId,
                            type: 'text',
                            name: key,
                            placeholder: prop.description || ' ',
                            class: 'w-100 input input-primary' + hiddenId,
                            ...(required && { required: '' })
                        }
                    };
                    break;

                case 'number':
                case 'integer':
                    inputElement = {
                        tag: 'input',
                        attr: {
                            id: inputId,
                            type: 'number',
                            name: key,
                            placeholder: prop.description || ' ',
                            class: 'w-100 input input-primary',
                            ...(required && { required: '' })
                        }
                    };
                    break;

                case 'boolean':
                    inputElement = {
                        tag: 'input',
                        attr: {
                            id: inputId,
                            type: 'checkbox',
                            name: key,
                            class: 'toggle',
                            ...(required && { required: '' })
                        }
                    };
                    break;

                case 'array':
                    inputElement = {
                        tag: 'textarea',
                        attr: {
                            id: inputId,
                            name: key,
                            placeholder: prop.description || 'Enter values separated by commas',
                            class: 'w-100 textarea input-primary',
                            ...(required && { required: '' })
                        }
                    };
                    break;

                case 'object':
                    inputElement = {
                        tag: 'textarea',
                        attr: {
                            id: inputId,
                            name: key,
                            placeholder: prop.description || 'Enter JSON object',
                            class: 'w-100 textarea input-primary',
                            ...(required && { required: '' })
                        }
                    };
                    break;

                default:
                    inputElement = {
                        tag: 'input',
                        attr: {
                            id: inputId,
                            type: 'text',
                            name: key,
                            placeholder: prop.description || ' ',
                            class: 'w-100 input input-primary',
                            ...(required && { required: '' })
                        }
                    };
            }


            // Add input element to fieldset
            fieldsetChildren.push(inputElement);

            // Add fieldset to form elements
            formElements.push({
                tag: 'fieldset',
                attr: { class: 'fieldset text-center' },
                html: fieldsetChildren
            });
        }

        // Add submit button
        formElements.push({
            tag: 'div',
            attr: { class: 'w-100 mt-6 text-center' },
            html: [
                {
                    tag: 'button',
                    attr: {
                        type: 'submit',
                        class: 'btn btn-outline btn-primary'
                    },
                    text: 'Submit'
                }
            ]
        });

        // Return the full form structure
        return {
            html: [
                {
                    tag: 'form',
                    attr: { class: 'space-y-4' },
                    html: formElements
                }
            ]
        };
    },
    createForm: function (params) {
        let appForm = jsDaisyUI.schemaToForm(params);
        appForm.selector = params.selector;
        jsonApp.do(appForm);
    }
}