From 26c703478ea4cad5f6459db9afb9550b9e110789 Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Thu, 30 Apr 2026 07:55:28 -0400 Subject: [PATCH 1/6] Improve petition layout and styling (CFM-422) --- app/templates/Petitions/petition.inc | 352 ++++++++++++--------------- app/templates/element/javascript.php | 8 +- app/webroot/css/co-base.css | 39 ++- app/webroot/css/co-color.css | 5 +- app/webroot/css/co-responsive.css | 6 +- 5 files changed, 194 insertions(+), 216 deletions(-) diff --git a/app/templates/Petitions/petition.inc b/app/templates/Petitions/petition.inc index 6e37a7f06..d24bcda04 100644 --- a/app/templates/Petitions/petition.inc +++ b/app/templates/Petitions/petition.inc @@ -52,214 +52,115 @@ $statusCssClass = 'petition-status-title petition-status-title-' . Inflector::da -enrollee_person?->id)): ?> -
  • -
    -
    -
    -
    - - : - - - Html->link( - $vv_obj->enrollee_person->primary_name->full_name ?? __d('field', 'Petitions.enrollee.new'), - [ - 'controller' => 'people', - 'action' => 'edit', - $vv_obj->enrollee_person_id - ] - ); - ?> - -
    -
    -
    -
    - enrollee_email)): ?> -
    - - : - - - Html->link( - $vv_obj->enrollee_email, - 'mailto:' . $vv_obj->enrollee_email, - ['class' => 'nospin'] - ); - ?> - -
    - - enrollee_identifier)): ?> -
    - - : - - - enrollee_identifier ?> - -
    - +
  • +
    +
    +
    +
    -
    • - -
    -
    -
    - -
    -
    -
    - Html->link( - $vv_obj->enrollee_person->primary_name->full_name ?? __d('field', 'Petitions.enrollee.new'), - [ - 'controller' => 'people', - 'action' => 'edit', - $vv_obj->enrollee_person_id - ] - ); - ?> -
    +
    +
    - - enrollee_email)): ?> -
  • -
    -
    -
    - -
    -
    -
    - Html->link( - $vv_obj->enrollee_email, - 'mailto:' . $vv_obj->enrollee_email, - ['class' => 'nospin'] - ); - ?> -
    -
    -
    • - - enrollee_identifier)): ?> -
  • -
    -
    -
    - -
    -
    -
    - enrollee_identifier ?> -
    -
    -
    • - - */ ?> - - -petitioner_person?->id)) { - $petitionerStatus = $vv_obj?->petitioner_person?->primary_name?->full_name ?? ''; - $petitionerLink = [ - 'url' => [ - 'controller' => 'people', - 'action' => 'edit', - $vv_obj->petitioner_person->id - ] - ]; - print $this->element('form/listItem', [ - 'arguments' => [ - 'fieldName' => 'petitioner_person_id', - 'status' => $petitionerStatus, - 'link' => !empty($vv_obj->petitioner_person->id) ? $petitionerLink : [] - ] - ]); -} -?> - -
  • - +
    • + +
  • +
    - +
    - enrollee_email)): ?> + Html->link( - $vv_obj->enrollment_flow->name, - [ - 'controller' => 'enrollment_flows', - 'action' => 'edit', - $vv_obj->enrollment_flow->id - ] - ) + $vv_obj->enrollee_email, + 'mailto:' . $vv_obj->enrollee_email, + ['class' => 'nospin'] + ); ?> +
    • -
  • - +
  • - +
    - + enrollee_identifier ?>
    • +petitioner_person?->id)) { + $petitionerStatus = $vv_obj?->petitioner_person?->primary_name?->full_name ?? ''; + $petitionerLink = [ + 'url' => [ + 'controller' => 'people', + 'action' => 'edit', + $vv_obj->petitioner_person->id + ] + ]; + print $this->element('form/listItem', [ + 'arguments' => [ + 'fieldName' => 'petitioner_person_id', + 'status' => $petitionerStatus, + 'link' => !empty($vv_obj->petitioner_person->id) ? $petitionerLink : [] + ] + ]); + } +?>
  • - +
    - +
    - enrollee_email ?> + Html->link( + $vv_obj->enrollment_flow->name, + [ + 'controller' => 'enrollment_flows', + 'action' => 'edit', + $vv_obj->enrollment_flow->id + ] + ) + ?>
    • -
  • - + +
  • - +
    - enrollee_identifier ?> + Time->nice($vv_obj->created, $vv_tz) ?>
  • -
    - : Time->nice($vv_obj->created, $vv_tz) ?> +
    - : Time->nice($vv_obj->modified, $vv_tz) ?> + Time->nice($vv_obj->modified, $vv_tz) ?>
    • @@ -275,7 +176,7 @@ if (!empty($vv_obj?->petitioner_person?->id)) { $stepIds .= 'collapse-box-' . $step->id . ' '; } ?> - - - + enrollment_flow->enrollment_flow_steps as $step): ?> petition_step_results, "{n}[enrollment_flow_step_id=$step->id]"); ?> -
  • -
    -
    -
    - description ?> -
    -
    -
    -
    - comment : '' ?> -
    -
    - - Time->nice($result[0]->modified, $vv_tz) : '' ?> - - -
    + +
  • +
    +

    description ?>

    +
    +
    -
    -

    plugin ?>

    - cell($step->plugin, [$vv_obj->id], ['vv_obj' => $vv_obj, 'vv_step' => $step, 'viewVars' => $this->viewVars]) ?> +
    +
      +
    • +
      +
      +
      + +
      +
      +
      + plugin ?> +
      +
      +
      • + modified)): ?> +
    • +
      +
      +
      + +
      +
      +
      + Time->nice($result[0]->modified, $vv_tz) ?> +
      +
      +
      • + + comment)): ?> +
    • +
      +
      +
      + +
      +
      +
      + comment : '' ?> +
      +
      +
      • + +
    + cell($step->plugin, [$vv_obj->id], ['vv_obj' => $vv_obj, 'vv_step' => $step, 'viewVars' => $this->viewVars])); + ?> + +
    + +
    + +
    • @@ -386,4 +328,28 @@ if (!empty($vv_obj?->petitioner_person?->id)) { - \ No newline at end of file + + + \ No newline at end of file diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php index 408305896..fa80a4b2d 100644 --- a/app/templates/element/javascript.php +++ b/app/templates/element/javascript.php @@ -223,18 +223,12 @@ // We allow Bootstrap to manage the accordion behavior, but we must set the state of our arrows. $('.field-with-toggle').click(function() { let toggleButton = $(this).find('button.cm-toggle').first(); - if($(toggleButton).attr('aria-expanded') == 'false') { + if($(toggleButton).attr('aria-expanded') === 'false') { $(toggleButton).find('em').text("arrow_drop_down"); } else { $(toggleButton).find('em').text("arrow_drop_up"); } }); - - // Toggle All button for Enrollment Flow Steps - // We click all the fields that have an associated accordion just to set the arrow state. - $('button.enrollment-steps-toggle-all-button').click(function() { - $('#view_Petitions').find('.field-with-toggle').trigger('click'); - }); // Make all submit buttons pretty (Bootstrap) $("input:submit").addClass("spin submit-button btn btn-primary"); diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index 40e6d9b4d..e43da5c6f 100644 --- a/app/webroot/css/co-base.css +++ b/app/webroot/css/co-base.css @@ -2305,33 +2305,53 @@ ul.form-list li.petition-enrollee-items .petition-inline-value a { .env-source-value { word-break: break-all; } +ul#view_Petitions.form-list .field:hover { + background-color: unset; +} ul#view_Petitions.form-list li.env-source-key-value-newgroup { border-top: 1px solid var(--cmg-color-bg-005); } +ul#view_Petitions.form-list .field.petition-step.field-with-toggle { + display: flex; + justify-content: space-between; + background-color: var(--cmg-color-bg-003); + border-bottom: 1px solid var(--cmg-color-bg-006); + border-left: 1px solid var(--cmg-color-bg-006); + border-right: 1px solid var(--cmg-color-bg-006); +} .petition-step-modified { margin-right: 1em; } -.petition-attrs { - padding: 0; - box-shadow: inset 0 0 0.5rem 0 rgba(0,0,0,0.1); +h3.petition-step-description { + font-size: 1.1rem; + margin: 0; + line-height: unset; } -.petition-attrs h3 { +.petition-step-plugin-title { padding: 1rem 1rem 0; margin: 0; - font-size: 1.2em; - font-weight: 600; - border-top: 1px solid var(--cmg-color-bg-006); + font-size: 0.9rem; + font-weight: 300; + font-style: italic; +} +ul.petiton-step-plugin-meta { + padding-left: 0; +} +.petition-attrs { + padding: 0; + border: 1px solid var(--cmg-color-bg-005); + font-style: italic; } .petition-attrs h4 { font-size: 0.9em; margin: 0 0 0.25em; } .petition-attrs > ul { - padding: 0 0 1rem; + padding: 0; border-top: none; } .petition-attrs > ul > li { - padding: 0.5rem 1rem; + padding: 0.5em 1em; border: none; background-color: unset; } @@ -2340,6 +2360,7 @@ ul#view_Petitions.form-list li.env-source-key-value-newgroup { } ul.petition-attrs-subset { padding: 0; + margin-bottom: 0.5rem; border: 1px solid var(--cmg-color-bg-005); border-top: none; } diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css index 09e5131ce..bffbe00e5 100644 --- a/app/webroot/css/co-color.css +++ b/app/webroot/css/co-color.css @@ -89,6 +89,7 @@ --cmg-color-highlight-017: #cee6f8; /* alert: info border color (blue) */ --cmg-color-highlight-018: yellow; /* autocomplete highlight for query text */ + --cmg-color-highlight-019: #bfd5e6; /* blue border for highlight-004 */ --cmg-color-shadow-01: 0px 0px 2px 0px rgba(13,69,115,0.6); /* RGBA box-shadow color based on --cmg-color-btn-bg-001 */ @@ -167,11 +168,11 @@ html.dark-mode { --cmg-color-highlight-012: #d9b4b4; /* alert: danger (red) */ --cmg-color-highlight-013: #e33; /* title for deleted/archived (red) */ - --cmg-color-highlight-014: #900; /* danger badge (red) */ + --cmg-color-highlight-014: #900; /* danger badge (red) */ --cmg-color-highlight-015: #842029; /* alert: danger text color (red) */ --cmg-color-highlight-016: #d9b4b4; /* alert: danger border color (red) */ - --cmg-color-highlight-017: #333; /* alert: info border color (blue) */ + --cmg-color-highlight-017: #333; /* alert: info border color (blue) */ --cmg-color-highlight-018: #cc0; /* autocomplete highlight for query text */ --cmg-color-shadow-01: 0px 0px 2px 0px rgba(13,69,115,0.8); /* RGBA box-shadow color based on --cmg-color-btn-bg-001 */ diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css index 2615f1e4d..05188fc9e 100644 --- a/app/webroot/css/co-responsive.css +++ b/app/webroot/css/co-responsive.css @@ -109,6 +109,7 @@ } .petition-attrs > ul > li { break-inside: avoid; + padding: 0.75em 1.5em; } /* PERSON CANVAS / CARDS */ .co-cards .field-data-container { @@ -680,11 +681,6 @@ border: 1px solid var(--cmg-color-bg-006); border-radius: 1em; } - /* PETITIONS */ - .petition-key-value { - display: grid; - grid-template-columns: 1fr 1fr; - } } /* EXTRA LARGE */ From 410199be406c2cf98436735b8aad9e5c2af0144e Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Thu, 30 Apr 2026 13:30:53 -0400 Subject: [PATCH 2/6] Improve Approval enrollment step view, including display of petition (CFM-337) --- .../ApprovalCollectorsController.php | 14 + .../src/View/Cell/AttributeCollectorsCell.php | 2 +- .../templates/ApprovalCollectors/dispatch.inc | 75 +++-- app/templates/Petitions/petition.inc | 286 ++++++++++-------- app/templates/element/flash.php | 40 +-- app/templates/element/form/nameDiv.php | 6 + app/webroot/css/co-base.css | 60 +++- app/webroot/css/co-responsive.css | 14 +- 8 files changed, 312 insertions(+), 185 deletions(-) diff --git a/app/plugins/CoreEnroller/src/Controller/ApprovalCollectorsController.php b/app/plugins/CoreEnroller/src/Controller/ApprovalCollectorsController.php index cda414ae2..3342dba48 100644 --- a/app/plugins/CoreEnroller/src/Controller/ApprovalCollectorsController.php +++ b/app/plugins/CoreEnroller/src/Controller/ApprovalCollectorsController.php @@ -55,6 +55,20 @@ public function dispatch(string $id) { $petition = $this->getPetition(); $coId = $this->getCOID(); + + // We need the petition to have more information in the approval view, so + // build a view variable that holds more than vv_petition. + $Petition = TableRegistry::getTableLocator()->get('Petitions'); + if(!empty($petition->id)) { + $query = $Petition->findById($petition->id); + $query = $query->contain($Petition->getViewContains()); + $this->set( + 'vv_approval_petition', + $query->firstOrFail() + ); + } else { + $this->set('vv_approval_petition', null); + } if($request->is('post')) { $cfg = $this->ApprovalCollectors->get($id); diff --git a/app/plugins/CoreEnroller/src/View/Cell/AttributeCollectorsCell.php b/app/plugins/CoreEnroller/src/View/Cell/AttributeCollectorsCell.php index 87665564a..0c7d3ed51 100644 --- a/app/plugins/CoreEnroller/src/View/Cell/AttributeCollectorsCell.php +++ b/app/plugins/CoreEnroller/src/View/Cell/AttributeCollectorsCell.php @@ -88,7 +88,7 @@ public function initialize(): void */ public function display(int $petitionId): void { - $vv_enrollment_atttributes_ids = Hash::extract($this->vv_obj->petition_attributes, '{n}.enrollment_attribute_id'); + $vv_enrollment_atttributes_ids = Hash::extract($this->vv_obj->petition_attributes ?? [], '{n}.enrollment_attribute_id'); $vv_enrollment_atttributes_ids = array_unique($vv_enrollment_atttributes_ids); $vv_enrollment_attributes = []; diff --git a/app/plugins/CoreEnroller/templates/ApprovalCollectors/dispatch.inc b/app/plugins/CoreEnroller/templates/ApprovalCollectors/dispatch.inc index bf30ecb1c..4eefa1eae 100644 --- a/app/plugins/CoreEnroller/templates/ApprovalCollectors/dispatch.inc +++ b/app/plugins/CoreEnroller/templates/ApprovalCollectors/dispatch.inc @@ -29,44 +29,75 @@ declare(strict_types = 1); use \App\Lib\Enum\PetitionStatusEnum; -print $this->element('flash', []); - // Make the Form fields editable $this->Field->enableFormEditMode(); ?> -

    id]); ?>

    - -

    Html->link(__d('operation', 'view'), ['plugin' => null, 'controller' => 'petitions', 'action' => 'view', $vv_petition->id]); ?>

    +
  • + + Html->link( + 'open_in_new ' . + __d('operation', 'view.Petitions.a',[$vv_petition->id]), + [ + 'plugin' => null, + 'controller' => 'petitions', + 'action' => 'view', + $vv_petition->id + ], + [ + 'id' => 'view-petition-button', + 'class' => 'btn btn-sm btn-primary', + 'target' => 'co-petition-window', + 'escape' => false + ]); + ?> + +
    + +
    +
    • Form->create(null, [ - 'id' => 'approval-form', - 'type' => 'post' - ]); - - print $this->Form->radio( - 'approved', - [ - PetitionStatusEnum::Approved => __d('enumeration', 'PetitionStatusEnum.'.PetitionStatusEnum::Approved), - PetitionStatusEnum::Denied => __d('enumeration', 'PetitionStatusEnum.'.PetitionStatusEnum::Denied) - ], - [ + print $this->element('CoreEnroller.listItem', [ + 'arguments' => [ + 'fieldName' => 'approved', + 'fieldLabel' => __d('core_enroller', 'information.ApprovalCollectors.review', [$vv_petition->id]), + 'fieldOptions' => [ + 'type' => 'radio', + 'options' => [ + PetitionStatusEnum::Approved => __d('enumeration', 'PetitionStatusEnum.'.PetitionStatusEnum::Approved), + PetitionStatusEnum::Denied => __d('enumeration', 'PetitionStatusEnum.'.PetitionStatusEnum::Denied) + ], 'value' => !empty($petition_approvals) ? ($petition_approvals['approved'] === true ? PetitionStatusEnum::Approved : ($petition_approvals['approved'] === false ? PetitionStatusEnum::Denied : "")) - : "" + : "", + 'empty' => false, + 'required' => true, + 'class' => 'form-check-input' ] - ); + ]]); print $this->element('CoreEnroller.listItem', [ 'arguments' => [ 'fieldName' => 'comment', 'fieldOptions' => [ - 'default' => $petition_approvals['comment'] ?? "" - ] + 'default' => $petition_approvals['comment'] ?? "", + 'required' => $vv_step_config['require_comment'] ?? false + ], ]]); +?> + + diff --git a/app/templates/Petitions/petition.inc b/app/templates/Petitions/petition.inc index d24bcda04..26df2d605 100644 --- a/app/templates/Petitions/petition.inc +++ b/app/templates/Petitions/petition.inc @@ -31,12 +31,20 @@ use \Cake\Utility\Hash; use Cake\Utility\Inflector; // Petitions are read-only, though they can link to other actions -if ($vv_action !== 'view') { +if($vv_action !== 'view' && $vv_action !== 'dispatch') { return; } +$petitionObj = null; +if($vv_action == 'view') { + $petitionObj = $vv_obj; +} else { + // we are calling this file from approver dispatch + $petitionObj = $vv_approval_petition; +} + // Start with the petition metadata -$statusTitle = __d('enumeration','PetitionStatusEnum.' . $vv_obj->status); +$statusTitle = __d('enumeration','PetitionStatusEnum.' . $petitionObj->status); $statusCssClass = 'petition-status-title petition-status-title-' . Inflector::dasherize($statusTitle); ?> @@ -47,7 +55,7 @@ $statusCssClass = 'petition-status-title petition-status-title-' . Inflector::da -
  • +

  • @@ -73,11 +81,11 @@ $statusCssClass = 'petition-status-title petition-status-title-' . Inflector::da
    - enrollee_email)): ?> + enrollee_email)): ?> Html->link( - $vv_obj->enrollee_email, - 'mailto:' . $vv_obj->enrollee_email, + $petitionObj->enrollee_email, + 'mailto:' . $petitionObj->enrollee_email, ['class' => 'nospin'] ); ?> @@ -93,32 +101,37 @@ $statusCssClass = 'petition-status-title petition-status-title-' . Inflector::da
    - enrollee_identifier ?> + enrollee_identifier ?>
    • petitioner_person?->id)) { - $petitionerStatus = $vv_obj?->petitioner_person?->primary_name?->full_name ?? ''; + if (!empty($petitionObj?->petitioner_person?->id)) { + $petitionerStatus = $petitionObj?->petitioner_person?->primary_name?->full_name ?? ''; $petitionerLink = [ 'url' => [ 'controller' => 'people', 'action' => 'edit', - $vv_obj->petitioner_person->id + $petitionObj->petitioner_person->id ] ]; print $this->element('form/listItem', [ 'arguments' => [ + 'fieldLabel' => __d('field','Petitions.petitioner_person_id'), 'fieldName' => 'petitioner_person_id', 'status' => $petitionerStatus, - 'link' => !empty($vv_obj->petitioner_person->id) ? $petitionerLink : [] + 'link' => !empty($petitionObj->petitioner_person->id) ? $petitionerLink : [] ] ]); } ?> + + +
  • -
    @@ -128,17 +141,19 @@ $statusCssClass = 'petition-status-title petition-status-title-' . Inflector::da
    Html->link( - $vv_obj->enrollment_flow->name, + $petitionObj->enrollment_flow->name, [ 'controller' => 'enrollment_flows', 'action' => 'edit', - $vv_obj->enrollment_flow->id + $petitionObj->enrollment_flow->id ] ) ?>
    • + +
  • @@ -148,7 +163,7 @@ $statusCssClass = 'petition-status-title petition-status-title-' . Inflector::da
    - Time->nice($vv_obj->created, $vv_tz) ?> + Time->nice($petitionObj->created, $vv_tz) ?>
    • @@ -160,7 +175,7 @@ $statusCssClass = 'petition-status-title petition-status-title-' . Inflector::da
    - Time->nice($vv_obj->modified, $vv_tz) ?> + Time->nice($petitionObj->modified, $vv_tz) ?>
    @@ -172,7 +187,7 @@ $statusCssClass = 'petition-status-title petition-status-title-' . Inflector::da
    enrollment_flow->enrollment_flow_steps as $step) { + foreach($petitionObj->enrollment_flow->enrollment_flow_steps as $step) { $stepIds .= 'collapse-box-' . $step->id . ' '; } ?> @@ -191,143 +206,148 @@ $statusCssClass = 'petition-status-title petition-status-title-' . Inflector::da
    -enrollment_flow->enrollment_flow_steps as $step): ?> - petition_step_results, "{n}[enrollment_flow_step_id=$step->id]"); ?> - -
  • -
    -

    description ?>

    -
    - +enrollment_flow->enrollment_flow_steps as $step): ?> + + = (int)$vv_step_config['enrollment_flow_step']['ordr'])): ?> + petition_step_results, "{n}[enrollment_flow_step_id=$step->id]"); ?> + +
  • +
    +

    description ?>

    +
    + +
    - -
    -
      -
    • -
      -
      -
      - -
      -
      -
      - plugin ?> -
      -
      -
      • - modified)): ?> +
      +
      • - +
        - Time->nice($result[0]->modified, $vv_tz) ?> + plugin ?>
        • - - comment)): ?> -
      • -
        -
        -
        - + modified)): ?> +
      • +
        +
        +
        + +
        +
        +
        + Time->nice($result[0]->modified, $vv_tz) ?>
        -
        - comment : '' ?> +
        • + + comment)): ?> +
      • +
        +
        +
        + +
        +
        +
        + comment : '' ?> +
        -
      - + + +
    + cell($step->plugin, [$petitionObj->id], ['vv_obj' => $petitionObj, 'vv_step' => $step, 'viewVars' => $this->viewVars])); + ?> + +
    + +
    - - cell($step->plugin, [$vv_obj->id], ['vv_obj' => $vv_obj, 'vv_step' => $step, 'viewVars' => $this->viewVars])); - ?> - -
    - -
    - - -
    -
    • + + + + -petition_history_records)): - // XXX Generalize this into an element for all history records if we use this output elsewhere -?> -
  • -

    - -

    -
    • -
  • -
    - - - - - - - - - - - - petition_history_records as $hr): ?> + + petition_history_records)): + // XXX Generalize this into an element for all history records if we use this output elsewhere + ?> +
  • +

    + +

    +
    • +
  • +
    +
    • + - - - - + + + + - - -
    - action //__d('enumeration','PetitionActionEnum.' . $hr['action']) - ?> - - actor_person_id) - ? $this->Html->link( - $hr->actor_person->primary_name->full_name, - [ - 'controller' => 'people', - 'action' => 'edit', - $hr->actor_person_id - ] - ) - : "" - ?> - comment ?>Time->nice($hr->created, $vv_tz) ?>
    -
    -
    • + + + + petition_history_records as $hr): ?> + + + action //__d('enumeration','PetitionActionEnum.' . $hr['action']) + ?> + + + actor_person_id) + ? $this->Html->link( + $hr->actor_person->primary_name->full_name, + [ + 'controller' => 'people', + 'action' => 'edit', + $hr->actor_person_id + ] + ) + : "" + ?> + + comment ?> + Time->nice($hr->created, $vv_tz) ?> + + + + + + + -