From 4fe53accd263da726335f290d53c0e5a4d8d88ce Mon Sep 17 00:00:00 2001 From: Martin Hinz Date: Wed, 5 Feb 2025 11:46:34 +0100 Subject: [PATCH] enabled checkboxes for data type to govern which accordion is visible, resolves #388 --- .../filter_visibility_controller.js | 37 +++++++++++++ app/javascript/controllers/index.js | 3 ++ app/views/xronos_data/_filter_fields.html.erb | 53 +++++++++++++------ 3 files changed, 76 insertions(+), 17 deletions(-) create mode 100644 app/javascript/controllers/filter_visibility_controller.js diff --git a/app/javascript/controllers/filter_visibility_controller.js b/app/javascript/controllers/filter_visibility_controller.js new file mode 100644 index 00000000..e91a7dcc --- /dev/null +++ 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); + } + }); + } +} \ No newline at end of file diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 328fd0e8..87dd03a0 100644 --- 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 index 6a110dd7..7bd8fb1d 100644 --- a/app/views/xronos_data/_filter_fields.html.erb +++ b/app/views/xronos_data/_filter_fields.html.erb @@ -5,9 +5,31 @@ -
+
Data Filters
+ +
+ <% selected_types = Array(params.dig(:filter, :type)) %> + +
+
+ <%= 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' %> +
+
+ <%= 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' %> +
+
+
+
- -
- <% selected_types = params.dig(:filter, :type) || ['dendro', 'c14'] %> -
-
- <%= 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' %>
-
- <%= 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' %> -
-
-
- <%= 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 %> +
-<% 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 %> +
+ +
+ <%= accordion_item "dataFilters-Dendro", "Dendro", selected_types.include?('dendro') do %> + <%# TODO: Fill with dendro-related filters %> +
Dendrochronology Specific Filters
+ <% end %> +
<%# The following don't have a straightforward association to C14s and are disabled pending a better solution to: