new: [ui:formInfo] Rafactored formInfo and added support of field description

Can be done by using the `tooltip` key on the field configuration

src/View/Helper/FormFieldMassageHelper.php

@@ -8,6 +8,15 @@ class FormFieldMassageHelper extends Helper
 {
     public function prepareFormElement(\Cake\View\Helper\FormHelper $form, array $controlParams, array $fieldData): string
     {
+        if ($fieldData['tooltip']) {
+            $form->setTemplates([
+                'label' => '{{text}}{{tooltip}}',
+            ]);
+            $controlParams['templateVars'] = array_merge(
+                $controlParams['templateVars'] ?? [],
+                ['tooltip' => $fieldData['tooltip'], ]
+            );
+        }
         if (!empty($fieldData['stateDependence'])) {
             $controlParams['data-dependence-source'] = h($fieldData['stateDependence']['source']);
             $controlParams['data-dependence-option'] = h($fieldData['stateDependence']['option']);

templates/element/genericElements/Form/Fields/uuidField.php

@@ -1,43 +1,43 @@
 <?php
-    $random = Cake\Utility\Security::randomString(8);
-    $params['div'] = false;
-    $this->Form->setTemplates([
-        'inputContainer' => '{{content}}',
-        'inputContainerError' => '{{content}}',
-        'formGroup' => '{{input}}',
-    ]);
-    $label = $fieldData['label'];
-    $formElement = $this->FormFieldMassage->prepareFormElement($this->Form, $params, $fieldData);
-    $temp = sprintf(
-        '<div class="row mb-3">
-            <div class="col-sm-2 form-label">%s</div>
-            <div class="col-sm-10">
-                <div class="input-group">
-                    %s<span>%s</span>
-                </div>
-            </div>
-        </div>',
-        h($label),
-        $formElement,
-        sprintf(
-            '<span id="uuid-gen-%s" class="btn btn-secondary">%s</span>',
-            $random,
-            __('Generate')
-        )
-    );
-    echo $temp;
+$random = Cake\Utility\Security::randomString(8);
+$params['div'] = false;
+
+$genUUIDButton = $this->Bootstrap->button([
+    'id' => "uuid-gen-{$random}",
+    'variant' => 'secondary',
+    'text' => __('Generate'),
+]);
+
+$this->Form->setTemplates([
+    'input' => sprintf('<div class="input-group">%s{{genUUIDButton}}</div>', $this->Form->getTemplates('input')),
+]);
+$params['templateVars'] = [
+    'genUUIDButton' => $genUUIDButton,
+];
+
+$formElement = $this->FormFieldMassage->prepareFormElement($this->Form, $params, $fieldData);
+echo $formElement;
 ?>
 <script type="text/javascript">
     $(document).ready(function() {
-        $('#uuid-gen-<?= h($random) ?>').on('click', function() {
-            $.ajax({
-                success:function (data, textStatus) {
-                    $('#uuid-field').val(data["uuid"]);
-                },
-                type: "get",
-                cache: false,
-                url: "/organisations/generateUUID",
-            });
-        });
+        const $node = $('#uuid-gen-<?= h($random) ?>')
+        $node.click(fetchUUID)
+
+        function fetchUUID() {
+            const urlGet = '/organisations/generateUUID'
+            const options = {
+                statusNode: $node,
+            }
+            return AJAXApi.quickFetchJSON(urlGet, options)
+                .then(function(data) {
+                    $('#uuid-field').val(data["uuid"])
+                })
+                .catch((e) => {
+                    UI.toast({
+                        variant: 'danger',
+                        text: '<?= __('Could not generate UUID') ?>'
+                    })
+                })
+        }
     });
-</script>
+</script>

templates/element/genericElements/Form/fieldScaffold.php

@@ -11,11 +11,12 @@
                 $fieldData['label'] = \Cake\Utility\Inflector::humanize($fieldData['field']);
             }
         }
-        if (!empty($fieldDesc[$fieldData['field']])) {
-            $fieldData['label'] .= $this->element(
+        $fieldDescription = $fieldData['tooltip'] ?? ($fieldDesc[$fieldData['field']] ?? false);
+        if (!empty($fieldDescription)) {
+            $fieldData['tooltip'] = $this->element(
                 'genericElements/Form/formInfo', array(
                     'field' => $fieldData,
-                    'fieldDesc' => $fieldDesc[$fieldData['field']],
+                    'fieldDesc' => $fieldDescription,
                     'modelForForm' => $modelForForm
                 )
             );

templates/element/genericElements/Form/formInfo.php

@@ -1,4 +1,5 @@
 <?php
+    $seed = mt_rand();
     if (!is_array($fieldDesc)) {
         $fieldDesc = array('info' => $fieldDesc);
         $default = 'info';
@@ -16,32 +17,46 @@
             $default = 'info';
         }
     }
-    echo sprintf(
-        '<span id = "%sInfoPopover" class="icon-info-sign" data-bs-toggle="popover" data-bs-trigger="hover"></span>',
-        h($field['field'])
-    );
+    $popoverID = sprintf("%sInfoPopover%s", h($field['field']), $seed);
+    echo $this->Bootstrap->icon('info-circle', [
+        'id' => $popoverID,
+        'class' => ['ms-1'],
+        'attrs' => [
+            'data-bs-toggle' => 'popover',
+            'data-bs-trigger' => 'hover',
+        ]
+    ]);
 ?>
 <script type="text/javascript">
     $(document).ready(function() {
-        new bootstrap.Popover('#<?php echo h($field['field']); ?>InfoPopover', {
+        new bootstrap.Popover('#<?= $popoverID ?>', {
             html: true,
             content: function() {
-                var tempSelector = '#<?php echo h($modelForForm . \Cake\Utility\Inflector::camelize($field['field'])); ?>';
-                if ($(tempSelector)[0].nodeName === "SELECT" && Object.keys(fieldDesc).length > 1) {
-                    return $('<div>').append(
-                        $('<span>').attr('class', 'blue bold').text($(tempSelector +" option:selected").text())
-                    ).append(
-                        $('<span>').text(': ' + fieldDesc[$(tempSelector).val()])
+                return $('<div>')
+                    .append(
+                        $('<span>')
+                            .attr('class', 'text-primary fw-bold')
+                            .text('<?php echo h(\Cake\Utility\Inflector::humanize($field['field'])); ?>')
+                    )
+                    .append(
+                        $('<span>').text(": <?= h($fieldDesc["info"]) ?>")
                     );
-                } else {
-                    return $('<div>').append(
-                        $('<span>').attr('class', 'blue bold').text('<?php echo h(\Cake\Utility\Inflector::humanize($field['field'])); ?>')
-                    ).append(
-                        $('<span>').text(": " + fieldDesc["info"])
-                    );
-                }
+                // var tempSelector = '#<?php echo h($modelForForm . \Cake\Utility\Inflector::camelize($field['field'])); ?>';
+                // if ($(tempSelector)[0].nodeName === "SELECT" && Object.keys(fieldDesc).length > 1) {
+                //     return $('<div>').append(
+                //         $('<span>').attr('class', 'blue bold').text($(tempSelector +" option:selected").text())
+                //     ).append(
+                //         $('<span>').text(': ' + fieldDesc[$(tempSelector).val()])
+                //     );
+                // } else {
+                //     return $('<div>').append(
+                //         $('<span>').attr('class', 'blue bold').text('<?php echo h(\Cake\Utility\Inflector::humanize($field['field'])); ?>')
+                //     ).append(
+                //         $('<span>').text(": " + fieldDesc["info"])
+                //     );
+                // }
             }
         });
-        var fieldDesc = <?php echo json_encode($fieldDesc); ?>;
+        // var fieldDesc = <?php echo json_encode($fieldDesc); ?>;
     });
 </script>

templates/element/genericElements/Form/genericForm.php

@@ -19,7 +19,7 @@
     $entity = isset($entity) ? $entity : null;
     $fieldsString = '';
     $simpleFieldWhitelist = [
-        'default', 'type', 'placeholder', 'label', 'empty', 'rows', 'div', 'required', 'templates', 'options', 'value', 'checked'
+        'default', 'type', 'placeholder', 'label', 'empty', 'rows', 'div', 'required', 'templates', 'options', 'value', 'checked',
     ];
     if (empty($data['url'])) {
         $data['url'] = ["controller" => $this->request->getParam('controller'), "action" => $this->request->getParam('url')];