From 5c52be2eabb957ec7a2b8ee2bdc00c5100d5e4dc Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Mon, 14 Oct 2024 15:03:23 -0400
Subject: [PATCH] Conditionally include a 'Cancel' button next to 'Save'
 (CFM-31) (#236)

---
 .../templates/EnrollmentAttributes/fields.inc        |  6 ++++++
 app/templates/element/form/submit.php                |  5 +++++
 app/webroot/css/co-base.css                          | 12 +++++++++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/plugins/CoreEnroller/templates/EnrollmentAttributes/fields.inc b/app/plugins/CoreEnroller/templates/EnrollmentAttributes/fields.inc
index 511bada1d..ae8aac2c9 100644
--- a/app/plugins/CoreEnroller/templates/EnrollmentAttributes/fields.inc
+++ b/app/plugins/CoreEnroller/templates/EnrollmentAttributes/fields.inc
@@ -48,6 +48,12 @@ if (empty($attribute_type)) {
 $hidden = [
   'attribute' => $attribute_type
 ];
+  
+/*
+ *  Include a "cancel" button next to the "save" button
+ */
+
+$this->set('vv_include_cancel',true);
 
 /*
  * Common Fields for all attributes
diff --git a/app/templates/element/form/submit.php b/app/templates/element/form/submit.php
index 2063db9f4..70b6ab0a0 100644
--- a/app/templates/element/form/submit.php
+++ b/app/templates/element/form/submit.php
@@ -37,6 +37,11 @@
       </div>
       <div class="field-info">
         <?= $this->Form->submit($label) ?>
+        <?php if(!empty($vv_include_cancel)): ?>
+          <button type="button" onclick="history.back()" class="btn btn-cancel">
+            <?= __d('operation','cancel') ?>
+          </button>
+        <?php endif; ?>
       </div>
     </div>
   </li>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 5a91eba1b..b214a9870 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -1454,6 +1454,10 @@ ul.form-list .not-set {
 ul.form-list li.fields-submit .required {
   font-style: italic;
 }
+ul.form-list li.fields-submit .field-info {
+  display: flex;
+  gap: 1em;
+}
 ul.field-children {
   margin: 0.5em;
   padding: 0;
@@ -2156,10 +2160,12 @@ button, .btn, .btn:hover {
 .btn-secondary,
 .btn-tertiary,
 .btn-default,
+.btn-cancel,
 .btn-primary:active,
 .btn-secondary:active,
 .btn-tertiary:active,
-.btn-default:active {
+.btn-default:active,
+.btn-cancel:active {
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 }
 .btn-primary:hover,
@@ -2171,6 +2177,10 @@ button, .btn, .btn:hover {
   border-color: var(--cmg-color-btn-bg-002);
   text-decoration: none !important;
 }
+.btn-cancel:hover {
+  background-color: var(--cmg-color-bg-009);
+  text-decoration: none !important;
+}
 .btn-primary.disabled,
 .btn-primary:disabled {
   color: var(--cmg-color-txt-inverse);