From 997a2070d803de9d034730ab3a4ebc207f1f2951 Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Thu, 23 Mar 2023 14:49:34 -0400
Subject: [PATCH] Update label handling to accommodate checkboxes and special
 fields that do not have visible input elements. (CFM-219) (#85)

* Update label handling to accommodate checkboxes and special fields that do not have input elements. (CFM-219)

* Change variable name for clarity (CFM-219)

* Post-rebase fix to correct labels for read-only fields - e.g. Jobs UI (CFM-219)
---
 app/src/View/Helper/FieldHelper.php | 45 ++++++++++++++++++++++-------
 app/templates/ApiUsers/fields.inc   |  9 ++++--
 app/templates/element/menuTop.php   |  2 +-
 app/webroot/css/co-base.css         | 17 ++---------
 4 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
index e965e048d..f7f14fa0c 100644
--- a/app/src/View/Helper/FieldHelper.php
+++ b/app/src/View/Helper/FieldHelper.php
@@ -99,10 +99,17 @@ public function control(string $fieldName,
     
     // Specify a class on the <li> form control wrapper
     $liClass = $cssClass;
+  
+    // Get the field type from the map of fields (e.g. 'boolean', 'string', 'timestamp')
+    $fieldMap = $this->getView()->get('vv_field_types');
+    $fieldType = $fieldMap[$fieldName];
     
     // Collect any supplemental markup and/or JavaScript to pass along for field construction.
     // Suppliment is an array: supplement['beforeField' => 'string', 'afterField' => 'string'].
     $fieldSupplement = !empty($config['supplement']) ? $config['supplement'] : [];
+  
+    // For special fields that should not include <label> markup, allow fields to make the label text only
+    $labelIsTextOnly = !empty($config['labelIsTextOnly']) ? $config['labelIsTextOnly'] : false;
 
     // Remove prefix from field value
     if(isset($config['prefix'], $this->getView()->get('vv_obj')->$fieldName)) {
@@ -121,6 +128,13 @@ public function control(string $fieldName,
       // Note this will be ignored for non-select controls.
       $coptions['empty'] = true;
     }
+  
+    // A boolean field is a checkbox. Set the label and class to improve rendering
+    // and accessibility.
+    if($fieldType == 'boolean') {
+      $coptions['label'] = $labelText;
+      $coptions['class'] = 'form-check-input';
+    }
     
     // Generate the form control or pass along the markup generated in a wrapper function
     $controlCode = empty($ctrlCode) ? $this->Form->control($fieldName, $coptions) : $ctrlCode;
@@ -156,7 +170,7 @@ public function control(string $fieldName,
     }
     
     return $this->startLine($liClass)
-           . $this->formNameDiv($fieldName, $labelText)
+           . $this->formNameDiv($fieldName, $labelText, $fieldType, $labelIsTextOnly)
            . ( !empty($config['prefix']) ?
                  $this->formInfoWithPrefixDiv($controlCode, $config['prefix'], $fieldSupplement) :
                  $this->formInfoDiv($controlCode, $fieldSupplement) )
@@ -275,8 +289,9 @@ protected function endLine(): string {
    * Generate a form info (control, value) box.
    *
    * @since  COmanage Registry v5.0.0
-   * @param  string  $content Content HTML
-   * @return string           Form Info HTML
+   * @param  string  $content    Content HTML
+   * @param  string  $supplement Supplemental markup to place before and/or after the field control 
+   * @return string              Form Info HTML
    */
   
   protected function formInfoDiv(string $content, array $supplement): string {
@@ -297,9 +312,10 @@ protected function formInfoDiv(string $content, array $supplement): string {
    * Generate a form info (control, value) box with a non editable prefix.
    *
    * @since  COmanage Registry v5.0.0
-   * @param  string  $content Content HTML
-   * @param  string  $prefix  Prefix value
-   * @return string           Form Info HTML
+   * @param  string  $content    Content HTML
+   * @param  string  $prefix     Prefix value
+   * @param  string  $supplement Supplemental markup to place before and/or after the field control
+   * @return string              Form Info HTML
    */
 
   protected function formInfoWithPrefixDiv(string $context, string $prefix, array $supplement): string {
@@ -327,10 +343,12 @@ protected function formInfoWithPrefixDiv(string $context, string $prefix, array
    * @since  COmanage Registry v5.0.0
    * @param  string  $fieldName Form field
    * @param  string  $labelText Label text (fieldName language key used by default)
+   * @param  string  $fieldType Type of field (string, boolean, timestamp, etc)
+   * @param  boolean $labelIsTextOnly True if label should be text only. Otherwise false.
    * @return string             Form Name HTML
    */
   
-  protected function formNameDiv(string $fieldName, string $labelText=null): string {
+  protected function formNameDiv(string $fieldName, string $labelText=null, string $fieldType, bool $labelIsTextOnly=false): string {
     $label = $labelText;
     $desc = null;
     
@@ -390,7 +408,9 @@ protected function formNameDiv(string $fieldName, string $labelText=null): strin
     
     return '<div class="field-name">
       <div class="field-title">'
-      . $this->Form->label($fn, $label)
+      . (!($labelIsTextOnly) && ($fieldType != 'boolean')
+         ? $this->Form->label($fn, $label)
+         : $label) 
       . ($this->editable
            && in_array($fn, $this->reqFields)
          ? ' <span class="required">*</span>' 
@@ -408,13 +428,15 @@ protected function formNameDiv(string $fieldName, string $labelText=null): strin
    * @param  string  $status    Status text
    * @param  array   $link      Link information, including 'url', 'label', 'class', 'confirm'
    * @param  string  $labelText Label text (fieldName language key used by default)
+   * @param  array   $config    Custom FormHelper configuration options
    * @return string
    */
   
   public function statusControl(string $fieldName, 
                                 string $status, 
                                 array $link=[], 
-                                string $labelText=null): string {
+                                string $labelText=null,
+                                array $config=[]): string {
     $linkHtml = $status;
     
     if($link) {
@@ -439,9 +461,12 @@ public function statusControl(string $fieldName,
         );
       }
     }
+  
+    // For special fields that should not include <label> markup, allow fields to make the label text only
+    $labelIsTextOnly = !empty($config['labelIsTextOnly']) ? $config['labelIsTextOnly'] : false;
      
     return $this->startLine()
-           . $this->formNameDiv($fieldName, $labelText)
+           . $this->formNameDiv($fieldName, $labelText, 'string', $labelIsTextOnly)
            . $linkHtml
            . $this->endLine();
   }
diff --git a/app/templates/ApiUsers/fields.inc b/app/templates/ApiUsers/fields.inc
index 80c0c0e00..065255c24 100644
--- a/app/templates/ApiUsers/fields.inc
+++ b/app/templates/ApiUsers/fields.inc
@@ -36,6 +36,7 @@ if($vv_action == 'add' || $vv_action == 'edit') {
   
   // We link to the "Generate" button on edit only
   $generateLink = [];
+  $config = [];
   
   if(!empty($vv_obj->id)) {
     $generateLink = [
@@ -45,14 +46,18 @@ if($vv_action == 'add' || $vv_action == 'edit') {
         $vv_obj->id
       ],
      'label' => __d('operation', 'api.key.generate'),
-     'class' => 'provisionbutton',
+     'class' => 'provisionbutton nospin',
      'confirm' => __d('operation', 'api.key.generate.confirm')
     ];
+    
+    $config = ['labelIsTextOnly' => true];
   }
   
   print $this->Field->statusControl('api_key',
                                     !empty($vv_obj->api_key) ? __d('enumeration', 'SetBooleanEnum.1') : __d('enumeration', 'SetBooleanEnum.0'),
-                                    $generateLink);
+                                    $generateLink,
+                                    null,
+                                    $config);
   
   print $this->Field->control('status', ['empty' => false]);
   
diff --git a/app/templates/element/menuTop.php b/app/templates/element/menuTop.php
index f41801964..4c797ecb2 100644
--- a/app/templates/element/menuTop.php
+++ b/app/templates/element/menuTop.php
@@ -86,7 +86,7 @@
                                'action'     => 'select',
                                'plugin'     => false],
                               ['escape'     => false,
-                               'id'         => 'login',
+                               'id'         => 'login-button',
                                'class'      => 'btn btn-small']);
     }
   ?>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 910eae59b..781e92ac3 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -331,7 +331,7 @@ body.cos.select #top-bar {
   margin: 0 0 0.25rem;
 }
 /* LOGIN & LOGOUT */
-#login {
+#login-button {
   display: inline-block;
   padding: 0.25em 1em;
   text-decoration: none;
@@ -1178,19 +1178,8 @@ ul.form-list li.field-stack textarea {
 ul.form-list .field-suppliment {
   font-size: 0.9em;
 }
-.checkbox {
-  margin-bottom: 0.5em;
-}
-.checkbox input {
-  float: left;
-  margin: 4px 4px 0 0;
-}
-.checkbox label {
-  margin-left: 1.5em;
-  display: block;
-}
-.checkbox label::first-line {
-  margin-left: 0;
+.checkbox label input {
+  margin-right: 0.5em;
 }
 .checkbox .subfield {
   margin-left: 1.5em;