Refactored form field generation for accessibility and restored befor…

…eField and afterField supplements (CFM-446)
Ioannis · Jan 30, 2025 · 877b5d2 · 877b5d2
1 parent ab758fc
commit 877b5d2
Show file tree

Hide file tree

Showing 15 changed files with 162 additions and 145 deletions.
diff --git a/app/src/Model/Table/PersonRolesTable.php b/app/src/Model/Table/PersonRolesTable.php
@@ -162,6 +162,16 @@ public function initialize(array $config): void {
       'cous' => [
         'type' => 'select',
         'model' => 'Cous'
+      ],
+      // Required for peoplePicker
+      'cosettings' => [
+        'type' => 'auxiliary',
+        'model' => 'CoSettings'
+      ],
+      // Required for peoplePicker
+      'types' => [
+        'type' => 'auxiliary',
+        'model' => 'Types'
       ]
     ]);
 

diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
@@ -370,12 +370,13 @@ public function dateField(string $fieldName,
    * @param   string       $fieldName             Form field
    * @param   array|null   $fieldOptions          The second parameter of the Form->control helper. List of element options
    * @param   string|null  $fieldLabel            Custom label text. Applicable to checkboxes ONLY
-   * @param   string       $fieldPrefix           If the field has a specil prefix provide the value
+   * @param   string       $fieldPrefix           If the field has a special prefix provide the value
    * @param   string|null  $fieldType             Field type to override the one calculated from the schema
    * @param   array|null   $fieldSelectOptions    Options array to override the one calculated options from the AutoPopulate property
    *                                              fieldType has to be 'select'
    * @param   string|null  $fieldNameAlias        Used for the Petition Attribute Collection form. The form uses generic field name.
    *                                              The variable is used to map the generic field name to the actual enrollment attribute name
+   * @oaran   bool|null    $labelIsTextOnly       A parameter to force rending a field name/label as plain text with no <label> tag.
    *
    * @return string  HTML element
    * @since  COmanage Registry v5.0.0
@@ -386,7 +387,8 @@ public function formField(string $fieldName,
                             string $fieldPrefix = '',
                             string $fieldType = null,
                             array  $fieldSelectOptions = null,
-                            string $fieldNameAlias = null): string
+                            string $fieldNameAlias = null,
+                              bool $labelIsTextOnly = null): string
   {
     $fieldArgs = $fieldOptions ?? [];
     $fieldArgs['label'] = $fieldOptions['label'] ?? false;
@@ -452,7 +454,10 @@ public function formField(string $fieldName,
                                             'class' => 'form-check-input',
                                           ]),
       'select'    => $this->Form->select($fieldName, $fieldSelectOptions, $fieldArgs),
-      'text'      => $this->Form->textarea($fieldName, $fieldArgs),
+      'text'      => $this->Form->textarea($fieldName,  [
+                                            ...$fieldArgs,
+                                            'id' => Inflector::dasherize($fieldName) // Cake 4 does not automatically assign this ID...
+                                          ]),
       'date'      => $this->dateField(fieldName: $fieldName, dateType: DateTypeEnum::DateOnly, fieldArgs: $fieldArgs),
       'datetime',
       'timestamp' => $this->dateField(fieldName: $fieldName, fieldArgs: $fieldArgs),

diff --git a/app/templates/Jobs/fields.inc b/app/templates/Jobs/fields.inc
@@ -58,17 +58,44 @@ if($vv_action == 'add') {
       ]
     ]);
   }
+
+  // Establish the supplemental field wrappers for the parameters field
+  $beforeField = 
+    '<div class="field-suppliment">
+       <div class="form-check">
+         <input class="form-check-input" type="checkbox" value="" id="format-toggle">
+         <label class="form-check-label" for="format-toggle">' . __d('field','format') . '</label>
+       </div>
+     </div>';
+
+  $afterField = 
+    '<script>
+       parametersValue = $("#parameters").val();
+       parametersJSON = JSON.parse(parametersValue);
+        $("#format-toggle").click(function() {
+          if($(this).is(":checked")) {
+            $("#parameters").val(JSON.stringify(parametersJSON, null, 4));
+            paramsHeight = Object.keys(parametersJSON).length + 6 + "em";
+            $("#parameters").css("height",paramsHeight);
+          } else {
+            $("#parameters").val(parametersValue);
+            $("#parameters").css("height","4em");
+          }
+       });
+     </script>';
 
   print $this->element('form/listItem', [
     'arguments' => [
       'fieldName' => 'parameters',
-      'check' => true
-    ]
+    ],
+    'beforeField' => $beforeField,
+    'afterField' => $afterField
   ]);
 
   print $this->element('form/listItem', [
     'arguments' => [
-      'fieldName' => 'register_time'
+      'fieldName' => 'register_time',
+      'labelIsTextOnly' => true
     ]
   ]);
 
