Make facility filters collapsible

app/assets/stylesheets/loading_spaces_when_empty.css

@@ -1,4 +1,7 @@
-#search_results[aria-busy="true"] .loading-spaces-when-empty,
+#search_results[aria-busy="true"] .loading-spaces-when-empty {
+    @apply animate-pulse;
+}
+
 .loading-spaces-when-empty:empty {
     @apply flex flex-col gap-4;
     @apply animate-pulse;

app/javascript/controllers/index.js

@@ -31,6 +31,9 @@ application.register("modal", ModalController)
 import MultistepFormController from "./multistep_form_controller"
 application.register("multistep-form", MultistepFormController)
 
+import NestedCheckboxFilterController from "./nested_checkbox_filter_controller"
+application.register("nested-checkbox-filter", NestedCheckboxFilterController)
+
 import ResetFormController from "./reset_form_controller"
 application.register("reset-form", ResetFormController)
 

app/javascript/controllers/nested_checkbox_filter_controller.js

@@ -0,0 +1,71 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nested-checkbox-filter"
+export default class extends Controller {
+  static targets = ["parent", "child", "childrenContainer"]
+
+  initialize() {
+    this.toggle = this.toggle.bind(this)
+    this.refresh = this.refresh.bind(this)
+  }
+
+  parentTargetConnected(parentCheckbox) {
+    parentCheckbox.addEventListener("change", this.toggle)
+
+    this.refresh()
+  }
+
+  parentTargetConnectedDisconnected(parentCheckbox) {
+    parentCheckbox.removeEventListener("change", this.toggle)
+
+    this.refresh()
+  }
+
+  childTargetConnected(childCheckbox) {
+    childCheckbox.addEventListener("change", this.refresh)
+
+    this.refresh()
+  }
+
+  childTargetDisconnected(childCheckbox) {
+    childCheckbox.removeEventListener("change", this.refresh)
+
+    this.refresh()
+  }
+
+  toggle(e) {
+    e.preventDefault()
+
+    this.childrenContainerTarget.classList.toggle("hidden", !e.target.checked)
+
+    this.childTargets.forEach((checkbox) => {
+      checkbox.checked = e.target.checked
+      this.triggerInputEvent(checkbox)
+    })
+
+    this.parentTarget.form.requestSubmit()
+  }
+
+  refresh() {
+    const checkboxesCount = this.childTargets.length
+    const checkboxesCheckedCount = this.checked.length
+
+    this.parentTarget.checked = checkboxesCheckedCount > 0
+    this.parentTarget.indeterminate = checkboxesCheckedCount > 0 && checkboxesCheckedCount < checkboxesCount
+    this.childrenContainerTarget.classList.toggle("hidden", !this.parentTarget.checked)
+  }
+
+  triggerInputEvent(checkbox) {
+    const event = new Event("input", { bubbles: false, cancelable: true })
+
+    checkbox.dispatchEvent(event)
+  }
+
+  get checked() {
+    return this.childTargets.filter((checkbox) => checkbox.checked)
+  }
+
+  get unchecked() {
+    return this.childTargets.filter((checkbox) => !checkbox.checked)
+  }
+}

app/views/spaces/index/_search_form_fields.html.erb

@@ -30,22 +30,33 @@
   <h3 class="text-xl font-bold mt-4">
     <%= Facility.model_name.human(count: 2).capitalize %>
   </h3>
-  <div class="divide-y border-b border-t my-4">
+  <div class="">
     <% @filterable_facility_categories.each do |category| %>
-      <details open>
-        <summary class="py-4 text-l font-bold cursor-pointer">
+      <div data-controller="nested-checkbox-filter" class="">
+        <label class="flex gap-1 my-1 items-top" for="facility-category-<%= category.id %>">
+          <input
+            id="facility-category-<%= category.id %>"
+            type="checkbox"
+            class="h-5 w-5
+                  relative top-0.5
+                  text-lnu-pink indeterminate:bg-gray-500
+                  focus:ring-lnu-pink border-gray-300 rounded"
+            data-nested-checkbox-filter-target="parent" />
           <%= category.title %>
-        </summary>
+        </label>
 
-        <div class="mb-4">
+        <div class="ml-4 pb-2" data-nested-checkbox-filter-target="childrenContainer">
           <% category.facilities.each do |facility| %>
-            <%= form.label "facilities_#{facility.id}", class: "flex gap-2 my-1" do %>
+            <%= form.label "facilities_#{facility.id}", class: "flex gap-1 my-1 items-top" do %>
               <%= form.check_box "facilities",
                                 {
                                   id: "facilities_#{facility.id}",
                                   multiple: true,
-                                  class: "h-5 w-5 text-lnu-pink focus:ring-lnu-pink border-gray-300 rounded",
-                                  data: { mapbox_target: "facility" },
+                                  class: "h-5 w-5 relative top-0.5 text-lnu-pink focus:ring-lnu-pink border-gray-300 rounded",
+                                  data: {
+                                    'nested-checkbox-filter-target': 'child',
+                                    mapbox_target: "facility"
+                                  },
                                   onchange: "!this.id.startsWith('duplicate-') && this.form.requestSubmit()",
                                   checked: params[:facilities]&.include?(facility.id.to_s)
                                 },
@@ -57,8 +68,8 @@
             <% end %>
           <% end %>
         </div>
-      </details>
-    <% end %>
+      </div>
+  <% end %>
   </div>
 </div>