[283] Eval Form: Cancelation modal

app/javascript/confirmation_modal.js

@@ -0,0 +1,33 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const modalTriggers = document.querySelectorAll("[data-modal]");
+
+  modalTriggers.forEach((trigger) => {
+    trigger.addEventListener("click", (e) => {
+      console.log(e);
+      e.preventDefault();
+
+      modalId = trigger.dataset.modal;
+      modal = document.getElementById(modalId);
+
+      if (modal) {
+        const confirmButton = modal.querySelector("#modal-btn-confirm");
+        if (confirmButton) {
+          confirmButton.onclick = () => {
+            modal.close();
+            return true;
+          };
+        }
+
+        const cancelButton = modal.querySelector("#modal-btn-cancel");
+        if (cancelButton) {
+          cancelButton.onclick = () => {
+            modal.close();
+            return false;
+          };
+        }
+
+        modal.showModal();
+      }
+    });
+  });
+});

app/views/evaluation_forms/_form.html.erb

@@ -198,7 +198,16 @@
       Save
     </button>
     <div class="text-center width-full mobile-lg:width-auto margin-y-1 mobile-lg:margin-x-3">
-      <%= link_to "Cancel", evaluation_forms_path %>
-    </div>  
+      <%= link_to "Cancel", evaluation_forms_path, data: {"modal": "cancel-modal"} %>
+    </div>
   </div>
-<% end %>
+<% end %>
+
+<%= render "modals/confirmation", 
+  id: "cancel-modal",
+  heading: "Are you sure you want to cancel?",
+  description: "Your evaluation form will not be saved and any entered information will be lost.",
+  confirm_text: "Yes",
+  confirm_redirect: evaluation_forms_path,
+  cancel_text: "Close"
+%>

app/views/layouts/application.html.erb

@@ -18,6 +18,7 @@
       </script>
 
       <%= javascript_include_tag 'session_timeout' %>
+      <%= javascript_include_tag 'confirmation_modal' %>
     <% end %>
   </head>
 

app/views/modals/_confirmation.erb

@@ -0,0 +1,32 @@
+<dialog
+  id="<%= id %>"
+  class="border-width-0 radius-lg"
+  aria-labelledby=<%= "#{id}-heading" %>
+  aria-describedby=<%= "#{id}-description" %>
+>
+  <div class="usa-modal__content">
+    <div class="usa-modal__main">
+      <h2 class="usa-modal__heading" id=<%= "#{id}-heading" %>>
+        <%= heading %>
+      </h2>
+      <div class="usa-prose">
+        <p id=<%= "#{id}-description" %>>
+          <%= description %>
+        </p>
+      </div>
+      <div class="usa-modal__footer">
+        <% if defined?(confirm_redirect) %>
+          <%= link_to confirm_text, confirm_redirect, class: "usa-button" %>
+        <% else %>
+          <button id="modal-btn-confirm" class="usa-button" type="button"><%= confirm_text %></button>
+        <% end %>
+
+        <% if defined?(cancel_redirect) %>
+          <%= link_to cancel_text, cancel_redirect, class: "usa-button--unstyled" %>
+        <% else %>
+          <button id="modal-btn-cancel" class="usa-button--unstyled" type="button"><%= cancel_text %></button>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</dialog>

spec/system/evaluation_form_spec.rb

@@ -16,6 +16,45 @@
       expect(page).to(be_axe_clean)
     end
 
+    it "shows a confirmation modal when clicking the cancel button" do
+      visit new_evaluation_form_path
+
+      click_link_or_button "Cancel"
+
+      assert_selector 'dialog#cancel-modal', visible: true
+
+      expect(page).to(be_axe_clean)
+    end
+
+    it "redirects to evaluation form path when clicking yes in cancel modal" do
+      visit new_evaluation_form_path
+
+      click_link_or_button "Cancel"
+
+      assert_selector 'dialog#cancel-modal', visible: true
+
+      within 'dialog#cancel-modal' do
+        click_link_or_button 'Yes'
+      end
+
+      assert_current_path evaluation_forms_path
+    end
+
+    it "closes the cancel modal and does nothing if you click close" do
+      visit new_evaluation_form_path
+
+      click_link_or_button "Cancel"
+
+      assert_selector 'dialog#cancel-modal', visible: true
+
+      within 'dialog#cancel-modal' do
+        click_link_or_button 'Close'
+      end
+
+      assert_no_selector 'dialog#cancel-modal', visible: true
+      assert_current_path new_evaluation_form_path
+    end
+
     it 'allows creation of a valid form with all 3 criteria scoring types' do
       visit new_evaluation_form_path
 
@@ -261,6 +300,45 @@
       expect(page).to(be_axe_clean)
     end
 
+    it "shows a confirmation modal when clicking the cancel button" do
+      visit edit_evaluation_form_path(evaluation_form)
+
+      click_link_or_button "Cancel"
+
+      assert_selector 'dialog#cancel-modal', visible: true
+
+      expect(page).to(be_axe_clean)
+    end
+
+    it "redirects to evaluation form path when clicking yes in cancel modal" do
+      visit edit_evaluation_form_path(evaluation_form)
+
+      click_link_or_button "Cancel"
+
+      assert_selector 'dialog#cancel-modal', visible: true
+
+      within 'dialog#cancel-modal' do
+        click_link_or_button 'Yes'
+      end
+
+      assert_current_path evaluation_forms_path
+    end
+
+    it "closes the cancel modal and does nothing if you click close" do
+      visit edit_evaluation_form_path(evaluation_form)
+
+      click_link_or_button "Cancel"
+
+      assert_selector 'dialog#cancel-modal', visible: true
+
+      within 'dialog#cancel-modal' do
+        click_link_or_button 'Close'
+      end
+
+      assert_no_selector 'dialog#cancel-modal', visible: true
+      assert_current_path edit_evaluation_form_path(evaluation_form)
+    end
+
     it 'allows editing of an existing form values' do
       visit edit_evaluation_form_path(evaluation_form)