@@ -80,7 +107,8 @@ if($vv_action == 'add') {
 
   print $this->element('form/listItem', [
     'arguments' => [
-      'fieldName' => 'register_time'
+      'fieldName' => 'register_time',
+      'labelIsTextOnly' => true
     ]
   ]);
 
@@ -98,13 +126,15 @@ if($vv_action == 'add') {
 
   print $this->element('form/listItem', [
     'arguments' => [
-      'fieldName' => 'start_after_time'
+      'fieldName' => 'start_after_time',
+      'labelIsTextOnly' => true
     ]
   ]);
 
   print $this->element('form/listItem', [
     'arguments' => [
-      'fieldName' => 'start_time'
+      'fieldName' => 'start_time',
+      'labelIsTextOnly' => true
     ]
   ]);
 
@@ -116,7 +146,8 @@ if($vv_action == 'add') {
 
   print $this->element('form/listItem', [
     'arguments' => [
-      'fieldName' => 'finish_time'
+      'fieldName' => 'finish_time',
+      'labelIsTextOnly' => true
     ]
   ]);
 

diff --git a/app/templates/PersonRoles/fields.inc b/app/templates/PersonRoles/fields.inc
@@ -66,17 +66,31 @@ if($vv_action == 'add' || $vv_action == 'edit' || $vv_action == 'view') {
 
     if(!empty($vv_obj->$fp->names[0])) {
       $fname = $vv_obj->$fp->names[0]->full_name;
+      $fid = $vv_obj->$fp->id;
       $flink = ['url' => ['controller' => 'people', 'action' => 'edit', $vv_obj->$fp->id]];
-    }
-
-    print $this->element('form/listItem', [
-      'arguments' => [
-        'fieldName' => $f.'_person_id',
-        'status' => $fname,
+      $formParams = [
+        'value' => $fid,
+        'fullName' => $fname,
         'link' => $flink,
-        'fieldLabel' => __d('field', $f)
+      ];
+      $this->set('formParams', $formParams);
+    }
+
+    $vv_autocomplete_arguments = [
+      'fieldName' => $f.'_person_id',
+      'status' => $fname,
+      'link' => $flink,
+      'fieldLabel' => __d('field', $f),
+      'fieldOptions' => [],
+      'autocomplete' => [
+        'configuration' => [
+          'action' => 'GET',
+          'for' => 'co'
+        ]
       ]
-    ]);
+    ];
+
+    print $this->element('form/listItem', ['arguments' => $vv_autocomplete_arguments]);
   }
 
   print $this->element('form/listItem', [

diff --git a/app/templates/element/form/fieldDiv.php b/app/templates/element/form/fieldDiv.php
@@ -41,22 +41,35 @@
   }
 
   // Info Div
-  if(isset($vv_field_arguments['fieldPrefix'])) {
-    print $this->element('form/infoDiv/withPrefix');
-  } elseif(isset($vv_field_arguments['status'])) {
-    print $this->element('form/infoDiv/status');
-  } elseif(isset($vv_field_arguments['groupedControls'])) {
-    print $this->element('form/infoDiv/grouped');
-  } elseif(isset($vv_field_arguments['entity'])) {
-    print $this->element('form/infoDiv/source');
-  } elseif(isset($vv_field_arguments['check']) && $vv_field_arguments['check']) {
-    print $this->element('form/infoDiv/check');
-  } elseif(isset($vv_field_arguments['groupmember'])) {
-    print $this->element('form/infoDiv/groupMember');
-  } elseif(isset($vv_field_arguments['autocomplete'])) {
-    print $this->element('form/infoDiv/autocomplete');
-  } else {
-    print $this->element('form/infoDiv/default');
-  }
   ?>
+  <div class="field-info">
+    <?php
+      // Insert the beforeField supplement:
+      if(!empty($vv_before_field)) {
+        print $vv_before_field;
+      }
+
+      // Include the correct sub-element based on the field configuration
+      if(isset($vv_field_arguments['fieldPrefix'])) {
+        print $this->element('form/infoDiv/withPrefix');
+      } elseif(isset($vv_field_arguments['autocomplete'])) {
+        print $this->element('form/infoDiv/autocomplete');
+      } elseif(isset($vv_field_arguments['status'])) {
+        print $this->element('form/infoDiv/status');
+      } elseif(isset($vv_field_arguments['groupedControls'])) {
+        print $this->element('form/infoDiv/grouped');
+      } elseif(isset($vv_field_arguments['entity'])) {
+        print $this->element('form/infoDiv/source');
+      } elseif(isset($vv_field_arguments['groupmember'])) {
+        print $this->element('form/infoDiv/groupMember');
+      } else {
+        print $this->element('form/infoDiv/default');
+      }
+
+      // Insert the afterField supplement:
+      if(!empty($vv_after_field)) {
+        print $vv_after_field;
+      }
+    ?>
+  </div>
 </div>
diff --git a/app/templates/element/form/infoDiv/autocomplete.php b/app/templates/element/form/infoDiv/autocomplete.php
@@ -25,8 +25,6 @@
  * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
  */
 
-
-
 declare(strict_types = 1);
 
 // Create a field name for the autocomplete input
@@ -53,7 +51,7 @@
   // Create a hidden field to hold our value and emit the autocomplete widget
   print $this->Form->hidden($fieldName, $vv_field_arguments['fieldOptions']) . $this->element('peopleAutocomplete', $autocompleteArgs);
 ?>
-<div class="field-desc">
-  <span class="material-symbols">info</span>
-  <?= __d('operation','autocomplete.people.desc',['2']) ?>
+<div class="field-desc field-autocomplete-desc">
+  <span class="material-symbols-outlined">info</span>
+  <span><?= __d('operation','autocomplete.people.desc',['2']) ?></span>
 </div>
diff --git a/app/templates/element/form/infoDiv/check.php b/app/templates/element/form/infoDiv/check.php
diff --git a/app/templates/element/form/infoDiv/default.php b/app/templates/element/form/infoDiv/default.php
@@ -28,6 +28,5 @@
 
 declare(strict_types = 1);
 ?>
-<div class="field-info">
-  <?= $this->Field->formField(...$vv_field_arguments) ?>
-</div>
+
+<?= $this->Field->formField(...$vv_field_arguments) ?>
diff --git a/app/templates/element/form/infoDiv/groupMember.php b/app/templates/element/form/infoDiv/groupMember.php
@@ -32,20 +32,20 @@
 ?>
 
 <?php if(isset($vv_selected_person)): ?>
-<div class="field-info">
-  <span class="group-member-name">
-    <?= $this->Html->link(
-      $vv_selected_person['name'],
-      ['plugin'       => null,
-       'controller'   => 'people',
-       'action'       => 'edit',
-       $vv_selected_person['id']
-      ],
-      ['target' => '_top']
-    );?>
-  </span>
-  <span class="group-member-id">
-    (<?= __d('information', 'entity.id', [$vv_selected_person['id']]) ?>)
-  </span>
-</div>
+
+<span class="group-member-name">
+  <?= $this->Html->link(
+    $vv_selected_person['name'],
+    ['plugin'       => null,
+     'controller'   => 'people',
+     'action'       => 'edit',
+     $vv_selected_person['id']
+    ],
+    ['target' => '_top']
+  );?>
+</span>
+<span class="group-member-id">
+  (<?= __d('information', 'entity.id', [$vv_selected_person['id']]) ?>)
+</span>
+
 <?php endif; ?>
diff --git a/app/templates/element/form/infoDiv/grouped.php b/app/templates/element/form/infoDiv/grouped.php
@@ -33,19 +33,17 @@
 
 ?>
 
-<div class="field-info">
-  <?php foreach ($vv_field_arguments['groupedControls'] as $fieldName => $fieldArguments): ?>
-    <?php
-    if(isset($fieldArguments['singleRowItem']) && $fieldArguments['singleRowItem']) {
-      $classes .= 'd-block ';
-      // This configuration is not needed for the control construction
-      unset($fieldArguments['singleRowItem']);
-    }
-    ?>
-    <div class="subfield subfield-cols <?= $classes ?>">
-      <div class="field-col">
-      <?= $this->Field->formField($fieldName, ...$fieldArguments) ?>
-      </div>
+<?php foreach ($vv_field_arguments['groupedControls'] as $fieldName => $fieldArguments): ?>
+  <?php
+  if(isset($fieldArguments['singleRowItem']) && $fieldArguments['singleRowItem']) {
+    $classes .= 'd-block ';
+    // This configuration is not needed for the control construction
+    unset($fieldArguments['singleRowItem']);
+  }
+  ?>
+  <div class="subfield subfield-cols <?= $classes ?>">
+    <div class="field-col">
+    <?= $this->Field->formField($fieldName, ...$fieldArguments) ?>
     </div>
-  <?php endforeach; ?>
-</div>
+  </div>
+<?php endforeach; ?>