fix: case court report modal ui changes

app/assets/stylesheets/pages/casa_cases.scss

@@ -169,4 +169,27 @@ body.casa_cases-show {
     flex-direction: column;
     gap: .2rem;
   }
-}
+}
+
+// are these styles scoped specifically to "/case_court_reports"
+// or are there other pages that use them?
+#case-selection:required, .select2.select2-container {
+  background: transparent;
+  border: 1px solid #e5e5e5;
+  border-radius: 10px;
+  padding: 8px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.select-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+span[role=combobox] {
+  padding-top: 2px;
+}
+

app/javascript/src/casa_case.js

@@ -85,11 +85,25 @@ function showAlert (html) {
   flashContainer && flashContainer.replaceWith(alertEl)
 }
 
+function validateForm (formEl, errorEl) {
+  if (!formEl) {
+    return
+  }
+
+  // check html validations, checkValidity returns false if doesn't pass validation
+  if (errorEl && !formEl.checkValidity()) {
+    errorEl.classList.remove('d-none')
+  }
+}
+
 function handleGenerateReport (e) {
   e.preventDefault()
 
-  const formData = Object.fromEntries(new FormData(e.currentTarget.form))
+  const form = e.currentTarget.form
 
+  const formData = Object.fromEntries(new FormData(form))
+  const errorEl = document.querySelector('.select-required-error')
+  validateForm(form, errorEl ?? null)
   if (formData.case_number.length === 0) return
 
   const generateBtn = e.currentTarget
@@ -127,20 +141,43 @@ function handleGenerateReport (e) {
     })
 }
 
+function clearSelectErrors () {
+  const errorEl = document.querySelector('.select-required-error')
+
+  if (!errorEl) return
+
+  errorEl.classList.add('d-none')
+}
+
+function handleModalClose () {
+  const selectEl = document.querySelector('#case-selection')
+
+  if (!selectEl) return
+
+  clearSelectErrors()
+  // this line taken from docs https://select2.org/programmatic-control/add-select-clear-items
+  $('#case-selection').val(null).trigger('change')
+}
+
 $(() => { // JQuery's callback for the DOM loading
   $('button.copy-court-button').on('click', copyOrdersFromCaseWithConfirmation)
 
   if ($('button.copy-court-button').length) {
     disableBtn($('button.copy-court-button')[0])
   }
 
+  $('#case-selection').on('change', clearSelectErrors)
+
   $('select.siblings-casa-cases').on('change', () => {
     if ($('select.siblings-casa-cases').find(':selected').text()) {
       enableBtn($('button.copy-court-button')[0])
     } else {
       disableBtn($('button.copy-court-button')[0])
     }
   })
+  // modal id is defined in _generate_docx.html.erb so would like to be able to implement modal close logic in that file
+  // but not sure how to
+  $('#generate-docx-report-modal').on('hidden.bs.modal', () => handleModalClose())
 
   $('#btnGenerateReport').on('click', handleGenerateReport)
 

app/views/case_court_reports/_generate_docx.html.erb

@@ -27,14 +27,17 @@
 
         <% select_case_prompt = show_search ? "Search by volunteer name or case number" : "Select case number" %>
         <% select2_class = show_search ? " select2" : "" %>
-        <%= select_tag :case_number,
-          options_for_select(select_options),
-          prompt: select_case_prompt,
-          include_blank: false,
-          id: "case-selection",
-          class: "custom-select#{select2_class}",
-          data: { dropdown_parent: "##{id}" } %>
-
+        <div class="select-wrapper">
+          <%= select_tag :case_number,
+            options_for_select(select_options),
+            prompt: select_case_prompt,
+            include_blank: false,
+            id: "case-selection",
+            class: "custom-select#{select2_class}",
+            required: true,
+            data: { dropdown_parent: "##{id}", width: "100%" } %>
+          <p class="select-required-error text-danger d-none">Case selection is required.</p>
+        </div>
       <%= form.hidden_field :time_zone, id: "user-time-zone" %>
       </div>
       <div class="dates-container">