cerebrate/templates/Users/add.php

<?php

use Cake\Core\Configure;

$passwordRequired = false;
$showPasswordField = false;
if ($this->request->getParam('action') === 'add') {
    $dropdownData['individual'] = ['new' => __('New individual')] + $dropdownData['individual'];
    if (!Configure::check('password_auth.enabled') || Configure::read('password_auth.enabled')) {
        $passwordRequired = 'required';
    }
}
if (!Configure::check('password_auth.enabled') || Configure::read('password_auth.enabled')) {
    $showPasswordField = true;
}
echo $this->element('genericElements/Form/genericForm', [
    'data' => [
        'description' => __('Roles define global rules for a set of users, including first and foremost access controls to certain functionalities.'),
        'model' => 'Roles',
        'fields' => [
            [
                'field' => 'individual_id',
                'type' => 'dropdown',
                'label' => __('Associated individual'),
                'options' => isset($dropdownData['individual']) ? $dropdownData['individual'] : [],
                'conditions' => $this->request->getParam('action') === 'add'
            ],
            [
                'field' => 'individual.email',
                'stateDependence' => [
                    'source' => '#individual_id-field',
                    'option' => 'new'
                ],
                'required' => false
            ],
            [
                'field' => 'individual.first_name',
                'label' => 'First name',
                'stateDependence' => [
                    'source' => '#individual_id-field',
                    'option' => 'new'
                ],
                'required' => false
            ],
            [
                'field' => 'individual.last_name',
                'label' => 'Last name',
                'stateDependence' => [
                    'source' => '#individual_id-field',
                    'option' => 'new'
                ],
                'required' => false
            ],
            [
                'field' => 'username',
                'autocomplete' => 'off'
            ],
            [
                'field' => 'organisation_id',
                'type' => 'dropdown',
                'label' => __('Associated organisation'),
                'options' => $dropdownData['organisation'],
                'default' => $loggedUser['organisation_id']
            ],
            [
                'field' => 'password',
                'label' => __('Password'),
                'type' => 'password',
                'required' => $passwordRequired,
                'autocomplete' => 'new-password',
                'value' => '',
                'requirements' => $showPasswordField,
            ],
            [
                'field' => 'confirm_password',
                'label' => __('Confirm Password'),
                'type' => 'password',
                'required' => $passwordRequired,
                'autocomplete' => 'off',
                'requirements' => $showPasswordField,
            ],
            [
                'field' => 'role_id',
                'type' => 'dropdown',
                'label' => __('Role'),
                'options' => $dropdownData['role'],
                'default' => $defaultRole ?? null
            ],
            [
                'field' => 'disabled',
                'type' => 'checkbox',
                'label' => 'Disable'
            ],
        ],
        'submit' => [
            'action' => $this->request->getParam('action')
        ]
    ]
]);
?>

<script>
    $(document).ready(function() {
        const entity = <?= json_encode($entity) ?>;
        createUIForPermission(entity)

        $('#organisation_id-field').change(updateOrgPermissionCount)
        updateOrgPermissionCount()

        function createUIForPermission(entity) {
            if (entity.MetaTemplates) {
                for (const [metaTemplateId, metaTemplate] of Object.entries(entity.MetaTemplates)) {
                    for (const [metaTemplateFieldId, metaTemplateField] of Object.entries(metaTemplate.meta_template_fields)) {
                        let metaFieldId = false
                        if (metaTemplateField.metaFields !== undefined && Object.keys(metaTemplateField.metaFields).length > 0) {
                            metaFieldId = Object.keys(metaTemplateField.metaFields)[0]
                        }
                        let metafieldInput
                        const baseQueryPath = `MetaTemplates.${metaTemplateId}.meta_template_fields.${metaTemplateFieldId}.metaFields`
                        if (metaFieldId) {
                            metafieldInput = document.getElementById(`${baseQueryPath}.${metaFieldId}.value-field`)
                        } else {
                            metafieldInput = document.getElementById(`${baseQueryPath}.new.0-field`)
                        }
                        if (metafieldInput !== null) {
                            const permissionWarnings = buildPermissionElement(metaTemplateField)
                            $(metafieldInput.parentElement).find('.permission-container').remove()
                            $(metafieldInput.parentElement).append(permissionWarnings)
                        }
                    }
                }
            }

            function buildPermissionElement(metaTemplateField) {
                const warningTypes = ['danger', 'warning', 'info', ]
                const $span = $('<span>')
                    .addClass(['permission-container', 'ms-2'])
                warningTypes.forEach(warningType => {
                    if (metaTemplateField[warningType]) {
                        $theWarning = $('<span>')
                            .addClass([
                                `text-${warningType}`,
                                'ms-1',
                            ])
                            .append($(metaTemplateField[warningType]))
                        $span.append($theWarning)
                    }
                });
                return $span
            }
        }

        async function updateOrgPermissionCount() {
            var org_id = $('#organisation_id-field').val()
            var url = `/users/getLimitationForOrganisation/${org_id}?includeMetatemplate=1`
            const response = await fetch(url, new Headers({Accept: 'application/json'}));
            if (!response.ok) {
                throw new Error(`Network response was not ok. \`${response.statusText}\``)
            }
            const entity = await response.json();
            createUIForPermission(entity)
        }
    })
</script>