diff --git a/app/assets/stylesheets/pages/casa_cases.scss b/app/assets/stylesheets/pages/casa_cases.scss index 34ad221b4f..2fbf9464e7 100644 --- a/app/assets/stylesheets/pages/casa_cases.scss +++ b/app/assets/stylesheets/pages/casa_cases.scss @@ -169,4 +169,25 @@ body.casa_cases-show { flex-direction: column; gap: .2rem; } -} \ No newline at end of file +} + +#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; +} + diff --git a/app/javascript/src/casa_case.js b/app/javascript/src/casa_case.js index d0c39a679b..a11a65ef94 100644 --- a/app/javascript/src/casa_case.js +++ b/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,6 +141,24 @@ 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) @@ -134,6 +166,8 @@ $(() => { // JQuery's callback for the DOM loading 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]) @@ -141,6 +175,9 @@ $(() => { // JQuery's callback for the DOM loading 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) diff --git a/app/views/case_court_reports/_generate_docx.html.erb b/app/views/case_court_reports/_generate_docx.html.erb index 87d3ffc1f7..66a1214e7c 100644 --- a/app/views/case_court_reports/_generate_docx.html.erb +++ b/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}" } %> - +
Case selection is required.
+