From dd85d5f74b1d29a8447a573ba95e39de72ad89f5 Mon Sep 17 00:00:00 2001
From: Steve Taylor <sctaylor@stanford.edu>
Date: Wed, 19 Jun 2024 16:41:29 -0700
Subject: [PATCH] Manage required attribute on date range inputs

---
 .../range_form_component.html.erb             | 12 +++++++
 .../controllers/range_limit_controller.js     | 25 +++++++++++++
 spec/features/range_limit_facet_spec.rb       | 35 +++++++++++++++++++
 3 files changed, 72 insertions(+)
 create mode 100644 app/components/blacklight_range_limit/range_form_component.html.erb
 create mode 100644 app/javascript/controllers/range_limit_controller.js
 create mode 100644 spec/features/range_limit_facet_spec.rb

diff --git a/app/components/blacklight_range_limit/range_form_component.html.erb b/app/components/blacklight_range_limit/range_form_component.html.erb
new file mode 100644
index 00000000..e034ab3e
--- /dev/null
+++ b/app/components/blacklight_range_limit/range_form_component.html.erb
@@ -0,0 +1,12 @@
+<%= form_tag search_action_path, method: :get, class: [@classes[:form], "range_#{@facet_field.key} d-flex justify-content-center"].join(' '), data: { controller: "range-limit" } do %>
+  <%= render hidden_search_state %>
+
+  <div class="input-group input-group-sm mb-3 flex-nowrap range-limit-input-group">
+    <%= render_range_input(:begin, begin_label) %>
+    <%= render_range_input(:end, end_label) %>
+    <div class="input-group-append visually-hidden">
+      <%= submit_tag t('blacklight.range_limit.submit_limit'), class: @classes[:submit], name: nil %>
+    </div>
+    <%= submit_tag t('blacklight.range_limit.submit_limit'), class: @classes[:submit] + " sr-only", name: nil, data: { range_limit_target: "submitButton" } %>
+  </div>
+<% end %>
diff --git a/app/javascript/controllers/range_limit_controller.js b/app/javascript/controllers/range_limit_controller.js
new file mode 100644
index 00000000..7945328b
--- /dev/null
+++ b/app/javascript/controllers/range_limit_controller.js
@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.beginInput = this.element.querySelector('input[name="range[date_range][begin]"]');
+    this.endInput = this.element.querySelector('input[name="range[date_range][end]"]');
+    this.beginInput.addEventListener('input', event => this.updateInputRequiredState(event));
+    this.endInput.addEventListener('input', event => this.updateInputRequiredState(event));
+  }
+
+  updateInputRequiredState(event) {
+    const bothEmpty = this.beginInput.value === '' && this.endInput.value === ''
+  
+    // Allow the user to submit an empty range to clear the search, otherwise require both bounds.
+    // If blacklight_range_limit is updated or our config changes, review if this and the override
+    // to range_form_component.html.erb are still necessary.
+    if (bothEmpty) {
+      this.beginInput.removeAttribute('required');
+      this.endInput.removeAttribute('required');
+    } else {
+      this.beginInput.setAttribute('required', '');
+      this.endInput.setAttribute('required', '');
+    }
+  }
+}
\ No newline at end of file
diff --git a/spec/features/range_limit_facet_spec.rb b/spec/features/range_limit_facet_spec.rb
new file mode 100644
index 00000000..dfcb1df9
--- /dev/null
+++ b/spec/features/range_limit_facet_spec.rb
@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe 'Range Limit Facet', :js do
+  it 'does not accept an incomplete range' do
+    visit search_catalog_path
+
+    click_on 'Show facets' if page.has_button?('Show facets')
+
+    expect(page).to have_button('Date range')
+    click_on 'Date range'
+
+    # Both empty
+    expect(page).to have_no_css('input#range_date_range_begin[required]')
+    expect(page).to have_no_css('input#range_date_range_end[required]')
+
+    # Only begin has a value
+    fill_in 'range_date_range_begin', with: '1986'
+    expect(page).to have_css('input#range_date_range_begin[required]')
+    expect(page).to have_css('input#range_date_range_end[required]')
+
+    # Only end has a value
+    fill_in 'range_date_range_begin', with: ''
+    fill_in 'range_date_range_end', with: '1991'
+    expect(page).to have_css('input#range_date_range_begin[required]')
+    expect(page).to have_css('input#range_date_range_end[required]')
+
+    # Both have values
+    fill_in 'range_date_range_begin', with: '1986'
+    fill_in 'range_date_range_end', with: '1991'
+    expect(page).to have_css('input#range_date_range_begin[required]')
+    expect(page).to have_css('input#range_date_range_end[required]')
+  end
+end