Provide an inline Jobs json formatter. (CFM-252) (#83)

* Allow for supplemental markup and/or JavaScript on a per-field basis. (CFM-252) * Shrink the size of field supplement markup slightly. (CFM-252) * Break field supplement into a two-part array "beforeField" and "afterField" (CFM-252)
COmanage · Mar 22, 2023 · c048c8b · c048c8b
1 parent e4138f3
commit c048c8b
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 16 deletions.
diff --git a/app/resources/locales/en_US/field.po b/app/resources/locales/en_US/field.po
@@ -312,6 +312,9 @@ msgstr "Limit Global Search Scope"
 msgid "CoSettings.search_global_limited_models.desc"
 msgstr "If true, Global Search will only search Names, Email Addresses, and Identifiers. This may result in faster searches for larger deployments."
 
+msgid "format"
+msgstr "format"
+
 msgid "GroupMembers.source"
 msgstr "Membership Source"
 

diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
@@ -99,6 +99,10 @@ public function control(string $fieldName,
 
     // Specify a class on the <li> form control wrapper
     $liClass = $cssClass;
+
+    // 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'] : [];
 
     // Remove prefix from field value
     if(isset($config['prefix'], $this->getView()->get('vv_obj')->$fieldName)) {
@@ -154,8 +158,8 @@ public function control(string $fieldName,
     return $this->startLine($liClass)
            . $this->formNameDiv($fieldName, $labelText)
            . ( !empty($config['prefix']) ?
-                 $this->formInfoWithPrefixDiv($controlCode, $config['prefix']) :
-                 $this->formInfoDiv($controlCode) )
+                 $this->formInfoWithPrefixDiv($controlCode, $config['prefix'], $fieldSupplement) :
+                 $this->formInfoDiv($controlCode, $fieldSupplement) )
            . $this->endLine();
   }
 
@@ -275,10 +279,18 @@ protected function endLine(): string {
    * @return string           Form Info HTML
    */
 
-  protected function formInfoDiv(string $content): string {
-    return '<div class="field-info">
-      ' . $content . '
-    </div>';
+  protected function formInfoDiv(string $content, array $supplement): string {
+    $div  = '<div class="field-info">' . PHP_EOL;
+    if(!empty($supplement['beforeField'])) {
+      $div .= $supplement['beforeField'] . PHP_EOL;
+    }
+    $div .= $content . PHP_EOL;
+    if(!empty($supplement['afterField'])) {
+      $div .= $supplement['afterField'] . PHP_EOL;  
+    }
+    $div .= '</div>' . PHP_EOL;
+
+    return $div;
   }
 
   /**
@@ -290,14 +302,21 @@ protected function formInfoDiv(string $content): string {
    * @return string           Form Info HTML
    */
 
-  protected function formInfoWithPrefixDiv(string $context, string $prefix): string {
-    $div =  '<div class="field-info">' . PHP_EOL
-      . '<div class="input-group mb-3">' . PHP_EOL
-      . '<div class="input-group-prepend">' . PHP_EOL
-      . '<span class="input-group-text" id="basic-addon3">' . $prefix . '</span>'
-      . '</div>' . PHP_EOL
-      . $context
-      . '</div></div>';
+  protected function formInfoWithPrefixDiv(string $context, string $prefix, array $supplement): string {
+    $div  = '<div class="field-info">' . PHP_EOL;
+    if(!empty($supplement['beforeField'])) {
+      $div .= $supplement['beforeField'] . PHP_EOL;
+    }
+    $div .= '<div class="input-group mb-3">' . PHP_EOL;
+    $div .= '<div class="input-group-prepend">' . PHP_EOL;
+    $div .= '<span class="input-group-text" id="basic-addon3">' . $prefix . '</span>';
+    $div .= '</div>' . PHP_EOL;
+    $div .= $context;
+    $div .= '</div>';
+    if(!empty($supplement['afterField'])) {
+      $div .= $supplement['afterField'] . PHP_EOL;
+    }
+    $div .= '</div>';
 
     return $div;
   }

diff --git a/app/templates/Jobs/fields.inc b/app/templates/Jobs/fields.inc
@@ -37,8 +37,37 @@ if($vv_action == 'view') {
       status: (string)$vv_obj->percent_complete
     );
   }
-
-  print $this->Field->control('parameters');
+
+  $fieldSupplement = 
+    [
+      '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->Field->control('parameters', [], null, ['supplement' => $fieldSupplement]);
 
   print $this->Field->control('register_time');
 

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -1175,6 +1175,9 @@ ul.form-list li.field-stack textarea {
   width: 100%;
   resize: vertical;
 }
+ul.form-list .field-suppliment {
+  font-size: 0.9em;
+}
 .checkbox {
   margin-bottom: 0.5em;
 }