From 53236fd13ccce916687c4109b3c990c410f89fc0 Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Sat, 1 Mar 2025 06:22:03 -0500
Subject: [PATCH] Improve EnvSource petition display and make Attribute
 Collector displays consistent (CFM-116) (#306)

* Improve EnvSource petition display and make Attribute Collector displays consistent (CFM-116)

* Improve EnvSource dispatch display (CFM-116)

* Sort the attributes within EnvSource dispatch display (CFM-116)
---
 .../cell/AttributeCollectors/display.php      |  5 +-
 .../cell/BasicAttributeCollectors/display.php |  2 +-
 .../EnvSourceCollectors/dispatch.inc          | 35 +++++++++-----
 .../cell/EnvSourceCollectors/display.php      | 46 ++++++++++++++++---
 app/webroot/css/co-base.css                   | 42 ++++++++++++++---
 app/webroot/css/co-responsive.css             | 16 ++++---
 6 files changed, 112 insertions(+), 34 deletions(-)

diff --git a/app/plugins/CoreEnroller/templates/cell/AttributeCollectors/display.php b/app/plugins/CoreEnroller/templates/cell/AttributeCollectors/display.php
index b59a82a41..b87c2618e 100644
--- a/app/plugins/CoreEnroller/templates/cell/AttributeCollectors/display.php
+++ b/app/plugins/CoreEnroller/templates/cell/AttributeCollectors/display.php
@@ -63,10 +63,9 @@
           ['controller' => \App\Lib\Util\StringUtilities::foreignKeyToController($attribute->attribute), 'action' => 'edit', $attr->value]);
       }
       ?>
-      <li class="petition-attr-<?= $this->Petition->getClassPostfixFromAttributeName($attribute->attribute) ?>">
+      <li class="petition-key-value petition-attr-<?= $this->Petition->getClassPostfixFromAttributeName($attribute->attribute) ?>">
         <h4 class="petition-attr-label"><?= $attribute->label ?></h4>
-        <div class="petition-attr-value"><?= $value ?>
-        </div>
+        <div class="petition-attr-value"><?= $value ?></div>
       </li>
     <?php else: ?>
       <li class="petition-attr-<?= $this->Petition->getClassPostfixFromAttributeName($attribute->attribute) ?>">
diff --git a/app/plugins/CoreEnroller/templates/cell/BasicAttributeCollectors/display.php b/app/plugins/CoreEnroller/templates/cell/BasicAttributeCollectors/display.php
index 88b9562f0..c43d1474a 100644
--- a/app/plugins/CoreEnroller/templates/cell/BasicAttributeCollectors/display.php
+++ b/app/plugins/CoreEnroller/templates/cell/BasicAttributeCollectors/display.php
@@ -58,7 +58,7 @@
       </li>
     </ul>
   </li>
-  <li class="petition-attr-email">
+  <li class="petition-key-value petition-attr-email">
     <h4 class="petition-attr-label">Email Address</h4>
     <div class="petition-attr-value"><?= $vv_petition_basic_attribute_set['mail'] ?? "" ?></div>
   </li>
diff --git a/app/plugins/EnvSource/templates/EnvSourceCollectors/dispatch.inc b/app/plugins/EnvSource/templates/EnvSourceCollectors/dispatch.inc
index 5630e4e17..ef474132b 100644
--- a/app/plugins/EnvSource/templates/EnvSourceCollectors/dispatch.inc
+++ b/app/plugins/EnvSource/templates/EnvSourceCollectors/dispatch.inc
@@ -31,16 +31,29 @@ declare(strict_types = 1);
 if($vv_action == 'dispatch') {
   // Make the Form fields editable
   $this->Field->enableFormEditMode();
-
+  ksort($vv_env_source_vars);
+  $previousKey = '';
   // Render the parsed variables
-
-  print "<p>" . __d('env_source', 'information.review') . "</p>";
-
-  print "<ul>";
-
-  foreach($vv_env_source_vars as $k => $v) {
-    print "<li>" . __d('env_source', 'field.EnvSources.'.$k) . ": " . $v . "</li>\n";
-  }
-
-  print "</ul>";
+?>  
+  <p><?= __d('env_source', 'information.review') ?> </p>
+  <ul>
+    <?php foreach($vv_env_source_vars as $k => $v): ?>
+      <?php
+        $liClass = 'petition-key-value';
+        if(substr($previousKey,0,7) != substr($k, 0, 7)) {
+          $liClass .= ' env-source-key-value-newgroup';
+        }
+      ?>
+      <li class="<?= $liClass ?>">
+        <div class="env-source-key">
+          <?= __d('env_source', 'field.EnvSources.'.$k) ?>
+        </div>
+        <div class="env-source-value">
+          <?= $v ?>
+        </div>
+      </li>
+      <?php $previousKey = $k ?>
+    <?php endforeach; ?>
+  </ul>
+<?php
 }
\ No newline at end of file
diff --git a/app/plugins/EnvSource/templates/cell/EnvSourceCollectors/display.php b/app/plugins/EnvSource/templates/cell/EnvSourceCollectors/display.php
index ffe95799e..93adc1276 100644
--- a/app/plugins/EnvSource/templates/cell/EnvSourceCollectors/display.php
+++ b/app/plugins/EnvSource/templates/cell/EnvSourceCollectors/display.php
@@ -34,14 +34,46 @@
   return;
 }
 
-$env_attributes = json_decode($vv_petition_env_identities->env_source_identity->env_attributes);
-
+$env_attributes = json_decode($vv_petition_env_identities->env_source_identity->env_attributes, true);
+ksort($env_attributes);
+$previousKey = '';
 ?>
 
