enabled checkboxes for data type to govern which accordion is visible, …

…resolves #388
xronos-ch · Feb 5, 2025 · 4fe53ac · 4fe53ac
1 parent a9b2ea6
commit 4fe53ac
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 17 deletions.
diff --git a/app/javascript/controllers/filter_visibility_controller.js b/app/javascript/controllers/filter_visibility_controller.js
@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Stimulus controller to toggle the visibility of accordions based on checkbox selection
+// and submit the form automatically when a checkbox is changed.
+export default class extends Controller {
+  // Define targets for checkboxes and accordions
+  static targets = ["checkbox", "accordion"];
+
+  // Called when the controller connects to the DOM
+  connect() {
+    // Attach event listeners to each checkbox
+    this.checkboxTargets.forEach(checkbox => {
+      checkbox.addEventListener("change", () => {
+        this.toggleAccordions(); // Update the visibility of accordions
+
+        // Submit the closest form when a checkbox is changed
+        event.target.closest("form").submit();
+      });
+    });
+
+    // Initialize the visibility of accordions on page load
+    this.toggleAccordions();
+  }
+
+  // Function to toggle visibility of accordions based on checkbox states
+  toggleAccordions() {
+    this.accordionTargets.forEach(accordionWrapper => {
+      // Find the checkbox that controls this accordion
+      const checkbox = this.checkboxTargets.find(cb => cb.id === accordionWrapper.dataset.filterTarget);
+
+      if (checkbox) {
+        // Toggle the "d-none" class based on the checkbox state (hide if unchecked)
+        accordionWrapper.classList.toggle("d-none", !checkbox.checked);
+      }
+    });
+  }
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -7,6 +7,9 @@ import { application } from "./application"
 import ArticleEditorController from "./article_editor_controller"
 application.register("article-editor", ArticleEditorController)
 
+import FilterVisibilityController from "./filter_visibility_controller"
+application.register("filter-visibility", FilterVisibilityController)
+
 import FlashController from "./flash_controller"
 application.register("flash", FlashController)
 

diff --git a/app/views/xronos_data/_filter_fields.html.erb b/app/views/xronos_data/_filter_fields.html.erb
@@ -5,9 +5,31 @@
   </div>
 </noscript>
 
-<div class="p-3 border rounded bg-white">
+<div class="p-3 border rounded bg-white" data-controller="filter-visibility">
   <h5>Data Filters</h5>
 
+<!-- Data Types Filter -->
+<div class="mb-3">
+  <% selected_types = Array(params.dig(:filter, :type)) %>
+
+  <div class="d-flex gap-3">
+    <div class="form-check">
+      <%= check_box_tag 'filter[type][]', 'c14', selected_types.include?('c14'), 
+            class: 'form-check-input', 
+            id: 'type_c14',
+            data: { "filter-visibility-target": "checkbox" } %>
+      <%= label_tag 'type_c14', 'Radiocarbon Data', class: 'form-check-label' %>
+    </div>
+    <div class="form-check">
+      <%= check_box_tag 'filter[type][]', 'dendro', selected_types.include?('dendro'), 
+            class: 'form-check-input', 
+            id: 'type_dendro',
+            data: { "filter-visibility-target": "checkbox" } %>
+      <%= label_tag 'type_dendro', 'Dendro Data', class: 'form-check-label' %>
+    </div>
+  </div>
+</div>
+
   <!-- Cal BP Filter-->
   <div class="mb-3"
        data-controller="slider" 
@@ -47,20 +69,6 @@
   </noscript>
   </div>
 
-  <!-- Data Types Filter -->
-  <div class="mb-3">
-    <% selected_types = params.dig(:filter, :type) || ['dendro', 'c14'] %>
-    <div class="d-flex gap-3">
-      <div class="form-check">
-        <%= check_box_tag 'filter[type][]', 'c14', selected_types.include?('c14'), class: 'form-check-input', id: 'type_c14' %>
-		<%= label_tag 'type_c14', 'Radiocarbon Data'.html_safe, class: 'form-check-label' %>      </div>
-      <div class="form-check">
-        <%= check_box_tag 'filter[type][]', 'dendro', selected_types.include?('dendro'), class: 'form-check-input', id: 'type_dendro' %>
-        <%= label_tag 'type_dendro', 'Dendro Data', class: 'form-check-label' %>
-      </div>
-    </div>
-  </div>
-
 <%= accordion_item "dataFilters-Site", "Sites", (@data.filters.dig("sites", "name") || @data.filters.dig("site_types", "name")) ? false : true do %>
 
   <%= f.fields_for :sites do |f| %>
@@ -144,10 +152,12 @@
   <% end %>
 
 <% end %>
+  <div data-filter-visibility-target="accordion" data-filter-target="type_c14">
 
-<% c14s_bp = @data.filters.dig("c14s", "bp")[0] %>
+<% c14s_bp = (@data.filters.dig("c14s", "bp") || [0..50000])[0] %>
 <%= accordion_item "dataFilters-C14", "Radiocarbon",
-  (@data.filters.dig("c14_labs") || (c14s_bp.is_a?(Range) && (c14s_bp.begin != 0 || c14s_bp.end != 50000))) ? false : true do %>  <%= f.fields_for :c14_labs do |f| %>
+  (@data.filters.dig("c14_labs") || (c14s_bp.is_a?(Range) && (c14s_bp.begin != 0 || c14s_bp.end != 50000))) ? false : true do %>
+  <%= f.fields_for :c14_labs do |f| %>
     <%= f.collection_select :name, C14Lab.all, :name, :name,
       {
         label: "Labs",
@@ -218,6 +228,15 @@
   <% end %>
 
 <% end %>
+</div>
+
+<div data-filter-visibility-target="accordion" data-filter-target="type_dendro"
+     class="<%= selected_types.include?('dendro') ? '' : 'd-none' %>">
+  <%= accordion_item "dataFilters-Dendro", "Dendro", selected_types.include?('dendro') do %>
+  	<%# TODO: Fill with dendro-related filters %>
+    <div id="dendro-filters">Dendrochronology Specific Filters</div>
+  <% end %>
+</div>
 
 <%# The following don't have a straightforward association to C14s and are
     disabled pending a better solution to: