Reformat Petition Information view (CFM-31)

COmanage · Nov 5, 2024 · 14ad4fd · 14ad4fd
1 parent f81d8fe
commit 14ad4fd
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 40 deletions.
diff --git a/app/resources/locales/en_US/information.po b/app/resources/locales/en_US/information.po
@@ -108,6 +108,9 @@ msgstr "Additional History Records may be available via Petitions and Provisioni
 msgid "pagination.format"
 msgstr "Page {{page}} of {{pages}}, Viewing {{start}}-{{end}} of {{count}}"
 
+msgid "petition.history"
+msgstr "Petition History"
+
 msgid "petition.information"
 msgstr "Petition Information"
 

diff --git a/app/templates/Petitions/fields.inc b/app/templates/Petitions/fields.inc
@@ -50,34 +50,45 @@ $statusCssClass = 'petition-status-title petition-status-title-' . Inflector::da
     <?= __d('information', 'petition.information') ?>
   </h2>
 </li>
+<?php if(!empty($vv_obj?->enrollee_person?->id)): ?>
+  <li class="petition-enrollee-items">
+    <ul>
+      <li>
+        <?= __d('enumeration','EnrollmentActorEnum.E') ?>:
+        <?=
+          $this->Html->link(
+            $vv_obj->enrollee_person->primary_name->full_name ?? __d('field', 'Petitions.enrollee.new'),
+            [
+              'controller' => 'people',
+              'action' => 'edit',
+              $vv_obj->enrollee_person_id
+            ]
+          );
+        ?>
+      </li>
+      <?php if(!empty($vv_obj->enrollee_email)): ?>
+        <li>
+          <?= __d('field','email') ?>:
+          <?=
+            $this->Html->link(
+              $vv_obj->enrollee_email,
+              'mailto:' . $vv_obj->enrollee_email,
+              ['class' => 'nospin']
+            );
+          ?>
+        </li>
+      <?php endif; ?>
+      <?php if(!empty($vv_obj->enrollee_identifier)): ?>
+        <li>
+          <?= __d('field','identifier') ?>:
+          <?= $vv_obj->enrollee_identifier ?>
+        </li>
+      <?php endif; ?>
+    </ul>
+  </li>
+<?php endif; ?>
 
 <?php
-// Enrollee Email, if provided
-print $this->element('form/listItem', [
-  'arguments' => [
-    'fieldName' => 'enrollee_email',
-  ]
-]);  
-
-// Enrollee
-if (!empty($vv_obj?->enrollee_person?->id)) {
-  $enrolleeStatus = $vv_obj->enrollee_person->primary_name->full_name ?? __d('field', 'Petitions.enrollee.new');
-  $enrolleeLink = [
-    'url' => [
-      'controller' => 'people',
-      'action' => 'edit',
-      $vv_obj->enrollee_person_id
-    ]
-  ];
-  print $this->element('form/listItem', [
-    'arguments' => [
-      'fieldName' => 'enrollee_person_id',
-      'status' => $enrolleeStatus,
-      'link' => !empty($vv_obj->enrollee_person->id) ? $enrolleeLink : [],
-    ]
-  ]);
-}
-
 // Petitioner
 if (!empty($vv_obj?->petitioner_person?->id)) {
   $petitionerStatus = $vv_obj?->petitioner_person?->primary_name?->full_name ?? '';
@@ -99,6 +110,7 @@ if (!empty($vv_obj?->petitioner_person?->id)) {
 ?>
 
 <li>
+  <?php // Enrollment Flow name ?>
   <div class="field">
     <div class="field-name ">
       <div class="field-title">
@@ -120,26 +132,15 @@ if (!empty($vv_obj?->petitioner_person?->id)) {
   </div>
 </li>
 <li>
+  <?php // Petition dates. XXX The DOM structure is being overloaded here, which is probably ok. But revisit if needed ?> 
   <div class="field">
     <div class="field-name ">
       <div class="field-title">
-        <?= __d('field','created') ?>
+        <?= __d('field','created') ?>: <?= $vv_obj->created ?> 
       </div>
     </div>
     <div class="field-info">
-      <?= $vv_obj->created ?>
-    </div>
-  </div>
-</li>
-<li>
-  <div class="field">
-    <div class="field-name ">
-      <div class="field-title">
-        <?= __d('field','modified') ?>
-      </div>
-    </div>
-    <div class="field-info">
-      <?= $vv_obj->modified ?>
+      <?= __d('field','modified') ?>: <?= $vv_obj->modified ?> 
     </div>
   </div>
 </li>
@@ -181,3 +182,9 @@ if (!empty($vv_obj?->petitioner_person?->id)) {
     </div>
   </li>
 <?php endforeach; ?>
+
+<li class="form-list-header">
+  <h2>
+    <?= __d('information', 'petition.history') ?>
+  </h2>
+</li>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -1908,6 +1908,22 @@ ul.form-list li.petition-status-title-finalized h2 {
   color: var(--cmg-color-highlight-007);
   border: 1px solid var(--cmg-color-highlight-008);
 }
+ul.form-list li.petition-enrollee-items {
+  background-color: var(--cmg-color-highlight-004);
+  color: var(--cmg-color-highlight-005);
+  padding: 1rem;
+}
+ul.form-list li.petition-enrollee-items ul {
+  display: flex;
+  flex-direction: column; /* changes to 'row' on desktop */
+  gap: 1em;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+ul.form-list li.petition-enrollee-items li {
+  background-color: transparent;
+}
 /* GENERAL */
 .hidden,
 .invisible,

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -504,6 +504,11 @@
   #dispatch_AttributeCollectors .fields-telephone-number .fieldset-info .fieldset-field.field-type-number input {
     width: 24em;
   }
+  /* PETITIONS */
+  ul.form-list li.petition-enrollee-items ul {
+    flex-direction: row;
+    gap: 2em;
+  }
   /* FOOTER */
   #co-footer {
     position: static;