-<ul>
-  <li>Env Source Identity ID: <?= $vv_petition_env_identities->env_source_identity->id ?></li>
-  <li>Source Key: <?= $vv_petition_env_identities->env_source_identity->source_key ?></li>
-  <?php foreach($env_attributes as $k => $v): ?>
-    <li><?= __d('env_source', 'field.EnvSources.'.$k) . ": " . $v ?></li>
+<ul class="env-source-attrs">
+  <li class="petition-key-value env-source-key-value-newgroup">
+    <div class="env-source-key">
+      Env Source Identity ID:
+    </div>
+    <div class="env-source-value">
+      <?= $vv_petition_env_identities->env_source_identity->id ?>
+    </div>
+  </li>
+  <li class="petition-key-value">
+    <div class="env-source-key">
+      Source Key: 
+    </div>
+    <div class="env-source-value">
+      <?= $vv_petition_env_identities->env_source_identity->source_key ?>
+    </div>
+  </li>
+  
+  <?php
+    foreach($env_attributes as $k => $v): 
+  ?>
+    <?php
+      $liClass = 'petition-key-value';
+      if(substr($previousKey,0,7) != substr($k, 0, 7)) {
+        $liClass .= ' env-source-key-value-newgroup';
+      }
+    ?>  
+    <li class="<?= $liClass ?>">
+      <div class="env-source-key">
+        <?= __d('env_source', 'field.EnvSources.'.$k) ?>
+      </div>
+      <div class="env-source-value">
+        <?= $v ?>
+      </div>
+    </li>
+    <?php $previousKey = $k ?>
   <?php endforeach ?>
 </ul>
\ No newline at end of file
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index e61a4ac33..49a321f74 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -1704,7 +1704,7 @@ table.duet-date__table tr th:first-child,
 table.duet-date__table tr td:first-child,
 table.duet-date__table th,
 table.duet-date__table td {
-  padding: unset;
+  padding: unset !important;
 }
 table.duet-date__table th.duet-date__table-header {
   padding: 8px;
@@ -1964,9 +1964,18 @@ body.start .submit {
 #dispatch-list-container > ul {
   border-top: none;
 }
+#dispatch-list-container ul {
+  padding-left: 0;
+}
 #dispatch-list-container li {
   border: none;
 }
+#dispatch-list-container li.petition-key-value {
+  padding: 0.5rem 0;
+}
+#dispatch-list-container li.env-source-key-value-newgroup {
+  border-top: 1px solid var(--cmg-color-bg-005);
+}
 #dispatch-list-container .field,
 #dispatch-list-container fieldset {
   display: block;
@@ -2116,6 +2125,15 @@ body.start .submit {
 ul#view_Petitions.form-list {
   border-top: none;
 }
+ul#view_Petitions.form-list li {
+  overflow-x: unset;
+}
+ul#view_Petitions.form-list li.history-table {
+  overflow-x: auto;
+}
+ul#view_Petitions ul li:focus-within {
+  background: unset;
+}
 ul.form-list li.petition-status-title {
   margin-top: 0.5rem;
   margin-bottom: -1rem;
@@ -2151,29 +2169,41 @@ ul.form-list li.petition-enrollee-items .petition-inline-value,
 ul.form-list li.petition-enrollee-items .petition-inline-value a {
   font-family: var(--cmg-font-semibold);
 }
+.env-source-key {
+  font-size: 0.9em;
+}
+ul#view_Petitions.form-list li.env-source-key-value-newgroup {
+  border-top: 1px solid var(--cmg-color-bg-005);
+}
 .petition-step-modified {
   margin-right: 1em;
 }
 .petition-attrs {
   padding: 0;
+  box-shadow: inset 0 0 0.5rem 0 rgba(0,0,0,0.1);
 }
 .petition-attrs h3 {
-  padding: 0.75em;
+  padding: 1rem 1rem 0;
   margin: 0;
   font-size: 1.2em;
-  background-color: var(--cmg-color-bg-002);
+  font-weight: 600;
+  border-top: 1px solid var(--cmg-color-bg-006);
 }
 .petition-attrs h4 {
+  font-size: 0.9em;
   margin: 0 0 0.25em;
 }
 .petition-attrs > ul {
-  padding: 0;
-  border: 0.75em solid var(--cmg-color-bg-002);
+  padding: 0 0 1rem;
   border-top: none;
 }
 .petition-attrs > ul > li {
-  padding: 0.75em;
+  padding: 0.5rem 1rem;
   border: none;
+  background-color: unset;
+}
+.petition-attrs > ul.env-source-attrs {
+  margin-top: 1rem;
 }
 ul.petition-attrs-subset {
   padding: 0;
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index a0f50a9dd..833a57d5a 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -100,13 +100,12 @@
   ul#view_Petitions.form-list .field {
     align-items: start;
   }
-  .petition-attrs h3 {
-    padding: 0.75em 1em 0;
-  }
   .petition-attrs > ul {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    border: 1em solid var(--cmg-color-bg-002);
+    columns: 2;
+    column-rule: 1px solid var(--cmg-color-bg-005);
+  }
+  .petition-attrs > ul > li {
+    break-inside: avoid;
   }
   /* PERSON CANVAS / CARDS */
   .co-cards .field-data-container {
@@ -648,6 +647,11 @@
     border: 1px solid var(--cmg-color-bg-006);
     border-radius: 1em;
   }
+  /* PETITIONS */
+  .petition-key-value {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
 /* EXTRA LARGE */